18/2/05.JQuery的学习(三)——使用过滤器
一、过滤
过滤是对JQuery对象所包含元素进行再筛选的操作；
1.类过滤hasClass()
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.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>
<title>title>
head>
<body>
<div class="blue">div>
<div class="red"> div>
<div class="green">div>
<div class="red pos"> div>
body>
html>运行结果：
2.下标过滤eq()
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
//使用下标过滤可以精确找出JQuery对象中指定下标位置的元素
$("div").eq(1).click(function() { //为第2个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>
<title>title>
head>
<body>
<div class="blue">div>
<div class="red"> div>
<div class="green">div>
<div class="red pos"> div>
body>
html>运行结果：
3.表达式过滤
①filter()
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
/*filter()方法是功能最为强大的表达式过滤器，同时也可以接收函数参数，
*并根据函数的返回值来确定要过滤的元素，可以是简单的选择符，也可以是复合型选择器*/
$("div").filter(".red").css("background-color", "red");
})
script>
<style type="text/css">
div {
height: 20px;
}
style>
<title>title>
head>
<body>
<div class="blue">class="blue"div>
<div class="red">class="red"div>
<div class="green">ass="green"div>
<div class="red pos">class="red pos"div>
body>
html>运行结果：
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
//使用filter()方法从$("p")所匹配的p元素集合中过滤出包含两个span子元素的标签，然后为这些元素定义红色背景
$("p").filter(function(index) {
return $("span", this).length == 2;
}).css("background-color", "red");
})
script>
<style type="text/css">
style>
<title>title>
head>
<body>
<p><span class="red">床前明月光，疑是地上霜。span>p>
<p><span>举头望明月，span><span>低头思故乡。span>p>
<p>独在异乡为异客，每逢佳节倍思亲。p>
<p>遥知兄弟登高处，遍插茱萸少一人。p>
body>
html>运行结果：
②has()
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
/*has()保留包含特定后代的元素，去掉那些不含有指定后代的元素
*在给定的JQuery对象中重新创建一组匹配的对象*/
$("p").has("span.red").css("background-color", "red");
})
script>
<style type="text/css">
style>
<title>title>
head>
<body>
<p><span class="red">床前明月光，疑是地上霜。span>p>
<p><span>举头望明月，span><span>低头思故乡。span>p>
<p>独在异乡为异客，每逢佳节倍思亲。p>
<p>遥知兄弟登高处，遍插茱萸少一人。p>
body>
html>运行结果：
4.判断
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
/*if()方法不直接过滤元素，仅作为一个检测工具判断JQuery对象是否包含特定条件的元素*/
if($("p").has("span"))
alert("当前jQuery对象中包含有span子元素");
})
script>
<title>title>
head>
<body>
<p><span class="red">床前明月光，疑是地上霜。span>p>
<p><span>举头望明月，span><span>低头思故乡。span>p>
<p>独在异乡为异客，每逢佳节倍思亲。p>
<p>遥知兄弟登高处，遍插茱萸少一人。p>
body>
html>运行结果：
5.映射
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
/*map()方法能够把JQuery对象中每个元素映射到一个新的JQuery对象中
* 通过map()方法把所有匹配的input元素的value属性值映射为一个新JQuery对象，然后
* 调用get()方法把JQuery对象包含值转换为数组，再调用数组的join()方法把集合元素
* 连接为字符串，最后调用JQuery的append()方法把这个字符串附加到标签的末尾 */
$("#submit").click(function() {
$("p").html("提交信息"
).append($("input").map(function() {
return $(this).val();
}).get().join("、 "));
return false;
})
})
script>
<title>title>
head>
<body>
<form action="#">
用户名<input type="text" name="name" value="zhangsan" /><br><br> 密码
<input type="password" name="password" value="12345678" /><br><br> 网址
<input type="text" name="url" value="http://www.baidu.com/" /><br><br>
<button id="submit">提交button>
form>
<p>p>
body>
html>运行结果：
6.清除
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
//not()方法能从JQuery对象中删除符合条件的元素，并返回清楚后的JQuery对象
$("#menu li").not(".home").css("color", "red"); //清除home类菜单项
})
script>
<title>title>
head>
<body>
<ul id="menu">
<li class="home">首页li>
<li>论坛li>
<li>微博li>
<li>团购li>
<li>博客li>
ul>
body>
html>运行结果：
7.截取
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
//slice()方法能够从Jquery对象中截取部分元素，并把这个被截取的元素集合装在一个新的JQuery对象中返回
$("#menu li").slice(2, 4).css("color", "red"); //截取第3、4个菜单项
})
script>
<title>title>
head>
<body>
<ul id="menu">
<li class="home">首页li>
<li>论坛li>
<li>微博li>
<li>团购li>
<li>博客li>
ul>
body>
html>运行结果：
二、查找
1.向下查找
①children()
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
//children()方法能够查找当前元素的所有或者部分子元素
$("#menu").children().css("text-decoration", "underline");
})
script>
<title>title>
head>
<body>
<ul id="menu">
<li class="home">首页li>
<li>论坛li>
<li>微博li>
<li>团购li>
<li>博客li>
ul>
body>
html>运行结果：
②contents()
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
//contents()方法不仅可以获取子元素，还可以获取文本节点和注释节点
$("#menu").children(".home").css("text-decoration", "underline");
})
script>
<title>title>
head>
<body>
<ul id="menu">
<li class="home">首页li>
<li>论坛li>
<li>微博li>
<li>团购li>
<li>博客li>
ul>
body>
html>运行结果：
③find()
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
//find()能够查找所有后代元素，而childrend()方法仅能够查找子元素
$(function() {
var j = $("body > div");
alert(j.children("div").length); //返回3个div元素
alert(j.find("div").length); //返回5个div元素
alert(j.contents().length); //返回7个元素，包括5个div元素，2个文本节点（空格）
})
script>
<title>title>
head>
<body>
<div>
<div>
<div>div>
<div> div>
div>
<div>div>
<div>div>
div>
body>
html>运行结果：
2.向上查找
①.parents()
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
//parents()方法能够查找所有匹配元素的祖先元素
$("img").parents().css({
"border": "solid 1px red",
"margin": "10px"
});
alert($("img").parents().length); //返回4，分别是span、div、body和html
})
script>
<style type="text/css">
img {
height: 200px;
}
style>
<title>title>
head>
<body>
<div>
<span>
<img src="img/bg.jpg" />
span>
<img src="img/bg.jpg" />
div>
body>
html>运行结果：
②parent()
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
/*parent()方法是对parents()方法的延伸，
*它可以取得一个包含着所有匹配元素的唯一父元素的元素集合*/
$("img").parent().css({
"border": "solid 1px red",
"margin": "10px"
});
$("img").parent().each(function() {
alert(this.nodeName)
}); //提示SPAN和DIV元素
})
script>
<style type="text/css">
img {
height: 200px;
}
style>
<title>title>
head>
<body>
<div>
<span>
<img src="img/bg.jpg" />
span>
<img src="img/bg.jpg" />
div>
body>
html>运行结果：
③parentsUntil()
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
/*parentsUntil()方法可以查找指定范围的所有祖先元素，
*相当于在parents()方法返回集合中截取部分祖先元素*/
$('li.l31').parentsUntil('.u1').css({
"border": "solid 1px red",
"margin": "10px"
});
})
script>
<title>title>
head>
<body>
<ul class="u1">一级菜单
<li class="l1">1li>
<li class="l2">2
<ul class="u2">二级菜单
<li class="l21">21li>
<li class="l22">22
<ul class="u3">三级菜单
<li class="l31">31li>
<li class="l32">32li>
<li class="l33">33li>
ul>
li>
<li class="item-c">Cli>
ul>
li>
<li class="l3">3li>
ul>
body>
html>运行结果：
4.offsetParent()
offsetParent()方法能够查找到当前元素最近的定位包含框
5.closest()
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
//closet()方法可以查找指定的父元素，它主要为事件处理而设计
$('li.l31').closest("ul").css({
"border": "solid 1px red",
"margin": "10px"
});
})
script>
<title>title>
head>
<body>
<ul class="u1">一级菜单
<li class="l1">1li>
<li class="l2">2
<ul class="u2">二级菜单
<li class="l21">21li>
<li class="l22">22
<ul class="u3">三级菜单
<li class="l31">31li>
<li class="l32">32li>
<li class="l33">33li>
ul>
li>
<li class="item-c">Cli>
ul>
li>
<li class="l3">3li>
ul>
body>
html>运行结果：
3.向前查找
①prev()
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
//prev()匹配前一个相邻的元素
$(".red").prev().css("border", "solid 1px red");
})
script>
<style type="text/css">
style>
<title>title>
head>
<body>
<h1>回乡偶书h1>
<h2>贺知章 h2>
<p class="blue">少小离家老大回，p>
<p>乡音无改鬓毛衰。p>
<p class="red">儿童相见不相识，p>
<p>笑问客从何处来。p>
body>
html>运行结果：
②prevAll()
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
//prevAll能够向前选取所有相邻的同辈元素
$(".red").prevAll("p").css("border", "solid 1px red");
})
script>
<style type="text/css">
style>
<title>title>
head>
<body>
<h1>回乡偶书h1>
<h2>贺知章 h2>
<p class="blue">少小离家老大回，p>
<p>乡音无改鬓毛衰。p>
<p class="red">儿童相见不相识，p>
<p>笑问客从何处来。p>
body>
html>运行结果：
③prevUntil()
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
//prevUntil()方法能够向前选取指定范围的相邻元素
$(".red").prevUntil("h1").css("border", "solid 1px red");
})
script>
<style type="text/css">
style>
<title>title>
head>
<body>
<h1>回乡偶书h1>
<h2>贺知章 h2>
<p class="blue">少小离家老大回，p>
<p>乡音无改鬓毛衰。p>
<p class="red">儿童相见不相识，p>
<p>笑问客从何处来。p>
body>
html>运行结果：
4.向后查找
①next()
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
//next()方法匹配后一个相邻的元素
$(".red").next("p").css("border", "solid 1px red");
})
script>
<style type="text/css">
style>
<title>title>
head>
<body>
<h1>回乡偶书h1>
<h2>贺知章 h2>
<p class="blue">少小离家老大回，p>
<p>乡音无改鬓毛衰。p>
<p class="red">儿童相见不相识，p>
<p>笑问客从何处来。p>
body>
html>运行结果：
②nextAll方法能够向后查找所有同辈元素
参考向前查找代码
③nextUnitl()能够向后查找指定范围的相邻同辈元素
参考向前查找代码
- 查找同辈元素
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
//siblings()方法可以查找所有兄弟元素，不管其位置在前还是在后
$(".red").siblings("p").css("border", "solid 1px red");
})
script>
<style type="text/css">
style>
<title>title>
head>
<body>
<h1>回乡偶书h1>
<h2>贺知章 h2>
<p class="blue">少小离家老大回，p>
<p>乡音无改鬓毛衰。p>
<p class="red">儿童相见不相识，p>
<p>笑问客从何处来。p>
body>
html>运行结果：
6.添加查找
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
//使用add()方法可以为查找的结果集添加新的查找内容
$(".red").siblings("p").add("h1,h2").css("border", "solid 1px red");
})
script>
<style type="text/css">
style>
<title>title>
head>
<body>
<h1>回乡偶书h1>
<h2>贺知章 h2>
<p class="blue">少小离家老大回，p>
<p>乡音无改鬓毛衰。p>
<p class="red">儿童相见不相识，p>
<p>笑问客从何处来。p>
body>
html>运行结果：
三.串联
1.合并JQuery对象
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
//$("div")和$("div").find("p")属于不同的JQuery对象
$("div").find("p").css({
"border": "solid 1px red",
"margin": "4px"
});
})
script>
<style type="text/css">
style>
<title>title>
head>
<body>
<div>
<p>少小离家老大回，乡音无改鬓毛衰。p>
<p>儿童相见不相识，笑问客从何处来。p>
div>
body>
html>运行结果：
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
//JQuery对象定义了addBack()方法帮助用户把前后Jquery对象合并在一起，形成一个新的JQuery对象
$("div").find("p").addBack().css({
"border": "solid 1px red",
"margin": "4px"
});
})
script>
<style type="text/css">
style>
<title>title>
head>
<body>
<div>
<p>少小离家老大回，乡音无改鬓毛衰。p>
<p>儿童相见不相识，笑问客从何处来。p>
div>
body>
html>运行结果：
2.返回JQuery对象
<html>
<head>
<meta charset="utf-8">
<script src="jquery/jquery-3.1.1.js" type="text/javascript">script>
<script type="text/javascript">
$(function() {
/*当调用find("p").css后，再调用end()方法返$("div")方法匹配的JQuery对象，
*而不是find方法所查找的JQuery*/
$("div").find("p").css({
"border": "solid 1px #fff",
"margin": "4px"
})
.end().css({
"background": "blue",
"color": "white",
"padding": "4px"
});
})
script>
<style type="text/css">
style>
<title>title>
head>
<body>
<div>
<p>少小离家老大回，乡音无改鬓毛衰。p>
<p>儿童相见不相识，笑问客从何处来。p>
div>
body>
html>
学习心得：
JQuery过滤器是一系列简单实用的JQuery对象方法，建立在选择器基础上对JQuery对象进行二次过滤。