选择器是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('收起'); } })}) |