> > 14-2层级与特定选择器
gebilaowang

14-2层级与特定选择器

14-2层级与特定选择器

韧淖袭恢客晾扩祈叮暗杯坍芳

电影列表结构：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></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>

执行：

14-2层级与特定选择器第1张

1. 后代选择器: 空格

将li里面所有的a标签颜色变为绿色

js代码： 

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$("li a").addClass('green')
</script>

执行：

14-2层级与特定选择器第2张

2.子元素选择器 > 所有子元素 *

代码：ul > *   即ul下的所有子元素li   不包括孙元素a

仅ul的子元素li前景色变成红色,孙元素<a>文本不会变化
将ul下的所有子元素li颜色变为红色：

js : 

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$("ul > *").addClass('red')
</script>

执行:

14-2层级与特定选择器第3张

如果要将ul下的所有元素变为红色，可以这么写：

js: 

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$("ul  *").addClass('red')
</script>

执行：

14-2层级与特定选择器第4张

3. 相邻兄弟元素 +

将第5个li变为红色（注意编号是从1开始的） 

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$("li:nth-child(5)").addClass('red')
</script>

执行：

14-2层级与特定选择器第5张

将第5个li下面的li(第6个li)颜色变为红色：相邻兄弟选择器+ 

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$("li:nth-child(5)+li").addClass('red')
</script>

执行：

14-2层级与特定选择器第6张

4. 全部兄弟元素 ~

全部兄弟选择器:

将第5个li后面的所有li变为红色： 

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$("li:nth-child(5) ~ li").addClass('red')
</script>

执行：

14-2层级与特定选择器第7张

5.直接选择第一个和最后一个：

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$("li:first-child").addClass('red')
	$("li:last-child").addClass('red')

</script>

执行：

14-2层级与特定选择器第8张

jquery中直接使用过滤器选择第一个和最后一个元素：

first,last:过滤器 

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$("li:first").addClass('red')
	$("li:last").addClass('red')

</script>

执行：

14-2层级与特定选择器第8张

8.直接选中元素：

将第8个Li变为红色 

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$("li:nth-child(8)").addClass('red')

</script>

执行；

14-2层级与特定选择器第10张

使用eq改写，注意jquery中数组索引从0开始  css从1开始 

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$("li:eq(8)").addClass('red')

</script>

执行：

14-2层级与特定选择器第11张

去除样式：

1.清除所有元素上已经添加的内联样式style属性

$(“*”).removeAttr(‘style’)去除通过.css设置的所有样式

2.清除所有元素上的class属性
$(‘*’).removeClass()：去除通过addClass()设置的所有样式

如：

仅去掉li,不包括li下面的a,链接仍为绿色
$(‘li’).removeClass()

选中序号大于3的所有元素,注意从0开始计算

将序号大于(gt)3的li设置为红色 

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$("li:gt(2)").addClass('red')
</script>

执行：

14-2层级与特定选择器第12张

选中序号小于8的所有元素

将小于8的li变为红色： 

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$("li:lt(7)").addClass('red')
</script>

执行：

14-2层级与特定选择器第13张

选中所有序号为偶数的元素even

因为是从0开始,0,2,,4,所以看上去像是选择了奇数,要注意 

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$("li:even").addClass('red')
</script>

执行：

14-2层级与特定选择器第14张

选中所有序号为奇数的元素odd 

<script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$("li:odd").addClass('red')
</script>

执行：

14-2层级与特定选择器第15张

吉绥惦健屁壤阔坪写颅办健皆