jQuery选择器-阿里云开发者社区

jQuery 选择器

基本选择器

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素。

1.id选择器

用法: $(“#id选择器的id名”); 可返回单个元素的组成的集合。

$("#b1").click(
function () {
$("#one").css("background", "#0000FF");
}
)

2.Element（元素）选择器

用法: $(“元素名”) 返回值含有此元素的集合元素。

$("#b3").click(
function () {
$("div").css("background", "#00FFFF");
}
)

3.、class 选择器

用法: $(“.class名”) 返回值对应class的集合元素，同一 html 页面中 class 是可以存在多个同样值的。

$("#b2").click(
function () {
$(".mini").css("background", "#FF0033");
}
)

4.、*

用法: $(“*”) 返回值集合元素。一般用于匹配所有元素,多用于结合上下文来搜索。

$("#b4").click(
function (){
$("*").css("background", "#00FF33");
}
)

5.组合选择器

将每一个选择器匹配到的元素合并后一起返回.可以指定任意多个选择器进行组合, 并将匹配到的元素合并到一个结果内。

$("#b5").click(
function (){
$("#two,.mini,span").css("background", " #3399FF");
}
)

层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器。

1.后代选择器

在给定的祖先元素下匹配所有后代元素.

//1. 改变 <body> 内所有 <div> 的背景色为 #0000FF
$("#b1").click(function () {
$("div").css("background", "#0000FF");
})

2.子代选择器

在给定的父元素下匹配所有子元素.后代元素与子元素不一样，后代元素是是祖先元素下的所有元素，子代元素是父元素下的一个元素。

//2. 改变 <body> 内子 <div>[第一层 div] 的背景色为 #FF0033
$("#b2").click(
function () {
$("body > div").css("background", "#FF0033");
}
)

3、相邻元素选择器prev + next

匹配所有紧接在 prev 元素后的 next 元素。

//3. 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF
$("#b3").click(
function (){
$("#one + div").css("background", "#0000FF");
}
)

4.兄弟选择器prev ~ sibling

匹配 prev 元素之后的所有 siblings 元素.

注意:是匹配之后的元素,不包含该元素在内,并且 siblings 匹配的是和 prev 同辈的元素,其后辈元素不被匹配.

//4. 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #
#0000FF
$("#b4").click(
function () {
$("#two ~ div").css("background", "#0000FF");
}
)
//5. 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF
$("#b5").click(
function (){
$("#two").siblings("div").css("background", "#0000FF");
}
)

例 (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取。

基础过滤选择器

1、:first

返回值单个元素的组成的集合

说明: 匹配找到的第一个元素

//*****改变第一个 div 元素的背景色为 #0000FF
$("#b1").click(
function (){
// $("div:first").css("background", "#0000FF");
$("div:eq(0)").css("background", "#00FF00");
//两种方式都可以
}
)

2、:last

说明: 匹配找到的最后一个元素.与 :first 相对应.

$("#b2").click(
function (){
$("div:last").css("background", "#0000FF");
}
)

3、:not(selector)

说明: 去除所有与给定选择器匹配的元素.有点类似于”非” ,意思是没有被选中的 input(当 input 的 type=“checkbox”).

//***改变 class 不为 one 的所有 div 元素的背景色为 #0000FF
$("#b3").click(
function (){
$("div:not(.one)").css("background", "#0000FF");
}
)

4、:even

说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js 的数组都是从 0 开始计数的. 例如要选择

table 中的行,因为是从 0 开始计数,所以 table 中的第一个 tr 就为偶数 0.

//********改变索引值为偶数的 div 元素的背景色为 #0000FF
$("#b4").click(
function (){
$("div:even").css("background", "#0000FF");
}
)

5、: odd

说明: 匹配所有索引值为奇数的元素,和:even 对应,从 0 开始计数.

//********改变索引值为奇数的 div 元素的背景色为 #0000FF
$("#b5").click(
function (){
$("div:odd").css("background", "#0000FF");
}
)

6、:eq(index)

说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个 tr 元素.括号里面的是索引值, 不是元素排列数.

//改变索引值为等于 3 的 div 元素的背景色为 #0000FF
$("#b7").click(
function (){
$("div:eq(3)").css("background", "#0000FF");
}
)

7、:gt(index)

说明: 匹配所有大于给定索引值的元素.

//*****改变索引值为大于 3 的 div 元素的背景色为 #0000FF
$("#b6").click(
function (){
$("div:gt(3)").css("background", "#0000FF");
}
)

8、:lt(index)

说明: 匹配所有小于给定索引值的元素.

//**改变索引值为小于 3 的 div 元素的背景色为 #0000FF
$("#b8").click(
function (){
$("div:lt(3)").css("background", "#0000FF");
}
)

9、:header(固定写法)

$("#b9").click(
function (){
$(":header").css("background", "#0000FF");
}
)

说明: 匹配如 h1, h2, h3 之类的标题元素.这个是专门用来获取 h1,h2 这样的标题元素.

10、:animated(固定写法)

说明: 匹配所有正在执行动画效果的元素

//改变 "div" 元素的高度：
$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

内容过滤选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上.

1、:contains(text)

说明: 匹配包含给定文本的元素.用于查找被标签"围"起来的文本内容是否符合指定的内容.

//********改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF
$("#b1").click(
function () {
$("div:contains('di')").css("background", "#0000FF")
}
)
//***改变不含有文本 di; 的 div 元素的背景色 pink
$("#b2").click(
function () {
$("div:not(:contains('di'))").css("background", "pink")
}
)

2、:empty

说明: 匹配所有不包含子元素或者文本的空元素

//**************改变不包含子元素(或者文本元素) 的 div 的背景色为 pink
$("#b2").click(
function () {
$("div:empty").css("background", "pink")
}
)

3、:has(selector)

说明: 匹配含有选择器所匹配的元素的元素.

//******改变含有 class 为 mini 元素的 div 元素的背景色为 green
$("#b3").click(
function () {
//这个写法是选择 有 class='.mini' 的 div 的父元素(div)
$("div:has('.mini')").css("background", "pink")
//这个是选择有 class='.mini' div
//$("div.mini").css("background", "pink");
}
)

4、:parent

说明: 匹配含有子元素或者文本的元素.

//****改变含有子元素(或者文本元素)的 div 元素的背景色为 yellow
$("#b4").click(
function () {
$("div:parent").css("background", "yellow")
}
)

可见度过滤选择器

可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素.

1、:hidden

说明: 匹配所有的不可见元素。

//**选取所有不可见的 div 元素, 需要查看可以利用 jQuery 中的 show() 方法将它们显示出来
$("#b2").click(
function () {
$("div:hidden").css("background", "green");
$("div:hidden").show();
}
)

2、:visible

说明: 匹配所有的可见元素.

//*****改变所有可见的 div 元素的背景色为 #0000FF
$("#b1").click(
function () {
$("div:visible").css("background", "red");
}
)

属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

1、[attribute]

说明: 匹配包含给定属性的元素.

//*****含有属性 title 的 div 元素. $("#b1").click(
function () {
$("div[title]").css("background", "green");
}
)

2、[attribute=value]

说明: 匹配给定的属性是某个特定值的元素.

//****属性 title 值等于 test 的 div 元素
$("#b2").click(
function () {
$("div[title='test']").css("background", "green");
}
)

3、[attribute!=value]

说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于 :not([attr=value]), 要匹配含有特定属性但不等于特定值的元素 , 需要使用 [attr]:not([attr=value])。

//属性 title 值不等于 test 的 div 元素(没有属性 title 的也将被选中)
$("#b3").click(
function () {
$("div[title!='test']").css("background", "green");
}
)

4、[attribute^=value]

说明: 匹配给定的属性是以某些值开始的元素

//属性 title 值 以 te 开始 的 div 元素
$("#b4").click(
function () {
$("div[title^='te']").css("background", "green");
}
)

5、[attribute$=value]

说明: 匹配给定的属性是以某些值结尾的元素.

//属性 title 值 以 est 结束 的 div 元素
$("#b5").click(
function () {
$("div[title$='est']").css("background", "green");
}
)

6、[attribute*=value]

说明: 匹配给定的属性是以包含某些值的元素.

//属性 title 值 含有 es 的 div 元素
$("#b6").click(
function () {
$("div[title *= 'es']").css("background", "green");
}
)

7、[attributeFilter1][attributeFilter2][attributeFilterN]

说明: 复合属性选择器,需要同时满足多个条件时使用.

//选取有属性 id 的 div 元素，然后在结果中选取属性 title 值含有“es”的 div 元素
$("#b7").click(
function () {
$("div[id][title *= 'es']").css("background", "green");
}
)

子元素过滤选择器

1、:nth-child(index/even/odd/equation)

说明: 匹配其父元素下的第 N 个子或奇偶元素.这个选择器和之前说的基础过滤 (Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从 0 开始,后者是从 1 开始

(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素

(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素

(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数的元素

(4):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1 的元素

//****每个 class 为 one 的 div 父元素下的第 2 个子元素
$("#b1").click(
function () {
$("div .one:nth-child(2)").css("background", "yellow");
}
)

2、:first-child

说明: 匹配第一个子元素.

//*****每个 class 为 one 的 div 父元素下的第一个子元素
$("#b2").click(
function () {
$("div .one:first-child").css("background", "green");
//$("div .one:nth-child(1)").css("background", "green");
}
)

3、:last-child

说明: 匹配最后一个子元素.

//*****每个 class 为 one 的 div 父元素下的最后一个子元素
$("#b3").click(
function () {
$("div .one:last-child").css("background", "red");
}
)

4、: only-child

说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.只有一个子元素的才会被匹配!

//**如果 class 为 one 的 div 父元素下的仅仅只有一个子元素，那么选中这个子元素
$("#b4").click(
function () {
$("div .one:only-child").css("background", "pink");
}
)

表单属性过滤选择器

表单属性过滤选择器主要对所选择的表单元素进行过滤

1、:enabled

说明: 匹配所有可用元素.意思是查找所有 input 中不带有 disabled="disabled"的 input. 不为 disabled,当然就为 enabled 啦.

$(function (){
//*利用 jQuery 对象的 val() 方法改变表单内 type=text 可用 <input> 元素的
值
$("#b1").click(function () {
$("input[type='text']:enabled").val("台球");
})

2、:disabled

说明: 匹配所有不可用元素.与上面的那个是相对应的.

$("#b2").click(function () {
$("input[type='text']:disabled").val("乒乓球");
})

3、:checked

说明: 匹配所有选中的被选中元素(复选框、单选框等).

//**利用 jQuery 对象的 length 属性获取多选框选中的个数
$("#b3").click(function () {
//alert($(":checkbox:checked").length);
alert($("input[type='checkbox']:checked").length);
})

4、:selected

用法: $(“select option:selected”) 返回值集合元素

说明: 匹配所有选中的 option 元素

var $objs = $("select option:selected");

表单选择器

1、:input

  说明:匹配所有 input, textarea, select 和 button 元素

2、:text

说明: 匹配所有的单行文本框.

3、:password

说明: 匹配所有密码框.

4、:radio

说明: 匹配所有单选按钮.

5、:checkbox

说明: 匹配所有复选框

6、:submit

说明: 匹配所有提交按钮.

7、:image

说明: 匹配所有图像域.

8、:reset

说明: 匹配所有重置按钮.

9、:button

说明: 匹配所有按钮.这个包括直接写的元素 button.

10、:file

说明: 匹配所有文件域.

11、:hidden

用法: $(“input:hidden”)

说明: 匹配所有不可见元素，或者 type 为 hidden 的元素.这个选择器就不仅限于表单了,除了匹配 input 中的 hidden 外,那些 style 为 hidden 的也会被匹配.

注意: 直接使":hidden" 的话会匹配页面中所有的不可见元素。

jQuery选择器