`

JQuery filter()与find()的用法及实例

阅读更多

  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>

        运行结果:

  • 大小: 16.6 KB
  • 大小: 18.2 KB
  • 大小: 22.8 KB
  • 大小: 35 KB
  • 大小: 49.5 KB
分享到:
评论

相关推荐

    jquery中filter方法用法实例分析

    同时,我们将对比 filter 方法与 find 方法的区别,以帮助大家更好地理解和运用这两个方法。 首先,filter 方法的基本用法是这样的: ```javascript $(selector).filter(filterExpression); ``` 在这里,`...

    《锋利的jQuery》实例源码.rar

    7. **遍历和过滤(Traversing and Filtering)**:jQuery提供了如`next()`, `prev()`, `siblings()`, `children()`, `find()`, `filter()`, `not()`等方法,用于遍历和过滤DOM元素。通过这些方法,可以更精确地定位...

    JQuery详解及应用实例(包含api文档)

    3. **遍历与过滤**:`.each()`遍历集合,`.filter()`过滤元素,`.find()`查找后代元素。 4. **事件处理**:`.bind()`绑定事件,`.unbind()`移除事件,`.trigger()`触发事件。 5. **Ajax增强**:`.load()`加载远程...

    非常经典的35个Jquery应用实例

    JQuery 是一个功能强大的 JavaScript 库,提供了许多实用的方法来选择和操作网页元素。在本文中,我们将探索 35 个经典的 JQuery 应用实例,涵盖了选择网页元素、链式操作、元素的操作等多个方面。 一、选择网页...

    jQuery基础知识filter()和find()实例说明

    本文将重点介绍jQuery中的两种常用方法——filter()和find(),并通过实例来展示它们各自的应用场景及区别,帮助初学者正确理解和使用这两种方法。 首先,我们要明确jQuery对象是一个封装了DOM元素的数组对象,而...

    jQuery经典例子大全

    `children()`, `siblings()`, `parent()`, `closest()`, `find()`等方法用于遍历和过滤DOM树。`filter()`, `not()`, `first()`, `last()`等则帮助筛选符合特定条件的元素。 7. **插件(Plugins)** jQuery拥有...

    JQuery的N个实例收藏、打包压缩

    9. **遍历和过滤**:`.each()`, `.not()`, `.first()`, `.last()`, `.filter()`, `.find()`等方法可以帮助我们更灵活地遍历和筛选DOM集合。 10. **实用工具方法**:如`.data()`, `.clone()`, `.empty()`, `.html()`...

    Jquery find与filter函数区别 说明

    ### Jquery `find` 与 `filter` 函数的区别 在jQuery中,`find` 和 `filter` 是两个非常常用的选择器方法,它们用于帮助开发者更精确地定位DOM树中的元素。下面将详细介绍这两个方法的功能、用法以及它们之间的区别...

    《锋利的jQuery》实例源码

    通过《锋利的jQuery》实例源码的学习,开发者不仅能理解jQuery的基本用法,还能深入探索高级特性和最佳实践,进一步提升JavaScript编程技能,实现更高效、更动态的网页交互。每一个实例都是一次动手实践的机会,帮助...

    jquery经典实例

    7. **遍历和筛选**: `$(selector).each()`, `$(selector).filter()`, `$(selector).find()`等方法帮助开发者高效地处理集合中的元素。 8. **链式操作**: jQuery的链式调用特性使得代码更加紧凑,例如`$(selector)....

    jQuery中end()方法用法实例

    所谓“破坏性”操作,指的是会改变当前jQuery对象集的操作,如find(), filter()等。 首先,要理解end()方法的功能,我们可以将它类比于编程语言中的“撤销”操作。在执行链式调用时,你可能会调用多个方法来筛选和...

    jQuery里filter()函数与find()函数用法分析

    本文实例讲述了jQuery里filter()函数与find()函数用法。分享给大家供大家参考。具体分析如下: $(“div .cont”); 等价于$(“div”).find(“.cont”) filter()函数是作用在集合的每一个对象($(这里是什么得到的就是...

    35个Jquery应用实例.docx

    【jQuery基础与应用实例】 jQuery 是一款非常流行的 JavaScript 库,以其简洁的API和强大的功能深受开发者喜爱。本文将深入探讨35个jQuery应用实例,帮助你更好地理解和掌握jQuery的核心特性。 1. **选择网页元素*...

    jquery示例代码

    - **遍历与筛选**:`each()`, `filter()`, `find()`, `siblings()`, `next()`, `prev()` 等方法帮助处理元素集合。 - **数据存储**:`data()` 方法允许在元素上存储和检索数据。 这个压缩包中的“javascript示例...

    35个Jquery应用实例.pdf

    在本文中,我们将深入探讨35个jQuery应用实例,以帮助理解其核心功能和常见用途。 1. **选择网页元素** jQuery的核心功能之一是选择页面上的元素。它支持CSS选择器,如`id`、`class`、`name`等,同时也提供特有的...

    jquery源码

    2. **过滤与查找(Filtering & Searching)**:通过`filter(selector)`, `find(selector)`等方法,可以筛选或查找满足条件的元素,提高代码的精确性。 **三、jQuery的Ajax** jQuery简化了Ajax交互,`$.ajax()`是最...

    JQuery操作select的实例代码

    删除选项,可以先通过`filter()`或`find()`找到目标`&lt;option&gt;`,然后用`remove()`移除: ```javascript selectBox.find('option[value="toBeDeleted"]').remove(); ``` ### 4. 遍历`&lt;option&gt;` 遍历所有`&lt;option&gt;`...

Global site tag (gtag.js) - Google Analytics