第2章 jQuery的选择器 一. 认识 二. 优势 三.选择器
选择器是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+'个');
})
}) |
程序有点问题，就是不能实时反映当前的情况。
jq选择器简明词典
| 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;
}h2{
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('收起');
}
})
}) |