jQuery 사용하기 (4) [탐색]

 

 

jQuery에서 요소를 탐색하는 기능에 주로 탐색해보자

 

 

 

1 .add(selector) :  타겟에 엘리먼트를 추가 (merge)

 

ex)  $('#root').add('li')

 

2  .andSelf() : 타겟에 이전 설정을 추가해줌

 

EX) $("div").find("p").andSelf().addClass("border");  

-> div태그에  p태그를 찾아  추가, 그리고 border클래스를 적용

 

3 .children([selector]) : 자식 엘리먼트를 추가

 

4.closest(selector):  가장 가까운 조상(부모) 엘리먼트를 탐색

 

5 .each(function(index,Element)) : 현재 엘리먼트셋에 반복작업을 실시한다.

 

EX:

$('.list li').each(function (index, item) {
 //반복시킬 로직
}

 

마치 For문 돌리는것같이 사용하면 된다.  index는 인덱스,  item은 앞에서 지정된 아이템이다.

 

 

6 .end() : 현재 체인 컨텍스트를 끝낸다.

 

7 .eq(index) : 현재 엘리먼트 셋[복수] 에서 index에 해당하는 엘리먼트를 선택한다.

 

8 .filter(selector) : 현재 엘리먼트 셋에서 selector에 해당하는 엘리먼트를 선택한다

 

.find  vs .fliter 차이점?

 

.find() 는  제일 첫번째로 발견된 값을 찾아서 반환

.filter 는 해당된 값들을 찾아 배열로 반환

 

 

9. first() :  현재 엘리멘트셋중에 가장 첫번째 선택

 

10. last() :  현재 엘리멘트셋중에 가장 마지막꺼 선택

 

11 .next() : 각각의 엘리먼트에 대한 다음 형재 엘리먼트를 선택한다

 

12 .nextAll() :  다음에 오는 형재의 모든 엘리먼트 선택

 

11 .prev() : 각각의 엘리먼트에 대한 이전 형재 엘리먼트를 선택한다

 

12 .prevAll() :  이전에 오는 형재의 모든 엘리먼트 선택

 

13. silbilngs() : (본인제외)각각의 엘리먼트에 대한 형재 엘리먼트 전부를 선택한다.

 

14. slice(start,end) :  현재 엘리먼트셋에 대해 start와 end로 엘리먼트 선택함