浅谈jQuery中find()与filter()两种方法联系与区别

最新推荐文章于 2024-03-19 17:24:48 发布
最新推荐文章于 2024-03-19 17:24:48 发布
阅读量655 收藏
点赞数
分类专栏： web前端 前端菜鸟 H5入门者 JavaScript探索者
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jnlong_vae/article/details/73136446
版权

首先，这两种方法都属于jQuery遍历函数方法，下面小编将分开浅谈一下这两种方法


find（）方法

我们通过W3C手册了解到，find（）方法的定义是获得当前元素集合中每个元素的后代，通过选择器、jQuery对象或元素来进行筛选的。

语法结构为：  .find（selector）

参数：selector   参数描述为：字符串值，包含供匹配当前元素集合的选择器表达式。


filter()方法

    filter（）方法将匹配元素集合缩减为匹配指定选择器的元素。

    语法结构为：  .filter（selector）

                                 参数描述为：字符串值，包含供匹配当前元素集合的选择器表达式。


下面我将通过一个实例来说明两者的区别于用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.9.0.min.js"></script>
		<style type="text/css">
			div{
				width: 200px;height: 100px;
				border: 1px solid #ccc;
			}
			div p{
				width: 100px;height: 50px;
				margin: 10px auto;
			}
		</style>
	</head>
	<body>
		<div>
			<p class="rain">测试1</p>
		</div>
		<div class="rain">
			<p>测试2</p>
		</div>
		
		<script type="text/javascript">
			var $find=$("div").find(".rain");
			$find.css("background-color","red");
			var $filter=$("div").filter(".rain");
			$filter.css("background-color","blue");
		</script>
	</body>
</html>


其运行结果如下图所示：


由此可见find（）会在div元素内寻找class为rain的元素，是对子集进行操作

而filter（）则是筛选div的class为rain的元素，是对自身集合元素进行筛选！



