DOM 노드를 탐색하는 JQuery 메서드_jquery
- WBOY원래의
- 2016-05-16 15:55:401351검색
이 문서의 예에서는 JQuery가 DOM 노드를 탐색하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.
이 섹션의 핵심은 JQuery의 DOM 작업을 소개하는 것입니다. 생성, 삭제, 교체 등 많은 노드 작업을 소개했습니다. 노드를 순회하고 인접 노드를 선택하는 방법 등에 대한 몇 가지 방법은 다음과 같습니다.
children() 메서드
이 메서드는 일치하는 요소의 하위 요소 집합을 가져오는 데 사용됩니다. DOM 트리의 구조에 따라 각 요소와 해당 하위 노드 수 간의 관계를 알 수 있습니다.
다음은 children() 메소드를 사용하여 일치하는 요소의 모든 하위 요소 수를 가져옵니다.
var $body = $("body").children();
var $p = $("p").children();
var $ul = $("ul").children();
alert( $body.length ); // <body>元素下有2个子元素
alert( $p.length ); // <p>元素下有0个子元素
alert( $ul.length ); // <p>元素下有3个子元素
for(var i=0;i< $ul.length;i++){
alert( $ul[i].innerHTML );
}
PS: children() 메소드는 하위 요소만 고려하고 하위 요소는 고려하지 않습니다.
next() 메소드
이 방법은 일치하는 요소 바로 뒤에 있는 형제 요소를 얻는 데 사용됩니다. DOM 트리의 구조를 통해 p 요소의 다음 형제 노드가 ul임을 알 수 있으므로 next() 메서드를 통해 ul 요소를 얻을 수 있습니다.
var $p1 = $("p").next();
// 紧邻p元素后的同辈元素
prev() 메서드
이 메서드는 일치하는 요소 직전에 형제 요소를 가져오는 데 사용됩니다. DOM 트리의 구조를 통해 ul 요소의 이전 형제 노드가 p임을 알 수 있으므로 prev() 메서드를 통해 p 요소를 얻을 수 있습니다.
var $ul = $("ul").prev();
// 紧邻ul元素前的同辈元素
siblings() 메서드
이 방법은 일치하는 요소 전후의 모든 형제 요소를 얻는 데 사용됩니다. DOM 트리의 구조를 예로 들어 보겠습니다. ul 요소와 p 요소는 서로 형제 요소이고, ul 요소 아래의 세 li 요소도 서로 형제 요소입니다.
p 요소의 형제 요소를 가져오려면 다음 코드를 사용할 수 있습니다.
var $p2 = $("p").siblings();
// 紧邻p元素的唯一同辈元素
closest() 메서드
가장 가까운 일치 요소를 가져오는 데 사용됩니다. 먼저 현재 요소가 일치하는지 확인하고, 그렇다면 요소 자체를 직접 반환합니다. 일치하는 항목이 없으면 선택기와 일치하는 요소를 찾을 때까지 상위 요소를 단계별로 검색합니다. 아무것도 발견되지 않으면 빈 JQuery 객체가 반환됩니다.
예를 들어 클릭한 대상 요소의 가장 가까운 li 요소에 색상을 추가하려면 다음 코드를 사용할 수 있습니다.
$(document).bind("click", function (e) {
$(e.target).closest("li").css("color","red");
})
이 외에도 JQuery에는 find(), filter(), nextAll(), prevAIl(), parent(), parent() 등 노드를 순회하는 메서드가 많이 있지만 이에 대해서는 설명하지 않겠습니다. 여기에서 독자는 부록에 있는 JQuery 치트 시트 문서를 볼 수 있습니다. 이러한 DOM 탐색 방법에는 한 가지 공통점이 있다는 점은 주목할 가치가 있습니다. 즉, 모두 JQuery 표현식을 매개변수로 사용하여 요소를 필터링할 수 있다는 것입니다.
이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.