Web基础：jQuery 上篇：选择器

最新推荐文章于 2024-01-31 00:15:00 发布

hsdsmljj

最新推荐文章于 2024-01-31 00:15:00 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/hsdsmljj/article/details/11820441

版权

JQuery：

jQuery是一种十分优秀的JS框架（封装库），它的motto是"Write less, do more"，能极大地方便开发者操纵页面各种元素的行为，提高开发javascript效率。

引用：

必须引用jQuery库才能使用jQuery框架。

<head>
	<script src="jquery.min.js">
		/*里面不放代码*/
	</script>
	<script type="text/javascript" language="javascript">
		/*使用JQuery*/
	</script>
</head>

对象：

jQuery对象：

由JQuery包装DOM对象后产生。
jQuery对象与DOM对象：
JQuery对象不能直接访问DOM对象的方法，反之亦然，但是可以随意进行转换：
JQuery对象->DOM对象：
var domObj = $("#msg")[0];
var domObj = $("#msg").get(0);
DOM对象->JQuery对象：
var jqObj = $(document.getElementById("msg"));

使用jQuery对象：

使用jQuery选择器查询出来的对象是一个由一系列符合选择条件的元素对象构成的数组，需要用.eq(index)来选中其中某一个，默认为选择全部。

当选中的元素只有一个时，.eq(index)可以省略。
var input3 = $("input").eq(2); //获取选择后的第3个input元素

JQuery对象选择器：

jQuery的强大之处在于其包罗万象的选择器，可以从各个角度、各个方面、各个条件来选择需要操纵的DOM页面元素，选择器是jQuery的灵魂。

先来两个小例子开开胃：
var someElement = $("#someid"); 
//选中ID为someid的元素，等价于：document.getElementById("id");
var allTables = $("table");
//选中所有<table>元素，等价于：document.getElementByTagName("tagName");

jQuery的选择器大致可以分为以下三大类。

1.基本选择器：

通过id属性,class属性,或元素名来选择DOM对象，并封装成jQuery对象数组。

这几种选择器语法简单，选择方便。

通过ID：

以#开头，后面紧跟着ID，选择某一特定ID的元素。通常每个元素的ID都不相同，故这个选择器用于选择单个元素较为合适。
<head>
	<script>
		var someIdObj = $("#someId");
	</script>
</head>
<body>
	<p id="someId">Paragraph</p>
</body>
通过CSS类：

以.开头，后面紧跟着样式名，选择某一批套用了指定样式名的样式的元素对象。
<head>
	<script>
		var someClassObj = $(".someClass");
	</script>
	<style>
		.someClass{color:red;}
	</style>
</head>
<body>
	<p class="someClass">Paragraph</p>
</body>
通过元素名：

直接使用元素名则为选择器的参数，选择所有该元素的对象。
<head>
	<script>
		var allPObj = $("p");
	</script>
</head>
<body>
	<p>Paragraph</p>
</body>
再来一个综合实例：
<head>
	<script>
		var someIdObj = $("#someid");
		//选择id属性为someid的元素
		var allPs = $("p");
		//选择所有<p>元素
		var firstP = $("p").eq(0);
		//选择第一个<p>元素
		var someClassObj = $(".someclass");
		//选择所有应用了someclass样式的元素
		var pSomeIdObj = $("p,#someid");
		//改变所有<p>元素中id为someid的元素
	</script>
	<style>
		.someclass{color:red;}
	</style>
</head>
<body>
	<p id="someid" class="someclass">Paragraph</p>
</body>
2.层次选择器：

选择子元素、兄弟元素等，以下面的元素体系为例子说明：
<body>
	<div id="div1">
		<div id="div1_1"></div>
	</div>
	<div id="div2">
		<div id="div2_1">
			<div id="div2_1_1"></div>
		</div>
		<div id="div2_2">
			<div id="div2_2_1"></div>
		</div>
	</div>
	<div id="div3">
	</div>
</body>
所有后代元素：

以"父元素后代元素"的格式选择，选择父元素内所有该后代元素的对象，包括子元素的子元素等所有后代元素。
$("body div"); 
//<body>内所有<div>，包括div1 div2 div2_1 div2_1_1 div2_2 div2_2_1 div3
子元素：

以"父元素>子元素"个格式选择，选择父元素内第一层的子元素，即只选择子元素，子元素的子元素等其他后代元素不选择。
$("body>div"); 
//<body>内子<div>(子<div>的子元素不选择)，只选取子元素，不选取后代元素，包括div1，div2，div3
下一个兄弟元素：

以"选择条件1+选择条件2"的格式选择，选择满足条件1的所有元素后面的那一个处于同一层的兄弟元素。
$("#div1+div"); 
//id="div1"的元素的下一个<div>，包括div2
后面兄弟元素：

以"选择条件1~选择条件2"的格式选择，选择满足条件1的所有元素后面的所有处于同一层的兄弟元素。
$("#div1~div"); 
//id="div1"的元素后面的所有处于同一层的兄弟<div>，包括div2，div3
3.过滤选择器：

