jquery-5 jQuery筛选选择器
一、总结
一句话总结：选择器加动态添加方法可以不用想方法名，这个简单方便。
1、筛选选择器有哪三种？
过滤 查找 串联
1.过滤
eq();
first();
last();
not();
slice();
2.查找
children();
find();
next();
nextAll();
parent();
prev();
prevAll();
siblings();
3.串联
add();
andSelf();
2、筛选选择器中的查找有哪几种？
子代 后代 邻接 兄弟 父亲 之前
children();
find();
next();
nextAll();
parent();
prev();
prevAll();
siblings();
3、筛选选择器中的过滤选择器有哪五种？
索引 第一个 最后一个 非 片段
eq();
first();
last();
not();
slice();
4、筛选选择器串联有哪两种？
增加和增加自己
add();
andSelf();
5、选择器和筛选的区别是什么？
使用this的时候选择器不好用，筛选比较好用
28 $('.div1').click(function(){
29 //使用筛选来实现
30 $(this).children('h1').css({'color':'#00f'});
31 });
6、jquery可以链式操作么？
可以
33 $('button').click(function(){
34 $(this).parent().parent().next().children().children().children().css({'color':'#00f'});
35 });
7、多选框反选怎么实现？
非checked属性
77 $('#unall').click(function(){
78 $(':checkbox').each(function(){
79 this.checked=!this.checked;
80 });
81 });
8、多选框全选怎么实现？
attr，checked属性
69 $('#all').click(function(){
70 $(':checkbox').attr({'checked':true});
71 });
二、jQuery筛选选择器
1、相关知识
筛选:
1.过滤
eq();
first();
last();
not();
slice();
2.查找
children();
find();
next();
nextAll();
parent();
prev();
prevAll();
siblings();
3.串联
add();
andSelf();
2、代码
选择器和筛选的区别（这里用选择器不好实现）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
.div1{
background: #ccc;
cursor: pointer;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div class='div1'>
<h1>aaaaaaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaaaaaa</h1>
<div class="div2">
<h1>bbbbbbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbbbbbb</h1>
</div>
</div>
</body>
<script>
$('.div1').click(function(){
//使用筛选来实现
$(this).children('h1').css({'color':'#00f'});
});
</script>
</html>
siblings前后所有兄弟
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<h1>cccccccccccccccccccccc</h1>
<h1>cccccccccccccccccccccc</h1>
<div class='div1'>
<h1>aaaaaaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaaaaaa</h1>
<div class="div2">
<h1>bbbbbbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbbbbbb</h1>
</div>
</div>
<h1>cccccccccccccccccccccc</h1>
<h1>cccccccccccccccccccccc</h1>
</body>
<script>
$('.div1').siblings().css({'color':'#00f'});
</script>
</html>
prevAll前面所有兄弟
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<h1>cccccccccccccccccccccc</h1>
<h1>cccccccccccccccccccccc</h1>
<h1>cccccccccccccccccccccc</h1>
<h1>cccccccccccccccccccccc</h1>
<div class='div1'>
<h1>aaaaaaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaaaaaa</h1>
<div class="div2">
<h1>bbbbbbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbbbbbb</h1>
</div>
</div>
</body>
<script>
$('.div1').prevAll().css({'color':'#00f'});
</script>
</html>
nextAll后面所有兄弟
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div class='div1'>
<h1>aaaaaaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaaaaaa</h1>
<div class="div2">
<h1>bbbbbbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbbbbbb</h1>
</div>
</div>
<h1>cccccccccccccccccccccc</h1>
<h1>cccccccccccccccccccccc</h1>
<h1>cccccccccccccccccccccc</h1>
<h1>cccccccccccccccccccccc</h1>
</body>
<script>
// $('.div1').children('h1').css({'color':'#00f'});
$('.div1').nextAll().css({'color':'#00f'});
</script>
</html>
find后代查找
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div class='div1'>
<h1>aaaaaaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaaaaaa</h1>
<div class="div2">
<h1>bbbbbbbbbbbbbbbbbbbbb</h1>
<h1>bbbbbbbbbbbbbbbbbbbbb</h1>
</div>
</div>
</body>
<script>
// $('.div1').children('h1').css({'color':'#00f'});
$('.div1').find('h1').css({'color':'#00f'});
</script>
</html>
next关系查找
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div>
<div>
<button>打小金</button>
</div>
</div> <div>
<div>
<div>
<h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
<p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
<h1>bbbbbbbbbbbbbbbbbbbbbb</h1>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbb</p>
</div>
</div>
</div> </body>
<script>
$('button').click(function(){
$(this).parent().parent().next().children().children().children().css({'color':'#00f'});
});
</script>
</html>
parent、prev、children关系查找
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div>
<div>
<div>
<h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
<p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
<h1>bbbbbbbbbbbbbbbbbbbbbb</h1>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbb</p>
</div>
</div>
</div> <div>
<div>
<button>打小金</button>
</div>
</div>
</body>
<script>
$('button').click(function(){
$(this).parent().parent().prev().prev().children().children().children().css({'color':'#00f'});
});
</script>
</html>
andSelf串联上自己
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div>
<h1>aaaaaaaaaaaaaaaaa</h1>
<h1>aaaaaaaaaaaaaaaaa</h1>
</div>
<h1>bbbbbbbbbbbbbbbbbbb</h1>
</body>
<script>
$('div').next().andSelf().css({'color':'#00f'});
</script>
</html>
add组合串联筛选
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<h1>00001</h1>
<h1>00002</h1>
<hr>
<p>00003</p>
<p>00004</p>
</body>
<script>
$('h1').add('p').css({'color':'#00f'});
</script>
</html>
过滤筛选
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<h1>00001</h1>
<h1>00002</h1>
<h1>00003</h1>
<h1>00004</h1>
<h1>00005</h1>
</body>
<script>
// $('h1').eq(0).css({'color':'#00f'});
// $('h1').not($('h1').eq(0)).css({'color':'#00f'});
// $('h1').first().css({'color':'#00f'});
// $('h1').last().css({'color':'#00f'});
$('h1').slice(1).css({'color':'#00f'});
</script>
</html>
checked找到所有被选中的人
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<form action="">
<p>选择爱好:</p>
<p>
<label>
<input type="checkbox" name="" id=""> 打篮球
</label>
</p>
<p>
<label>
<input type="checkbox" name="" id=""> 踢足球
</label>
</p>
<p>
<label>
<input type="checkbox" name="" id=""> 去游泳
</label>
</p>
<p>
<label>
<input type="checkbox" name="" id=""> 去游泳
</label>
</p>
<p>
<label>
<input type="checkbox" name="" id=""> 去游泳
</label>
</p>
<p>
<label>
<input type="checkbox" name="" id=""> 去游泳
</label>
</p>
<p>
<label>
<input type="checkbox" name="" id=""> 去游泳
</label>
</p>
<p>
<label>
<input type="checkbox" name="" id=""> 去游泳
</label>
</p>
</form>
<p>
<button id='all'>全选</button>
<button id='notall'>全不选</button>
<button id='unall'>反选</button>
<button id='ok'>ok</button>
</p>
<hr>
<div class='info'> </div>
</body>
<script>
$('#all').click(function(){
$(':checkbox').attr({'checked':true});
}); $('#notall').click(function(){
$(':checkbox').attr({'checked':false});
}); $('#unall').click(function(){
$(':checkbox').each(function(){
this.checked=!this.checked;
});
}); $('#ok').click(function(){
$(':checked').parent().parent().appendTo('.info');
});
</script>
</html>