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>