国产视频appJquery中有多種可以查找節點的方法,今天這篇文章就說幾種簡單點的,也在日常中經常用到的。

jQuery parent() 方法

parent():查找并返回被選元素的父元素

語法:

$(selector).parent(filter);

例:JQ查找元素的父元素

示例代碼:

<!DOCTYPE html>
<html>
<head>
    <script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="mochu">
    <div class="div">
        <p>飛鳥慕魚博客</p>
    </div>
</div>
<script>
    //$('.div').parent()
    console.log($('.div').parent());
</script>
</body>
</html>

打印結果:

Jquery中幾種查找節點的方法

注意:parent() 方法是查找的被元素元素的直接父元素,要注意一下。

jQuery.parents() 方法

国产视频appparents():是查找的被選元素的祖先元素,這里包括父元素

語法:

$(selector).parents(filter);

例:JQ查找并返回指定元素的所有祖先元素

示例代碼:

<!DOCTYPE html>
<html>
<head>
    <script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="mochu">
    <div class="div">
        <p class="p">飛鳥慕魚博客</p>
        <p>http://xswdd.cn</p>
    </div>
</div>
<script>
    $('.p').parents().each(
        function(){
            console.log($(this));
        }   
    )
</script>
</body>
</html>

打印結果:

Jquery中幾種查找節點的方法

jQuery children() 方法

国产视频appchildren():方法查找被選元素的所以子元素

語法:

$(selector).children(selector);

例:JQ查找指定元素的所以子元素

示例代碼:

//HTML參考上面的例子,省略
<script>
    $('.div').children().each(
        function(){
            console.log($(this));
        }   
    )
</script>

執行結果:

Jquery中幾種查找節點的方法

国产视频app注:children() 方法返回是指定元素的所有的直接子節點,并不是子孫節點和 parent() 方法返回的結果相返

jQuery prev() 方法

国产视频appprev():返回指定元素的上一個的兄弟節點

語法:

$(selector).prev(filter)

例:JQ查找指定元素的上個兄弟節點

示例代碼:

<!DOCTYPE html>
<html>
<head>
    <script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="mochu">
    <div class="div">
        <p class="p">飛鳥慕魚博客</p>
        <p class="p2">網址:http://xswdd.cn</p>
        <p class="p3">博主:墨初</p>
    </div>
</div>
<script>
    //$('.ps').prev();
    console.log($('.p2').prev());
</script>
</body>
</html>

打印結果:

Jquery中幾種查找節點的方法

jQuery prevAll() 方法

prevAll():返回所有指定元素之前的兄弟元素

語法:

$(selector).prevAll(selector)

例:JQ查找指定元素之前的所有兄弟元素

示例代碼:

<!DOCTYPE html>
<html>
<head>
    <script src="http://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="mochu">
    <div class="div">
        <p class="p">飛鳥慕魚博客</p>
        <p class="p2">網址:http://xswdd.cn</p>
        <p class="p3">博主:墨初</p>
    </div>
</div>
<script>
    $('.p3').prevAll().each(function(){
        console.log($(this));
    });
</script>
</body>
</html>

打印結果:

Jquery中幾種查找節點的方法

jQuery next() 方法

next():方法可以返回指定元素下一個兄弟元素

語法:

$(selector)..next(selector)

例:JQ查找被選元素的下一個兄弟元素

示例代碼:

//HTML代碼同上,省略
<script>
    //$('.p').next()
    console.log($('.p').next());
</script>

打印結果:

Jquery中幾種查找節點的方法

国产视频app注:next():方法返回的是一個元素,但不是元素的集合

jQuery next()All() 方法

next()All():方法可以返回指定元素之后的所有兄弟元素

語法:

$(selector).nextAll(selector)

例:JQ返回指定元素之后的所有兄弟元素

示例代碼:

//HTML同上省略。。
<script>
    $('.p').nextAll().each(function(){
        console.log($(this));
    })
</script>

打印結果:

Jquery中幾種查找節點的方法

補充資料:

1、parent(),prev(),next()返回的是單個元素對象

2、parents(),children(),prevAll(),nextAll()返回的是多個元素對象的集合

3、單個對象可以使用 console.log() 方法在瀏覽器的控制臺中打印出來

4、多個元素對象的集合,可以使用 each() 遍歷出來

5、parents(),children(),prevAll(),nextAll()可以選擇性查找對像,以后再說哦