按照一定的规则来进行过滤的选择，包括7类过滤选择器，他们均使用“:”来添加过滤条件。

1：基本过滤选择器

first：

选择满足条件的第一个元素。
$("div:first"); //选择第一个<div>

last：
选择满足条件的最后一个元素。
$("div:last"); //选择最后一个<div>

not(selector)：

去除满足括号内条件的元素。
$("p:not('#one')") //所有<p>元素，去掉id为one的。

even：
选择索引为偶数的元素。
$("tr:even"); //选择所有索引为偶数的<tr>元素
odd：
选择索引为奇数的元素。
$("tr:odd"); //选择所有索引为奇数的<tr>元素
eq(index)：
选择索引为指定数字的元素。
$("p:eq(3)"); //选择索引为3的<p>元素
gt(index)：

选择索引大于指定数字的元素。
$("p:gt(3)"); //选择索引大于3的<p>元素
lt(index)：
选择索引小于指定数字的元素。
$("p:lt(3)"); //选择索引小于3的<p>元素

2：内容过滤选择器

contains(text)：
选择文本包含指定内容的元素。
$("p:contains('1')"); //将选中id为1的<p>元素
<body>
	<p id="1">1111</p>
	<p id="2">2222</p>
	<p id="3">3333</p>
</body>
empty：
选择不包含任何子元素的空元素。
$("p:empty"); //将选中id为1的<p>元素
<body>
	<p id="1"></p>
	<p id="2">2222</p>
	<p id="3">3333</p>
</body>
parent：
选择含有子元素的元素，换言之，选择满足条件的父元素。
$("p:parent"); //将选中id为1的<p>元素
<body>
	<p id="1"><span>1111</span></p>
	<p id="2"></p>
	<p id="3"></p>
</body>
has(selector)：

选择满足指定条件的元素。
$("p:has(.mini)"); //选择class属性为mini的<p>元素

3：可见性过滤选择器

hidden：

选择所有不可见的元素。
$("body:hidden");
visible：
选择所有可见元素。
$("body:visible");

4：属性过滤选择器：

根据元素的属性来选择元素，这个过滤器不需要以“:”开头。

[attribute]：
选择拥有此属性的元素。
$("input[value]"); //选择所有含有value属性的<input>元素
[attribute=value]：

选择精确匹配属性值的元素。
$("input[class='btnClass']"); //选择所有class属性为btnClass的<input>元素
[attribute!=value]：
选择属性值不为指定值的元素。
$("input[id!='btn']"); 
//选择所有id不为btn的<input>元素
[attribute^=value]：
选择属性值以指定值开头的元素。
$("input[id!='in']"); //选择所有id以in开头的<input>元素
[attribute$=value]：
选择属性值以指定值结尾的元素。
$("input[id$='out']");
//选择所有id以out结尾的<input>元素
[attribute*=value]：
选择属性值含有指定值的元素。
$("input[id*='s']"); //选择所有id含有s的<input>元素

5：子元素过滤选择器

nth-child(index)：

选择每个父元素下的第index个子元素，从1开始。

nth-child(even / odd)：

选择每个父元素下index为奇/偶的子元素

nth-child(3n)：

每个父元素下index为3的倍数的子元素。

first-child：

只匹配第一个子元素。

last-child：

只匹配最后一个子元素。

only-child：
只匹配父元素的唯一子元素。

为图省事，下面用一个实例介绍第一种子元素过滤选择器：
<script>
	$(function(){
		$("div:nth-child(1)").eq(0); //id="div1"
		$("div:nth-child(1)").eq(1); //id="div21"
		$("div:nth-child(1)").eq(2); //id="div211"
		$("div:nth-child(2)").eq(0); //id="div2"
		$("div:nth-child(2)").eq(1); //id="div212"
		$("div:nth-child(2)").eq(2); //id="div22"
		$("div:nth-child(3)").eq(0); //id="div3"
	});
</script>
<body>
	<div id="div1"></div>
	<div id="div2">
		<div id="div21">
			<div id="div211"></div>
		</div>
	</div>
	<div id="div22"></div>
	<div id="div3"></div>
</body>

6：表单对象过滤选择器

选择表单控件元素，以“:”开头，后面紧跟以下过滤器。

input：

选择所有<input><textarea><select><button>元素。

text：

选择所有文本框，包括<input type="text" /> <textarea></textarea>。

password：

选择所有密码框，<input type="password" />

radio：

选择所有圆形单选按钮。<input type="radio" />

checkbox：

选择所有方形勾选框。<input type="checkbox" />

submit：

选择所有提交按钮。<input type="submit" />

image：

选择所有图像按钮。<input type="image" />

reset：

选择所有重置按钮。<input type="reset" />

button：

选择所有按钮。<input type="button" />

file：

选择所有文件选择按钮。<input type="file" />

hidden：

选择所有隐藏表单项。<input type="hidden" />