4、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:contains("泰泰")').css('color', 'red');
// 某元素中包含某元素的标签
$('tr:has("th")').css('color', 'green');
// 加parent()方法表示所选元素的父元素
$('td:contains("泰泰")').parent().css('color', 'blue');
// 空元素
$(':empty').css('background', 'red');
// 非空元素
$(':parent').css('color', 'green');
});
</script>
</head>
<body>
<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></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]