.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://cfile21.uf.tistory.com/image/2469B33354D74FB23BC466" /><br>
    아래 버튼을 눌러보세요.<br>
    <button type="button" onclick="j_test('http://cfile10.uf.tistory.com/image/2227B74F54D73516319C98')">사진 1</button>
    <button type="button" onclick="j_test('http://cfile29.uf.tistory.com/image/2408093354D74FB1060040')">사진 2</button>
    <button type="button" onclick="j_test('http://cfile6.uf.tistory.com/image/2129E34854D73514041487')">사진 3</button>
    <button type="button" onclick="j_test('http://cfile23.uf.tistory.com/image/225BA93954EA01760701E8')">사진 4</button>
    <button type="button" onclick="j_test('http://cfile10.uf.tistory.com/image/224D643854D74C4F158B11')">사진 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/