【前端系列教程之jQuery】08_jQuery筛选API

我会带着你远行 2024-04-28 13:13 80阅读 0赞

## 一、过滤 ##

### eq(index|-index) ###

获取第N个元素

**index** Integer 一个整数，指示元素基于0的位置,这个元素的位置是从0算起。

**-index** Integer 一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(1算起)

### first() ###

获取第一个元素

### last() ###

获取最后个元素

### hasClass(class) ###

检查当前的元素是否含有某个特定的类，如果有，则返回true。

这其实就是 is("." + class)。

**class** String 用于匹配的类名

### filter(expr|obj|ele|fn) ###

筛选出与指定表达式匹配的元素集合。

这个方法用于缩小匹配的范围。用逗号分隔多个表达式

**expr** String 字符串值，包含供匹配当前元素集合的选择器表达式。

**jQuery object** object 现有的jQuery对象，以匹配当前的元素。

**element** Expression 一个用于匹配元素的DOM元素。

**function(index)** Function 一个函数用来作为测试元素的集合。它接受一个参数index，这是元素在jQuery集合的索引。在函数， this指的是当前的DOM元素。

### is(expr|obj|ele|fn) ###

根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

如果没有元素符合，或者表达式无效，都返回'false'。 '''注意：'''在jQuery 1.3中才对所有表达式提供了支持。在先前版本中，如果提供了复杂的表达式，比如层级选择器（比如 + , ~ 和 > ），始终会返回true。

**expr** String 字符串值，包含供匹配当前元素集合的选择器表达式。

**jQuery object** object 现有的jQuery对象，以匹配当前的元素。

**element** Expression 一个用于匹配元素的DOM元素。

**function(index)** Function 一个函数用来作为测试元素的集合。它接受一个参数index，这是元素在jQuery集合的索引。在函数， this指的是当前的DOM元素。

### map(callback) ###

将一组元素转换成其他数组（不论是否是元素数组）

你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。

**callback** Function 给每个元素执行的函数

### has(expr|ele) ###

保留包含特定后代的元素，去掉那些不含有指定后代的元素。

.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代，含有匹配后代的对象将得以保留。

**expr** String 一个选择器字符串。

**element** DOMElement 一个DOM元素。

### not(expr|ele|fn) ###

删除与指定表达式匹配的元素。

**expr** String 一个选择器字符串。

**element** DOMElement 一个DOM元素。

**function(index)** Function 一个用来检查集合中每个元素的函数。this是当前的元素。

### slice(start,\[end\]) ###

选取一个匹配的子集,与原来的slice方法类似

**start** Integer 开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。

**end**Integer 结束选取自己的位置，如果不指定，则就是本身的结尾。

### 配套代码 ###

### 二、查找 ###

### children(\[expr\]) ###

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。  
**expr**String 用以过滤子元素的表达式

### closest(e|o|e) ###

jQuery 1.3新增。从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。。

closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

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

closest对于处理事件委托非常有用。

.closest( selectors \[, context \] )方法从 jQuery 1.7 开始，不再建议使用该方法，但是 jQuery 1.7 之前仍然可以使用。该方法将主要用于 jQuery 内部或插件作者使用。  
expr：用以过滤元素的表达式。jQuery 1.4开始，也可以传递一个字符串数组，用于查找多个元素。  
jQuery object ：一个用于匹配元素的jQuery对象  
element ：一个用于匹配元素的DOM元素。

### find(e|o|e) ###

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

参数:同上

### next(\[expr\]) ###

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。  
expr ：用于筛选的表达式

### nextAll(\[expr\]) ###

查找当前元素之后所有的同辈元素。

可以用表达式过滤  
expr：用来过滤的表达式

### nextUntil(\[e|e\]\[,f\]) ###

查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。

如果提供的jQuery代表了一组DOM元素，.nextUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了下面所有找到的同辈元素，但不包括那个选择器匹配到的元素。

