收藏
批改状态：未批改
老师批语：
想让前端页面看起来舒服好看，酷炫，那么肯定要根据想要实现的效果进行样式添加，那么怎么样才能定位到你想要添加样式的位置，这个很关键了。
jQuery提供了简单的选择器方法让我们可以快速定位到想要的位置并快速添加样式。
对于选择器，种类很多，一般分为基本选择器和层级选择器
一般选择器：
1、标签选择器tag
2、类选择器：.
3、id选择器：#
4、通配符选择器：*
层级选择器：
1、后台选择器：空格
2、子元素选择器：>
3、相邻兄弟选择器：+
4、全部兄弟选择器：~
5、第一或者最后一个选择器： ：first-child :last-child
6、直接命中选择器： :nth-child()
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery选择器的使用</title>
<style type="text/css">
table {
margin:auto;
}
tr {
margin:0;
padding: 0;
overflow: hidden;
border: 1px solid #333;
/*background-color: #B00000;*/
}
tr td {
width: 30px;
height:30px;
border:1px solid #333;
margin: 10px;
padding: 0px;
text-align:center;
line-height: 30px;
}
.bgcolor1 {
background-color: #B00000;
}
.bgcolor2 {
background-color: #99FF33;
}
.bgcolor3 {
background-color: #FFFFCC;
}
.bgcolor4 {
background-color: #FFCC99;
}
</style>
</head>
<body>
<h2>测试</h2>
<table>
<tr>
<td class="test1">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('.test1').css('background-color','#FFCC99')
$('tr:first').addClass('bgcolor1')
$('tr').removeClass()
$('tr:last-child').addClass('bgcolor3')
$('tr:nth-child(2)~ * ').css('color','green')
$('tr:nth-child(1) td').css('color','red')
</script>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
