jQuery 공작소 : .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="//superkts.com/img/css/com01.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/css/com03.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/css/com05.gif" onclick="j_test(this)" />
    <img src="//superkts.com/img/css/com06.gif" onclick="j_test(this)" />
    <img src="//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="https://t1.daumcdn.net/cfile/tistory/22366638555ABF491B" /><br>
    아래 버튼을 눌러보세요.<br>
    <button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/277F823454D7331836')">사진 1</button>
    <button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/27210A38555ABF4229')">사진 2</button>
    <button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/263EE44D55AC84AC26')">사진 3</button>
    <button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/2303003354D74FB411')">사진 4</button>
    <button type="button" onclick="j_test('https://t1.daumcdn.net/cfile/tistory/2406AE3354D74FB50A')">사진 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/