jq常用过滤器_jQuery

这次给大家带来jQuery$. 和 $().使用详解，jQuery$. 和 $().使用的注意事项有哪些，下面就是实战案例，一起来看一下。 像我这种没有经过系统学习的人总是有这样的问题:($就是jQuery的别称而jQuery就是jQuery库提供的...

这次给大家带来jQuery过滤方法filter()使用详解，jQuery过滤方法filter()使用的注意事项有哪些，下面就是实战案例，一起来看一下。

现在有这样一种需求,需要选出所有有背景图片的元素.

这个问题有点棘手.我们无法使用选择表达式来完成这个问题了.

使用jQuery的DOM过滤方法filter(),可以根据函数中表达的任何条件选择元素.

jQuery中的过滤器方法允许传递一个字符串(也就是选择器表达式)作为参数.

或者传递的是一个函数.它的返回值将定义某个元素是否被选中.

传递的函数将对当前选择集中的每个元素运行.

当函数返回假时,对应的函数就从选择集中被删除掉.每当返回值为真的时候,对应的元素

不受影响.jQuery('*').filter(function(){

return !!jQuery(this).css('

background

');

});

上述代码选择所有具有背景图片的元素.

初始集合是所有元素(*).然后以一个函数为参数调用filter().

这个函数在每个集合上进行是否有属性background属性的判断,

如果有,则保留.否则,则在结果集中删除这个元素.

你所看到的!! 是javascript中间任何undefined ,空类型,当然还有false.

如果函数调用返回的是这些值,那么函数返回false,从而在集合中删除

没有background属性的元素.

实际上,!!并不是必要的.因为jQuery将把这些返回值转化为Boolean类型.但是保留仍然是一个好的主意.

这样任何人看到你的代码的时候,都能绝对肯定你的意图.(这有助于代码的可读性).

在传递个filter()的函数中,可以通过this关键字引用当前元素.

将它包含在jQuery函数中就变成了一个jQuery对象了.

this //常规的元素对象.

jQuery(this) //jQuery对象.

下面是激发你想象力的一些例子.jQuery('p').filter(function(){

var width = jQuery(this).width;

return width >100 && widht < 200;

});

//返回子元素有10个或者20个的元素.

jQuery('*').filter(function(){

var children = jQuery(this).childern().length;

return children ===10 || children ===20;

});

.c1{

background-color

: yellow;

}

.c2{

background-color: green;

}

p{

background-color: pink;

}

h3{

background-color: gray;

}

Bye Bye Beautiful

Nothing but the girl

The Lazy song

If I die young

New soul

jQuery(document).ready(function($) {

var ret = $('*').filter(function(index) {

return !$(this).css('background-color');

});

$.each(ret, function(index, val) {

$(val).css('background-color','black');

});

});

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery操作表格的插件datatables如何应用

js/jquery解析json方法详解