JQuery选择器
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JQuery选择器,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含14957字,纯文字阅读大概需要22分钟。
内容图文
JQuery选择器
通过一个例子来分辨这些选择器,首先做一个初始的页面:
1、HTML
1
<!
DOCTYPE html
>
2
<
html
>
3
<
head
lang
="en"
>
4
<
meta
charset
="UTF-8"
>
5
<
title
>选择器</title>
6
<
script
type
="text/javascript"
src
="../JQuery库文件/jquery-1.12.1.min.js"
></
script
>
7
<
style
type
="text/css"
>
8
div,span,p
{
9
width
:
140px
;
10
height
:
140px
;
11
margin
:
5px
;
12
background
:
#aaa
;
13
border
:
#000 1px solid
;
14
float
:
left
;
15
font-size
:
17px
;
16
font-family
:
Verdana
;
17
}
18
div.mini
{
19
width
:
55px
;
20
height
:
55px
;
21
background-color
:
#aaa
;
22
font-size
:
12px
;
23
}
24
div.hide
{
25
display
:
none
;
26
}
27
</
style
>
28
<
script
type
="text/javascript"
>
29
//
给id为mover的元素添加动画.
30
$(
"
document
"
).ready(
function
(){
31
function
animateIt() {
32
$(
"
#mover
"
).slideToggle(
"
slow
"
, animateIt);
33
}
34
animateIt();
35
})
36
</
script
>
37
38
</
head
>
39
<
body
>
40
<
div
class
="one"
id
="one"
>
41
id为one,class为one的div
42
<
div
class
="mini"
>class为mini</div>
43
</
div
>
44
45
<
div
class
="one"
id
="two"
title
="test"
>
46
id为two,class为one,title为text的div
47
<
div
class
="mini"
title
="other"
>class为mini,title为other</div>
48
<
div
class
="mini"
title
="test"
>class为mini,title为test</div>
49
</
div
>
50
51
<
div
class
="one"
>
52
<
div
class
="mini"
>class为mini</div>
53
<
div
class
="mini"
>class为mini</div>
54
<
div
class
="mini"
>class为mini</div>
55
<
div
class
="mini"
></
div
>
56
</
div
>
57
58
<
div
class
="one"
>
59
<
div
class
="mini"
>class为mini</div>
60
<
div
class
="mini"
>class为mini</div>
61
<
div
class
="mini"
>class为mini</div>
62
<
div
class
="mini"
title
="tesst"
>class为mini,title为tesst</div>
63
</
div
>
64
65
<
div
style
="display: none"
class
="none"
>
66
style的diaplay为none的div
67
</
div
>
68
69
<
div
class
="hide"
>class为hide的div</div>
70
71
<
div
>
72
包含input的type为“hidden”的div
73
<
input
type
="hidden"
size
="8"
>
74
</
div
>
75
76
<
span
id
="mover"
>正在执行动画的span元素</span>
77
</
body
>
78
</
html
>
2、初始效果
一、基本选择器
1、ID选择器
eg:改变id为one的元素的背景颜色
首先在<head>处引入JQuery库文件:
<
script
type
="text/javascript"
src
="../JQuery库文件/jquery-1.12.1.min.js"
></
script
>
然后编辑JQuery代码:
1
<!--
编写JQuery代码
-->
2
<
script
type
="text/javascript"
>
3
$(
"
document
"
).ready(
function
(){
4
$(
"
#one
"
).css(
"
background-color
"
,
"
#bbffaa
"
);
//
改变id为one的元素的背景颜色
5
})
6
</
script
>
效果图:
!!!所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
);
}
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数,操作可能失败。!!!
2、类选择器
1
<!--
编写JQuery代码
-->
2
<
script
type
="text/javascript"
>
3
$(
"
document
"
).ready(
function
(){
4
$(
"
.mini
"
).css(
"
background-color
"
,
"
#bbffaa
"
);
//
改变class为mini的所有元素的背景颜色
5
})
6
</
script
>
效果:
3、标签选择器
将代码的关键语句改为:
$("div").css("background-color","#bbffaa"); //改变元素名是div的所有元素的背景颜色
效果图:
4、通配选择符
$("*").css("background-color","#bbffaa"); //改变所有元素的背景颜色
效果图:
5、群组选择器
eg:改变所有<span>元素和id为two的元素的背景颜色
$("span,#two").css("background-color","#bbffaa"); //改变所有<span>元素和id为two的元素的背景颜色
效果图:
二、层次选择器
1、$("ancestor descendant")
改变<body>内所有<div>的背景颜色:
1
<!--
编写JQuery代码
-->
2
<
script
type
="text/javascript"
>
3
$(
"
document
"
).ready(
function
(){
4
$(
"
body div
"
).css(
"
background-color
"
,
"
#bbffaa
"
);
//
改变<body>内所有<div>的背景颜色
5
})
6
</
script
>
2、$("parent>child")
改变<body>内子<div>元素的背景颜色:
$("body > div").css("background-color","#bbffaa"); //改变<body>内子<div>元素的背景颜色
3、$("prev+next")
改变class为one的下一个<div>同辈元素的背景色:(!!!下一个同辈元素,相当于next()方法)
$(".one + div").css("background-color","#bbffaa"); //改变class为one的下一个<div>同辈元素的背景色
也可以写为:
$(".one").next("div").css("background-color","#bbffaa");
4、$("prev~siblings")
改变id为two的元素后面的所有<div>同辈元素的背景色:(!!!之后的所有同辈元素,相当于nextAll()方法)
$("#two ~ div").css("background-color","#bbffaa");
相当于:
$("#two").nextAll("div").css("background-color","#bbffaa");
三、过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。
1、基本过滤选择器
eg:
(1)改变第一个和最后一个<div>元素的背景色
1
<
script
type
="text/javascript"
>
2
$(
"
document
"
).ready(
function
(){
3
$(
"
div:first
"
).css(
"
background-color
"
,
"
#bbffaa
"
);
4
$(
"
div:last
"
).css(
"
background-color
"
,
"
#bbffaa
"
);
5
})
6
</
script
>
(2)改变class不为one的<div>元素的背景色
$("div:not(.one)").css("background-color","#bbffaa");
(3)根据索引改变背景色(!!索引值从0开始!!)
$("document").ready(function(){
$("div:eq(3)").css("background-color","#bbffaa"); //改变索引值等于3的<div>元素的背景色
$("div:gt(3)").css("background-color","red"); //改变索引值小于3的<div>元素的背景色
$("div:lt(3)").css("background-color","blue"); //改变索引值大于3的<div>元素的背景色
})
(4)改变正在执行动画的元素的背景色
$(":animated").css("background-color","#bbffaa"); //改变正在执行动画的元素的背景色
(5)改变当前获取焦点的元素的背景色
1
<!
DOCTYPE html
>
2
<
html
>
3
<
head
lang
="en"
>
4
<
meta
charset
="UTF-8"
>
5
<
title
>选择器</title>
6
<
script
type
="text/javascript"
src
="../JQuery库文件/jquery-1.12.1.min.js"
></
script
>
7
<
script
type
="text/javascript"
>
8
$(
"
document
"
).ready(
function
(){
9
$(
"
#button1
"
).click(
function
(){
10
$(
"
:focus
"
).css(
"
background-color
"
,
"
#bbffaa
"
);
//
改变当前获取焦点的元素的背景色
11
})
12
})
13
</
script
>
14
15
</
head
>
16
<
body
>
17
<
input
type
="button"
value
="改变当前获取焦点的元素的背景色"
>
18
<
input
type
="button"
value
="改变当前获取焦点的元素的背景色"
id
="button1"
>
19
</
body
>
20
</
html
>
效果:
2、内容过滤选择器
eg:
(1)改变含有class为mini元素的<div>元素的背景色
1
<
script
type
="text/javascript"
>
2
$(
"
document
"
).ready(
function
(){
3
$(
"
div:has(‘.mini‘)
"
).css(
"
background-color
"
,
"
#bbffaa
"
);
//
改变含有class为mini元素的<div>元素的背景色
4
})
5
</
script
>
(2)改变含有子元素(包括文本元素)的<div>元素的背景色
$("div:parent").css("background-color","#bbffaa"); //改变含有子元素(包括文本元素)的<div>元素的背景色
3、可见性过滤选择器
在可见性选择器中,需要注意的是选择器:hiddden,它不仅包括样式属性display为“none”的元素,也包括文本隐藏域(<input type="hidden"/>)和visibility:hidden之类的元素。
4、属性过滤选择器
eg:
(1)改变含有属性title的<div>元素的背景色
$("div[title]").css("background-color","#bbffaa"); //改变含有属性title的<div>元素的背景色
(2)改变属性title值等于“test”的<div>元素的背景色
$("div[title=test]").css("background-color","#bbffaa"); //改变属性title值等于“test”的<div>元素的背景色
(3))改变属性title值不等于“test”的<div>元素的背景色
$("div[title!=test]").css("background-color","#bbffaa"); //改变属性title值不等于“test”的<div>元素的背景色
(4)改变属性title值以te开始的<div>元素的背景色
$("div[title^=te]").css("background-color","#bbffaa"); //改变属性title值以te开始的<div>元素的背景色
(5)改变属性title值以est结束的<div>元素的背景色
$("div[title$=est]").css("background-color","#bbffaa"); //改变属性title值以est结束的<div>元素的背景色
(6))改变属性title值含有“es”的<div>元素的背景色
$("div[title*=es]").css("background-color","#bbffaa"); //改变属性title值含有“es”的<div>元素的背景色
(7))改变含有属性id,并且属性title值含有“es”的<div>元素的背景色
$("div[id][title*=es]").css("background-color","#bbffaa"); //改变含有属性id,并且属性title值含有“es”的<div>元素的背景色
5、子元素过滤选择器
!!!这里的index从1开始!!!
:nth-child()选择器是很常用的子元素过滤选择器,详细功能如下:
(1):nth-child(even):选取每个父元素下的索引值是偶数的元素
(2):nth-child(odd):选取每个父元素下的索引值是奇数的元素
(3):nth-child(2):选取每个父元素下的索引值是2的元素
(4):nth-child(3n):选取每个父元素下的索引值是3的倍数的元素(n从1开始)
(5):nth-child(3n+1):选取每个父元素下的索引值是(3n+1)的元素(n从1开始)
6、表单对象属性过滤选择器
重新设计一个表单页面如下:
HTML代码:
1
<!
DOCTYPE html
>
2
<
html
>
3
<
head
lang
="en"
>
4
<
meta
charset
="UTF-8"
>
5
<
title
>选择器</title>
6
<
script
type
="text/javascript"
src
="../JQuery库文件/jquery-1.12.1.min.js"
></
script
>
7
<
script
type
="text/javascript"
>
8
$(
"
document
"
).ready(
function
(){
9
10
})
11
</
script
>
12
13
</
head
>
14
<
body
>
15
<
h3
> 表单对象属性过滤选择器.</h3>
16
<
form
>
17
<!--
测试的元素
-->
18 可用元素:<input name="add" value="可用文本框"/><br/>
19 不可用元素:<input name="email" disabled="disabled" value="不可用文本框"/><br/>
20 可用元素: <input name="che" value="可用文本框"/><br/>
21 不可用元素:<input name="name" disabled="disabled" value="不可用文本框"/><br/>
22
<
br
/>
23
24 多选框:<br/>
25
<
input
type
="checkbox"
name
="newsletter"
checked
="checked"
value
="test1"
/>
test1
26
<
input
type
="checkbox"
name
="newsletter"
value
="test2"
/>
test2
27
<
input
type
="checkbox"
name
="newsletter"
value
="test3"
/>
test3
28
<
input
type
="checkbox"
name
="newsletter"
checked
="checked"
value
="test4"
/>
test4
29
<
input
type
="checkbox"
name
="newsletter"
value
="test5"
/>
test5
30
<
div
></
div
>
31
32
<
br
/><
br
/>
33 下拉列表1:<br/>
34
<
select
name
="test"
multiple
="multiple"
style
="height:100px"
>
35
<
option
>浙江</option>
36
<
option
selected
="selected"
>湖南</option>
37
<
option
>北京</option>
38
<
option
selected
="selected"
>天津</option>
39
<
option
>广州</option>
40
<
option
>湖北</option>
41
</
select
>
42
43
<
br
/><
br
/>
44 下拉列表2:<br/>
45
<
select
name
="test2"
>
46
<
option
>浙江</option>
47
<
option
>湖南</option>
48
<
option
selected
="selected"
>北京</option>
49
<
option
>天津</option>
50
<
option
>广州</option>
51
<
option
>湖北</option>
52
</
select
>
53
<
div
></
div
>
54
</
form
>
55
</
body
>
56
</
html
>
eg:
(1)改变表单内可用<input>元素的值
1
<
script
type
="text/javascript"
>
2
$(
"
document
"
).ready(
function
(){
3
$(
"
input:enabled
"
).val(
"
这里变化了!!!
"
);
4
})
5
</
script
>
(2)获取多选框选中的个数
1
<
script
type
="text/javascript"
>
2
$(
"
document
"
).ready(
function
(){
3
$(
"
:checkbox
"
).click(countChecked);
//
这里的相关知识点在第四节会讲到
4
function
countChecked() {
5
var
n
=
$(
"
input:checked
"
).length;
//
获取多选框选中的个数
6
$(
"
div
"
).eq(
0
).html(
"
<strong>有
"
+
n
+
"
个被选中!</strong>
"
);
//
在第一个div处输入结果
7
}
8
countChecked();
//
进入页面就调用.
9
})
10
</
script
>
效果:
(3)获取下拉框选中的内容
1
<
script
type
="text/javascript"
>
2
$(
"
document
"
).ready(
function
(){
3
$(
"
select
"
).change(
function
() {
4
var
str
=
""
;
5
$(
"
select :selected
"
).each(
function
() {
6
str
+=
$(
this
).text()
+
"
,
"
;
7
});
8
$(
"
div
"
).eq(
1
).html(
"
<strong>你选中的是:
"
+
str
+
"
</strong>
"
);
9
}).trigger(
‘
change
‘
);
10
//
trigger(‘change‘) 在这里的意思是:
11
//
select加载后,马上执行onchange.
12
//
也可以用.change()代替.
13
})
14
</
script
>
四、表单选择器
eg:获得表单内表单元素的个数:
$(":input").length;
五、案例研究:网站品牌列表效果
一、目标效果如图所示:
如图所示,点击“显示全部品牌”,就可以显示其他未显示的品牌,并且会将推荐的品牌高亮显示。
二、JQuery代码
1
<
script
type
="text/javascript"
>
2
$(
"
document
"
).ready(
function
(){
//
等待DOM加载完毕.
3
var
$category
=
$(
‘
ul li:gt(5):not(:last)
‘
);
//
获得索引值大于5的品牌集合对象(除最后一条)
4
$category.hide();
//
隐藏上面获取到的jQuery对象。
5
var
$toggleBtn
=
$(
‘
div.showMore > a
‘
);
//
获取“显示全部品牌”按钮
6
$toggleBtn.click(
function
(){
//
点击“显示全部品牌”按钮
7
if
($category.is(
"
:visible
"
)){
//
如果获得索引值大于5的品牌集合对象(除最后一条)是显示的
8
$category.hide();
//
隐藏$category
9
$(
this
).find(
‘
span
‘
)
10
.text(
"
显示全部品牌
"
);
//
改变文本
11
$(
‘
ul li
‘
).removeClass(
"
promoted
"
);
//
去掉高亮样式
12
}
13
else
{
//
如果获得索引值大于5的品牌集合对象(除最后一条)是隐藏的
14
$category.show();
//
显示$category
15
$(
this
).find(
‘
span
‘
)
16
.text(
"
精简显示品牌
"
);
//
改变文本
17
$(
‘
ul li
‘
).filter(
"
:contains(‘佳能‘),:contains(‘尼康‘),:contains(‘奥林巴斯‘)
"
)
//
filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
18
.addClass(
"
promoted
"
);
//
添加高亮样式
19
}
20
return
false
;
//
超链接不跳转
21
})
22
})
23
</
script
>
三、完整的HTML代码
1
<!
DOCTYPE html
>
2
<
html
>
3
<
head
lang
="en"
>
4
<
meta
charset
="UTF-8"
>
5
<
title
>网站品牌列表效果</title>
6
<!--
引入JQuery库文件
-->
7
<
script
type
="text/javascript"
src
="../JQuery库文件/jquery-1.12.1.min.js"
></
script
>
8
<
style
type
="text/css"
>
9
#box
{
10
border
:
solid 1px #BEBEBE
;
11
width
:
400px
;
12
/*
height: 200px;
*/
13
margin
:
0px auto
;
14
}
15
/*
列表样式
*/
16
ul
{
17
list-style
:
none
;
18
font-size
:
18px
;
19
line-height
:
40px
;
20
}
21
/*
使每一行有三个li元素
*/
22
li
{
23
float
:
left
;
/*
此时li标签紧凑排列
*/
24
width
:
120px
;
25
}
26
27
/*
超链接样式
*/
28
a
{
29
text-decoration
:
none
;
30
}
31
a:hover,a:active
{
32
color
:
red
;
33
text-decoration
:
underline
;
34
}
35
36
/*
高亮显示的元素
*/
37
.promoted a
{
color
:
#F50
;
}
38
39
/*
下面部分样式
*/
40
.showMore
{
41
margin
:
0px auto
;
42
width
:
150px
;
43
height
:
30px
;
44
border
:
solid 1px #BEBEBE
;
45
text-align
:
center
;
46
font-size
:
13px
;
47
clear
:
left
;
48
}
49
.showMore a span
{
50
display
:
block
;
/*
设置为块状元素,使其方便调边距
*/
51
margin-top
:
6px
;
52
}
53
</
style
>
54
<
script
type
="text/javascript"
>
55
$(
"
document
"
).ready(
function
(){
//
等待DOM加载完毕.
56
var
$category
=
$(
‘
ul li:gt(5):not(:last)
‘
);
//
获得索引值大于5的品牌集合对象(除最后一条)
57
$category.hide();
//
隐藏上面获取到的jQuery对象。
58
var
$toggleBtn
=
$(
‘
div.showMore > a
‘
);
//
获取“显示全部品牌”按钮
59
$toggleBtn.click(
function
(){
//
点击“显示全部品牌”按钮
60
if
($category.is(
"
:visible
"
)){
//
如果获得索引值大于5的品牌集合对象(除最后一条)是显示的
61
$category.hide();
//
隐藏$category
62
$(
this
).find(
‘
span
‘
)
63
.text(
"
显示全部品牌
"
);
//
改变文本
64
$(
‘
ul li
‘
).removeClass(
"
promoted
"
);
//
去掉高亮样式
65
}
66
else
{
//
如果获得索引值大于5的品牌集合对象(除最后一条)是隐藏的
67
$category.show();
//
显示$category
68
$(
this
).find(
‘
span
‘
)
69
.text(
"
精简显示品牌
"
);
//
改变文本
70
$(
‘
ul li
‘
).filter(
"
:contains(‘佳能‘),:contains(‘尼康‘),:contains(‘奥林巴斯‘)
"
)
//
filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
71
.addClass(
"
promoted
"
);
//
添加高亮样式
72
}
73
return
false
;
//
超链接不跳转
74
})
75
})
76
</
script
>
77
</
head
>
78
<
body
>
79
<
div
id
="box"
>
80
<
ul
>
81
<
li
><
a
href
="#"
>佳能</a></li>
82
<
li
><
a
href
="#"
>索尼</a></li>
83
<
li
><
a
href
="#"
>三星</a></li>
84
<
li
><
a
href
="#"
>尼康</a></li>
85
<
li
><
a
href
="#"
>松下</a></li>
86
<
li
><
a
href
="#"
>卡西欧</a></li>
87
<
li
><
a
href
="#"
>富士</a></li>
88
<
li
><
a
href
="#"
>柯达</a></li>
89
<
li
><
a
href
="#"
>宾得</a></li>
90
<
li
><
a
href
="#"
>理光</a></li>
91
<
li
><
a
href
="#"
>奥林巴斯</a></li>
92
<
li
><
a
href
="#"
>明基</a></li>
93
<
li
><
a
href
="#"
>爱国者</a></li>
94
<
li
><
a
href
="#"
>其它品牌相机</a></li>
95
</
ul
>
96
<
div
class
="showMore"
>
97
<
a
href
="more.html"
><
span
>显示全部品牌</span></a>
98
</
div
>
99
</
div
>
100
</
body
>
101
</
html
>
JQuery选择器
通过一个例子来分辨这些选择器,首先做一个初始的页面:
1、HTML
1 <! DOCTYPE html >2 < html >3 < head lang ="en" >4 < meta charset ="UTF-8" >5 < title >选择器</title>6 < script type ="text/javascript" src ="../JQuery库文件/jquery-1.12.1.min.js" ></ script >7 < style type ="text/css" >8 div,span,p {9 width : 140px ;10 height : 140px ;11 margin : 5px ;12 background : #aaa ;13 border : #000 1px solid ;14 float : left ;15 font-size : 17px ;16 font-family : Verdana ;17 }18 div.mini {19 width : 55px ;20 height : 55px ;21 background-color : #aaa ;22 font-size : 12px ;23 }24 div.hide {25 display : none ;26 }27 </ style >28 < script type ="text/javascript" >29 // 给id为mover的元素添加动画.30 $( " document " ).ready( function (){31 function animateIt() {32 $( " #mover " ).slideToggle( " slow " , animateIt);33 }34 animateIt();35 })36 </ script >3738 </ head >39 < body >40 < div class ="one" id ="one" >41 id为one,class为one的div42 < div class ="mini" >class为mini</div>43 </ div >4445 < div class ="one" id ="two" title ="test" >46 id为two,class为one,title为text的div47 < div class ="mini" title ="other" >class为mini,title为other</div>48 < div class ="mini" title ="test" >class为mini,title为test</div>49 </ div >5051 < div class ="one" >52 < div class ="mini" >class为mini</div>53 < div class ="mini" >class为mini</div>54 < div class ="mini" >class为mini</div>55 < div class ="mini" ></ div >56 </ div >5758 < div class ="one" >59 < div class ="mini" >class为mini</div>60 < div class ="mini" >class为mini</div>61 < div class ="mini" >class为mini</div>62 < div class ="mini" title ="tesst" >class为mini,title为tesst</div>63 </ div >6465 < div style ="display: none" class ="none" >66 style的diaplay为none的div67 </ div >6869 < div class ="hide" >class为hide的div</div>7071 < div >72 包含input的type为“hidden”的div73 < input type ="hidden" size ="8" >74 </ div >7576 < span id ="mover" >正在执行动画的span元素</span>77 </ body >78 </ html >
2、初始效果
一、基本选择器
1、ID选择器
eg:改变id为one的元素的背景颜色
首先在<head>处引入JQuery库文件:
<
script
type
="text/javascript"
src
="../JQuery库文件/jquery-1.12.1.min.js"
></
script
>
然后编辑JQuery代码:
1 <!-- 编写JQuery代码 -->2 < script type ="text/javascript" >3 $( " document " ).ready( function (){4 $( " #one " ).css( " background-color " , " #bbffaa " ); // 改变id为one的元素的背景颜色5 })6 </ script >
效果图:
!!!所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){);}
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数,操作可能失败。!!!
2、类选择器
1 <!-- 编写JQuery代码 -->2 < script type ="text/javascript" >3 $( " document " ).ready( function (){4 $( " .mini " ).css( " background-color " , " #bbffaa " ); // 改变class为mini的所有元素的背景颜色5 })6 </ script >
效果:
3、标签选择器
将代码的关键语句改为:
$("div").css("background-color","#bbffaa"); //改变元素名是div的所有元素的背景颜色
效果图:
4、通配选择符
$("*").css("background-color","#bbffaa"); //改变所有元素的背景颜色
效果图:
5、群组选择器
eg:改变所有<span>元素和id为two的元素的背景颜色
$("span,#two").css("background-color","#bbffaa"); //改变所有<span>元素和id为two的元素的背景颜色
效果图:
二、层次选择器
1、$("ancestor descendant")
改变<body>内所有<div>的背景颜色:
1 <!-- 编写JQuery代码 -->2 < script type ="text/javascript" >3 $( " document " ).ready( function (){4 $( " body div " ).css( " background-color " , " #bbffaa " ); // 改变<body>内所有<div>的背景颜色5 })6 </ script >
2、$("parent>child")
改变<body>内子<div>元素的背景颜色:
$("body > div").css("background-color","#bbffaa"); //改变<body>内子<div>元素的背景颜色
3、$("prev+next")
改变class为one的下一个<div>同辈元素的背景色:(!!!下一个同辈元素,相当于next()方法)
$(".one + div").css("background-color","#bbffaa"); //改变class为one的下一个<div>同辈元素的背景色
也可以写为:
$(".one").next("div").css("background-color","#bbffaa");
4、$("prev~siblings")
改变id为two的元素后面的所有<div>同辈元素的背景色:(!!!之后的所有同辈元素,相当于nextAll()方法)
$("#two ~ div").css("background-color","#bbffaa");
相当于:
$("#two").nextAll("div").css("background-color","#bbffaa");
三、过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。
1、基本过滤选择器
eg:
(1)改变第一个和最后一个<div>元素的背景色
1 < script type ="text/javascript" >2 $( " document " ).ready( function (){3 $( " div:first " ).css( " background-color " , " #bbffaa " );4 $( " div:last " ).css( " background-color " , " #bbffaa " );5 })6 </ script >
(2)改变class不为one的<div>元素的背景色
$("div:not(.one)").css("background-color","#bbffaa");
(3)根据索引改变背景色(!!索引值从0开始!!)
$("document").ready(function(){$("div:eq(3)").css("background-color","#bbffaa"); //改变索引值等于3的<div>元素的背景色$("div:gt(3)").css("background-color","red"); //改变索引值小于3的<div>元素的背景色$("div:lt(3)").css("background-color","blue"); //改变索引值大于3的<div>元素的背景色})
(4)改变正在执行动画的元素的背景色
$(":animated").css("background-color","#bbffaa"); //改变正在执行动画的元素的背景色
(5)改变当前获取焦点的元素的背景色
1 <! DOCTYPE html >2 < html >3 < head lang ="en" >4 < meta charset ="UTF-8" >5 < title >选择器</title>6 < script type ="text/javascript" src ="../JQuery库文件/jquery-1.12.1.min.js" ></ script >7 < script type ="text/javascript" >8 $( " document " ).ready( function (){9 $( " #button1 " ).click( function (){10 $( " :focus " ).css( " background-color " , " #bbffaa " ); // 改变当前获取焦点的元素的背景色11 })12 })13 </ script >1415 </ head >16 < body >17 < input type ="button" value ="改变当前获取焦点的元素的背景色" >18 < input type ="button" value ="改变当前获取焦点的元素的背景色" id ="button1" >19 </ body >20 </ html >
效果:
2、内容过滤选择器
eg:
(1)改变含有class为mini元素的<div>元素的背景色
1 < script type ="text/javascript" >2 $( " document " ).ready( function (){3 $( " div:has(‘.mini‘) " ).css( " background-color " , " #bbffaa " ); // 改变含有class为mini元素的<div>元素的背景色4 })5 </ script >
(2)改变含有子元素(包括文本元素)的<div>元素的背景色
$("div:parent").css("background-color","#bbffaa"); //改变含有子元素(包括文本元素)的<div>元素的背景色
3、可见性过滤选择器
在可见性选择器中,需要注意的是选择器:hiddden,它不仅包括样式属性display为“none”的元素,也包括文本隐藏域(<input type="hidden"/>)和visibility:hidden之类的元素。
4、属性过滤选择器
eg:
(1)改变含有属性title的<div>元素的背景色
$("div[title]").css("background-color","#bbffaa"); //改变含有属性title的<div>元素的背景色
(2)改变属性title值等于“test”的<div>元素的背景色
$("div[title=test]").css("background-color","#bbffaa"); //改变属性title值等于“test”的<div>元素的背景色
(3))改变属性title值不等于“test”的<div>元素的背景色
$("div[title!=test]").css("background-color","#bbffaa"); //改变属性title值不等于“test”的<div>元素的背景色
(4)改变属性title值以te开始的<div>元素的背景色
$("div[title^=te]").css("background-color","#bbffaa"); //改变属性title值以te开始的<div>元素的背景色
(5)改变属性title值以est结束的<div>元素的背景色
$("div[title$=est]").css("background-color","#bbffaa"); //改变属性title值以est结束的<div>元素的背景色
(6))改变属性title值含有“es”的<div>元素的背景色
$("div[title*=es]").css("background-color","#bbffaa"); //改变属性title值含有“es”的<div>元素的背景色
(7))改变含有属性id,并且属性title值含有“es”的<div>元素的背景色
$("div[id][title*=es]").css("background-color","#bbffaa"); //改变含有属性id,并且属性title值含有“es”的<div>元素的背景色
5、子元素过滤选择器
!!!这里的index从1开始!!!
:nth-child()选择器是很常用的子元素过滤选择器,详细功能如下:
(1):nth-child(even):选取每个父元素下的索引值是偶数的元素
(2):nth-child(odd):选取每个父元素下的索引值是奇数的元素
(3):nth-child(2):选取每个父元素下的索引值是2的元素
(4):nth-child(3n):选取每个父元素下的索引值是3的倍数的元素(n从1开始)
(5):nth-child(3n+1):选取每个父元素下的索引值是(3n+1)的元素(n从1开始)
6、表单对象属性过滤选择器
重新设计一个表单页面如下:
HTML代码:
1 <! DOCTYPE html >2 < html >3 < head lang ="en" >4 < meta charset ="UTF-8" >5 < title >选择器</title>6 < script type ="text/javascript" src ="../JQuery库文件/jquery-1.12.1.min.js" ></ script >7 < script type ="text/javascript" >8 $( " document " ).ready( function (){910 })11 </ script >1213 </ head >14 < body >15 < h3 > 表单对象属性过滤选择器.</h3>16 < form >17 <!-- 测试的元素 -->18 可用元素:<input name="add" value="可用文本框"/><br/>19 不可用元素:<input name="email" disabled="disabled" value="不可用文本框"/><br/>20 可用元素: <input name="che" value="可用文本框"/><br/>21 不可用元素:<input name="name" disabled="disabled" value="不可用文本框"/><br/>22 < br />2324 多选框:<br/>25 < input type ="checkbox" name ="newsletter" checked ="checked" value ="test1" /> test126 < input type ="checkbox" name ="newsletter" value ="test2" /> test227 < input type ="checkbox" name ="newsletter" value ="test3" /> test328 < input type ="checkbox" name ="newsletter" checked ="checked" value ="test4" /> test429 < input type ="checkbox" name ="newsletter" value ="test5" /> test530 < div ></ div >3132 < br />< br />33 下拉列表1:<br/>34 < select name ="test" multiple ="multiple" style ="height:100px" >35 < option >浙江</option>36 < option selected ="selected" >湖南</option>37 < option >北京</option>38 < option selected ="selected" >天津</option>39 < option >广州</option>40 < option >湖北</option>41 </ select >4243 < br />< br />44 下拉列表2:<br/>45 < select name ="test2" >46 < option >浙江</option>47 < option >湖南</option>48 < option selected ="selected" >北京</option>49 < option >天津</option>50 < option >广州</option>51 < option >湖北</option>52 </ select >53 < div ></ div >54 </ form >55 </ body >56 </ html >
eg:
(1)改变表单内可用<input>元素的值
1 < script type ="text/javascript" >2 $( " document " ).ready( function (){3 $( " input:enabled " ).val( " 这里变化了!!! " );4 })5 </ script >
(2)获取多选框选中的个数
1 < script type ="text/javascript" >2 $( " document " ).ready( function (){3 $( " :checkbox " ).click(countChecked); // 这里的相关知识点在第四节会讲到4 function countChecked() {5 var n = $( " input:checked " ).length; // 获取多选框选中的个数6 $( " div " ).eq( 0 ).html( " <strong>有 " + n + " 个被选中!</strong> " ); // 在第一个div处输入结果7 }8 countChecked(); // 进入页面就调用.9 })10 </ script >
效果:
(3)获取下拉框选中的内容
1 < script type ="text/javascript" >2 $( " document " ).ready( function (){3 $( " select " ).change( function () {4 var str = "" ;5 $( " select :selected " ).each( function () {6 str += $( this ).text() + " , " ;7 });8 $( " div " ).eq( 1 ).html( " <strong>你选中的是: " + str + " </strong> " );9 }).trigger( ‘ change ‘ );10 // trigger(‘change‘) 在这里的意思是:11 // select加载后,马上执行onchange.12 // 也可以用.change()代替.13 })14 </ script >
四、表单选择器
eg:获得表单内表单元素的个数:
$(":input").length;
五、案例研究:网站品牌列表效果
一、目标效果如图所示:
如图所示,点击“显示全部品牌”,就可以显示其他未显示的品牌,并且会将推荐的品牌高亮显示。
二、JQuery代码
1 < script type ="text/javascript" >2 $( " document " ).ready( function (){ // 等待DOM加载完毕.3 var $category = $( ‘ ul li:gt(5):not(:last) ‘ ); // 获得索引值大于5的品牌集合对象(除最后一条)4 $category.hide(); // 隐藏上面获取到的jQuery对象。5 var $toggleBtn = $( ‘ div.showMore > a ‘ ); // 获取“显示全部品牌”按钮6 $toggleBtn.click( function (){ // 点击“显示全部品牌”按钮7 if ($category.is( " :visible " )){ // 如果获得索引值大于5的品牌集合对象(除最后一条)是显示的8 $category.hide(); // 隐藏$category9 $( this ).find( ‘ span ‘ )10 .text( " 显示全部品牌 " ); // 改变文本11 $( ‘ ul li ‘ ).removeClass( " promoted " ); // 去掉高亮样式12 }13 else { // 如果获得索引值大于5的品牌集合对象(除最后一条)是隐藏的14 $category.show(); // 显示$category15 $( this ).find( ‘ span ‘ )16 .text( " 精简显示品牌 " ); // 改变文本17 $( ‘ ul li ‘ ).filter( " :contains(‘佳能‘),:contains(‘尼康‘),:contains(‘奥林巴斯‘) " ) // filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。18 .addClass( " promoted " ); // 添加高亮样式19 }20 return false ; // 超链接不跳转21 })22 })23 </ script >
三、完整的HTML代码
1 <! DOCTYPE html >2 < html >3 < head lang ="en" >4 < meta charset ="UTF-8" >5 < title >网站品牌列表效果</title>6 <!-- 引入JQuery库文件 -->7 < script type ="text/javascript" src ="../JQuery库文件/jquery-1.12.1.min.js" ></ script >8 < style type ="text/css" >9 #box {10 border : solid 1px #BEBEBE ;11 width : 400px ;12 /* height: 200px; */13 margin : 0px auto ;14 }15 /* 列表样式 */16 ul {17 list-style : none ;18 font-size : 18px ;19 line-height : 40px ;20 }21 /* 使每一行有三个li元素 */22 li {23 float : left ; /* 此时li标签紧凑排列 */24 width : 120px ;25 }2627 /* 超链接样式 */28 a {29 text-decoration : none ;30 }31 a:hover,a:active {32 color : red ;33 text-decoration : underline ;34 }3536 /* 高亮显示的元素 */37 .promoted a { color : #F50 ; }3839 /* 下面部分样式 */40 .showMore {41 margin : 0px auto ;42 width : 150px ;43 height : 30px ;44 border : solid 1px #BEBEBE ;45 text-align : center ;46 font-size : 13px ;47 clear : left ;48 }49 .showMore a span {50 display : block ; /* 设置为块状元素,使其方便调边距 */51 margin-top : 6px ;52 }53 </ style >54 < script type ="text/javascript" >55 $( " document " ).ready( function (){ // 等待DOM加载完毕.56 var $category = $( ‘ ul li:gt(5):not(:last) ‘ ); // 获得索引值大于5的品牌集合对象(除最后一条)57 $category.hide(); // 隐藏上面获取到的jQuery对象。58 var $toggleBtn = $( ‘ div.showMore > a ‘ ); // 获取“显示全部品牌”按钮59 $toggleBtn.click( function (){ // 点击“显示全部品牌”按钮60 if ($category.is( " :visible " )){ // 如果获得索引值大于5的品牌集合对象(除最后一条)是显示的61 $category.hide(); // 隐藏$category62 $( this ).find( ‘ span ‘ )63 .text( " 显示全部品牌 " ); // 改变文本64 $( ‘ ul li ‘ ).removeClass( " promoted " ); // 去掉高亮样式65 }66 else { // 如果获得索引值大于5的品牌集合对象(除最后一条)是隐藏的67 $category.show(); // 显示$category68 $( this ).find( ‘ span ‘ )69 .text( " 精简显示品牌 " ); // 改变文本70 $( ‘ ul li ‘ ).filter( " :contains(‘佳能‘),:contains(‘尼康‘),:contains(‘奥林巴斯‘) " ) // filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。71 .addClass( " promoted " ); // 添加高亮样式72 }73 return false ; // 超链接不跳转74 })75 })76 </ script >77 </ head >78 < body >79 < div id ="box" >80 < ul >81 < li >< a href ="#" >佳能</a></li>82 < li >< a href ="#" >索尼</a></li>83 < li >< a href ="#" >三星</a></li>84 < li >< a href ="#" >尼康</a></li>85 < li >< a href ="#" >松下</a></li>86 < li >< a href ="#" >卡西欧</a></li>87 < li >< a href ="#" >富士</a></li>88 < li >< a href ="#" >柯达</a></li>89 < li >< a href ="#" >宾得</a></li>90 < li >< a href ="#" >理光</a></li>91 < li >< a href ="#" >奥林巴斯</a></li>92 < li >< a href ="#" >明基</a></li>93 < li >< a href ="#" >爱国者</a></li>94 < li >< a href ="#" >其它品牌相机</a></li>95 </ ul >96 < div class ="showMore" >97 < a href ="more.html" >< span >显示全部品牌</span></a>98 </ div >99 </ div >100 </ body >101 </ html >
原文:http://blog.csdn.net/u011019141/article/details/51114709
内容总结
以上是互联网集市为您收集整理的JQuery选择器全部内容,希望文章能够帮你解决JQuery选择器所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。