레퍼(wrapper)란?
jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자')
붉은색으로 표시한 부분이 레퍼, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환
레퍼의 안전한 사용
$(엘리먼트) 와 jQuery(엘리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리들과의 충돌 때문에 다음과 같은 방법을 사용한다.
1 2 3 4 | <script type="text/javascript">//$ 대신 jQuery를 사용jQuery('body').html('hello world');</script> |
1 2 3 4 5 6 | <script type="text/javascript">//$를 함수의 지역변수로 선언해서 외부에 있을지 모르는 타 라이브러리의 $와의 충돌을 예방(function($){ $('body').html('hello world');})(jQuery)</script> |
제어 대상을 지정하는 방법
- jQuery( selector, [context] )
- jQuery( element )
예제 1. jQuery( selector, [context] )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html> <body> <ul> <li>test2</li> </ul> <ul class="foo"> <li>test</li> </ul> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> (function($){ $('ul.foo').click( function() { $('li', this).css('background-color','red'); }); })(jQuery) </script> </body></html> |
예제 2. jQuery( element )
1 2 3 4 5 6 7 8 | <html> <body> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> jQuery(document.body).css( "background-color", "black" ); </script> </body></html> |
