实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.层级选择器</title>
<style type="text/css">
.red {
color: red;
}
.green {
color: green;
}
</style>
</head>
<body>
<ul>
<li>最新电影{01}<a href="">立即播放</a></li>
<li>最新电影{02}<a href="">立即播放</a></li>
<li>最新电影{03}<a href="">立即播放</a></li>
<li>最新电影{04}<a href="">立即播放</a></li>
<li>最新电影{05}<a href="">立即播放</a></li>
<li>最新电影{06}<a href="">立即播放</a></li>
<li>最新电影{07}<a href="">立即播放</a></li>
<li>最新电影{08}<a href="">立即播放</a></li>
<li>最新电影{09}<a href="">立即播放</a></li>
<li>最新电影{10}<a href="">立即播放</a></li>
</ul>
</body>
</html>
<script type="text/javascript" src='./js/jquery-3.3.1.js'></script>
<script type="text/javascript">
//1.后代选择器：空格
$('li a').addClass('green')
//2.子元素选择器
$('ul > *').addClass('red')
//3.相邻兄弟选择器
$('li:nth-child(5) + li').addClass('green')
//4.全部兄弟选择器
$('li:nth-child(5) ~ li').addClass('green')
//5.直接选择第一个或最后一个
$('li:first-child').css('color','green')
$("li:last-child").css('color','red')
//first过滤器
$('li:first').css('color','red')
$("li:last").css('color','green')
//6.直接和种族元素
// $('li:nth-child(8)').css('color',"red")
//
// //jquety中元素的索引是从0开始
$('li:eq(8)').css('color','red')
//清除所有元素上已经添加的内联样式style属性
$('*').removeAttr('style')
//清除所有元素上的class属性
$('*').removeClass()
//将序号大于3的元素，文本颜色变成红色
$('li:gt(2)').addClass('red')
// 将序号小于8的元素元素文本颜色变成绿色
$('li:lt(7)').addClass('green')
//根据索引的特征来选择元素
//选择所有的偶数元素even
//清除所有元素上已经添加的内联样式style属性
$('*').removeAttr('style')
//清除所有元素上的class属性
$('*').removeClass()
//看上去是奇数的结构，实际上索引是偶数
$('li:even').addClass('red')
//看上去是偶数的结构，实际上索引是奇数
$('li:odd').addClass('green')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
