3、jQuery基本过滤选择器的使用示例
<!DOCTYPE html><html>
<head>
<meta charset="utf-8"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
table{
margin:0px auto;
margin-bottom: 10px;
}
span{
display: block;
text-align: center;
}
td{
padding:0 6px;
text-align: center;
font-size: 20px;
}
</style>
<script>
$(document).ready(function(){
// 第一个元素
$('td:first').css('color', 'red');
// 最后一个元素
$('td:last').css('color', 'blue');
// 排除某类元素
$('td:not(".new")').css('color', 'green');
// 索引值为偶数的元素
$('td:even').css('color', 'red');
// 索引值为奇数的元素
$('td:odd').css('color', 'blue');
// 索引值等于某个值的元素
$('td:eq(0)').css('color', 'green');
// 索引值大于某个值的元素
$('td:gt(1)').css('color', 'red');
// 索引值小于某个值的元素
$('td:lt(4)').css('color', 'blue');
// 选择文档中<h1>~<h6>标签
$(':header').css('color', 'green');
// 选取执行的动画元素
$(':animated').css('color', 'red');
// 选取当前获得焦点的元素
$(':focus').css('color', 'blue');
});
</script>
</head>
<body>
<span>旅游服务的商品列表</span>
<table>
<tr>
<th>商品名</th>
<th>价格</th>
<th>已销售</th>
</tr>
<tr>
<td class="new">泰国普吉岛3夜4日游</td>
<td>5000</td>
<td>1000</td>
</tr>
<tr>
<td>泰国普吉岛3夜4日游</td>
<td>5000</td>
<td>1000</td>
</tr>
<tr>
<td>泰国普吉岛3夜4日游</td>
<td>5000</td>
<td>1000</td>
</tr>
</table>
<span>旅游纪念品的商品列表</span>
<table>
<tr>
<th>商品名</th>
<th>价格</th>
<th>已销售</th>
</tr>
<tr>
<td>泰国普吉岛3夜4日游</td>
<td>5000</td>
<td>1000</td>
</tr>
<tr>
<td>泰国普吉岛3夜4日游</td>
<td>5000</td>
<td>1000</td>
</tr>
<tr>
<td>泰国普吉岛3夜4日游</td>
<td>5000</td>
<td>1000</td>
</tr>
</table>
</body>
</html>
页:
[1]