jQuery筛选--查找，串联

最新推荐文章于 2022-12-10 22:38:21 发布

darling.0

最新推荐文章于 2022-12-10 22:38:21 发布

阅读量1.7k

点赞数 1

分类专栏： web前端文章标签： jQuery 筛选查找串联

本文链接：https://blog.csdn.net/daliyuan350649623/article/details/53768312

版权

这篇博客介绍了jQuery中的筛选和串联操作。在筛选部分，详细讲解了如何查找子元素、相邻兄弟元素、父元素以及使用closest和parents的区别。在串联部分，阐述了如何将多条语句合并及使用add、andSelf和end等方法进行高效操作。

摘要由CSDN通过智能技术生成

jQuery筛选–查找，串联

查找

<A>
    <B>
        <C></C>
        <D></D>
        <E></E>
        <F></F>
    </B>
</A>

B.children([…]) 获得所有的子元素。CDEF
A.find(D) 从指定的区域查询指定元素。D
D.next() 下一个兄弟。E
D.nextAll() 后面的所有兄弟。EF
E.prev() 上一个兄弟。D （previous）
E.prevAll() 前面的所有兄弟。CD
E.siblings() 所有兄弟。CDF
E.parent() 父元素。B
E.closest(A) 向上获得指定的父元素（含自己），如果获得返回一个对象，如果没有没有对象。
C.nextUntil(E) 获得后面所有兄弟，直到指定条件位置。DE
F.prevUntil(D) 获得前面所有兄弟，直到指定条件位置。DE
E.parents() 获得所有的父元素。AB

closest和parents的主要区别是：
1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；
2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；
3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>05-可见性过滤选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />   
  <script type="text/javascript">
    $(document).ready(function(){
    
        //<input type="button" value=" 选择 id=two 所有子元素"  id="b1"/>
        $("#b1").click(function(){
    
            alert($("#two").children().size());
            $("#two").children().css("background-color","red");
        });
        //<input type="button" value=" 选择 id=two 子元素title=other 元素 "  id="b2"/>
        $("#b2").click(function(){
    
            $("#two").children("[title='other']").css("background-color","red");
        });
        //<input type="button" value=" 选择 id=two 下一个兄弟"  id="b3"/>
        $("#b3").click(function(){
    
            $("#two").next().css("background-color","red");
        });
        //<input type="button" value=" 选择 id=two 后面的所有兄弟"  id="b4"/>
        $("#b4").click(function(){
    
            $("#two").nextAll().css("background-color"<

最低0.47元/天解锁文章

darling.0

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery筛选--查找，串联

jQuery筛选–查找，串联查找<A> <B> <C></C> <D></D> <E></E> <F></F> </B></A>B.children([…]) 获得所有的子元素。CDEF A.find(D) 从指定的区域查询指定元素。D D.next() 下一个兄弟。E D.nextAll() 后面的
复制链接

扫一扫

专栏目录