JQuery的find()方法与filter()方法对于初学者来说容易混淆,在这里对这两个方法通过一个小例子来进行比较和说明,旨在了解这两种方法的区别。
一.find使用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>find使用</title> <script src="lib/jquery/jquery-1.9.1.js"></script> </head> <body> <div class="css"> <p class="rain">测试1</p> </div> <div class="rain"> <p>测试2</p> </div> <script type="text/javascript"> $("div").find(".rain").css('color', '#FF0000'); //等价于:$("div .rain").css('color','#ff0000'); //也等价于:$(".rain","div").css('color','#ff0000'); </script> </body> </html>
运行结果:
问题:这里为什么“测试2”不变为红色?
find() 方法定义:它是获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。find()方法要注意的地方:find()方法是在当前元素集合内部查找,不包括自己。
上面例子中$("div")包含两个元素,第一个元素符合要求,但第二个元素div本身的class虽然是"rain",但其内部没有class=rain,所以不符合。
二.filter使用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>filter使用</title> <script src="lib/jquery/jquery-1.9.1.js"></script> </head> <body> <div class="css"> <p class="rain">测试1</p> </div> <div class="rain"> <p>测试2</p> </div> <script type="text/javascript"> $("div").filter(".rain").css('color', '#FF0000'); </script> </body> </html>
运行结果:
filter()方法定义:filter() 方法将匹配元素集合缩减为指定选择器的元素。意思就是对匹配元素的集合,用选择器测试每个元素本身(不是后代),符合选择器的元素包含在集合中,不符合的去掉(选择器就是起过滤作用),形成一个新的结果集。
在上面例子中:find()会在div元素内部(后代)寻找 class为rain 的元素。而filter()则是筛选div的class为rain的元素。一个是对它的子集操作,一个是对自身集合元素筛选。
再看两个w3school上filter()方法的例子:
例一:
<!DOCTYPE html> <html> <head> <style> div { width: 60px; height: 60px; margin: 5px; float: left; border: 2px white solid; } </style> <script type="text/javascript" src="lib/jquery/jquery-1.9.1.js"></script> </head> <body> <div></div> <div class="middle"></div> <div class="middle"></div> <div class="middle"></div> <div class="middle"></div> <div></div> <script> $("div").css("background", "#c8ebcc") .filter(".middle") .css("border-color", "red"); </script> </body> </html>
运行结果:
例二:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="lib/jquery/jquery-1.9.1.js"></script> </head> <body> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul> <script> $('li').filter(':even').css('background-color', 'red'); </script> </body> </html>
运行结果:
使用filter()方法的第二个形式是,通过函数而不是选择器来筛选元素。对于每个元素,如果该函数返回 true,则元素会被包含在已筛选集合中;否则,会排除这个元素。实例如下:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="lib/jquery/jquery-1.9.1.js"></script> </head> <body> <ul> <li><strong>list</strong> item 1 - one strong tag</li> <li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span> </li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> <li><strong>list item 8 </strong> - one strong tag</li> </ul> <script> $('li').filter(function(index) { return $('strong', this).length == 1; }).css('background-color', 'red'); </script> </body> </html>
运行结果:
相关推荐
同时,我们将对比 filter 方法与 find 方法的区别,以帮助大家更好地理解和运用这两个方法。 首先,filter 方法的基本用法是这样的: ```javascript $(selector).filter(filterExpression); ``` 在这里,`...
7. **遍历和过滤(Traversing and Filtering)**:jQuery提供了如`next()`, `prev()`, `siblings()`, `children()`, `find()`, `filter()`, `not()`等方法,用于遍历和过滤DOM元素。通过这些方法,可以更精确地定位...
3. **遍历与过滤**:`.each()`遍历集合,`.filter()`过滤元素,`.find()`查找后代元素。 4. **事件处理**:`.bind()`绑定事件,`.unbind()`移除事件,`.trigger()`触发事件。 5. **Ajax增强**:`.load()`加载远程...
JQuery 是一个功能强大的 JavaScript 库,提供了许多实用的方法来选择和操作网页元素。在本文中,我们将探索 35 个经典的 JQuery 应用实例,涵盖了选择网页元素、链式操作、元素的操作等多个方面。 一、选择网页...
本文将重点介绍jQuery中的两种常用方法——filter()和find(),并通过实例来展示它们各自的应用场景及区别,帮助初学者正确理解和使用这两种方法。 首先,我们要明确jQuery对象是一个封装了DOM元素的数组对象,而...
`children()`, `siblings()`, `parent()`, `closest()`, `find()`等方法用于遍历和过滤DOM树。`filter()`, `not()`, `first()`, `last()`等则帮助筛选符合特定条件的元素。 7. **插件(Plugins)** jQuery拥有...
9. **遍历和过滤**:`.each()`, `.not()`, `.first()`, `.last()`, `.filter()`, `.find()`等方法可以帮助我们更灵活地遍历和筛选DOM集合。 10. **实用工具方法**:如`.data()`, `.clone()`, `.empty()`, `.html()`...
### Jquery `find` 与 `filter` 函数的区别 在jQuery中,`find` 和 `filter` 是两个非常常用的选择器方法,它们用于帮助开发者更精确地定位DOM树中的元素。下面将详细介绍这两个方法的功能、用法以及它们之间的区别...
通过《锋利的jQuery》实例源码的学习,开发者不仅能理解jQuery的基本用法,还能深入探索高级特性和最佳实践,进一步提升JavaScript编程技能,实现更高效、更动态的网页交互。每一个实例都是一次动手实践的机会,帮助...
7. **遍历和筛选**: `$(selector).each()`, `$(selector).filter()`, `$(selector).find()`等方法帮助开发者高效地处理集合中的元素。 8. **链式操作**: jQuery的链式调用特性使得代码更加紧凑,例如`$(selector)....
所谓“破坏性”操作,指的是会改变当前jQuery对象集的操作,如find(), filter()等。 首先,要理解end()方法的功能,我们可以将它类比于编程语言中的“撤销”操作。在执行链式调用时,你可能会调用多个方法来筛选和...
本文实例讲述了jQuery里filter()函数与find()函数用法。分享给大家供大家参考。具体分析如下: $(“div .cont”); 等价于$(“div”).find(“.cont”) filter()函数是作用在集合的每一个对象($(这里是什么得到的就是...
【jQuery基础与应用实例】 jQuery 是一款非常流行的 JavaScript 库,以其简洁的API和强大的功能深受开发者喜爱。本文将深入探讨35个jQuery应用实例,帮助你更好地理解和掌握jQuery的核心特性。 1. **选择网页元素*...
- **遍历与筛选**:`each()`, `filter()`, `find()`, `siblings()`, `next()`, `prev()` 等方法帮助处理元素集合。 - **数据存储**:`data()` 方法允许在元素上存储和检索数据。 这个压缩包中的“javascript示例...
在本文中,我们将深入探讨35个jQuery应用实例,以帮助理解其核心功能和常见用途。 1. **选择网页元素** jQuery的核心功能之一是选择页面上的元素。它支持CSS选择器,如`id`、`class`、`name`等,同时也提供特有的...
2. **过滤与查找(Filtering & Searching)**:通过`filter(selector)`, `find(selector)`等方法,可以筛选或查找满足条件的元素,提高代码的精确性。 **三、jQuery的Ajax** jQuery简化了Ajax交互,`$.ajax()`是最...
删除选项,可以先通过`filter()`或`find()`找到目标`<option>`,然后用`remove()`移除: ```javascript selectBox.find('option[value="toBeDeleted"]').remove(); ``` ### 4. 遍历`<option>` 遍历所有`<option>`...