选择器是jQuery的根基
一. 认识
1.CSS常用的选择器
标签选择器,后代选择器,Id选择器,通配符选择器,类选择器,群组选择器——主流浏览器全部支持
伪类选择器,子选择器,临近选择器等等——不是全部被支持
2.jQuery选择器
比如有个
<p class="demo">demo</p>
CSS写法是.demo
jq写法是$('.demo')
二者写法相似,但是前者添加的是样式,后者是行为。
二. 优势
写法当然简洁多了,还支持CSS1-CSS3。而且在使用一个可能不存在的元素时,自动帮你判断,存在的话执行,不存在则不执行。
那么问题来了:jq函数获取的永远是一个对象——所以不要使用如下代码
1
2
3
|
if
($(
'oCr'
)){
do
something
}
|
要么转化为DOM对象再来判断,或者:
1
2
3
|
if
($(
'#oCr'
).length>0){
dosomething
}
|
三.选择器
做几个js原生代码练习。
【例2.1】表单隔行变色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<
table
id = "tab" border = "1" width = "400" >
<
thead
>
<
tr
>
<
td
>id</
td
>
<
td
>姓名</
td
>
<
td
>操作</
td
>
</
tr
>
</
thead
>
<
tbody
>
<
tr
>
<
td
>1</
td
>
<
td
>dangjingtao</
td
>
<
td
></
td
>
</
tr
>
<
tr
>
<
td
>2</
td
>
<
td
>djtap</
td
>
<
td
></
td
>
</
tr
>
<
tr
>
<
td
>3</
td
>
<
td
>TAO</
td
>
<
td
></
td
>
</
tr
>
<
tr
>
<
td
>4</
td
>
<
td
>TAOt</
td
>
<
td
></
td
>
</
tr
>
<
tr
>
<
td
>5</
td
>
<
td
>hehe</
td
>
<
td
></
td
>
</
tr
>
</
tbody
>
</
table
>
|
js
1
2
3
4
5
6
7
8
9
10
|
window.onload=
function
(){
var
oTab=document.getElementById( 'tab' );
var
aRows=oTab.tBodies[0].rows;
for
(i=0;i<aRows.length;i++){
if
(i%2==0){
aRows[i].style.background=
'#ccc'
;
}
}
}
|
jQuery改写:考虑:even选择器
1
2
3
|
$(document).ready(
function
(){
$(
'#tab tbody tr:even'
).css(
'background'
,
'#ccc'
);
});
|
【例2.2】给网页所有P元素加onclick事件
1
2
3
4
5
|
<
div
id = "div1" >
<
p
>hehe</
p
>
<
p
>hahaha</
p
>
<
p
>hohoho</
p
>
</
div
>
|
JS
1
2
3
4
5
6
7
8
9
10
|
window.onload=
function
(){
var
oDiv=document.getElementById( 'div1' );
var
aP=document.getElementsByTagName( 'p' );
for
(i=0;i<aP.length;i++){
aP[i].onclick=
function
(){
alert(
this
.innerHTML);
}
}
}
|
改写:说白了就是一个div1内所有P元素,click(function(){})
1
2
3
4
5
|
$(document).ready(
function
(){
$(
'#div1>p'
).click(
function
(){
alert(
this
.innerHTML);
})
})
|
【例.3】对多选框操作,输出被选中的多选框的个数
1
2
3
4
|
<
input
type = "checkbox" value = "1" name = "check" checked = "checked" />
<
input
type = "checkbox" value = "2" name = "check" />
<
input
type = "checkbox" value = "3" name = "check" checked = "checked" />
<
input
type = "button" value = "你选中的个数" id = "btn1" />
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
window.onload=
function
(){
var
oBtn=document.getElementById( 'btn1' );
oBtn.onclick=
function
(){
var
aChk=document.getElementsByName( 'check' );
var
count=0;
for
(i=0;i<aChk.length;i++){
if
(aChk[i].checked){
count++;
}
}
alert(
'您选中的个数是'
+count+
'个'
);
}
}
|
改写:属性选择器
1
2
3
4
5
6
7
|
$(document).ready(
function
(){
var
arr=$( "input[name='check']:checked" );
$(
'#btn1'
).click(
function
(){
alert(
'您选中的个数是'
+arr.length+
'个'
);
})
})
|
程序有点问题,就是不能实时反映当前的情况。
1. 基本选择器 | 释义 | 用法示例 | 备注 |
#id .class 还可以是通配符,元素或者群组 | 等效于getElementById('') 等效于getElementsByClass('') | $("#myDiv"); $('.myClass'); $('*') $('div1,div2') | 也许是最好用的选择器。 |
2. 层次选择器 | 释义 | 用法示例 | 备注 |
ancestor descendant parent>child | 在给定的祖先元素下匹配所有的后代元素 选取直接子元素 | $("form input") $('form>input') | |
one+div | 选取class为one的下一个div同辈元素 | $(.one+div') | jQuery替代方案: $('.one').next('div')可以替代$('.one+div') |
one~siblings | 选取特定id元素后面所有特定类别同辈元素 | $(.one~div) | jQuery替代方案: $(#one).nextAll('div')可以替代$('#two~div')。 |
3.过滤选择器 | 释义 | 用法示例 | 备注 |
3.1 基本过滤选择器 | 释义 | 用法示例 | 备注 |
:first和:last | 获取指定类型匹配的第一个/最后一个元素 | $('div:first') 找出第一个div $('div:last') 找出最后一个div | |
not(selector} | 去除所有与给定选择器匹配的元素 | 假设两个选择框,一个选中一个没选中:选择的是没被点选的那个复选框。 $('input:not(:checked)') | |
:even(偶数) :odd(奇数) | 选取索引值为偶数/奇数的元素,从0开始。 注意索引值第0个即现实中第1个。 | $('div:even') 选取的是偶数个索引值的div,也就是现实中第1,3,5,7..的div | 索引值都是从0开始的。除了Eq是单个元素,其它都是多个元素 |
:eq(index) :gt(index) :lt(index) | 提取索引值/索引值之后/索引值之前的元素 | $('input:eq(1)') 索引值第1个也就是现实中第2个input标记。 | |
:header | 选择所有标题元素(h1,h2,h3....h6),前面不用跟对象 | $(':header') | |
:animated | 选取当前执行动画的元素 | $('div:animate') 选取正在执行动画的div | |
:focus | 选取当前获取焦点的元素, 前面不用跟对象 | $(':focus') | |
3.2 内容过滤选择器 | 释义 | 用法示例 | 备注 |
:contains(text) | 选取所有文本内容为text的元素 | $('div:contains('我')) 选取所有内容包含“我"的div元素 | |
:empty :parent | 选取不包含子元素或文本的空元素 选取含有子元素或文本的元素(也就是非空元素) | $('div:empty') 选取所有的空div 选取所有非空的div $('div:parent') | |
:has(selector) | 选取含有选择器所匹配的元素 | $('div:has(p)') 选取所有含有p元素的div | |
3.3可见性过滤选择器 | 释义 | 用法示例 | 备注 |
:hidden :visible | 选取所有不可见的元素 | $('div:hidden') 选取所有可见的div | 如果前面不跟对象,则默认所有不可见的被选取 |
选取所有可见的元素 | 选取所有不可见的div $('div:visible') | ||
3.4 属性过滤选择器 | 释义 | 用法 | 备注 |
[attribute] | 选取所有拥有此属性的d元素 | $('div[id]') 选取含有id的div | |
[attribute=value] [attribute!=value] | 选取此属性为value的元素 | $('div[title=haha]') 选取title为haha的div | |
选取属性值不为value的元素 | $(div['title!=haha]') 选取title为haha的div | ||
[attribute^=value] | 选取属性以value开始的元素 | ||
[attribute$=value] | 选取属性以value结束的元素 | ||
[attribute*=value] | 选取属性含有value的元素 | ||
[attribute|=value] | 选取属性为给定字符串,或以该字符串为前缀(前缀-后缀)的元素 | ||
[attribute-=value] | 选取属性用空格分隔的值中包含value的元素 | ||
[attribute1][attribute2]..[attributeN] | 多个属性选择器的交集 | ||
3.5 子元素过滤选择器 | 释义 | 用法 | 备注 |
:nth-dhild(index/even/odd/eqation) | 选取每个父元素下第index个子元素或奇偶数子元素 | index从1算起,是个集合元素 | |
:first-child | 每个父元素下第一个子元素 | $('ul li:firsrt-child') 选取每个ul的第一个li元素 | 不同于:first,这是个集合元素 |
:last-child | 每个父元素下最后一个子元素 | ||
:only-child | 独生子元素会被匹配,否则无效。 | 都是集合元素 | |
3.6 表单对象的属性过滤选择器 | 释义 | 用法 | 备注 |
:enable :disable | 选取所有可用元素 | $('form1:enable') 选取id为form1的表单内所有可用元素 | |
选取所有不可用元素 | |||
:checked | (单选框,复选框)所有被选中的元素 | $('input:checked') | |
:selected | (下拉列表)所有被选中的元素 | $('select option:selected') | |
4. 表单选择器 | 释义 | 用法 | 备注 |
:input | 选取所有,input、textarea,select,button元素 | 前面不用跟对象 | |
:text | 选取所有单行文本框 | ||
:password | 选取所有密码框 | ||
:radio | 选取所有单选框 | ||
:checkbox | 选取所有复选框 | ||
:submit | 选取所有提交按钮 | ||
:image | 选取所有图像按钮 | ||
:reset | 选取所有重置按钮 | ||
:button | 选取所有button按钮 | ||
:fil | |||
注意事项:
(1)当选择器含有特殊字符(比如16进制颜色代码)
\\#666
(2)注意:xxx的空格问题,意义和表现都是不同的。
【久违的案例】某购物网站品牌列表效果
项目需求:点击显示更多,弹出隐藏的选项,同时将重要推荐高亮显示,同时按钮文字变成:收起。再次单击收起,变回原来的页面。可以先写出JavaScript的工作方式。
先布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<
div
id = "section" >
<
h2
>jQuery选择器辞典</
h2
>
<
ul
>
<
li
class = "main" >< a href = "javascript:;" >基本选择器</ a ></ li >
<
li
class = "main" >< a href = "javascript:;" >层次选择器</ a ></ li >
<
li
class = "main" >< a href = "javascript:;" >过滤选择器</ a ></ li >
<
li
class = "main" >< a href = "javascript:;" >表单选择器</ a ></ li >
<
li
class = "minor" >< a href = "javascript:;" >基本过滤选择器</ a ></ li >
<
li
class = "minor" >< a href = "javascript:;" >内容过滤选择器</ a ></ li >
<
li
class = "minor" >< a href = "javascript:;" >属性过滤选择器</ a ></ li >
<
li
class = "minor" >< a href = "javascript:;" >子元素过滤选择器</ a ></ li >
<
li
class = "minor" >< a href = "javascript:;" >表单对象的过滤属性选择器</ a ></ li >
<
li
><
a
href = "javascript:;" >补白</ a ></ li >
</
ul
>
<
div
id = "showhide" >
显示所有
</
div
>
</
div
>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
*{
margin
:
0
;
padding
:
0
;
}
ul li{
list-style
:
none
;}
a{
text-decoration
:
none
;}
#section{
width
:
800px
;
margin
:
100px
auto ;
}
h
2
{
width
:
400px
;
text-align
:
center
;
margin
:
0
auto ;
margin-bottom
:
50px
;
}
ul li{
float
:
left
;
}
.minor{
display
:
none
;
}
ul li a{
display
:
block
;
width
:
200px
;
line-height
:
40px
;
font-size
:
16px
;
text-align
:
center
;
color
:
black
;
}
ul li a:hover{
color
:
rgb
(
255
,
85
,
0
);
text-decoration
:
underline
;
}
#showhide{
clear
:
both
;
width
:
80px
;
border
:
1px
solid black ;
background
:
url
(../images/down.gif)
no-repeat
4px center ;
margin
:
0
auto ;
padding-left
:
20px
;
cursor
:
pointer
;
}
|
js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
window.onload=
function
(){
var
oBtn=document.getElementById( 'showhide' );
var
aMinor=document.getElementsByClassName( 'minor' );
var
aMain=document.getElementsByClassName( 'main' );
var
bShow= false ;
var
i=0;
oBtn.onclick=
function
(){
bShow=!bShow;
if
(bShow){
for
(i=0;i<aMinor.length;i++){
aMinor[i].style.display=
'block'
;
}
for
(i=0;i<aMain.length;i++){
aMain[i].getElementsByTagName(
'a'
)[0].style.color=
'#FF5500'
;
}
oBtn.style.background=
'url(images/up.gif) no-repeat 4px center'
}
else
{
for
(i=0;i<aMinor.length;i++){
aMinor[i].style.display=
'none'
;
}
for
(i=0;i<aMain.length;i++){
aMain[i].getElementsByTagName(
'a'
)[0].style.color=
'black'
;
}
oBtn.style.background=
'url(images/down.gif) no-repeat 4px center'
}
}
}
|
评述:由于原生js的局限性,需要在html中导入较多的class。而且获取a的属性也相当麻烦。
jquery:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
$(document).ready(
function
(){
var
bShow= false ;
$(
'#showhide'
).click(
function
(){
bShow=!bShow;
if
(bShow){
$(
'.minor'
).css(
'display'
,
'block'
);
$(
'.main>a'
).css(
'color'
,
'#ff5500'
);
$(
this
).css(
'background'
,
'url(images/up.gif) no-repeat 4px center'
);
}
else
{
$(
'.minor'
).css(
'display'
,
'none'
);
$(
'.main>a'
).css(
'color'
,
'#000'
);
$(
this
).css(
'background'
,
'url(images/down.gif) no-repeat 4px center'
);
}
})
})
|
确实简化了一些声明。但是有些多余的class其实是不必要的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
$(document).ready(
function
(){
var
$aMinor=$( 'ul li:gt(3):not(:last)' );
//获取索引值大于3的品牌集合(除了最后一条)
$(
'#showhide'
).click(
function
(){
if
($aMinor.is(
":visible"
)){
$aMinor.hide();
//对应的方法是show,不用再写display的css()方法了。
$(
'.main>a'
).css(
'color'
,
'#000'
);
$(
this
)
.css(
'background'
,
'url(images/down.gif) no-repeat 4px center'
)
.text(
'展开'
);
//改变里面的文本
}
else
{
$aMinor.show();
$(
'.main>a'
).css(
'color'
,
'#ff5500'
);
$(
this
)
.css(
'background'
,
'url(images/up.gif) no-repeat 4px center'
)
.text(
'收起'
);
}
})
})
|