4、jQuery内容过滤选择器使用示例

Sian · 发表于 2016-2-18 21:25:38

[HTML] 纯文本查看 复制代码

<!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>

帐号		自动登录	找回密码
密码			立即注册

[jQuery] 4、jQuery内容过滤选择器使用示例