jQuery列元素选择器

在一个表格上可能会存在多个数据类,但是如果只依靠元素进行选择,那么很难定位摸一个列上,岁在jQuery中一共有列选择器.


1	:nth-child(eq\|even\|oddd\|index)	选择指定的列中所有的元素,可以使用列的索引,偶数,奇数来完成,列的索引是从1开始的.	元素集合
2	:first-child	取得表格的第一列	元素集合
3	:last-child	取得表格的最后一列	元素集合
4	:only-child	取得只有一个字元素的父元素	元素集合

这些选择器几乎都是针对u表哥元素的操作

选择指定的列

直接使用列索引

<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目</title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
			$("table td:nth-child(1)").attr("class","init");
		})
	</script>
</head>
<body>
	<table border=1>
		<tr id="dept-title">
			<td>编号</td>
			<td>部门名称</td>
			<td>部门位置</td>
			<td>部门人数</td>
		</tr >
		<tr id="dept-123">
			<td>123</td>
			<td>人事部</td>
			<td>北京</td>
			<td>12</td>
		</tr>
		<tr id="dept-222">
			<td>222</td>
			<td>财务部</td>
			<td>上海</td>
			<td>33</td>
		</tr>
		<tr id="dept-333">
			<td>333</td>
			<td>编辑部</td>
			<td>广州</td>
			<td>44</td>
		</tr>
	</table>
	
</body>
</html>

在这里插入图片描述

选择奇数列

		$(function(){
			$("table td:nth-child(odd)").attr("class","init");
		})

在这里插入图片描述

选择偶数列

		$(function(){
			$("table td:nth-child(even)").attr("class","init");
		})

在这里插入图片描述

发现整个的过程都是以列为主的

选择第一列与最后一列

可以使用:first-child和:last-child
选择第一列

		$(function(){
			$("table td:first-child").attr("class","init");
		})

在这里插入图片描述

选择最后一列

		$(function(){
			$("table td:last-child").attr("class","init");
		})

在这里插入图片描述

:first-child和:last-child选择器于:first和:last是两种操作

空元素选择

如果表格中有一列元素为空的时候,就可以使用:only-child

<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目</title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
			$("table td:only-child").attr("class","init");
		})
	</script>
</head>
<body>
	<table border=1>
		<tr>
			<td colspan="4"></td>
			
		</tr >
		<tr id="dept-title">
			<td>编号</td>
			<td>部门名称</td>
			<td>部门位置</td>
			<td>部门人数</td>
		</tr >
		<tr id="dept-123">
			<td>123</td>
			<td>人事部</td>
			<td>北京</td>
			<td>12</td>
		</tr>
		<tr id="dept-222">
			<td>222</td>
			<td>财务部</td>
			<td>上海</td>
			<td>33</td>
		</tr>
		<tr id="dept-333">
			<td>333</td>
			<td>编辑部</td>
			<td>广州</td>
			<td>44</td>
		</tr>
	</table>
	
</body>
</html>

jQuery列元素选择器

选择指定的列

选择第一列与最后一列

空元素选择

猜你喜欢