索引选择器

最新推荐文章于 2023-02-19 10:46:02 发布

{[("青椒盖饭")]}

最新推荐文章于 2023-02-19 10:46:02 发布

阅读量891

点赞数

分类专栏： javaweb学习笔记

本文链接：https://blog.csdn.net/qq_43386754/article/details/86449033

版权

javaweb学习笔记专栏收录该内容

77 篇文章 0 订阅

订阅专栏

想HTML中的表格里面一定会有许多的tr,td,下拉列表框中会有许多"option"或者无序列表中有许多的"li"元素,所以针对于这些返回多个元素的操作,就可以通过索引来完成处理.
索引选择器有如下几种


1	:first	取得所有返回元素的第一个索引元素,或使用first()函数代替	返回单个元素
2	:last	取得所有返回元素的最后一个索引元素,或者使用last()函数代替	返回单个元素
3	:not(元素)	排除制定元素之外的所有元素	元素集合
4	:even()	取得所有索引编号是偶数的元素,索引值都是从0开始	返回元素集合
5	:odd()	取得所有索引编号是奇数的元素	返回元素集合
6	:eq	取得指定索引编号的内容	单个元素
7	:gt	取得大于指定索引编号的所有元素	返回元素集合
8	:lt	取得所有小鱼指定索引变好的元素	元素集合
9	:header	取得所有的元素的信息	返回元素集合

以上的选择器可以直接使用查找 ,但是直接使用默认是从根元素开始查找

取得首个元素

编写一个简单的列表元素
取得第一个元素

<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(){
				$("div>ul li:first").attr("class","init");
			}
		);
	</script>
</head>
<body>
	<div>
		<ul>
			<li>便利店</li>
			<li>麦当劳</li>
			<li>加油站</li>
			<li>居民楼</li>
			<li>物业</li>
		</ul>
	</div>
	
</body>
</html>

运行结果

在这里插入图片描述

以上的操作同样也可以使用first()函数来代替

	$(
			function(){
				$("div>ul li").first().attr("class","init");
			}
		);

想表格行,第一行都是一些标题信息,标题信息旺旺会使用一些特殊的样式来进行显示设置.
对于此时要想取得所有的li元素可以有如下的两种形式
- $(“div>ul li”).attr(“class”,“init”);
  - 以div作为父元素,并且以ul是直接子元素的所有li元素
- $(“ul li”).attr(“class”,“init”);
  - 找到所有ul中的所有li子元素,不管这些元素见是否有关系.

取得最后一个元素

使用":last"取得最后一个元素

<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(){
				$("div>ul li:last").attr("class","init");
			}
		);
	</script>
</head>
<body>
	<div>
		<ul>
			<li>便利店</li>
			<li>麦当劳</li>
			<li>加油站</li>
			<li>居民楼</li>
			<li>物业</li>
		</ul>
	</div>
	
</body>
</html>

在这里插入图片描述

同样也可以使用last()函数来代替

		$(
			function(){
				$("div>ul li").last().attr("class","init");
			}
		);

排除选择器

排除选择器指的是要进行指定元素的排除
选择div下的所有p元素,排除span元素

<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(){
				$("div *:not(span)").attr("class","init");
			}
		);
	</script>
</head>
<body>
	<div>
			<p>便利店</p>
			<p>麦当劳</p>
			<p>加油站</p>
			<p>居民楼</p>
			<span>自动洗车</span>
			<p>高速公路</p>
	</div>
</body>
</html>

在这里插入图片描述

此类的操作也可以使用not()函数来进行处理

	$(
			function(){
				$("div *").not("span").attr("class","init");
			}
		);

奇偶数索引选择器

- 一把情况下在进行表哥列表的时候,会出现奇偶数的问题
表格处理操作—偶数处理

<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(){
			//选择表格下的偶数位tr元素
			$("table tr:even").attr("class","init");
		})
	</script>
</head>
<body>
	<div>
		<table border="">
			<tr><td>姓名</td><td>年龄</td><td>编号</td></tr>
			<tr><td>xiemaoshu</td><td>22</td><td>9527</td></tr>
			<tr><td>lanchaohui</td><td>21</td><td>78945</td></tr>
			<tr><td>kill</td><td>20</td><td>45612</td></tr>
			<tr><td>admin</td><td>33</td><td>4561</td></tr>
		
		</table>
	</div>
	
</body>
</html>

在这里插入图片描述

示例:设置奇数操作

		$(function(){
			
			$("table tr:odd").attr("class","init");
		})

在这里插入图片描述

标题选择器

可以选择h1,~h9的元素对象信息

<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(){
			
			$("div :header").attr("class","init");
		})
	</script>
</head>
<body>
	<div>
		<h1>HelloWorld</h1>
		<h2>HelloWorld</h2>
		<h3>HelloWorld</h3>
		<h4>HelloWorld</h4>
		<h5>HelloWorld</h5>
		<h6>HelloWorld</h6>
		<h7>HelloWorld</h7>
		<h8>HelloWorld</h8>
		<h9>HelloWorld</h9>
		<h10>HelloWorld</h10>
	</div>
	
</body>
</html>

在这里插入图片描述

一定要记住的是,进行元素查询的时候需要设置后查询的范围

{[("青椒盖饭")]}

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
索引选择器

想HTML中的表格里面一定会有许多的tr,td,下拉列表框中会有许多&quot;option&quot;或者无序列表中有许多的&quot;li&quot;元素,所以针对于这些返回多个元素的操作,就可以通过索引来完成处理.索引选择器有如下几种1:first取得所有返回元素的第一个索引元素,或使用first()函数代替返回单个元素2:last取得所有返回元素的最后一个索引元素,或者使用last...
复制链接

扫一扫