3、jQuery基本过滤选择器的使用示例

Sian · 发表于 2016-2-17 22:43:19

[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: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>

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

[jQuery] 3、jQuery基本过滤选择器的使用示例