实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jqurey选择器</title>
<style type="text/css">
table ,td{
border: 1px solid #333;
}
table{
border-collapse:collapse;
margin: 30px auto;
width: 80%;
text-align: center;
}
.bg-orange{
font-weight: border;
color: white;
background-color: orange;
}
.red{
color: red;
}
ul{
text-align: center;
}
ul li{
list-style: none;
}
ul li a{
text-decoration: none;
}
.bg-green{
background-color: green;
}
</style>
</head>
<body>
<table>
<caption>信息表</caption>
<tr id="title">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr class="mark">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr class="mark">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
<ul>
<li>我不知道风向哪<a href="">一个</a>方向吹</li>
<li>我不知道风向哪<a href="">一个</a>方向吹</li>
<li>我不知道风向哪<a href="">一个</a>方向吹</li>
<li>我不知道风向哪<a href="">一个</a>方向吹</li>
<li>我不知道风向哪<a href="">一个</a>方向吹</li>
<li>我不知道风向哪<a href="">一个</a>方向吹</li>
<li>我不知道风向哪<a href="">一个</a>方向吹</li>
</ul>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// <!-- 基础选择器 -->
// tag标签选择器
// $('td').css('background-color','wheat')
$('#title').css('background-color','lightgreen')
// class选择器
$('.mark').addClass('bg-orange')
// *通配符选择器
$('tr:nth-child(3)~*').css('background-color','pink')
// 后代
$('li a').addClass('red')
// 第一个元素
$('li:first').addClass('bg-green')
// 最后一个元素
$('li:last').addClass('bg-green')
// 直接选中一个元素
$('li:nth-child(3)').addClass('bg-green')
// jqurey使用eq（i）i从0开始
$('li:eq(3)').addClass('bg-orange')
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
