jquery选择器之基本过滤选择器

最新推荐文章于 2024-09-06 10:19:06 发布

一直奋斗的程序员

最新推荐文章于 2024-09-06 10:19:06 发布

阅读量159

点赞数

文章标签： javascript ViewUI

本文介绍了一种使用CSS和jQuery高效选择HTML表格元素的方法。通过详细示例展示了如何针对不同的需求选取表格中的行或单元格，包括获取第一个或最后一个元素、排除特定元素、选择偶数或奇数索引元素等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style type="text/css">
		/*高亮显示*/
		.highlight{   
			background-color: gray
		}
	</style>

<body>
  	<h3>各省市行政区划</h3>
  	<table border="1" width="50%">
  		<thead>
  			<tr>
  				<th>北京</th>
  				<th>上海</th>
  				<th>商丘</th>
  			</tr>
  		</thead>
  		<tbody>
  			<tr>
  				<td>海淀</td>
  				<td>徐汇</td>
  				<td>睢阳</td>
  			</tr>
  			<tr>
  				<td>朝阳</td>
  				<td>闸北</td>
  				<td>梁园</td>
  			</tr>
  			<tr>
  				<td>昌平</td>
  				<td>黄埔</td>
  				<td>柘城</td>
  			</tr>
  		</tbody>
  	</table>
  </body>

一、:first

$("tr:first").addClass("highlight"); //获取匹配的第一个tr元素

二、:last()

$("tr:last").addClass("highlight"); //获取匹配的最后一个tr元素

三、:not(selector)

$("td:not(:even)").addClass("highlight");//获取除了索引是偶数的td

四、:even

$("tr:even").addClass("highlight");  //匹配所有索引值为偶数的元素，从 0 开始计数

五、:odd

$("tr:odd").addClass("highlight");  //匹配所有索引值为奇数的元素，从 0 开始计数

六、:eq(index)

$("tr:eq(2)").addClass("highlight");   //匹配一个给定索引值的元素

七、:gt(index)

$("tr:gt(1)").addClass("highlight");  //匹配所有大于给定索引值的元素

八、:lt(index)

$("tr:lt(2)").addClass("highlight");  //匹配所有小于给定索引值的元素

九、:header

$(":header").addClass("highlight");   //匹配如 h1, h2, h3之类的标题元素