从jquery的过滤器.filter()方法想到的_jquery

最近发现了jquery的.filter()方法,这真是一个很强大的方法,最强大之处在于,他可以接受一个函数作为参数,然后根据函数的返回值判断,如果返回值是true,这个元素将被保留,如果返回值是false,这个元素将被剔除。这就是jquery选择器的过滤器。

空说无用,我们展示一下

复制代码 代码如下:

<body>
<p>你好啊,今天及多大了啊</p>
<p><span>为什么要告诉你</span></p>
</body>

如果我们要选择有一个<span>子元素的<p>元素,平常我都是这么写的

复制代码 代码如下:

$("p>span").parent();

现在借助于.filter()我们可以写成这个样子:

复制代码 代码如下:

$("p").filter(function(index){
return $(this).find("span").size();
});

虽然看起来有些麻烦,但是他提供了我们一种极其强大的自定义查找元素的功能,我们可以传递一个函数,然后借助jquery的隐式迭代,来实现查找。

这是目前我看到的jquery提供的最灵活的查找元素的方法。

时间: 2024-10-06 13:11:40

从jquery的过滤器.filter()方法想到的_jquery的相关文章

jQuery遍历DOM节点操作之filter()方法详解_jquery

本文实例分析了jQuery遍历DOM节点操作之filter()方法.分享给大家供大家参考,具体如下: .filter(selector) 此方法用于在匹配元素中按照选择器表达式进行筛选. 记住:使用此方法必须得传入选择器表达式参数,不然会报错"'nodeType' 为空或不是对象" 另外请注意这个filter方法和jquery中的find方法的区别: filter方法是对匹配元素进行筛选,而find方法是对匹配元素的后代元素进行筛选. 从jquery1.4版本开始,filter方法又添

jQuery中filter()方法用法实例_jquery

此方法能够筛选出与指定表达式或者方法返回值相匹配的元素或者元素集合. 语法结构一:筛选出与指定表达式匹配的元素集合. 复制代码 代码如下: $(selector).filter(expr) 参数列表: 参数 描述 expr 字符串值,用于筛选当前元素集合的选择器表达式. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=

JQuery的常用选择器、过滤器、方法全面介绍_jquery

1.jQuery对象转换成DOM对象 a. var $cr = $("#cr"); //jQuery对象 var cr=$cr[0]; //DOM对象 alert(cr.checked); //检测checkbox是否被选中了 b. var $cr=$("#cr"); //jQuery对象 var cr=$cr.get(0); //DOM对象 alert(cr.checked); //检测checkbox是否被选中了 2.DOM对象转换成jQuery对象 var c

分析了一下JQuery中的extend方法实现原理_jquery

很久没有发表帖子了,今天突然分析了一下JQuery中的extend方法实现原理.目的为了提高自己对JQuery的认识,也想了解JavaScript高手是如何编写JS的,如有不足请指正.谢谢! 下面是JQuery.extend方法源代码: 复制代码 代码如下: jQuery.extend = jQuery.fn.extend = function() {      var options, name, src, copy, copyIsArray, clone,          target =

jquery数组过滤筛选方法grep()简介_jquery

jquery中有个grep()方法用于数组元素过滤筛选,悲剧的是,平时我们用的api文档中找不到这个说明.查看官方说明:http://api.jquery.com/jQuery.grep/ grep()的使用方法: grep(array,callback,invert) array:待过滤数组; callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数,第一个是当前数组元素的值,一个是当前数组元素的下标,即元素索引值.此函数应返回一个布尔值.另外,此函数可设置为一个字符串,当设置

通过$(this)使用jQuery包装后的方法或属性_jquery

如果你要使用html元素本身的属性或方法就需要使用this,如果你要使用jQuery包装后的方法或属性就要$(this),一般则有如下的关系. 复制代码 代码如下: $(this)[0] == this; 上文的代码是要使用this的地方是要调用表单form的有reset方法,而这一方法jQuery没有包装支持,所以才有this.reset(),也可以使用$(this)[0].reset(); 关于什么时候使用二者?可以看如下例子: 复制代码 代码如下: <a href="http://s

动态加载jQuery的两种方法实例分析_jquery

本文实例讲述了动态加载jQuery的两种方法.分享给大家供大家参考.具体如下: 第一种方法参考本站之前有人发的代码,增加了加载检测: 第二种方法来自去年的12306刷票脚本. 第一种方法: function withjQuery(callback) { if(!(window.jQuery)) { var js = document.createElement('script'); js.setAttribute('src', 'https://dynamic.12306.cn/otsweb/j

jquery 遍历数组 each 方法详解_jquery

JQuery拿取对象的方式 $('#id') :通过元素的id $('tagName') : 通过元素的标签名 $('tagName tagName') : 通过元素的标签名,eg: $('ul li') $('tagName#id): 通过元素的id和标签名 $(':checkbox'):拿取input的 type为checkbox'的所有元素: Eg: <input type="checkbox" name="appetizers" value="

jQuery过滤选择器:not()方法使用介绍_jquery

jQuery(':not(selector)') 在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如:not(div a) and :not(div,a) 复制代码 代码如下: <p >"a">sdfsdfs</p> <p >"b">sdfsdfs</p> <p >"c">sdf