[ Tree Traversal 메소드의 종류 ]
| 메소드 | 메소드 설명 |
| .children | 선택된 개체의 자식 중 Selector와 동일한 요소를 가져온다. |
| .closest ([selector]) | 선택된 개체에서 DOM Tree를 통해 가장 가까운 조상 요소를 가져온다. |
| .find ([selector]) | 선택된 개체에서 selector와 일치하는 요소를 가져온다. |
| .next ([selector]) | 선택된 개체에서 selector와 일치하는 형제 요소를 가져온다. 일치하는 항목이 없을 경우 다음 항목으로 이동해 요소를 찾는다. |
| .parent ([selector]) | 선택된 개체에서 selector와 일치하는 부모의 요소를 가져온다. |
| .prev ([selector]) | 선택된 개체에서 selector와 일치하는 바로 앞의 형제 요소를 가져온다. |
| .siblings ([selector]) | 선택된 개체에서 selector와 일치하는 형제 요소를 가져온다. 자신은 제외한다. |
selector는 일종의 옵션으로 존재를 하며, selector의 사용여부는 일종의 필터링과 관계가 있고, selector가 있을 경우 selector와 일치하는 요소를 탐색하고, 없을 경우 가장 가까운 요소를 가져온다.
[ HTML DOM ]
Tree Traversal메소드를 이해하려면 HTML DOM 구조를 이해할 필요가 있다.
아래의 이미지는 간단한 HTML DOM 구조에 대한 예이다. (별 다른 설명이 없어도,,,)
[ .children() ]
<head>
<title>jQuery Selector</title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("div").children().css("border-bottom", "3px double red");
});
</script>
</head>
<body>
<p>Tree Traversal Children Test 1</p>
<div>
<span>Tree Traversal Children Test 2</span>
</div>
<p>Tree Traversal <span>Children</span> Test 3</p>
<div>
Tree Traversal <span>Children</span> Test 4
</div>
<p>Tree Traversal Children Test 5</p>
</body>
</html>
$("div").children() 는 DIV를 찾아서 그의 자식들에 대하여 css속성을 적용한 것이다.
위에 예에서 보면 "div" 자식인 "span"을 찾아 해당하는 문구에 밑줄을 보여줌을 알 수 있다.
[ .parent() ]
var $spans = $('span');
$( $spans ).parent().css('color','red');
});
"span"태그가 적용된 곳의 부모 노드("div", "p")에 속성을 변경시켰음을 확인 할 수 있다.
[ .find ([selector]) ]
$(document).ready(function () {
var $spans = $('span');
$("p").find( $spans ).css('color','red');
});
</script>
모든 span태그를 spans라고 정의하고 $("p").find( $spans )를 이용하여 p태그 하단의 span태그에 해당하는 내용에 스타일을 적용하여 준다.
find메소드와 filter 메소드의 차이
$(“div”).filter(“a”) : filter() 메서드를 사용할 경우는 div요소의 집합에서 “a”를 찾는다.
$(“div”).find(“a”) : find() 메서드를 사용할 경우 div 요소의 집합 내용에서 “a”의 요소를 가져온다.
$("p").find( $spans ).css('color','red'); 의 find 대신 filter를 적용하여 보면 아래와 같은 결과를 확인 할 수 있다.
[ .siblings() ]
<head>
<title>jQuery Selector</title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<style>
div,pre { background : #FFF; padding:10px; margin:10px; }
table { border:1px solid #AAA; }
td { border:1px solid #AAA; width:25px; height:25px; }
.selected { background:red }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("li").each(function () {
$(this).click(function () {
$(this).addClass("selected");
$(this).siblings().removeClass("selected");
});
});
});
</script>
</head>
<body style="padding:10px;">
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</div>
</body>
</html>
"li"태그의 리스트 중 하나를 선택하면 $(this).addClass("selected"); 에 의하여 "li"태그가 적용된 모든 요소에 "class"가 "selected"로 적용이 되고 그 후 $(this).siblings().removeClass("selected");에 의해 선택한 요소를 제외한 모든 요소들의 "selected"가 제거가 된다. (아래 이미지 참조)
원본 : http://www.sqler.com/387736
http://hyeonseok.com/soojung/contents/upload/jQueryBasicAPIs.pdf
'Programming > JQuery' 카테고리의 다른 글
| jQuery Event - Mouse Events (0) | 2012.04.23 |
|---|---|
| jQuery Event (0) | 2012.04.23 |
| jQuery Traverse - Miscellaneous Traversing (0) | 2012.04.20 |
| jQuery Traverse - Filtering (0) | 2012.04.19 |
| jQuery Callback Functions (0) | 2012.04.19 |
