.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://cfile30.uf.tistory.com/image/264EA84C550B9B3B05A8BB" /><br>
    아래 버튼을 눌러보세요.<br>
    <button type="button" onclick="j_test('http://cfile3.uf.tistory.com/image/2338433D552F50A40F94E7')">사진 1</button>
    <button type="button" onclick="j_test('http://cfile25.uf.tistory.com/image/2565C53D552F50A73FAC29')">사진 2</button>
    <button type="button" onclick="j_test('http://cfile25.uf.tistory.com/image/260B823454D73318239E80')">사진 3</button>
    <button type="button" onclick="j_test('http://cfile3.uf.tistory.com/image/251EF04B550B9B3A3975AD')">사진 4</button>
    <button type="button" onclick="j_test('http://cfile10.uf.tistory.com/image/21385A4C550B9B3D10A127')">사진 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/