jQuery 공작소 : .change()

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

change 메서드는 해당 요소에 change 이벤트를 발생시키거나 지정합니다.

예제 1
셀렉트박스에 onchange 이벤트 동적생성 하기
보기
여러분이 좋아하는 동물을 골라 보세요 !



소스
<style type="text/css">
    .css_test textarea {
        width : 100%;
        height : 100px;
    }
</style>

<div class="css_test">
    <b>여러분이 좋아하는 동물을 골라 보세요 !</b><br><br>
    <select>
        <option value="">- 선택 -</option>
        <option value="굿펠로우 나무타기 캥거루">굿펠로우 나무타기 캥거루</option>
        <option value="뉴칼레도니아 가고일 도마뱀붙이">뉴칼레도니아 가고일 도마뱀붙이</option>
        <option value="베네주엘라 붉은배 청타란튤라">베네주엘라 붉은배 청타란튤라</option>
        <option value="북아메리카 검은머리 흰죽지">북아메리카 검은머리 흰죽지</option>
        <option value="살찐꼬리 난장이 여우원숭이">살찐꼬리 난장이 여우원숭이</option>
        <option value="윌리암슨 수액빨이 딱다구리">윌리암슨 수액빨이 딱다구리</option>
        <option value="쿠비어 난장이 카이만">쿠비어 난장이 카이만</option>
        <option value="운영자 (뀨~)">여기 운영자</option>
    </select>
    <br>
    <br>
    <textarea></textarea>
</div>

<script type="text/javascript">
     // 셀렉트박스에 onchange 이벤트 생성
    $( '.css_test select' ).change( function(){
        j_test( this ); // 셀렉트 박스 선택이 바뀔때 "셀렉트박스 요소" 를 함수로 전달
    });

    function j_test(o){
        var val = $( ':selected', o).val(); // 전달받은 "셀렉트박스 요소" 에서 선택된 것 찾기
        $( '.css_test textarea' ).val(val);
    }
</script>
관련 CSS
예제 2
onchange 이벤트를 발생시키는 예제
보기


여러분이 좋아하는 동물을 골라 보세요 !
버튼을 누르면 셀렉트박스를 선택하지 않아도 텍스트가 나타납니다.



소스
<style type="text/css">
    .css_test textarea {
        width : 100%;
        height : 100px;
    }
</style>

<button type="button" onclick="$('.css_test select').change()">onchange 이벤트 발생시키기 (눌러보세용)</button><br><br>

<div class="css_test">
    <b>여러분이 좋아하는 동물을 골라 보세요 !</b><br>
    버튼을 누르면 셀렉트박스를 선택하지 않아도 텍스트가 나타납니다.<br><br>
    <select>
        <option value="">- 선택 -</option>
        <option value="굿펠로우 나무타기 캥거루">굿펠로우 나무타기 캥거루</option>
        <option value="뉴칼레도니아 가고일 도마뱀붙이">뉴칼레도니아 가고일 도마뱀붙이</option>
        <option value="베네주엘라 붉은배 청타란튤라">베네주엘라 붉은배 청타란튤라</option>
        <option value="북아메리카 검은머리 흰죽지">북아메리카 검은머리 흰죽지</option>
        <option value="살찐꼬리 난장이 여우원숭이">살찐꼬리 난장이 여우원숭이</option>
        <option value="윌리암슨 수액빨이 딱다구리">윌리암슨 수액빨이 딱다구리</option>
        <option value="쿠비어 난장이 카이만">쿠비어 난장이 카이만</option>
        <option value="운영자 (뀨~)" selected>여기 운영자</option>
    </select>
    <br>
    <br>
    <textarea></textarea>
</div>

<script type="text/javascript">
     // 셀렉트박스에 onchange 이벤트 생성
    $('.css_test select').change( function(){
        j_test(this); // 셀렉트 박스 선택이 바뀔때 "셀렉트박스 요소" 를 함수로 전달
    });

    function j_test(o){
        var val = $(':selected', o).val(); // 전달받은 "셀렉트박스 요소" 에서 선택된 것 찾기
        $('.css_test textarea').val(val);
    }
</script>
관련 CSS
jQuery

- 셀렉트박스의 선택을 바꾸어야 발생하는 이벤트인데 버튼을 클릭해서 이벤트를 발생시켜 보았습니다.

$( 셀렉터 ).change()  -  해당 셀렉터의 요소에 onchange 이벤트를 발생시킵니다.

예제 3
텍스트박스에 onchange 이벤트
보기
텍스트 박스의 내용을 바꾼후 화면의 다른곳을 클릭해 보세요
내용이 바뀌었다면 얼굴이 놀랄것입니다.
바뀌지 않았다면 그대로 !


소스
<style type="text/css">
    .css_test input {
        border-radius : 5px;
        border : 3px solid gray;
        margin-top : 10px;
        padding : 7px;
        width : 300px;
    }
    .css_test img {
        margin-top : 10px;
        width : 150px;
    }
</style>

텍스트 박스의 내용을 바꾼후 화면의 다른곳을 클릭해 보세요<br>
내용이 바뀌었다면 얼굴이 놀랄것입니다.<br>
바뀌지 않았다면 그대로 !<br><br>

<div class="css_test">
    <input type="text" value="jQuery 공작소"><br>
    <img src="//superkts.com/img/huk1.gif" />
</div>

<script type="text/javascript">
    $('.css_test input').change( j_test ); // 텍스트박스에 이벤트 생성

    function j_test(){
        $('.css_test img').attr( 'src', '//superkts.com/img/huk2.gif' );
        setTimeout(function(){
            $('.css_test img').attr( 'src', '//superkts.com/img/huk1.gif' ); // 2초후 원래대로
        }, 2000);
    }
</script>
관련 CSS
jQuery

- 텍스트박스에도 onchange 이벤트는 적용됩니다.
- 내용이 바뀌었고 해당 텍스트박스가 비활성 상태로 바뀔때 이벤트가 발생합니다.

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