반응형
JQuery
DOM탐색 메서드
<body>
<h1>필터 탐색</h1>
<div id="test1">
<pre>
<b>eq(): 선택한 엘리먼트들 중에 인덱스로 탐색</b>
<b>slice() : 선택한 element중에 인덱스 범위로 탐색</b>
<b>first() : 선택한 element 중에 첫번쨰 요소 탐색</b>
<b>last() : 선택한 element 중에 마지막 요소 탐색</b>
</pre>
</div>
<h1>트리 탐색</h1>
<div id="test2">
<pre>
<b>find() : 선택한 element들의 자손들 중에 탐색</b>
<b>children() : 선택한 element의 자식요소를 탐색</b>
<b>parent()/parents() : 선택한 element의 부모요소를 탐색</b>
<b>prev(),prevAll()/next(),nextAll() : 선택한 element앞/뒤에 오는 형제요소 탐색</b>
<b>siblings(): 선택한 element의 형제요소 모두 선택</b>
</pre>
</div>
</body>
필터 탐색
1. eq()
선택한 element 중에서 인덱스로 검색
$("pre > b").eq(0).css("color","red");2. slice()
선택한 element 중에 인덱스 범위로 검색
$("pre >b").slice(1,3).css("background-color","yellow");3. first()
선택한 element 중에 첫번째 요소 검색
$("pre>b").first().css("background-color","orange").end().eq(2).css("color","blue);end() : 현재 탐색한 요소 바로 직전에 탐색한 요소로 돌아간다
first()부분의 작업을 끝내고 pre>b 인 상태에서 3번째 인덱스에 바로 접근하는 경우
4. last()
선택한 element 중에 마지막 요소 검색
트리 탐색
1. find()
선택한 element들의 자손들 중에 탐색
var len= $("#test1").find("b").length;
//42. children()
선택한 element의 자식요소를 탐색
children() :default 모든 자식요소
children("selector") : 자식요소 중 원하는 요소
$("pre").eq(1).children(":first").css("color","blue");
$("pre").eq(1).children().slice(1,4).css("color","red");//트리,필터 혼합3. parent()/parents()
선택한 element의 부모요소를 탐색
parents()는 찾을 때까지 상위로 올라감(부모이상)
$("b").parent().attr("title","부모요소");
$("b").parents("div").css("border","1px solid red");4. prev(),prevAll()/next(),nextAll()
선택한 element의 앞,앞전체 요소/뒤,뒤 전체 형제 요소를 탐색
$("b").last().prev().css("color","green");5. siblings()
선택한 element의 형제요소 모두 탐색
$("#test2").find("b").eq(2).siblings().css("font-size","20pt");
기타 참고
반응형
'Front-end > JQuery' 카테고리의 다른 글
| (JQuery)AJAX 비동기구현 (0) | 2023.03.08 |
|---|---|
| (JQuery)DOM처리 메서드 (0) | 2023.03.08 |
| (JQuery)DOM탐색 메서드 연습문제 (0) | 2023.03.07 |
| (JQuery)이벤트 전파, 기본기능 금지 메서드 (0) | 2023.03.06 |
| (JQuery)셀렉터 표현식 (0) | 2023.03.06 |