选择器
$(“div”) 标签名选择器
$("#div1") id选择器
$(".div0") class选择器
$("*") 通配符选择器
$(“div .div1”) 后代选择器
$(“div>.div1”) 子代选择器
$(".div1+div") 下一个兄弟选择器
$(".div1~div") 下面所有的兄弟选择器
$(“div.div1”) div中类名是div1的div
$(“div .div1”) div后代中类名是div1的元素
$(".div1>") 类名是div1所有的子元素
$(".div1>").length div1下所有子元素的数量
$(".div1>").length div1下所有子元素的数量
$(".div1+*") div1下一个任意兄弟元素
$(".div1+") div1下一个任意兄弟元素
(
"
.
d
i
v
1
"
)
.
n
e
x
t
(
)
;
等
于
(".div1").next(); 等于
(".div1").next();等于(".div1+");
(
"
.
d
i
v
1
"
)
.
n
e
x
t
A
l
l
(
)
;
等
于
(".div1").nextAll(); 等于
(".div1").nextAll();等于(".div1~");
$(".div1").nextUntil(".div2").css(“color”,“red”); div1到div2之间的兄弟元素
$(".div1").prev(); 向上的一个兄弟元素
$(".div1").prevAll(); 向上的所有兄弟元素
$(".div1").prevUntil(".div2"); 向上到div2之间的兄弟元素
(
"
.
d
i
v
1
"
)
.
f
i
n
d
(
"
s
p
a
n
"
)
;
等
于
(".div1").find("span"); 等于
(".div1").find("span");等于(".div1 span");
(
"
.
d
i
v
1
"
)
.
c
h
i
l
d
r
e
n
(
)
;
等
于
(".div1").children(); 等于
(".div1").children();等于(".div>");
属性选择器
console.log(
(
"
d
i
v
[
a
]
"
)
)
;
[
a
]
表
示
是
否
具
备
标
签
属
性
a
c
o
n
s
o
l
e
.
l
o
g
(
("div[a]")); [a] 表示是否具备标签属性a console.log(
("div[a]"));[a]表示是否具备标签属性aconsole.log(("[a]"));//[a] 表示是否具备标签属性a
console.log(
(
"
[
a
=
1
]
"
)
)
;
/
/
标
签
必
须
有
a
属
性
,
并
且
属
性
值
是
1
c
o
n
s
o
l
e
.
l
o
g
(
("[a=1]"));//标签必须有a属性,并且属性值是1 console.log(
("[a=1]"));//标签必须有a属性,并且属性值是1console.log(("[a^=1]"));//属性值的开头是1的元素
$("[b|=ab]").css(“color”,“red”);//值是ab或者以ab起头后面使用—来连接的
$("[b~=ab]").css(“color”,“red”);//值是ab或者值是以空格分隔的多个值,并且其中包含ab的
一般用于class中的多个样式选择
(
"
[
b
("[b
("[b=b]");以b结尾的值
$("[b!=ab]");值不是ab的
$("[b*=c]");值中包含有c这个字符的
$("[a][b]");//有a属性和b属性的元素
过滤器
过滤第一个和最后一个的三种语句
$(“li:first”).css(“color”,“red”);
$(“li”).first();
$(“li:last”)
$(“li”).last();
将所有li放在一个列表中,筛选出第一个(最后一个)元素
$(“li:first-child”).css(“color”,“red”);
$(“li:last-child”)
查看每个li父元素中的第一个(最后一个)子元素,如果是li的筛选出来
$(“li:first-of-type”).css(“color”,“red”);
$(“li:last-of-type”)
将每个li的父元素中第一个(最后一个)类型是li的子元素筛选出来
过滤奇偶的两种情况
console.log($(“ul>:not(li)”)); ul所有子元素中不是li元素的
$(“ul>”).not(“li”)
$(“li:even”).css(“color”,“red”); 偶数项 列表是从0开始计数
$(“li:odd”).css(“color”,“red”); 奇数项 列表是从0开始计数
$(“li:nth-child(2)”).css(“color”,“red”); 选中一个li,该li是其父元素容器中第二个元素,包括所有类型的子元素
$(“li:nth-of-type(2)”).css(“color”,“red”); 选中一个li,该li是其父元素容器中所有li子元素组成的列表中的第二个li元素。
$(“li:nth-child(even)”).css(“color”,“red”); 偶数,列表是从1开始计数,计数包含所有类型的子元素
$(“li:nth-of-type(even)”).css(“color”,“red”); 偶数,列表是从1开始计数,计数只包含li类型的子元素
$(“li:nth-child(odd)”).css(“color”,“red”); //奇数,列表是从1开始计数,计数包含所有类型的子元素
$(“li:nth-of-type(odd)”).css(“color”,“red”); //奇数,列表是从1开始计数,计数只包含li类型的子元素
$(“li:nth-child(2n)”);//偶数
$(“li:nth-child(2n-1)”)//奇数
$(“li:nth-child(3n)”)//奇数
筛选固定序号、下标大小于、h1-h6、聚焦、应用动画
$(“li:eq(2)”).css(“color”,“red”); li列表中序号为2的li元素
$(“li”).eq(2)
$(“li:gt(2)”).css(“color”,“red”); 列表中下标大于2的所有元素
$(“li:lt(2)”).css(“color”,“red”); 列表中下标小于2的所有元素
$(":header"); 所有h1-h6的元素
$(":animated"); 所有使用aniamte动画的元素
$(":focus"); 聚焦元素
筛选父子元素相关
$(":empty")//没有内容或者子元素的元素
$(“div:empty”)
console.log(
(
"
.
d
i
v
1
:
h
a
s
(
.
d
i
v
2
)
"
)
)
;
含
有
d
i
v
2
的
内
容
的
d
i
v
1
元
素
c
o
n
s
o
l
e
.
l
o
g
(
(".div1:has(.div2)")); 含有div2的内容的div1元素 console.log(
(".div1:has(.div2)"));含有div2的内容的div1元素console.log((".div1").has(".div2"))
console.log($(".div2:parent")); 判断div2有子元素的或者有内容的
console.log(
(
"
.
d
i
v
2
"
)
.
p
a
r
e
n
t
(
)
)
;
获
取
d
i
v
2
的
父
元
素
c
o
n
s
o
l
e
.
l
o
g
(
(".div2").parent()); 获取div2的父元素 console.log(
(".div2").parent());获取div2的父元素console.log((".div2").parents()); 获取div2的所有父元素
console.log($(".div2").parentsUntil(“html”)); 获取div2的所有父元素中到某个子元素之前的
console.log( ( " . d i v 2 : c o n t a i n s ( 1 ) " ) ) ; c o n s o l e . l o g ( (".div2:contains(1)")); console.log( (".div2:contains(1)"));console.log((".div1:contains(1)"));//判断元素的后代中有1这个内容的元素,包括孩子孙子之类的所有子代。
$(":only-child") 只有一个子元素的元素
筛选显示与隐藏
console.log( ( " . d i v 4 : h i d d e n " ) ) ; 隐 藏 元 素 , 针 对 d i s p l a y : n o n e 或 者 是 不 显 示 的 元 素 v i s i b i l i t y : h i d d e n ; 不 是 隐 藏 , 因 为 它 占 位 了 , 所 以 不 会 筛 选 出 它 c o n s o l e . l o g ( (".div4:hidden")); 隐藏元素,针对display:none或者是不显示的元素 visibility: hidden;不是隐藏,因为它占位了,所以不会筛选出它 console.log( (".div4:hidden"));隐藏元素,针对display:none或者是不显示的元素visibility:hidden;不是隐藏,因为它占位了,所以不会筛选出它console.log((":hidden")); 筛选所有的隐藏元素
console.log($(":visible")) 筛选所有的显示元素
筛选返回一个布尔值、slice
console.log(
(
"
d
i
v
"
)
.
i
s
(
"
.
d
i
v
1
"
)
)
这
个
方
法
得
到
一
个
布
尔
值
,
是
否
在
d
i
v
中
有
类
名
是
d
i
v
1
的
元
素
c
o
n
s
o
l
e
.
l
o
g
(
("div").is(".div1")) 这个方法得到一个布尔值,是否在div中有类名是div1的元素 console.log(
("div").is(".div1"))这个方法得到一个布尔值,是否在div中有类名是div1的元素console.log((“div”).is("[a]")) 是否在div中有属性名是a的元素
console.log($(“div”).hasClass(“div1”));//这个方法得到一个布尔值,是否在div中类名是div1的元素
console.log($(“li”).slice(2,4));//div列表中选择第2个到第4个之间的元素
input相关的
$(":input")
$(":text"); type=text的input
$(":password");
$(":disabled"); 不可用
$(":enabled"); 可用
$(":checked"); 用于input中checkbox和radio
$(":selected"); 用于下拉菜单的元素