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