使用过滤器（一）：过滤

最新推荐文章于 2022-06-18 15:08:42 发布

无知的小菜鸡

最新推荐文章于 2022-06-18 15:08:42 发布

阅读量384

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_41897680/article/details/104493233

版权

jQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

过滤

类过滤
类过滤是根据元素的类特性进行过滤操作，jQuery使用hasClass()来实现类过滤。

hasClass(className)

className字符串，表示类名。用于判断jQuery对象中的每个元素是否包含了指定类名，如果包含则返回true，否则返回false
例：鼠标单继类名为red的div标签时，让它滑动

<div class="red"> </div>
<script type="text/javascript">
	$(function() {
		$("div").click(function() {
			if($(this).hasClass('red')) {
				$(this).animate({
					right: 240
				})
			}
		})
	})
</script>

 div必须设置position属性

下标过滤

eq(index)

参数index为一个整数值，从0开始，用来指定元素在jQuery对象中的下标位置

表达式过滤
表达式过滤是最强大的过滤工具，因为表达式具有较大的灵活性，只要表达式符号jQuery选择器语法形式，可以是简单的选择器，也可以是复合型选择器
1、filter()

filter(expr)  或  filter(fn)

参数expr表示jQuery选择器表达式字符串，fn表示函数；表达式可以多个，用逗号分隔

例：使用filter，将包含red类与blue类的div元素设置为红色背景

$('div').filter(".red,.blue").css("background", 'red')

例：将包含两个span子标签的p标签的背景设置成红色

<div>
	<p>床前明月光，疑是地上霜。</p>
	<p><span>举头望明月，</span><span>低头思故乡。</span></p>
</div>
<script type="text/javascript">
	$(function() {
		$('p').filter(function(index) {
			return $('span',this).length == 2
		}).css('background', 'red')
	})
</script>

$('span',this)：匹配当前元素内部的所有span元素
filter方法包含的参数函数能够返回一个布尔值，在这个函数内部对每个元素计算一次，如果返回false，这个元素将会被过滤掉
参数index（默认的），该参数存储在当前对象在jQuery对象中的下标位置。在函数体内，this关键字指向当前元素对象，而不是jQuery对象

2、has()

has(expr)

参数expr可以是一个jQuery选择器，也可以是一个元素或者一组元素。该选择器会一一测试，如果元素包含了与expr表达式相匹配的子元素，则将其保留，否则过滤

判断

is(expr)

参数expr为一个jQuery选择器表达式，用来筛选符合条件的元素，如果其中至少有一个元素符合这个条件就返回true，否则返回false。
filter内部实际上也是调用的这个函数

映射
map()方法能够把jQuery对象中每个元素映射到一个新jQuery对象中，用法如下：

map(callback)

参数callback表示回调函数，将在每个元素上调用，根据每次回调函数的返回值新建一个jQuery并返回。返回的jQuery对象可以包含元素，也可以是其他值，主要根据回调函数返回值确定

例：通过map函数把所有匹配的input元素的value属性值映射为一个新的jQuery对象，然后调用get()方法把jQuery对象包含值转化为数组，再调用数组的join方法把集合元素连接起来，最后用append方法把这个字符串附加到p标签末尾

<form action="#">
	用户名 <input type="text" value="Tom" /><br /> 密码 <input type="password" value="12345678" /><br />
	<input type="submit" value="提交" />
</form>
<p></p>
<script type="text/javascript">
	$(function() {
		$("input[type='submit']").click(function() {
			$('p').html('<h2>提交信息如下：</h2>').append($('input').map(function() {
				return $(this).val();
			}).get().join('、'))
			return false; //取消点击事件的默认行为
		})
	})
</script>

清除
not方法能从jQuery对象中删除符合条件的元素，并返回清除后的jQuery对象，用法如下：

not(expr)

参数expr表示一个jQuery选择器表达式字符串，也可以是一个元素或多个元素
例：通过not方法排除首页导航菜单，然后为其他菜单项定义统一样式

<ul id="menu">
	<li class="home">首页</li>
	<li>论坛</li>
	<li>微博</li>
	<li>博客</li>
</ul>
<script type="text/javascript">
	$(function(){
		$('#menu li').not('.home').css("color",'blue')
	})
</script>