[JQuery]_자주 사용한 노드 탐색 종류

1] Selector

1-1] html 에 id 와 동일한 값의 엘리먼트를 선택한다

$("#id")

1-2] html 에 class 와 동일한 값의 엘리먼트를 선택한다.

$(".class")

1-3] html 에서 div 의 요소 중 class 이름과 같은 값의 엘리먼트를 선택한다.

 

$("div.class")

1-4] html 에서 ul 의 자손노드인 li을 전부 선택한다

$("ul li")

1-5] html 에서 div의 자손노드중 class 와 동일한 값의 엘리먼트를 선택한다.

$("div .class")

---

2] Filter

2-1] 기본 요소 선택

$("div"):first //선택된 요소의 첫번째 요소
$("div"):last  //선택된 요소의 마지막 요소
$("div"):even  //선택된 요소의 짝수 요소
$("div"):odd   //선택된 요소의 홀수 요소

2-2] 인덱스 요소로 선택

:eq(index)	// 선택된 요소 중 지정된 index 번호를 가진 요소
:gt(index)	// 선택된 요소 중 지정된 index 번호보다 큰 인덱스 요소들
:lt(index)	// 선택된 요소 중 지정된 index 번호보다 작은 인덱스 요소들

2-3] filter & find

$("#test").filter(선택자) // 찾은 노드에서 선택자와 동일한 노드 찾기
$("#test").find(선택자) // 찾은 노드에서 선택자와 동일한 자식 노드 찾기

 

---

3] Family

3-1] 자식 노드

$("#test").children() // 모든 자식 노드
$("#test").children(선택자) // 자식노드 중 선택자에 해당하는 노드 찾기

$("#test").children().first() // 첫번째 자식노드 찾기
$("#test").children().last() // 마지막 자식노드 찾기

$("#test").children().eq(index) // index 번 째 자식노드 찾기

 

3-2] 부모 노드

$("#test").parent() // 부모노드 찾기
$("#test").parents() //조상노드 찾기
$("#test").parents(선택자) // 선택자와 일치하는 조상노드 찾기

3-3] 형제노드

$("li").prev()           // 선택 노드의 이전 형제노드 찾기
$("li").prevAll()        // 선택 노드의 모든 이전 형제노드 찾기
$("li").prevAll(선택자) // 이전 형제노드 중 선택자와 동일한 노드 찾기
$("li").next()           // 선택 노드의 다음 형제노드 찾기
$("li").nextAll()        // 선택 노드의 모든 다음 형제노드 찾기
$("li").nextAll(선택자)	// 다음 형제노드 중 선택자와 동일한 노드 찾기
$("li").siblings(선택자) // 형제 노드를 선택

 

이상 자주 사용하는 JQuery 요소찾기 였습니다.

감사합니다.