如果没有选择器匹配到，或者没有提供参数，那么跟在后面的所有同辈元素都会被选中。这就跟用没有提供参数的 .nextAll()效果一样。  
\[expr\]\[,filter\]：  
expr: 用于筛选祖先元素的表达式。  
filter: 一个字符串，其中包含一个选择表达式匹配元素。  
\[element\]\[,filter\]：  
element: 用于筛选祖先元素的DOM元素。  
filter: 一个字符串，其中包含一个选择表达式匹配元素。

### offsetParent() ###

返回第一个匹配元素用于定位的父节点。

这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。

### parent(\[expr\]) ###

取得一个包含着所有匹配元素的唯一父元素的元素集合。

你可以使用可选的表达式来筛选。  
expr ：用来筛选的表达式

### parents(\[expr\]) ###

取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。  
expr ：用来筛选的表达式

### parentsUntil(\[e|e\]\[,f\]) ###

查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

如果提供的jQuery代表了一组DOM元素，.parentsUntil()方法也能让我们找遍所有元素的祖先元素，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个返回的jQuery对象里包含了下面所有找到的父辈元素，但不包括那个选择器匹配到的元素。  
\[expr\]\[,filter\]：  
expr: 用于筛选祖先元素的表达式  
filter: 一个字符串，其中包含一个选择表达式匹配元素。  
\[element\]\[,filter\]：  
element:用于筛选祖先元素的DOM元素  
filter: 一个字符串，其中包含一个选择表达式匹配元素。

### prev(\[expr\]) ###

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。  
expr：  
用于筛选前一个同辈元素的表达式

### prevall(\[expr\]) ###

查找当前元素之前所有的同辈元素

可以用表达式过滤。  
expr: 用于过滤的表达式

### prevUntil(\[e|e\]\[,f\]) ###

查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。

如果提供的jQuery代表了一组DOM元素，.prevUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了前面所有找到的同辈元素，但不包括那个选择器匹配到的元素。

如果没有选择器匹配到，或者没有提供参数，那么排在前面的所有同辈元素都会被选中。这就跟用没有提供参数的 .prevAll()效果一样。

参数：同上

### siblings(\[expr\]) ###

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。  
expr： 用于筛选同辈元素的表达式

### 配套代码 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="js/jquery.min.js"></script>
        <style>
            #parentDiv {
                border: 1px solid black;
                width: 500px;
                padding: 10px;
                position: relative;
            }
        </style>
    </head>
    
    <body>
        <p>我是parentDiv前面的p元素 111</p>
        <span>ppppp</span>
        <p>我是parentDiv前面的p元素 222</p>
        <div id="parentDiv">
            <p>我是parentDiv的子元素p 1 1 1</p>
            <div class="childDiv">
                <p>我是childDiv里面的子元素p</p>
                <h3>
                    我是h3 <span id="sp">我是childDiv H3里面的span</span>
                </h3>
            </div>
            <a href="">百度一下</a>
            <p>我是parentDiv的子元素p 2 2 2</p>
            <p>我是parentDiv的子元素p 3 3 3</p>
        </div>
        <p>我是parentDiv后面的p元素 111</p>
        <span>ppppp</span>
        <p>我是parentDiv后面的p元素 222</p>
        <p>我是parentDiv后面的p元素 333</p>
        <h3 id="endH3">我是h3</h3>
        <p>我是parentDiv后面的p元素 444</p>
        <script>
            /*  
                children([expr])    取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
                    没有参数: 获取所有的子元素
                    有参数: 获取符合条件的子元素
                其实我们完全可以使用子元素选择器来替代  parent > child 
            */
            // $("#parentDiv").children().css("border","2px solid green");
            // $("#parentDiv > *").css("border","2px solid green");
    
            // $("#parentDiv").children("p").css("border","2px solid green");
            // $("#parentDiv > p").css("border","2px solid green");
    
    
            /*  
                closest(expr|object|element)    从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。
                    closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
            */
            // $("#sp").closest("div").css("border","2px solid green");
    
            /*  
                find(expr|obj|ele)  搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
                其实我们完全可以使用后代选择器来替代    ancestor descendant 
            */
            // $("#parentDiv").find("p").css("border","2px solid green");
            // $("#parentDiv p").css("border","2px solid green");
    
            /*  
                next([expr])    取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
                    相当于相邻选择器    prev + next 
                nextAll([expr])     查找当前元素之后所有的同辈元素。
                    相当于兄弟选择器    prev ~ siblings 
                nextUntil([e|e][,f])    查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
            */
            // $("div").next().css("border","2px solid green"); // $("div + *").css("border","2px solid red");
            // $("div").next("p").css("border","2px solid green"); // $("div + p").css("border","2px solid red");
    
            // $("#parentDiv").nextAll().css("border","2px solid green");
            // $("#parentDiv").nextAll("p").css("border","2px solid green");
    
            // $("#parentDiv").nextUntil("#endH3").css("border", "2px solid green");
    
            /*  
                prev([expr])    取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
                prevAll([expr])     查找当前元素之前所有的同辈元素
                prevUntil([e|e][,f]) 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
            */
    
            /*  
                parent([expr])  取得一个包含着所有匹配元素的唯一父元素的元素集合。
                parents([expr]) 
                parentsUntil([e|e][,f]) 
            */
            // console.log($("#sp").parent());
            // console.log($("#sp").parents("div"));
            // console.log($("#sp").parentsUntil("body"));
    
            // offsetParent()   返回第一个匹配元素用于定位的父节点。
            // console.log($("#sp").offsetParent());
    
            // siblings([expr]) 
            // $("#parentDiv").siblings("span").css("border", "2px solid green");
        </script>
    </body>
    
    </html>

