jQuery基础——使用过滤器—1过滤

最新推荐文章于 2024-04-26 16:47:03 发布

面相进程，面相对象

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量2.7k

点赞数 17

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_57575133/article/details/127695240

版权

8 篇文章 0 订阅

订阅专栏

jQuery选择器能够模仿CSS和XPath语法，提供高效、准确匹配元素的方法，jQuery过滤器是一系列简单、实用的jQuery对象方法，建立在选择器基础上对jQuery对象进行二次过滤。在jQuery框架中，过滤器通过Sizzle.filter子类实现，包含过滤、查找和串联三类操作行为。

1、过滤

过滤是对jQuery对象所包含元素进行再筛选的操作，jQuery过滤方法主要包括8种。

jQuery过滤方法
过滤方法	说明
eq(index)	获取第N个元素
hasClass(class)	检查当前的元素是否含有某个特定的类，如果有，则返回true
filter(expr)	筛选出与指定表达匹配的元素集合
filter(fn)	筛选出与指定函数返回值匹配的元素集合
is(expr)	用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
map(callback)	将一组元素转换成其他数组（不论是否元素数组）
has(expe)	保留包含特定后代的元素，去掉那些不包含有指定后代的元素
not(expr)	删除与指定表达式匹配的元素
slice(start,[end])	选取一个匹配的子集

类过滤就是根据元素的类特性进行过滤操作，jQuery使用hasClass()方法来实现类过滤，用法如下：

hasClass(className)

参数className是一个字符串，表示类名。该方法适合条件检测，判断jQuery对象中的每一个元素是否包含了指定类名，如果包含则返回true，否则返回false。

类过滤仅是一个条件检测，无法真正过滤符合指定类名的元素，使用下标过滤可以精确找出jQuery对象指定下标位置的元素。eq()方法用法如下：

eq(index)

参数index是一个整数值，从0开始，用来指定元素在jQuery对象中的下标位置。

表达式过滤是最强大的过滤工具，因为表达式具有较大的灵活性，只要表达式符合jQuery选择器语法形式，可以是简单的选择符，也可以是复合型选择器。

filter()方法是功能最为强大的表达式过滤器，同时也可以接收函数参数，并根据函数的返回值来确定要过滤的元素。用法如下：

filter(expr)
filter(fn)

参数expr表示jQuery选择器表达式字符串，fu表示函数。

filter()方法包含的参数函数能够返回一个布尔值，在这个函数内部将对每一个元素计算一次，工作原理类似$.each()方法，如果调用的这个参数函数返回false，则这个元素被删除，否则就会保留。

在这个参数函数中包含一个index参数（默认的），该参数存储当前对象在jQuery对象中的下标位置，在函数体内，this关键字指向当前元素对象，而不是jQuery对象。

由于参数函数可以实现各种复杂的计算和处理，所以使用filter(fn)比filter(expr)更为灵活，用户可以在参数函数中完成各种额外的任务，或者为每个元素执行添加附加行为和操作。

has()方法是一个轻便的过滤方法，用法没有filter()方法复杂，它保留包含特定后代的元素，去掉那些不含有指定后代的元素。has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。用法如下：

has(expr)

参数expr可以是一个jQuery选择器表达式，也可以是一个元素或者一组元素。提供的选择器会一一测试每个元素的后代，如果元素包含了与expr表达式相匹配的子元素，则保留该元素，否则就会删除该元素。

is()方法不直接过滤元素，仅作为一个检测工具判断jQuery对象是否包含特定条件的元素。用法如下：

is(expr)

参数expr为一个jQuery选择器表达式，用来筛选符合特定条件的元素。

该方法的工作原理：用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回false。实际上，filter()方法内部实际也是在调用这个函数，所以，filter()方法原有规则在这里也适用。

map()方法能够把jQuery对象中每个元素映射到一个新的jQuery对象中，用法如下：

map(callback)

参数callback表示回调函数，将在每个元素上调用，根据每次回调函数的返回值新建一个jQuery并返回。返回的jQuery对象可以包含元素，也可以是其他值，主要根据回调函数返回值确定。

not()方法能从jQuery对象中删除符合条件的元素，并返回清除后的jQuery对象，用法如下：

not(expr)

参数expr表示一个jQuery选择器表达式字符串，当然也可以是一个元素或者多个元素。

slice()方法能够从jQuery对象中截取部分元素，并把这个被截取的元素集合装在一个新的jQuery对象中返回，用法如下：

slice(start,[end])

参数start和end都是一个整数，其中start表示开始选取子集的位置，第一个元素是0.如果该参数为负数，则表示从集合的尾部开始选起。end是一个可选参数，表示结束选取的位置，如果不指定，则表示到集合的结尾，但是被截取的元素中不包含end所指定位置的元素。

关注