筛选中方法他们的功能 与 过滤选择器有的类似，用法不一样，筛选中主要是方法
1.1筛选方法
children(selector) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
查找 匹配元素 中的 子元素 的集合
$("ul").children("li"); 相当于$("ul>li"),子类选择器
find(selector) 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
查找 匹配元素 中的 子元素 的集合
find() 这个方法里一定要写参数，如果不写，元素找不到
$("ul").find("li") 相当于$("ul li"),后代选择器
siblings(selector) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
$("#first").siblings("li");查找兄弟节点，不包括自己
<script src="./js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function(){
// 不写参数，它 找到的 是 父元素中的所有的孩子
var r1=$('#list').children()
console.log(r1);
// 写参数，它 找到的 是 父元素中的指定的孩子
var r2=$('#list').children('li')
console.log(r2);
// find() 这个方法里一定要写参数，如果不写，元素找不到
$r3=$('#list').find('span')
console.log($r3);
//查找兄弟节点，不包括自己
// siblings() 这个方法里一定要写参数，如果不写，元素找不到
$r4=$('#list').find('span').siblings('em')
console.log($r4);
})
</script> <ul id="list">
<li>aaa</li>
<li>bbb</li>
<span>ccc</span>
<span>ddd</span>
<em>eee</em>
<i>fff</i>
</ul>预览：
parent()
$("#first").parent();查找父亲, 你找的这个元素，他是被放置在一个数组中的，我们理解为他是一个集合。
官网上翻译的意思是：取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents() 查找祖先元素。 他可以把你 的所有的 祖先元素 都找到。
$r3 = $('.menu').parents();
console.log($r3);如果你想找某一个祖先，你要指定这个祖先是谁。
$r4 = $('.menu').parents("#box");
console.log($r4);<div id="box">
<div id="parent">
<ul class="menu">
<li><a href="">aaa</a></li>
<li><a href="">bbb</a></li>
<li><a href="">ccc</a></li>
</ul>
<ul class="nav">
<li><a href="">ddd</a></li>
<li><a href="">eee</a></li>
<li><a href="">fff</a></li>
</ul>
</div>
</div><script src="./js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function(){
//我们真正想找到这个dom元素，必须取到数组 下标是0的这个位置上的内容，才能拿到这个父元素
$r1=$('.menu').parent()[0]
console.log($r1);
$r2=$('.nav').parent()
console.log($r2);
//查找祖先
$r3=$('.menu').parents();
console.log($r3);
$r4=$('.menu').parents('#box');
console.log($r4);
// $('.txt').find('p.cur').next().css('color','red')
$('.txt').find('p.cur').prev().css('color','red')
})
</script>预览：
next() $("li").next(); 找下一个兄弟，紧邻的后面同辈元素的元素集合。
使用有两个理解和写法：
第1种理解和写法：
<div class="txt">
<p>Hello</p>
<p>Hi</p>
<p>Hello again</p>
<p>Hi again</p>
</div>
<script src="./js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function(){
$('.txt').find('p').next().css('color','red')
})
</script>预览：
第2种理解和写法：
<div class="txt">
<p>Hello</p>
<p class="cur">Hi</p>
<p>Hello again</p>
<p>Hi again</p>
</div>
<script src="./js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function(){
$('.txt').find('p.cur').next().css('color','red')
})
</script>预览：
prev() $("li").prev(); 找上一个兄弟
也有两种理解：
第1种理解和写法：
//如果有很多p，浏览器渲染 找到的是其中p，prev() 找到的是这个p前面的所有的同辈兄弟节点
$(".txt").find('p').prev().css('color','red');预览：
第2种理解和写法：
//如果你在找 p的时候，指定的是某一个p，prev() 找到的就是 这个指定p后面紧挨他的上一个兄弟节点
$(".txt").find('p.cur').prev().css('color','red');预览：
index() 返回当前元素在所有兄弟元素里面的索引，搜索匹配的元素，并返回相应元素的索引值，从0开始计数。
eq(N) 获取第N个元素。 N代表索引。
<ul id="nav">
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
<script src="./js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function(){
$i=$('#baz').index()
console.log($i);
$('#nav li').eq(1).css('color','blue')
})
</script>预览：
is() 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
找一个内容，在还是不在，如果在 ，就返回 true。如果不在 ，就返回false。
<div class="container">
<form>
<input type="checkbox" value="登山">登山
<input type="checkbox" value="阅读">阅读
<input type="checkbox" value="听歌">听歌
</form>
</div>
<script src="./js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function(){
if($("input[type='checkbox']").parent().is('form')){
alert('存在')
}else{
alert('不存在')
}
})
</script>预览：
注意：
其中 == true 可以省略不写。
案例分析
1.2 jQuery实现全选、全不选、反选
借助bootstrap快速编写页面
Bootstrap中文网 | bootstrap 4 中文文档
prop() 获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。
给某个标签的设置指定的属性。
使用 prop() 方法获取属性。xxx.prop("checked")
使用 prop() 方法设置属性值。xxx.prop("checked",true)
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<script src="./bootstrap/js/jquery-3.5.1.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<div class="container">
<table class="table">
<thead>
<tr>
<th scope="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="allchecked">
<label for="">全选</label>
</div>
</th>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label for=""></label>
</div>
</th>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label for=""></label>
</div>
</th>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="col">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label for=""></label>
</div>
</th>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<div class="rows">
<button type="button" class="btn btn-primary" id="checkedall">全选</button>
<button type="button" class="btn btn-secondary" id="checkedno">全不选</button>
<button type="button" class="btn btn-success" id="checkedreverse">反选</button>
<button type="button" class="btn btn-light" id="checkedswitch">全选/全不选</button>
</div>
</div>
<script>
$(function(){
//全选
$('#checkedall,#allchecked').click(function(){
//找到页面中type='checkbox'的input,然后给他的checked属性,赋值为true,true代表复选框被选中了
$("input[type='checkbox']").prop("checked",true)
})
//全不选
$("#checkedno").click(function(){
// false代表复选框的√被去掉了
$("input[type='checkbox']").prop("checked",false)
})
//反选
$("#checkedreverse").click(function(){
//each遍历
//去指定的tbody里找复选框,对这些复选框进行遍历和相关操作
$(".table tbody").find("input[type='checkbox']").each(function(){
$(this).prop("checked", !$(this).prop("checked"))
})
})
//全选/全不选(通过点击一个按钮，实现选或不选的切换操作)
$("#checkedswitch").click(function(){
//去指定的tbody里找复选框
//找到复选框，看复选框有没有checked属性
$chbox=$(".table tbody").find("input[type='checkbox']")
$chbox.is(":checked") ? $chbox.prop("checked",false):$chbox.prop("checked",true)
})
})
</script>预览：
1.3 prop 和attr 方法的区别
prop用于判断只有true和false的属性的属性节点，其只返回true或false
attr用于判断 当前对象的属性节点名称， 只会返回 此节点名称或者undefined，不能返回 true 或false
<input type="text" id="uname" value="小马过河">
<br>
<input type="checkbox" name="hobby" id="hobby1">阅读
<br>
<input type="checkbox" name="hobby" id="hobby2">旅游
<script src="./js/jquery-3.5.1/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function(){
//attr()和prop()方法的区别
//attr来访问对象获得属性
$v=$('#uname').attr('value')
console.log($v);
//设置
// $('#uname').attr('disabled',true)
$('#uname').prop('disabled',true)
$("#hobby1").prop('checked',true)
$("#hobby1").attr('checked',true)
//获取
//返回true或false
$r1=$('#hobby1').prop('checked')
console.log($r1);
//返回节点名称或undefined
$r2=$('#hobby1').attr('checked')
console.log($r2);
})
</script>预览：
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
