选取parent元素下的child(子)元素,与
(
“
a
n
c
e
s
t
o
r
d
e
s
c
e
n
d
a
n
t
”
)
有
区
别
,
(“ancestor descendant”)有区别,
(“ancestordescendant”)有区别,(“ancestor descendant”)选择的是后代元素
集合元素
$(“div>span”)选取div元素下元素名是span的子元素
$(“prev+next”)
选取紧接在prev元素后的next元素
集合元素
$(“.one+div”)选取class为one的下一个div同辈元素
$(“prev~siblings”)
选取prev元素之后的所有siblings元素
集合元素
$(“#two~div”)选取id为two的元素后面所有div同辈元素
层次选择器示例
功能
代码
改变内所有
的背景色
$(“body div”).css(“background”,”red”);
改变内子
元素的背景色
$(“body >div”).css(“background”,”red”);
改变class为one的下一个
同辈元素背景色
$(“.one + div”).css(“background”,”red”);
改变id为two的元素后面的所有
同辈的背景色
$(“#two~div”).css(“bakground”,”red”);
$(“.one+div”);
$(“.one”).next(“div”);
$(“#prev~div”);
$(“#prev”).nextAll(“div”);
3.基本过滤器选择器
选择器
描述
返回
示例
:first
选取第1个元素
单个元素
$(“div:first”)选取div元素中第1个div元素
:last
选取最后一个元素
单个元素
$(“div:last”)选取div中最后1个div元素
:not(selector)
去除所有与给定选择匹配的元素
集合元素
$(“input:not(.myClass)”)选取class不是myClass的input元素
:even
选取索引为偶数开始的元所有元素,索引从0开始
集合元素
$(“input:even”)选取索引是偶数的input元素
:odd
选取索引为奇数开始的所有元素,索引从0开始
集合元素
$(“input:odd”)选取索引是奇数的input元素
:eq(index)
选取索引等于index的元素(index从0开始)
单个元素
$(“input:eqq(1)”)选取索引等于1的input的元素
:gt(index)
选取索引大于index的元素
集合元素
$(“input:gt(1)”)选取索引大于1的input元素(注:大于1,不包括1)
:lt(index)
选取索小于index的元素
集合元素
$(“input:lt(5)”)选取索引小于5的input元素(注:小于5,不包括5)
:header
选取所有的标题元素,例如:h1 h2 h3等
集合元素
$(:header)选取网页中所有的h1、h2、h3….
:animated
选取当前正在执行动画所有元素
集合元素
$(“div:animated”)选取正在执行动画的div元素
:focus
选取当前获取焦点的元素
集合元素
$(“:focus”)选取当前获取焦点的元素
基本过滤器选择器示例
功能
代码
改变第1个div元素的背景色
$(“div:first”).css(“background”,”red”);
改变最后1个div元素的背景色
$(“div:last”).css(“background”,”red”);
改变class不为one的div元素背景色
$(“div:not(.one)”).css(“background”,”red”);
改变索引值为偶数的div元素的背景色
$(“div:even”).css(“bakground”,”red”);
改变索引值为奇数的div元素的背景色
$(“div:odd”).css(“background”,”red”);
改变索引值等于3的div元素的背景色
$(“div:eq(3) .css(“background”,”red”);
改变索引值大于3的div元素的背景色
$(“div:gt(3).css(“background”,“red”);
改变索引值小于3的div元素的背景色
$(“div:lt(3)”).css(“background”,”red”);
改变所有标题元素,例如:h1、h2、h3….
$(“:header”).css(“background”,”red”);
改变当前正在执行的动画的元素的背景色
$(“:animated”).css(“background”,”red”);
改变当前获取焦点的元素背景色
$(“:focus”).css(“background”,”red”);
4. 内容过滤选择器
选择器
描述
返回
示例
:contains(text)
选取文本为”text”的元素
集合元素
$(“div:contains(‘我’)选取含有文本“我”的
元素
:empty
选取不包含子元素或者文本的空元素
集合元素
$(“div:empty”)选取不包含子元素(包括文本元素)的div元素
:has(selector)
选取含有选择器所匹配的元素的元素
集合元素
$(“div:has§”)选取含有p元素的
元素
:parent
选取含有子元素或者文本的元素
集合元素
$(“div:parent”)选取拥有子元素(包括文本元素)的div元素
内容过滤选择器示例
功能
代码
改变含有文本di的div元素背景色
$(“div:contains(di)”).css(“background”,”red”);
改变不包含子元素(包括文本元素)的div空元素的背景色
$(“div:empty”).css(“background”,”red”);
改变class为mini元素的div元素的背景色
$(“div:has(.mini)”).css(“background”,”red”);
改变含有子元素(包括文本元素)的div元素的背景色
$(“div:prent”).css(“background”,”red”);
5. 可见性过滤选择器
选择器
描述
返回
示例
:hidden
选取所有不可见的元素
集合元素
(
“
:
h
i
d
d
e
n
”
)
选
取
所
有
不
可
见
的
元
素
。
包
括
<
i
n
p
u
t
=
”
h
i
d
d
e
n
”
>
,
<
d
i
v
s
t
y
l
e
=
”
d
i
s
p
l
a
y
:
n
o
n
e
;
”
>
和
<
d
i
v
s
t
y
l
e
=
”
v
i
s
b
i
l
i
t
y
:
h
i
d
d
e
n
;
”
>
等
元
素
。
如
果
只
想
选
取
<
i
n
p
u
t
>
元
素
,
可
以
使
用
(“:hidden”)选取所有不可见的元素。包括<input=”hidden”>,<div style=”display:none;”>和<div style=”visbility:hidden;”>等元素。如果只想选取<input>元素,可以使用
(“:hidden”)选取所有不可见的元素。包括<input=”hidden”>,<divstyle=”display:none;”>和<divstyle=”visbility:hidden;”>等元素。如果只想选取<input>元素,可以使用(“input:hidden”)