#TIL26

레퍼(wrapper)

• jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자')
• 붉은색으로 표시한 부분이 레퍼, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환

wrapper의 안전한 사용

• $(엘리먼트) 와 jQuery(엘리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리들과의 충돌 때문에 다음과 같은 방법을 사용

1. $ 대신 jQuery를 사용

jQuery('body').html('hello world');

2. $ 를 함수의 지역변수로 선언해서 외부에 있을지 모르는 타 라이브러리의 $와의 충돌을 예방

 (function( $ ){
      $('body').html('hello world');
  })(jQuery)

제어 대상을 지정하는 방법

1. jQuery( selector, [context] )

• []는 선택 옵션, 생략 가능

(function($) {
  $('ul.menu').click(function () {
    $('li', this).css('background-color', 'black'); 
  });
}) (jQuery)

• $('li', this)에서 'li'는 문서에 있는 모든 li들을 선택, this는 [context]이며 이벤트를 발생시킨 엘리먼트를 가리킴

• 즉, ul.menu에 해당하는 엘리먼트를 의미
  

2. jQuery( element )

jQuery(document.body).css('background-color', 'black');

• document.body는 body 태그를 가리킴