3. chain, event

chain(연쇄)

제이쿼리를 쓰면 'element(tag)에 대한 수정'이 간단해진다.

$(주어).메소드1().메소드2()

와 같은 형식으로 표현할 수 있다.

예제1) 새 창 띄우기

 
<a id="tutorial" href="http://jquery.com" target="_self">jQuery</a>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            //주어:id가 tutorial인 것, 메소드: 속성 href, target 변경, 글꼴 색을 red로 변경
            jQuery('#tutorial').attr('href', 'http://jquery.org').attr('target', '_blank').css('color', 'red');
        </script>
 

예제2) 두 개 이상의 element 변경( 'end()로 chain 끊기' )

 
//.first인 ul 중 .foo를 찾아 배경색을 빨강 + .bar를 찾아 녹색으로 바꾼다.  
<script type="text/javascript">$('ul.first').find('.foo').css('background-color', 'red').end()
.find('.bar').css('background-color', 'green');</script>
 

event 처리

$(버튼1).on('click', 동작) : 클릭하면 메소드 실행토록

$(버튼1).off('click', 동작) : bind를 끊는다.

$(버튼2).trigger('click') : 버튼2 클릭시의 동작을 실행한다.

 
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
            <script type="text/javascript">
                        //실행할 동작
                        function clickHandler(e) {
                              alert('thank you');
                        }
                        //'ready': 버튼이 동작하도록 '준비'해준다.
                        $(document).on('ready', function() {
                              $('#click_me').on('click', clickHandler);
                                 $('#remove_event').on('click', function(e) {
                                    $('#click_me').off('click', clickHandler);
                              });
                              $('#trigger_event').on('click', function(e) {
                                 $('#click_me').trigger('click');
                              });
                        })
            </script>