jQuery选择器

最新推荐文章于 2020-04-07 11:27:31 发布

转载最新推荐文章于 2020-04-07 11:27:31 发布 · 45 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jingLongJun/p/4491045.html

本文介绍了jQuery选择器的基础概念，包括其对CSS选择器的继承，详细解析了基本选择器、层次选择器、过滤选择器的功能及用法，并通过具体实例展示了如何使用这些选择器来定位页面元素。

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

1，jQuery选择器继承自CSS选择器，如下代码：

		<script type="text/javascript">
$(function() {
 
	$(".demo").click(function() {//类选择器
 
				alert("jQuery Demo");
			});
});
</script>
	</head>
	<body>
		<p class="demo">
			jQuery Demo
		</p>
	</body>
</html>

2，jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

3，基本选择器。

选择器	描述	返回	实例
#id	根据给定id匹配一个元素	单个元素	$("#test")
.class	根据给定的类名匹配元素	集合元素	$(".test")
element	根据元素名匹配元素	集合元素	$("p")
*	匹配所有的元素	集合元素	$("*")
selector1..selectorn	合并元素后一起返回	集合元素	$("div,span,p")

测试html和css

<body>
		<div class="one" id="one">
			id为one，class为one的div
			<div class="mini">
				class为mini
			</div>
		</div>
		<div class="one" id="two" title="test">
			class="one" id="two" title="test"的div
			<div class="mini" title="other">
				class="mini" title="other"
			</div>
			<div class="mini" title="test">
				class="mini" title="test"
			</div>
		</div>
		<div class="one">
			<div class="mini">
				class="mini"
			</div>
			<div class="mini">
				class="mini"
			</div>
			<div class="mini">
				class="mini"
			</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">
				class="mini"
			</div>
			<div class="mini">
				class="mini"
			</div>
			<div class="mini">
				class="mini"
			</div>
			<div class="mini" title="tesst">
				class="mini" title="tesst"
			</div>
		</div>
		<div style="display:none;" class="none">style="display:none;" class="none"</div>
		<div class="hide">class="hide"</div>
		<div>包含Input的type为hidden的div<input type="hidden" size="8"></div>
		<span id="mover">正在执行动画的span元素</span>
	</body>

<style type="text/css">
			div {
				width:450px;
				height:140px;
				margin:5px;
				background: :#aaa;
				border:#000 1px solid;
				float:left;
				font-size:17px;
				font-family:Verdana;
			}
			div.mini{
				width:210px;
				height:55px;
				background-color: :#aaa;
				font-size: 12px;
			}
			div.hide{
				
				display:none;
			}
		</style>

-1，改变id为one的元素的背景色。

$(function() {
 
	//id选择器
	$("#one").css("background", "#bbffaa");
});

-2，改变class为mini的元素的背景色。

$(function() {
 
	//id选择器
	$("#one").css("background", "#bbffaa");
	//类选择器
	$(".mini").css("background", "#bbffaa");
});

-3，改变所有div的背景色

$(function() {
 
	//id选择器
	$("#one").css("background", "#bbffaa");
	//类选择器
	$(".mini").css("background", "#bbffaa");
	//元素选择器
	$("div").css("background", "#bbffaa");
});

-4，改变所有元素的背景色

$(function() {
 
	//id选择器
	$("#one").css("background", "#bbffaa");
	//类选择器
	$(".mini").css("background", "#bbffaa");
	//元素选择器
	$("div").css("background", "#bbffaa");
	//all
	$("*").css("background", "#bbffaa");
});

-5，所有span元素和id为two的元素。

$(function() {
 
	//id选择器
	//$("#one").css("background", "#bbffaa");
	//类选择器
	//$(".mini").css("background", "#bbffaa");
	//元素选择器
	//$("div").css("background", "#bbffaa");
	//all
	//$("*").css("background", "#bbffaa");
	$("span, #two").css("background", "#bbffaa");
});

4，层次选择器

选择器	描述	返回	实例
$("a b")	选取a元素中的所有b元素	集合元素	$("div span")选取div里的所有span元素
$("parent>child")	选取parent元素下的child子元素	集合元素	$("div>span")选取div元素下元素名是span的子元素
$("prev + next")	紧接在prev元素后的next元素	集合元素	$(".one+div")class为one的下一个div同辈元素
$("prev~s")	选取prev元素后的所有s元素	集合元素	$("#two~div")选取id为two的所有div同辈元素

-1，改变body内所有div的背景颜色

$(function() {
 
	//改变body内所有div的背景颜色
	$("body div").css("background", "#bbffaa");
});

-2，改变body内子div元素的背景颜色

$(function() {
 
	$("body>div").css("background", "#bbffaa");
});

-3，改变class为one的下一个div同辈元素背景颜色

$(function() {
 
	$(".one + div").css("background", "#bbffaa");
});

-4，改变id为two的元素后所有div同辈元素

$(function() {
 
	$("#two ~ div").css("background", "#bbffaa");
});

可以使用next和nextAll代替后两个选择器

5，过滤选择器

选择器	描述	返回	实例
:first	选取第一个元素	单个元素	$("div:first")选取第一个div元素
:last	选取最后一个元素	单个元素	$("div:last")选取最后一个div元素
:not(selector)	去除所有与给定选择器匹配的元素	集合元素	$("input:not(myClass)")选取class不是myClass的input元素
:even	选取所有索引是偶数的元素，索引从0开始	集合元素	$("input:even")选取索引是偶数的input元素
:odd	选取所有索引是奇数的元素，索引从0开始	集合元素	$("input:odd")选取索引是奇数的input元素
:eq(index)	选取索引等于index的元素	单个元素	$("input:eq(1)")选取索引为1的input元素
:gt(index)	选取索引大于index的元素	集合元素	$("input:gt(1)")选取索引大于1的元素
:lt(index)	选取索引小于index的元素	集合元素	$("input:lt(1)")选取索引小于1的元素
:animated	选取所有执行动画的元素	集合元素	$("div:animated")选取正在执行动画的div元素
:focus	选取当前获取焦点的元素	集合元素	$(":focus")选取当前脚垫元素

-1，改变第一个div元素的背景色

$(function() {
 
	$("div:first").css("background", "#bbffaa");
});

-2，改变最后一个div的背景色

$(function() {
 
	$("div:last").css("background", "#bbffaa");
});

-3，改变class不是one的所有div背景颜色

$(function() {
 
	$("div:not(.one)").css("background", "#bbffaa");
});

-4，改变索引值为偶数的所有div背景颜色

$(function() {
 
	$("div:even").css("background", "#bbffaa");
});

6，内容选择器

7，属性选择器

转载于:https://www.cnblogs.com/jingLongJun/p/4491045.html