JQuery 연구 노트 선택기 2_jquery

复主代码 代码如下: 无标题文档 $(function(){ $("#aDescendant").click(function(){ $ ("#Result").html(""); $("#div1 ul").each(function(){ $("#Result").html($("#Result" ).html() $(this).html() "," ); }) }) $("#aChild").click(function(){ $( "#Result").html(""); $("#div1 > li").each(function(){ $("#Result").html($("#Result ").html() $(this).attr("id") "," ); }) }) $("#aNext").click(function(){ $("#Result").html(""); $("라벨 입력").each(function(){ $("#Result").html($("# 결과").html() $(this).attr("값") ","); }) }) $("#aSibling").click(function(){ $("#Result").html(""); $("#input1 ~ label").each(function(){ $("#Result").html($ ("#Result").html() $(this).html() ",") }) }) }) // -->

1 2 3 4 一 두 삼 4 Label1 Label2 Label4 Label3 Label4

显示DIV의 后序结点ID 显示DIV的子LI结点 显示位于Label下一个input 元素的value值 显示于input1 元素同级적 라벨 元素内容

결과:

먼저 위 코드의 과외 지식 포인트를 설명하세요. 1.element.attr("attributeName") 설명: 이 방법을 사용하면 예제와 같이 요소 요소의 속성 값을 얻을 수 있습니다. $("#div1 > li").each(function(){ $("#Result").html($("#Result").html() $(this).attr (" id") "," ); }) 현재 탐색 중인 요소 객체의 id 값을 가져오는 함수입니다. 자, 이제 이 장의 내용을 소개하겠습니다. 이 장에서는 주로 JQuery에서 노드의 하위 노드, 형제 노드 등을 선택하는 방법에 대해 설명합니다. 하, 이제 요점을 살펴보겠습니다. 1.$("SelectorDescendant") 설명 : 이 방법은 주로 "Selector" 선택기(참고: 이 선택기는 이전 장에서 언급한 여러 선택기 중 하나임)에 의해 선택된 컬렉션의 요소 개체 또는 하위 노드를 얻는 데 사용됩니다. 예 ("#aDescendant").click(function(){ $("#Result").html(""); $("#div1 ul").each(function(){ $("#Result").html($("#Result").html() $(this).html() "," ) }) }) 함수는 div1 요소의 하위 노드에 있는 "ul" 노드의 HTMl 콘텐츠를 가져옵니다. "Selector" 선택기가 집합을 반환하는 경우 획득된 하위 노드는 이 집합의 각 요소와 일치하는 하위 노드 집합입니다. 🎜 >반환값: Array(Element); 2.$("Selector>child") 설명: 이 방법은 이전 방법과 유사하지만 이전 방법은 모든 하위 노드를 얻을 수 있다는 점이 다릅니다. , 그리고 이 방법은 하위 노드를 홀수 노드에 직접 종속되게 만들 수만 있습니다(여러 개의 ">" 숫자는 직접 하위 노드임을 의미합니다^^). 여기에서는 자세히 설명하지 않겠습니다. 하, 다른 모든 것은 하위 노드와 동일합니다. 이전 항목 반환 값: 배열(요소); 3.$("Selector next") 설명: 예시와 같이 선택기 뒤에 있는 모든 다음 요소를 가져오는 데 사용됩니다. $ ("#aNext").click(function( ){ $("#Result").html(""); $("레이블 입력").each(function(){ $("#Result").html($ ("#Result").html() $(this).attr("value") ",") }) }) label 요소 뒤에 있는 모든 입력 요소를 가져옵니다. 예에서는 Label1 옆 노드에 input1만 있고, input2와 Label3은 div 노드로 구분되어 있으므로 일치하지 않습니다. 반환 값: Array(Element); 4.$("Selector ~ Sibling") 설명: 이전 방법과 유사하지만 이 방법은 Selector Sibling 노드 이후의 모든 형제 항목을 일치시킨다는 점입니다. , 사이에 다른 노드가 있는지 여부에 관계없이 여기서는 명확하지 않습니다. 반환 값: Array(Element)