jQuery选择器包括基本选择器、层次选择器、基本过滤选择器、可见性选择器、属性过滤选择器、子元素选择器、表单对象属性选择器。
这些选择器可以结合使用，这些选择器组合实现不了的功能还能通过函数实现。
基本选择器：
•
基本选择器是
jQuery
中最常用的选择器
,
也是最简单的选择器
,
它通过元素
id, class
和标签名来查找
DOM
元素
(
在网页中
id
只能使用一次
, class
允许重复使用
).
示例
•
改变
id
为
one
的元素的背景色为
#
bbffaa
$("#one").css("background", "#ffbbaa");
•
改变
class
为
mini
的所有元素的背景色为
#
bbffaa
$(".mini").css("background", "#ffbbaa");
•
改变元素名为
<div>
的所有元素的背景色为
#
bbffaa
$("div").css("background", "#ffbbaa");
•
改变所有元素的背景色为
#
bbffaa
$("*").css("background", "#ffbbaa");
•
改变所有的
<span>
元素和
id
为
two
的元素的背景色为
#
bbffaa
$("span,#two").css("background", "#ffbbaa");
层次选择器：
•
如果想通过
DOM
元素之间的层次关系来获取特定元素
,
例如后代元素
,
子元素
,
相邻元素
,
兄弟元素等
,
则需要使用层次选择器
.
•
注意
: (“
prev
~ div”)
选择器只能选择 “
#
prev
”
元素
后面的同辈元素
;
而
jQuery
中的方法
siblings()
与前后位置无关
,
只要是
同辈节点
就可以选取
示例：
•
改变
<body>
内
所有
<div>
的背景色为
#
bbffaa
$("body div").css("background", "#ffbbaa");
•
改变
<body>
内
子
<div>
的背景色为
#
bbffaa
$("body > div").css("background", "#ffbbaa");
•
改变
id
为
one
的
下一个
<div>
的背景色为
#
bbffaa
$("#one + div").css("background", "#ffbbaa");
•
改变
id
为
two
的元素后面的
所有兄弟
<div>
的元素的背景色为
#
bbffaa
$("#two ~ div").css("background", "#ffbbaa");
•
改变
id
为
two
的元素所有
<div>
兄弟元素的背景色为
#
bbffaa
$("#two").siblings("div").css("background", "#ffbbaa");
•
选择 id 为 one 的下一个 span 元素
//以下选择器选择的是近邻 #one 的 span 元素, 若该span
//和 #one 不相邻, 选择器无效.
//$("#one + span").css("background", "#ffbbaa");
$("#one").nextAll("span:first").css("background", "#ffbbaa");
//和 #one 不相邻, 选择器无效.
//$("#one + span").css("background", "#ffbbaa");
$("#one").nextAll("span:first").css("background", "#ffbbaa");
•
选择 id 为 two 的元素前边的所有的 div 兄弟元素
$("#two").prevAll("div").css("background", "#ffbbaa");
过滤选择器：
•
过滤选择器
主要是通过特定的过滤规则来筛选出所需的
DOM
元素
,
该选择器
都以 “
:
”
开头
•
按照不同的过滤规则
,
过滤选择器可以分为基本过滤
,
内容过滤
,
可见性过滤
,
属性过滤
,
子元素过滤和表单对象属性过滤选择器
.
示例：
•
改变第一个
div
元素的背景色为
#
bbffaa
$("div:first").css("background", "#ffbbaa");
•
改变最后一个
div
元素的背景色为
#
bbffaa
$("div:last").css("background", "#ffbbaa");
•
改变
class
不为
one
的所有
div
元素的背景色为
#
bbffaa
$("div:not(.one)").css("background", "#ffbbaa");
•
改变索引值为偶数的
div
元素的背景色为
#
bbffaa
$("div:even").css("background", "#ffbbaa");
•
改变索引值为奇数的
div
元素的背景色为
#
bbffaa
$("div:odd").css("background", "#ffbbaa");
•
改变索引值为大于
3
的
div
元素的背景色为
#
bbffaa
$("div:gt(3)").css("background", "#ffbbaa");
•
改变索引值为等于
3
的
div
元素的背景色为
#
bbffaa
$("div:eq(3)").css("background", "#ffbbaa");
•
改变索引值为小于
3
的
div
元素的背景色为
#
bbffaa
$("div:lt(3)").css("background", "#ffbbaa");
•
改变所有的标题元素的背景色为
#
bbffaa
$(":header").css("background", "#ffbbaa");
•
改变当前正在执行动画的所有元素的背景色为
#
bbffaa
$(":animated").css("background", "#ffbbaa");
内容过滤选择器：
•
内容过滤选择器的过滤规则主要
体现在它所包含的子元素和文本内容上
•
改变含有文本 ‘
di
’
的
div
元素的背景色为
#
bbffaa
$("div:contains('di')").css("background", "#ffbbaa");
•
改变不包含子元素
(
或者文本元素
)
的
div
空元素的背景色为
#
bbffaa
$("div:empty").css("background", "#ffbbaa");
•
改变含有
class
为
mini
元素的
div
元素的背景色为
#
bbffaa
$("div:has(.mini)").css("background", "#ffbbaa");
•
改变含有子元素
(
或者文本元素
)
的
div
元素的背景色为
#
bbffaa
$("div:parent").css("background", "#ffbbaa");
//$("div:not(:empty)").css("background", "#ffbbaa");
//$("div:not(:empty)").css("background", "#ffbbaa");
可见性选择器：
•
可见性过滤选择器是
根据元素的可见和不可见状态
来选择相应的元素
•
可见选择器
:hidden
不仅包含样式属性
display
为
none
的元素
,
也包含文本隐藏域
(<input type=“hidden”>)
和
visible:hidden
之类的元素
示例：
•
改变所有可见的
div
元素的背景色为
#
bbffaa
$("div:visible").css("background", "#ffbbaa");
•
选取所有不可见的元素
,
利用
jQuery
中的
show()
方法将它们显示出来
,
并设置其背景色为
#
bbffaa
$("div:hidden").show(2000).css("background",
"#ffbbaa");
"#ffbbaa");
•
选取所有的文本隐藏域
,
并打印它们的值
alert($("input:hidden").val());
属性过滤选择器：
•
属性过滤选择器的过滤规则是
通过元素的属性来获取相应的元素
示例：
•
含有属性
title
的
div
元素
.
$("div[title]").css("background", "#ffbbaa");
•
属性
title
值等于
"test"
的
div
元素
.
$("div[title='test']").css("background", "#ffbbaa");
•
属性
title
值不等于
"test"
的
div
元素
(
没有属性
title
的也将被选中
).
//选取的元素中包含没有 title 的 div 元素.
$("div[title!='test']").css("background", "#ffbbaa");
$("div[title!='test']").css("background", "#ffbbaa");
•
属性
title
值 以
"
te
"
开始的
div
元素
.
$("div[title^='te']").css("background", "#ffbbaa");
•
属性
title
值 以
"
est
"
结束的
div
元素
.
$("div[title$='est']").css("background", "#ffbbaa");
•
属性
title
值 含有
"
es
"
的
div
元素
.
$("div[title*='es']").css("background", "#ffbbaa");
•
选取有属性
id
的
div
元素，然后在结果中选取属性
title
值含有“
es
”
的
div
元素
.
$("div[id][title*='es']").css("background", "#ffbbaa");
•选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素.
$("div[title][title!='test']").css("background", "#ffbbaa");
子元素选择器：
•
nth-child()
选择器详解如下：
–
(1):nth-child(even/odd):
能选取每个父元素下的索引值为偶
(
奇
)
数的元素
–
(2):nth-child(2):
能选取每个父元素下的索引值为
2
的元素
–
(3):nth-child(3n):
能选取每个父元素下的索引值是
3
的倍数 的元素
–
(3):
nth-child(3n +
1):
能选取每个父元素下的索引值是
3n + 1
的元素
示例：
•
每个
class
为
one
的
div
父元素下的第
2
个子元素
.
//选取子元素, 需要在选择器前添加一个空格.
$("div.one :nth-child(2)").css("background", "#ffbbaa");
$("div.one :nth-child(2)").css("background", "#ffbbaa");
•
每个
class
为
one
的
div
父元素下的第一个子元素
$("div.one :first-child").css("background", "#ffbbaa");
•
每个
class
为
one
的
div
父元素下的最后一个子元素
$("div.one :last-child").css("background", "#ffbbaa");
•
如果
class
为
one
的
div
父元素下的仅仅只有一个子元素，那么选中这个子元素
$("div.one :only-child").css("background", "#ffbbaa");
表单选择器：
表单对象属性过滤器：
•
此选择器主要对所选择的表单元素进行过滤
示例：
•
对表单内 可用input 赋值操作
$(":text:enabled").val("尚硅谷");
• 对表单内 不可用input 赋值操作
• 对表单内 不可用input 赋值操作
$(":text:disabled").val("
www.atguigu.com");
• 获取多选框选中的个数
• 获取多选框选中的个数
var num =
$(":checkbox[name='newsletter']:checked").length;
• 获取多选框选中的内容
$(":checkbox[name='newsletter']:checked").length;
• 获取多选框选中的内容
$(":checkbox[name='newsletter']:checked").each(function(){
alert(this.value);
});
• 获取下拉框选中的内容.
alert(this.value);
});
• 获取下拉框选中的内容.
//实际被选择的不是 select, 而是 select 的 option 子节点
//所以要加一个 空格.
//var len = $("select :selected").length
//alert(len);
//因为 $("select :selected") 选择的是一个数组
//当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了.
//alert($("select :selected").val());
//jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在
//得到的 DOM 对象, 而不是一个 jQuery 对象
$("select :selected").each(function(){
alert(this.value);
});
//所以要加一个 空格.
//var len = $("select :selected").length
//alert(len);
//因为 $("select :selected") 选择的是一个数组
//当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了.
//alert($("select :selected").val());
//jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在
//得到的 DOM 对象, 而不是一个 jQuery 对象
$("select :selected").each(function(){
alert(this.value);
});
411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