请叫我龙仔c
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaScript中的filter()方法和find()方法，以及获取两数组补集的解决方法
m0_57757602的博客
07-14 529
今天遇到一个需求，有两个数组（Array和arr），一个大数组Array，一个小数组arr，arr中的元素Array中都有，需求是在Array中去掉所有的arr，即获取????图中灰色部分 本来是想遍历然后一个一个的比，结果写了一大堆代码发现还是失败了（我果然是菜鸡），无奈开始找别的方法（我就知道是有的），发现了两个超好用的方法。 首先是filter()方法， filter() 方法会创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意：filter() 不会对空数组进
jQuery基础---filter()和find()
weixin_33800593的博客
10-18 154
这是jQuery里常用的2个方法。他们2者功能是完全不同的，而初学者往往会被误导。 首先 我们看.find()方法：现在有一个页面，里面HTML代码为;程序代码 &lt;div class="css"&gt;     &lt;p class="rain"&gt;测试1&lt;/p&gt;&lt;/div&gt;&lt;div class="rain"&gt;    
数组方法：filter()和find()的用法区别
qq_42362347的博客
09-27 1377
1.filter()用法详解 应用场景1：假定有一个对象数组A，获取数组中指定类型的对象放到B数组中。 var products = [ { name: "cucumber", type: "vegetable" }, { name: "apple", type: "fruit" }, { name: "orange", type...
JQuery filter()与find()的用法及实例
wjxbj的博客
03-29 621
　　JQuery的find()方法与filter()方法对于初学者来说容易混淆，在这里对这两个方法通过一个小例子来进行比较和说明，旨在了解这两种方法的区别。        一.find使用 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.d...
Jquery中filter()与Find()区别
tangtiantian520的专栏
04-24 459
filter():过滤DOM元素包装集，是指操作当前元素集，删除不匹配的元素，得到一个新的集合  如： $('div').filter('.div1');//选择div标签中class属性为div1的div元素  find():在当前选中元素的上下文中找到符合条件的后代，返回的是子元素  如： $('div').find('em');//选择div标签中的em标签的元素 
数组的方法find和filter的区别
最新发布
weixin_45128657的博客
03-19 276
语法： 示例:
Jquery中find与each方法用法实例
12-08
在jQuery库中，`find()`和`each()`是两个非常重要的方法，它们分别用于查找元素和遍历元素集合。下面将详细介绍这两个方法的用法及其在实际开发中的应用。 一、`find()`方法 `find()`方法允许你在已选元素的后代中...
Jquery find与filter函数区别 说明
10-29
基本是find子元素找，filter是平级找
浅谈jquery中next与siblings的区别
10-21
下面小编就为大家带来一篇浅谈jquery中next与siblings的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js过滤数组的filter用法（附与find的区别）
风海洋的博客
12-02 1272
这时就可以使用 filter 方法，注意本文讲的这个 filter 是数组的一个方法，而不是组件中的filters:{}，开发者可自行在组件 filters：{} 中加入筛选函数去转换格式。如图所示，countryOptions 是要进行筛选的一个数组，它有一个 filter 方法，item 则是countryOptions 里的每一个子项，filter 会遍历这个数组，将满足 item.value === "C" 的子项拿出来放在 filters1 数组中，直到筛选出所有满足条件的子项才结束，
find、filter、findIndex、indexOf、map、forEach、reduce区分
weixin_42283818的博客
04-11 996
find返回的是只能使用，不能用于find()方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
find 和 filter 的区别
xibozi的博客
12-16 4666
ES6为Array增加了find()，findIndex函数。find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined，而findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。 find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined。 findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。 他们的都是一个查找回调函数。 查找函数有三个参数。 value：每一次迭代查找的数组元素。 index：每一次
jQuery中find()方法和filter()方法的区别
jueshengtianya的专栏
09-04 1630
jQuery官方的API这样说明filter和find函数： filter(selector): Description: Reduce the set of matched elements to those that match the selector or pass the function’s test. find(selector): Descri
【jquery】find() 方法,filter()方法和children()方法
weixin_30668887的博客
10-24 138
1,find() 方法 找到的是 所有的后代元素,即是子孙元素 2,filter()方法 这个方法通常会和find()方法比较.filter()方法 过滤的是集合本身.举个例子$('p').find('.tag'); $('p').filter('.tag'); 有什么区别呢,第一行语句是在p标签下面的子元素去找是否有类为tag的元素.返回的元素若不为...
2022-06-19 jQuery遍历方法:find()方法遍历当前元素的符合条件的后代元素
GAARA
06-19 379
定义&语法 find() 方法返回被选元素的后代元素(包括子节点和孙节点等) 语法: $(selector).find(filter); *filter是过滤条件不可缺少, 也就是说想要选择Selector的全部后代也要带上星号,即: $(selector).find("*"); 才不会报错 示例:选取带有类名的后代 body (曾祖先节点) div (祖先节点) ul (直接父节点)
jQuery中filter()和find()的区别深入了解
这个少女IT男的博客
07-25 256
filter()过滤DOM元素包装集，是指操作当前元素集，删除不匹配的元素，得到一个新的集合  复制代码代码如下: $('div').filter('.div1');//选择div标签中class属性为div1的div元素  find()在当前选中元素的上下文中找到符合条件的后代，返回的是后代子元素  复制代码代码如下: $('div').find
jQuery中filter（）和find（）之间的区别
一名可爱的技术搬运工
05-20 213
filter（）和find（）方法都非常相似，除了前者适用于所有元素，而后者仅搜索子元素。 要简单 filter（）–搜索所有元素。 find（）–仅搜索所有子元素。 jQuery filter（）vs find（）示例 <html> <head> <script type="text/javascript" src="jquery-1.3...
jq中find()和children()的区别
weixin_38098192的博客
05-06 9114
find():返回匹配元素集合中每个元素的后代。参数：必选的，可以为字符串，jq对象或DOM元素。（字符串是指用于查找的表达式） children():返回匹配元素集合中每个元素的子元素。参数：可选的，字符串值，用以过滤子元素的表达式。 例子： &lt;table&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;t...
filter()、find()的用法
CathyLou的博客
08-24 1398
这是jQuery里常用的2个方法。 他们2者功能是全然不同的，而刚开始学习的人往往会被误导。 首先 我们看.find()方法： 如今有一个页面，里面HTML代码为; 程序代码 div class="css">      p class="rain">测试1p> div> div class="rain">      p>测试2p> div> 假设我们使
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值