jQuery基础——使用过滤器—2查找

        查找操作主要是以jQuery对象为基础，查找父级、同级或者下级相关元素，以便实现延伸筛选，增强对文档的控制能力。jQuery查找方法主要包括16种。

目录

1.1、向下查找 

1.2、向上查找 

1.3、向前查找 

1.4、向后查找

1.5、查找同辈元素

1.6、添加查找

1.1、向下查找 

DOM提供了三种访问后代节点的方法。

• 使用childNodes属性，通过该属性可以遍历所有子节点。
• firstChild和lastChild属性，可以找到第一个和最后一个子节点。
• 使用getElementByTagName()和getElementByID()方法获取后代元素。

 HTML5新添加了以下属性。

• childElementCount：返回子元素的个数，不包括文本节点和注释。
• firstElementChild：指向第一个子元素。
• lastElementChild：指向最后一个子元素。

 jQuery在这些方法的基础上封装了多个操作方法，简单介绍如下。

1.children()

        children()方法能够查找当前元素的所有或者部分子元素，用法如下：

children([expr])

        参数expr表示jQuery选择器表达式字符串，用以过滤子元素。该参数为可选，如果省略，则匹配所有的子元素。

2.contents() 

        contents()方法不仅可以获取子元素，还可以获取文本节点和注释节点等，用法如下： 

contents()

        该方法没有参数，功能等同于DOM的childNodes。

3.find()

        find()方法能够查找所有后代元素，而children()方法仅能够查找子元素。

1.2、向上查找 

        DOM使用parentNode属性可以访问父元素。不过jQuery提供了更多方法，方便用户访问不同层级的祖先元素。

1.parents()

        parents()方法能够查找所有匹配元素的祖先元素。用法如下：

parents([expr])

        参数expr表示jQuery选择器表达式字符串，用以过滤祖先元素。该参数为可选，如果省略，则将匹配所有元素的祖先元素。

2.parent()

        parent()方法是对parents()方法的延伸，它可以取得一个包含着所有的匹配元素的唯一父级元素的元素集合。具体用法如下：

parent([expr])

        参数expr表示jQuery选择器表达式字符串，用以过滤父元素。该参数为可选，如果省略，则将匹配所有元素的唯一父元素。

3.parentsUntil()

        parentsUntil()方法可以查找指定范围的所有祖先元素，相当于在parents()方法返回集合中截取部分祖先元素。用法如下：

parentsUntil([selector])

        参数selector表示jQuery选择器表达式字符串，用以确定范围的祖先元素。该参数为可选，如果省略，则将匹配所有祖先元素。

4.offsetParent()

        offsetParent()方法能查找到当前元素最近的定位包含框，用法如下：

offsetParent()

        该方法没有参数。offsetParent()方法仅对可见元素有效。

5.closest()

        closest()方法可以查找指定的父元素。它主要为事件处理而设计，对处理事件委派非常有用。用法如下：

closest(expr,[context])

        参数expr可以是字符串，也可以是数组，用以过滤元素的表达式，也可以传递一个字符串数组，用于查找多个元素。context是一个可选参数，表示一个元素，用来设置待查查找的DOM元素、文档或者jQuery对象，如果省略，则表示待查找所有祖先元素。
        closest()方法被解析时，首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没有找到则返回一个空的jQuery对象。与parents()方法不同，主要区分如下：

• closest()方法从当前元素开始匹配寻找，而parents()方法从父元素开始匹配寻找。
• closest()方法逐级向上查找，直到找到匹配选择器的元素后就停止，而parents()方法一直向上查找直到根元素。
• closest()方法返回0或1个元素，而parents()方法可能包含多个元素。

1.3、向前查找 

         DOM使用previousSiBling属性访问前一个兄弟节点，HTML5新增previousElementSiBling属性访问前一个相邻兄弟元素。jQuery提供多个方法向前访问不同类型的兄弟元素。

1.prev()

        虽然prev()和previousSiBling属性功能相同，但仅能够匹配前一个相邻的元素。用法如下：

prev([expr)

        参数expr表示jQuery选择器表达式字符串，用以过滤匹配元素。该参数为可选，如果省略，则将匹配所有上一个相邻的元素。

2.prevAll()

        prevAll()方法能够向前选取所有相邻的同辈元素。用法如下：

prevAll([expr])

        参数expr表示jQuery选择器表示式字符串，用以过滤匹配元素。该参数为可选，如果省略，则将匹配所有上面同辈元素。

3.prevUntil()

        prevUntil()方法能够向前选取指定范围的相邻元素。用法如下：

prevUntil([selector])

        参数selector表示jQuery选择器表达字符串，用以过滤匹配元素。该参数为可选，如果省略，则将匹配所有上面同辈元素。

1.4、向后查找

        DOM使用nextSiBling属性访问后一个兄弟节点，HTML5新增nextElementSibling属性访问后一个相邻兄弟元素。jQuery提供3个向后查找的方法，实现查找第一个、所有和指定范围的同辈元素。

1.next()

        next()方法与nextSibling属性功能相同，但是next()方法仅能够匹配后一个相邻的元素。用法如下：

next([expr])

        参数expr表示jQuery选择器表达式字符串，用以过滤匹配元素。该参数为可选，如果省略，则将匹配所有下一个相邻的元素。

2.nextAll()

        nextAll()方法能够向后查找所有同辈元素。用法如下：

nextAll([expr])

        参数expr表示jQuery选择器表达式字符串，用以过滤匹配元素。该参数为可选，如果省略，则将匹配所有下面的同辈元素。 

3.nextUntil()

        nextUntil()方法能够向后查找指定范围的相邻同辈元素。用法如下：

nextUntil([selector])

         参数selector表示jQuery选择器表达式字符串，用以过滤匹配元素。该参数为可选，如果省略，则将匹配所有下面的同辈元素。

1.5、查找同辈元素

        使用sibling()方法可以查找所有兄弟元素，不管其位置在前还是在后。用法如下：

sibling([expr])

         参数expr表示jQuery选择器表达式字符串，用以过滤匹配元素。该参数为可选，如果省略，则将匹配所有同辈兄弟元素。 

1.6、添加查找

        使用add()方法可以为查找的结果集添加新的查找内容。用法如下：

add(expr,[context])

        参数expr表示jQuery选择器表达式字符串，用于匹配元素并添加的表达式字符串，或者用于动态生成的HTML代码，如果是一个字符串数组则返回多个元素。context是一个可选参数，表示一个元素，用来设置待查查找的DOM元素、文档或者jQuery对象。

代码007普通

打赏 收藏 海报 链接