728x90
반응형
트리 탐색 메소드
1) find("selector") 메서드: 선택한 엘리먼트 자손들 중에 탐색하고자 하는 엘리먼트를 찾는다.
2) children("selector") 메서드: 선택한 엘리먼트의 자식요소들 중에 탐색하고자 하는 엘리먼트를 찾는다.
3) parent()/ parents("selector") 메서드: 선택한 엘리먼트의 부모요소 / 조상요소를 찾는다.
4) next("selector") 메서드: 선택한 엘리먼트 다음에 나오는 요소를 찾는다.
<body>
<body>
<pre>
<b>find("selector") 메서드:
선택한 엘리먼트 자손들 중에 탐색하고자 하는 엘리먼트를 찾는다. </b>
<b>children("selector") 메서드:
선택한 엘리먼트의 자식요소들 중에 탐색하고자 하는 엘리먼트를 찾는다.</b>
<b>parent()/ parents("selector") 메서드:
선택한 엘리먼트의 부모요소 / 조상요소를 찾는다.</b>
<b>next("selector") 메서드:
선택한 엘리먼트 다음에 나오는 요소를 찾는다.</b>
</pre>
<div>
<p><b>1</b></p>
<p id="chd">2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</body>
<script>
<script type="text/javascript">
$(function(){
$("div").find("b").css({"color":"yellow", "font-weight":"bold"});// div에 포함된 모든 b를 찾는다
$("div").children("#chd").text("2.children()");
$("p").parent().css("background-color","ghostwhite");
$("p>b").parents("div").css("background-color","gray");
$("p").eq(0).next().css("font-weight","bold").css("color","yellowgreen");
})
// $("div").find("b").css("background","yellow");
// $("div").children("#chd").css("font-weight","bold");
// $("p").parent().css("background","skyblue");
// $("p>b").parents("div").css("background","gray");
// $("p").eq(0).next().css("background","lightpink");
</script>728x90
반응형
'Web > JQuery' 카테고리의 다른 글
| [JQ]event (0) | 2020.08.03 |
|---|---|
| [JQ]DOM_기타탐색메소드 (0) | 2020.07.31 |
| [JQ]DOM_필터링메소드 (0) | 2020.07.31 |
| [JQ]selector_03 (0) | 2020.07.31 |
| [JQ]selector_02 (0) | 2020.07.31 |
