新西兰服务器

jquery如何排除第一个元素


jquery如何排除第一个元素

发布时间:2022-03-12 18:32:21 来源:高防服务器网 阅读:65 作者:iii 栏目:web开发

本文小编为大家详细介绍“jquery如何排除第一个元素”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery如何排除第一个元素”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

排除方法:1、利用not()方法和“:eq()”选择器,语法为“$(selector).not(":eq(0)")”;2、利用not()方法和“:first”选择器,语法为“$(selector).not(":first")”。

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

jquery排除第一个元素

方法1:使用not()方法和:eq(0)选择器

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

not() 从匹配元素集合中删除元素。

<!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() {  				$("ul").children().not(":eq(0)").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>选择ul中除第一个子元素的其他元素</p>  	</body>  </html>

方法2:使用not()方法和:first选择器

:first 选择器选取第一个元素。

<!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() {  				$("ul").children().not(":first").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>选择ul中除第一个子元素的其他元素</p>  	</body>  </html>

读到这里,这篇“jquery如何排除第一个元素”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注高防服务器网行业资讯频道。

[微信提示:高防服务器能助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[