1. Element를 선택하는 강력한 방법과

2. 선택된 Element들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는

3. JS Library

   HTML에서 태그(Tag)와 요소(Element)는 대부분 구별없이 사용한다. 허나 정확하게 구별하는 것이 좋은 듯 하다. **태그(Tag)**는 단지 열기 태그와 닫기 태그 그 자체를 의미하며 **요소(Element)**는 해당 태그와 그 내용(자식)을 포함한 전체를 의미한다.

JQuery를 삽입하는 방법

1. JQuery 소스 다운로드
2. 링크 복사해서 적용

문법

$(제어대상).method1(0.method2();

$(제어대상) : 주어

method1(). ~ : 서술어

$('.anyClass').html('hello!');

• 메소드 체이닝이 가능하다.
• 인간의 문법과 비슷하다.

jQuery API

• Wrapper : jQuery(element object|’CSS style 선택자’) ( = $(element object|’CSS style 선택자’))

  • jQuery로 wrap함으로서 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환.

• $를 사용할 경우 외부 라이브러리와의 충돌을 피하기 위해 jQuery라는 이름을 쓰거나 함수의 인자로 $를 선언해주기도 한다.

  <ul>
    <li>test2</li>
  </ul>
  <ul class="foo">
    <li>test</li>
  </ul>
  <script type="text/javascript">
    (function ($) {
      $('ul.foo').click( function() { // ul.foo element가 click되면 function 실행
        $('li', this).css('background-color', 'red'); // func : li태그들에 대해 css 기능으로 배경을 red로 설정.
      }); // this : context, 생략 가능 이 이벤트를 발생시킨 element가 this -> ul.foo
    })(jQuery) // 따라서 this는 ul.foo 안의 li를 찾게 된다.
  </script>