首页前端开发其他前端知识jjquery获取li元素的方法及代码是什么

jjquery获取li元素的方法及代码是什么

时间2024-03-26 02:14:03发布访客分类其他前端知识浏览330
导读:今天就跟大家聊聊有关“jjquery获取li元素的方法及代码是什么”的内容,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。 获取方法:1、利用eq( 方法,可选取指定索...
今天就跟大家聊聊有关“jjquery获取li元素的方法及代码是什么”的内容,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
 


获取方法:1、利用eq()方法,可选取指定索引位置的li元素,语法为“$("li").eq(索引号)”;2、利用“:eq()”选择器,可选取指定索引位置的li元素,语法“$("li:eq(索引号)")”。

本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

jquery获取第几个li

1、利用eq()方法

eq() 方法返回带有被选元素的指定索引号的元素。索引号从 0 开头,所以第一个元素的索引号是 0(不是 1)。

!DOCTYPE html>
    
html>
    
	head>
    
		meta charset="utf-8" />
    
		script src="js/jquery-1.10.2.min.js">
    /script>
    
		style>

			.siblings * {
    
				display: block;
    
				border: 2px solid lightgrey;
    
				color: lightgrey;
    
				padding: 5px;
    
				margin: 15px;

			}
    
		/style>
    
		script>

			$(document).ready(function() {

				$("li").eq(2).css({

					"color": "red",
					"border": "2px solid red"
				}
    );

			}
    );
    
		/script>
    
	/head>
    
	body>
    

		div style="width:500px;
    " class="siblings">
    
			ul>
    ul (父节点)
				li>
    第一个子元素/li>
    
				li>
    第二个子元素/li>
    
				li>
    第三个子元素/li>
    
				li>
    第四个子元素/li>
    
				li>
    第五个子元素/li>
    
			/ul>
    
		/div>
    
		p>
    选择第3个li元素(索引号为2)/p>
    
	/body>
    
/html>
    

2、利用“:eq()”选择器

:eq() 选择器选取带有指定 index 值的元素。index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1)。

!DOCTYPE html>
    
html>
    
	head>
    
		meta charset="utf-8" />
    
		script src="js/jquery-1.10.2.min.js">
    /script>
    
		style>

			.siblings * {
    
				display: block;
    
				border: 2px solid lightgrey;
    
				color: lightgrey;
    
				padding: 5px;
    
				margin: 15px;

			}
    
		/style>
    
		script>

			$(document).ready(function() {

				$("li:eq(1)").css({

					"color": "red",
					"border": "2px solid red"
				}
    );

			}
    );
    
		/script>
    
	/head>
    
	body>
    

		div style="width:500px;
    " class="siblings">
    
			ul>
    ul (父节点)
				li>
    第一个子元素/li>
    
				li>
    第二个子元素/li>
    
				li>
    第三个子元素/li>
    
				li>
    第四个子元素/li>
    
				li>
    第五个子元素/li>
    
			/ul>
    
		/div>
    
		p>
    选择第2个li元素(索引号为1)/p>
    
	/body>
    
/html>
    

以上就是关于jjquery获取li元素的方法及代码是什么的介绍,本文内容仅供参考,有需要的朋友可以借鉴了解看看,希望对大家学习或工作,想要了解更多欢迎关注网络,小编每天都会为大家更新不同的知识。

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: jjquery获取li元素的方法及代码是什么
本文地址: https://pptw.com/jishu/653192.html
Java中几种常用的数据结构是什么 PHP页面静态化好在哪,现实方法有什么?

游客 回复需填写必要信息