一、基础选择器
<script src="./js/jquery-3.6.1.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
.haha {
width: 200px;
height: 200px;
background-color: green;
}
.current {
color: red;
}
</style>
</head>
<body>
<div id="d01"></div>
<div class="haha"></div>
<p>你好</p>
<ul>
<li class="current">苹果</li>
<li>香蕉</li>
<li>榴莲</li>
<li>葡萄</li>
</ul>
<script>
// $('#d01').hide()
//$('*').hide()
// $('.haha').hide()
// $('div').hide()
// $('#d01,p').hide()
$('li.current').hide()
</script>
</body>
二、层级选择器
<script src="./js/jquery-3.6.1.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
.haha {
width: 200px;
height: 200px;
background-color: green;
}
.current {
color: red;
}
</style>
</head>
<body>
<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ul>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
</ul>
<script>
$(function(){
console.log($('.nav'));
console.log($('body > li'));
console.log($('body li'));
})
</script>
</body>
三、筛选选择器
<script src="./js/jquery-3.6.1.min.js"></script>
<style>
table{
border: 1px solid black;
}
table th{
border: 1px solid black;
}
table td{
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ul>
<ol>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ol>
<table>
<thead>
<th>111111</th>
<th>111111</th>
<th>111111</th>
<th>111111</th>
<th>111111</th>
<th>111111</th>
</thead>
<tbody>
<tr>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
</tr>
<tr>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
</tr>
<tr>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
</tr>
<tr>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
</tr>
<tr>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
</tr>
<tr>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
<td>22222</td>
</tr>
</tbody>
</table>
<script>
$(function(){
//1.ul中第一个li的字体红色
$('ul li:first').css('color','red')
//2.ul中最后一个li的字体绿色
$('ul li:last').css('color','green')
//3.ul中最第三个li的字体蓝色
$('ul li:eq(2)').css('color','blue')
//4.ol中奇数行变紫色
$('ol li:odd').css('color','purple')
//5.ol中偶数行变紫色
$('ol li:even').css('color','pink')
//表格变色
$('table tbody tr:odd').css('backgroundColor','red')
$('table tbody tr:even').css('backgroundColor','blue')
})
</script>
</body>