元素的筛选方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="yeye">
<div class="fa">
<p class="son">儿子
<p>孙子</p>
</p>
</div>
<div class="doc">
<p>哈哈</p>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="../jquery.min.js"></script>
<script>
$(function(){
// 1.父选择器
$('.son').parent();
$('.son').parents();
console.log($('.son').parent()); // 只选亲爸爸
console.log($('.son').parents()); // 选择所有的父代元素
//2.子代选择器
$('.fa').find('p'); // 选择所有指定的子代
$('.fa').children('p'); // 只选择最近一级子代,亲儿子
//3.兄弟选择器
$('.doc').siblings('div'); // 选择指定的兄弟节点,不包括自己
console.log($('.doc').siblings('div'));
$('fa').nextAll(); // 查找身后的所有兄弟节点
$('.doc').prevAll(); // 查找之前的所有兄弟节点
//4.自身是否包含某个节点,并返回值
$('.fa').hasClass('fa'); // 检查当前元素是否包含特定的类,如果包含返回true
console.log($('.fa').hasClass('fa'));
//5.查找指定的节点元素
$('.fa').eq(0);
console.log($('li').eq(5));
})
</script>
</body>
</html>