JQuery学习3(JQuery过滤器)

1、JQuery过滤器简介

jQuery过滤器是一系列简单、实用的jQuery对象方法,对jQuery对象所包含元素进行再筛选的操作。

jQuery过滤方法主要有以下8种:

 (1)类过滤

类过滤是根据元素的类特性进行过滤操作,使用hasClass()方法进行类过滤。

hasClass(className)

className表示类名,该方法主要判断jquery对象中的每个元素是否包含了指定类名。类过滤器仅仅是一个条件检测,无法过滤出符合指定类名的元素。

应用举例:实现鼠标点击类名含有“red”的<div>标签时,该标签作用摆动。

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">

	</style>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(
			function(){   //界面始化函数
				$("div").click(function()//为所有的div元素绑定单击事件
							   {
					if($(this).hasClass("red"))//只有类名为red的div元素才绑定系列动画
						{
							$(this)
							.animate({left:120})
							.animate({left:240})
							.animate({left:0})
							.animate({left:240})
							.animate({left:120});
						}
				}
				);
			}
		)
	</script>
	<style type="text/css">
		div{position: absolute;width: 100px;height: 100px;}
		.blue{background: blue;left: 0px;}
		.red{background: red;left: 120px;  z-index: 2;}
		.green{background: green;left: 240px;}
		.pos{top: 120px;}
	</style>
</head>

<body>
	<div class="blue"></div>	
	<div class="red"></div>
	<div class="green"></div>
	<div class="red pos"></div> <!--red pos为复合类,包含red和pos类-->
</body>	

 

(2)下标过滤器

下标过滤器可以精确找到jquery对象中指定下标位置的元素。

eq(index)

 index是一个整数值,从0开始。

 应用举例:对上例进行修改,指定第二个div元素有动画效果。

<script type="text/javascript">
		$(
			function(){   //界面始化函数
				$("div").eq(1).click(function()//为第二个div元素绑定单击事件
					   {
							$(this)
							.animate({left:120})
							.animate({left:240})
							.animate({left:0})
							.animate({left:240})
							.animate({left:120});
						}
				
				);
			}
		)
	</script>

(3)表达式过滤

filter()表达式过滤器可以接受字符串,也可以接收函数。

filter(expr | fn)

expr为表达式字符串,fn为函数

应用举例:对上例进行设置

<script type="text/javascript">
		$(
			function(){   //界面始化函数
				$("div").filter(".red,.blue").css("background-color","red");//将div元素集合中过滤出包含red类和blue类的元素,并将其设为红色背景
			}
		)
	</script>

2、查找

jQuery查找用来查找父集、同级或下级相关元素。主要有16种。

 (1)向下查找

1)children()

该方法用于查找当前元素的所有或部分子元素(仅能查找子元素)

children([expr])

 expr表示表达式字符串,如果省略则匹配所有的资源。

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">

	</style>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(
			function(){   //界面始化函数
				$("#menu").children().css("text-decoration","underline");//查找ul元素的所有子元素
			}
		)
	</script>
	
</head>

<body>
	<ul id="menu">
		<li class="home">首页</li>
		<li>公司介绍</li>
		<li>产品介绍</li>
		<li>技术服务</li>
		<li>招贤纳士</li>
		<li>联系方式</li>
	</ul>
</body>	

 

 2)contents()

该方法不仅可以获得子元素,还可以获取文本节点和注释节点等。

 3)find() 

该方法能够查找所有后代元素。

 (2)向上查找

1)parents()

该方法能够查找所有匹配元素的祖先元素。

parents([expr])

 expr省略将匹配所有元素的祖先元素。

3、串联 

(1)合并jQuery对象

使用addBack()方法,可以将不同的jQuery对象合并在一起,最后为他们定义统一的样式。

应用举例:使用find()方法获取div标签包含的p标签,然后通过addBack()方法将两个对象合并在一起。

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">

	</style>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(
			function(){   //界面始化函数
				$("div").find("p").addBack().css({"border":"solid 1px red","margin":"1px"});//将div和p对象链接在一起,为他们定义相同的样式
			}
		)
	</script>
	
</head>

<body>
	<div>
		<p>窗前明月光</p>
		<p>疑是地上霜</p>
	</div>
</body>	

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值