1.选择器-基本:基本
first,
:not(selector),
:even,
:odd,
:eq(index),
:gt(index),
:last,
:lt(index),
:header,
:focus
2.基本示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器-基本2::first, :not(selector), :even, :odd,...</title>
<script src="../jquery-2.2.4.js"></script>
<style>
body{margin-left: 50px;}
.buydetail {
width: 500px;
border: 2px solid mistyrose;
border-collapse: collapse;
}
.buydetail tr{ height: 30px; }
.buydetail td,th{ text-align: center; }
td:empty{
/*background-color: azure;*/
}
.xx{
background-color: bisque;
}
</style>
<script>
$(function () {
$('table.buydetail tr:first').css({color:'red'});
$('table.buydetail tr:not(.header)').css({color:'blue'});
$('table.buydetail tr:even').css({background:'green'});
$('table.buydetail tr:odd').css({background:'yellow'});
$('table.buydetail tr:eq(2)').css({color:'black'});
$('table.buydetail tr:gt(4)').css({'font-size':'20px'});
$('table.buydetail tr:lt(4)').css({'font-size':'12px'});
$('table.buydetail tr:last').css({'font-size':'8px'});
$(':header').addClass('xx');
//匹配具有name属性且value是username的输入框
// $("input[name='username']:focus").css({'background-color':'mistyrose'})
// $("a[href^='https']")
// $("img[src$='gif']")
// $("a[href*='taobao']")
});
</script>
</head>
<body>
<h3 style="margin-left: 30px"><a href="../index.html">返 回</a></h3>
<h1>jQuery 子元素选择器:</h1>
<h3>选择器-基本2::first, :not(selector), :even, :odd, :eq(index),
:gt(index), :last, :lt(index), :header, :focus
</h3>
<table class="buydetail" border="2">
<!-- 表格标题 -->
<caption>月度消费明细</caption>
<tr class="header">
<th>月度</th>
<th>衣帽</th>
<th>娱乐</th>
<th>吃喝玩乐</th>
</tr>
<tr class="row">
<td class="month">一月</td>
<td>¥1200.0</td>
<td>¥500.0</td>
<td>¥1500.0</td>
</tr>
<tr>
<td class="month">二月</td>
<td>¥800.0</td>
<td>¥550.0</td>
<td>¥2000.0</td>
</tr>
<tr>
<td class="month">三月</td>
<td>¥450.0</td>
<td>¥300.0</td>
<td>¥1000.0</td>
</tr>
<tr>
<td class="month">四月</td>
<td></td>
<td>¥300.0</td>
<td></td>
</tr>
<tr>
<td class="month">五月</td>
<td>¥450.0</td>
<td>¥300.0</td>
<td>¥1000.0</td>
</tr>
<tr>
<td class="month">六月</td>
<td>¥1450.0</td>
<td>¥300.0</td>
<td>¥1000.0</td>
</tr>
<tr>
<td class="month">七月</td>
<td>¥450.0</td>
<td>¥1300.0</td>
<td>¥1000.0</td>
</tr>
</table>
<h1>h1......</h1>
<h6>h6......</h6>
<input type="text" name="username">
</body>
</html>
3.示例结果