## 三、串联 ##

### add(e|e|h|o\[,c\]) ###

把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。

jQuery 1.4 中， .add()方法返回的结果将始终以元素在HTML文档中出现的顺序来排序，而不再是简单的添加。

jQuery 1.9 中， .add()方法返回的结果总是按照节点在document（文档）中的顺序排列。在1.9之前，如果上下文或输入的集合中任何一个以脱离文档的节点（未在文档中）开始，使用.add()方法节点不会按照document（文档）中的顺序排序。现在，返回的节点按照文档中的顺序排序，并且脱离文档的节点被放置在集合的末尾。  
expr： 一个用于匹配元素的选择器字符串。  
elements： DOM元素。  
html： HTML片段添加到匹配的元素  
jQuery object： 一个jqeruy对象增加到匹配的元素  
expr,context： expr:用于匹配元素并添加的表达式字符串，或者用于动态生成的HTML代码，如果是一个字符串数组则返回多个元素  
context:作为待查找的 DOM 元素集、文档或 jQuery 对象。

### andSelf() ###

加入先前所选的加入当前元素中

对于筛选或查找后的元素，要加入先前所选元素时将会很有用。

从jQuery1.8开始，.andSelf()方法已经被标注过时，在jQuery1.8和更高版本中应使用.addBack()。

我们认为对于“添加并返回”以前的结果集合这是一个更好的名字。新方法可以接受一个可选的选择器，该选择器可以用来过滤之前集合，将它添加到当前集合并返回。$(“section, aside”).children(“ul”).addBack(“aside”) 会根据他们在文档中的顺序，得到section与aside下所有ul子元素，外加所有aside元素。虽然.addSelf()在1.9中仍然可以使用，我们建议您尽快修改名称。如果使用.addSelf()，jQuery Migrate插件会提出警告。

### addBack() ###

添加堆栈中元素集合到当前集合，一个选择性的过滤选择器。

如上所述在讨论中的.end()， jQuery对象维护一个堆栈内部来跟踪匹配的元素集合的变化。当一个DOM遍历方法被调用时，新的元素集合推入到堆栈中。 如果还需要包含先前的元素集合，.addBack() 可以提供帮助。

### contents() ###

查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容

### end() ###

回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。