jQuery选择器能够模仿CSS和XPath语法,提供高效、准确匹配元素的方法,jQuery过滤器是一系列简单、实用的jQuery对象方法,建立在选择器基础上对jQuery对象进行二次过滤。在jQuery框架中,过滤器通过Sizzle.filter子类实现,包含过滤、查找和串联三类操作行为。
过滤是对jQuery对象所包含元素进行再筛选的操作,jQuery过滤方法主要包括8种。
过滤方法 | 说明 |
---|---|
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所指定位置的元素。