5、可见性&子元素过滤选择器的使用示例
<!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(){
// 查找显示元素
$('tr:visible').css('color', 'red');
// 查找隐藏元素
$('tr:hidden').css('display', 'table-row');
// 某元素同级集合的第某个子元素
$('tr:nth-child(1)').css('color', 'green');
// 某元素同级集合的第某2n个子元素n从0开始
$('tr:nth-child(2n)').css('color', 'green');
// 某元素同级集合的第一个子元素
$('tr:first-child').css('color', 'blue');
// 某元素同级集合的最后一个子元素
$('tr:last-child').css('color', 'green');
// 某元素同级集合中的唯一子元素
$('td:only-child').css('color', 'pink');
});
</script>
</head>
<body>
<span>旅游服务的商品列表</span>
<table>
<tr>
<th>商品名</th>
<th>价格</th>
<th>已销售</th>
</tr>
<tr style="display: none">
<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></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>
<tr><td colspan="3">结束</td></tr>
</table>
</body>
</html>
页:
[1]