제이쿼리 선택자의 종류와 방법

제이쿼리나 자바스크립트의 주요 목적은 클라이언트 상의 DOM이나 엘리먼트를 제어 하는데에 가장 큰 목적이 있기 때문에

제일 먼저 알아두어야 할 첫단계가 바로 셀렉터이다. 대상을 어떻게 선택하고 조합해서 추려내는지

아래 정리하는 정도의 방법만 알면 충분하게 사용할 수 있을 것이다. 제이쿼리가 정말 유연하고 멋진 프레임웍인 이유가 css셀럭터의 

개념과 방식을 그대로 계승하고 조합하여 쓸 수 있기때문에 무한한 확장과 응용이 가능하다.

일단 생각나는대로 추려보긴 했는데 너무 바쁜 관계로 주말에 예제와 나머지 내용을 정리하겠다.

[선택자]

---------------------------------------

div#myID : 선택자결합

"myID" id를 가진 div를 셀렉트

---------------------------------------

(h1 p) : 하위선택자

<h1>

    <p>일</p>

    <p>이</p>

    <p>삼

       <p>사</p>

    </p>

</h1>

-------------------------------------

(ul > li) 혹은 (h1).children : 자식선택자

<ul>

    <li>목록1</li>

    <li>목록2</li>

    <li>목록3

       <li>목록4</li>

    </li>

</ul>

---------------------------------------

h1+p : 형제 선택자

---------------------------------------

(h1,h2,h3) : 그룹핑

<h1>제목1</h1>

<h2>제목2</h2>

<h3>제목3</h3>

---------------------------------------

변수와 셀럭터 조합

var maskVar = $('#mask');

maskVar + $('#imgID').css('opacity',0.5);

---------------------------------------

내부적으로 조건처리하여 순서를 선택하는 셀럭터

element:first-child{}  : 첫번째

element:nth-child(2)P{} : 2번째

element:last-child{} : 마지막번째

element:nth-child(odd) : 홀수번째

element:nth-child(even) : 짝수번째

element:nth-child(2n+1) : 2개씩 자르고 그중 1번째

element:nth-child(2n) : 2번째

---------------------------------------

element:eq(0) : 순서 선택자

$("td").eq(2).css("color", "red");

jQuery('div').children().eq(1).css("color", "blue");

jQuery('div > p:eq(2)').css("color", "green");

---------------------------------------

.find( element )

element 요소를 찾을 요소 표현