<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筛选选择器</title>
<script src="js/jquery3.6.0.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: gray;
}
</style>
</head>
<body>
<div></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<script>
//jquery 筛选选择器
//语法 用法 描述
//:first $("li:first") 获取第一个li元素
//:last $("li:last") 获取最后一个li元素
//eq(index) $("li:eq(2)") 获取到的li元素中,选择索引号index从0开始
//:odd $("li:odd") 获取到的li元素中,选择索引号是奇数的元素
//:even $("li:even") 获取到的l元素中,选择索引号是偶数的元素
//parent() $("li").parent() 查找父级
//children(selector) $("ul").children("li") 相当于$('ul>li'),最近一级,查找子级
//find(selector) $("ul").find("li") 相当于$('ul li') 后代选择器
//siblings(selector) $(".first').siblings("li") 查找兄弟节点,但不包括自己
//nextAll([expr]) $(".first').nextAll() c查找当前元素之后的所有同辈元素
//prevAll([expr]) $(".first').prevAll() c查找当前元素之前的所有同辈元素
//hasClass(class) $('div').hasClass('protected') 检查当前元素是否含有某个特定的类,如果有则返回true
//eq(index) $("li").eq(2) 相当于$('li.eq(2)'),index从0开始
$(function () {
$('ul li:first').css('color', 'red')
$('ul li:last').css('color', 'red')
$('ul li:eq(2)').css('color', 'blue')
$('ol li:odd').css('color', 'orange')
$('ol li:even').css('color', 'brown')
})
</script>
</body>
</html>
//jquery 筛选选择器 //语法 用法 描述 //:first $("li:first") 获取第一个li元素 //:last $("li:last") 获取最后一个li元素 //eq(index) $("li:eq(2)") 获取到的li元素中,选择索引号index从0开始 //:odd $("li:odd") 获取到的li元素中,选择索引号是奇数的元素 //:even $("li:even") 获取到的l元素中,选择索引号是偶数的元素 //parent() $("li").parent() 查找父级 //children(selector) $("ul").children("li") 相当于$('ul>li'),最近一级,查找子级 //find(selector) $("ul").find("li") 相当于$('ul li') 后代选择器 //siblings(selector) $(".first').siblings("li") 查找兄弟节点,但不包括自己 //nextAll([expr]) $(".first').nextAll() c查找当前元素之后的所有同辈元素 //prevAll([expr]) $(".first').prevAll() c查找当前元素之前的所有同辈元素 //hasClass(class) $('div').hasClass('protected') 检查当前元素是否含有某个特定的类,如果有则返回true //eq(index) $("li").eq(2) 相当于$('li.eq(2)'),index从0开始