집 > 기사 > 웹 프론트엔드 > jquery로 노드를 탐색하는 방법

jquery로 노드를 탐색하는 방법

coldplay.xixi원래의: 2020-11-16 13:44:284010검색

jquery 탐색 노드를 위한 방법: 1. [children()] 메서드를 사용하여 요소의 하위 요소 집합을 일치시킵니다. 2. [next()] 메서드를 사용하여 요소 바로 뒤에 있는 형제 요소를 일치시킵니다. . [prev()] 메소드를 사용하십시오. 요소의 바로 앞에 있는 형제 요소와 일치합니다.

jquery로 노드를 탐색하는 방법

이 튜토리얼의 운영 환경: windows10 시스템, jquery2.2.4, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

권장: "jquery 비디오 튜토리얼"

Jquery 노드 순회 방법:

1.children() 방법

이 방법은 일치하는 요소의 하위 요소 집합을 얻는 데 사용됩니다.

일치하는 요소의 모든 하위 요소 수를 가져오려면 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");                    //<ul>元素下有3个子元素
for(var i=0;len=$ul.length;i<len;i++)<br>{
    alert($ul[i].innerHTML);    //循环输出<li>元素的HTML内容
}

2.next() 메서드

이 메서드는 일치하는 요소 바로 뒤에 있는 형제 요소를 가져오는 데 사용됩니다.

var $p1=$("p").next;//

요소 바로 뒤에 형제 요소를 가져옵니다. var $p1=$("p").next;//获取紧邻

元素后的同辈元素

得到的结果将是：

<ul> 
       <li title=&#39;苹果&#39;>苹果</li> 
       <li title=&#39;橘子&#39;>橘子</li> 
       <li title=&#39;菠萝&#39;>菠萝</li> 
</ul>

3、prev()方法

该方法用于取得匹配元素前面紧邻的同辈元素

从dom树的结构中可以知道

，因此可以通过prev()方法来获取

元素，代码如下：

var $ul=$("ul").prev();//取得紧邻

得到的结果将是：

<p title="选择你最喜欢的水果.">你最喜欢的水果是？</p>

4、siblings()方法

该方法用于取得匹配元素前后所有的同辈元素。

jquery로 노드를 탐색하는 방법

上面的代码中就用到了siblings()方法，当时是为了获取匹配元素的兄弟节点，即获取匹配元素的同辈元素。

以DOM树的结构为例。

元素互为同辈元素，

元素也互为同辈元素。
如果要获取

元素的同辈元素，则可以使用如下代码：

var $p2=$("p").siblings();
결과는 다음과 같습니다.
```
<ul> 
       <li title=&#39;苹果&#39;>苹果</li> 
       <li title=&#39;橘子&#39;>橘子</li> 
       <li title=&#39;菠萝&#39;>菠萝</li> 
</ul>
```
3. () 메소드
이 메소드는 일치하는 요소 직전에 형제 요소를 얻는 데 사용됩니다.
dom 트리의 구조에서

위 내용은 jquery로 노드를 탐색하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript jquery var 对象 dom 选择器 ul li

성명：

이전 기사：jquery html() 메소드를 사용하는 방법다음 기사：jquery html() 메소드를 사용하는 방법