.attr()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

attr 메서드는 요소의 속성값을 읽거나 씁니다.
이미지를 가지고 예제를 만들어 보았습니다.

+_+
예제 1
기본 예제 (이미지 주소 읽어오기)
보기
아래 그림을 눌러보세요.

소스
<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        cursor : pointer;
        margin : 0 5px;
        width : 40px;
    }
</style>

<div class="css_test">
    아래 그림을 눌러보세요.<br><br>
    <img src="http://superkts.com/img/css/com01.gif" onclick="j_test(this)" />
    <img src="http://superkts.com/img/css/com03.gif" onclick="j_test(this)" />
    <img src="http://superkts.com/img/css/com05.gif" onclick="j_test(this)" />
    <img src="http://superkts.com/img/css/com06.gif" onclick="j_test(this)" />
    <img src="http://superkts.com/img/css/com07.gif" onclick="j_test(this)" />
</div>

<script type="text/javascript">
    function j_test(o){
        alert( $(o).attr( 'src' ) ); // 클릭한 이미지의 주소를 경고창으로 !
    }
</script>
관련 CSS
jQuery

- 클릭한 이미지 객체를 함수에 전달하여 경로를 경고창으로 띄우는 예제입니다.

attr( '속성명' )
$( 이미지 ).attr( 'src' )  -  이미지의 경로를 가져옵니다.

예제 2
이미지 주소 바꿔보기
보기

아래 버튼을 눌러보세요.
소스
<style type="text/css">
    .css_test {
        text-align : center;
    }
</style>

<div class="css_test">
    <img src="http://cfile23.uf.tistory.com/image/23285B4D55AC84AD335475" /><br>
    아래 버튼을 눌러보세요.<br>
    <button type="button" onclick="j_test('http://cfile1.uf.tistory.com/image/2748B83D552F50A109BCF6')">사진 1</button>
    <button type="button" onclick="j_test('http://cfile9.uf.tistory.com/image/2523EC4F54D735163729D9')">사진 2</button>
    <button type="button" onclick="j_test('http://cfile4.uf.tistory.com/image/2516AD3454D7331811F0D8')">사진 3</button>
    <button type="button" onclick="j_test('http://cfile4.uf.tistory.com/image/26138D4854D73515223B87')">사진 4</button>
    <button type="button" onclick="j_test('http://cfile30.uf.tistory.com/image/2211F438550B923C358C0B')">사진 5</button>
</div>

<script type="text/javascript">
    function j_test(src){
        $('.css_test img').attr('src', src); // 클릭한 버튼의 이미지 보여주기
    }
</script>
관련 CSS
jQuery

- 클릭한 이미지 객체를 함수에 전달하여 경로를 경고창으로 띄우는 예제입니다.

attr( '속성명' )
$( 이미지 ).attr( 'src' )  -  이미지의 경로를 가져옵니다.

jQuery 홈페이지 .attr() API 문서 : https://api.jquery.com/attr/