复主代码 代码如下: <머리> 无标题文档 <!-- <BR>$(function(){ <BR>$("#aDescendant").click(function(){ <BR>$ ("#Result").html(""); <BR>$("#div1 ul").each(function(){ <BR>$("#Result").html($("#Result" ).html() $(this).html() "," ); <BR>}) <BR>}) <BR>$("#aChild").click(function(){ <BR>$( "#Result").html(""); <BR>$("#div1 > li").each(function(){ <br>$("#Result").html($("#Result ").html() $(this).attr("id") "," ); <br>}) <br>}) <br>$("#aNext").click(function(){ <br>$("#Result").html(""); <br>$("라벨 입력").each(function(){ <br>$("#Result").html($("# 결과").html() $(this).attr("값") ","); <br>}) <br>}) <br>$("#aSibling").click(function(){ <br>$("#Result").html(""); <br>$("#input1 ~ label").each(function(){ <br>$("#Result").html($ ("#Result").html() $(this).html() ",") <br>}) <br>}) <br>}) <br>// --></ 스크립트> <br></head> <br><br><본문> <br><div id="div1"> <br><li id="l1"> <br><ul>1</ul> <br><ul>2</ul> <br><ul>3</ul> <br><ul>4</ul> <br></li> <br><li id="l2"> <br><ul>一</ul> <br><ul>두</ul> <br><ul>삼</ul> <br><ul>4</ul> <br></li> <br><label>Label1</label> <br><input id="input1" value="input1" /> <br><입력 /> <br><label>Label2</label> <br><label>Label4</label> <br></div> <br><div> <br><label>Label3</label> <br><div style="border:1px solid #000" ></div> <br><input id="input2" value="input2"/> <br></div> <br><label>Label4</label><br /> <br><a href="#" id="aDescendant">显示DIV의 后序结点ID <br><a href="#" id="aChild">显示DIV的子LI结点</a> <br><a href="#" id="aNext">显示位于Label下一个input 元素的value值</a> <br><a href="#" id="aSibling">显示于input1 元素同级적 라벨 元素内容</a> <br><br /> <br>결과: <br><br /> <br><div id="결과"> <br></div> <br></body> <br></html> <br> </div> <br>먼저 위 코드의 과외 지식 포인트를 설명하세요. <br>1.element.attr("attributeName") <br>설명: 이 방법을 사용하면 예제와 같이 요소 요소의 속성 값을 얻을 수 있습니다. <br>$("#div1 > li").each(function(){ <br>$("#Result").html($("#Result").html() $(this).attr (" id") "," ); <br>}) <br>현재 탐색 중인 요소 객체의 id 값을 가져오는 함수입니다. <br>자, 이제 이 장의 내용을 소개하겠습니다. 이 장에서는 주로 JQuery에서 노드의 하위 노드, 형제 노드 등을 선택하는 방법에 대해 설명합니다. 하, 이제 요점을 살펴보겠습니다. <br>1.$("SelectorDescendant")<br>설명 : 이 방법은 주로 "Selector" 선택기(참고: 이 선택기는 이전 장에서 언급한 여러 선택기 중 하나임)에 의해 선택된 컬렉션의 요소 개체 또는 하위 노드를 얻는 데 사용됩니다. 예 ("#aDescendant").click(function(){ <br>$("#Result").html(""); <br>$("#div1 ul").each(function(){ <br>$("#Result").html($("#Result").html() $(this).html() "," ) <br>}) <br>}) <br> 함수는 div1 요소의 하위 노드에 있는 "ul" 노드의 HTMl 콘텐츠를 가져옵니다. "Selector" 선택기가 집합을 반환하는 경우 획득된 하위 노드는 이 집합의 각 요소와 일치하는 하위 노드 집합입니다. 🎜 >반환값: Array(Element); <br>2.$("Selector>child") <br>설명: 이 방법은 이전 방법과 유사하지만 이전 방법은 모든 하위 노드를 얻을 수 있다는 점이 다릅니다. , 그리고 이 방법은 하위 노드를 홀수 노드에 직접 종속되게 만들 수만 있습니다(여러 개의 ">" 숫자는 직접 하위 노드임을 의미합니다^^). 여기에서는 자세히 설명하지 않겠습니다. 하, 다른 모든 것은 하위 노드와 동일합니다. 이전 항목 <br>반환 값: 배열(요소); <br>3.$("Selector next") <br>설명: 예시와 같이 선택기 뒤에 있는 모든 다음 요소를 가져오는 데 사용됩니다. <br>$ ("#aNext").click(function( ){ <br>$("#Result").html(""); <br>$("레이블 입력").each(function(){ <br> $("#Result").html($ ("#Result").html() $(this).attr("value") ",") <br>}) <br>}) <br> label 요소 뒤에 있는 모든 입력 요소를 가져옵니다. 예에서는 Label1 옆 노드에 input1만 있고, input2와 Label3은 div 노드로 구분되어 있으므로 일치하지 않습니다. <br>반환 값: Array(Element); <br>4.$("Selector ~ Sibling") <br>설명: 이전 방법과 유사하지만 이 방법은 Selector Sibling 노드 이후의 모든 형제 항목을 일치시킨다는 점입니다. , 사이에 다른 노드가 있는지 여부에 관계없이 여기서는 명확하지 않습니다. <br>반환 값: Array(Element) <br>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
