jQuery之选择器
概述
说明：
选择器本身只是一个有特定语法规则的字符串，没有实质用处。它的基本语法规则使用的就是CSS的选择器语法，并对其进行了扩展。只有调用$()，并将选择器作为参数传入才能起作用。
$(selector)作用：根据选择器规则在整个文档中查找所有匹配的标签的数组，并封装成jQuery对象返回。
分类：
基本选择器
层级选择器
过滤选择器
表单选择器
基本选择器
说明：
最基本最常用的选择器。
分类：
#id：id选择器，根据id查找标签对象。
element：元素选择器，根据标签名查找标签对象。
.class：属性选择器，根据class查找标签对象。
*：任意标签，所有元素。
selector1,selector2,selectorN：取多个选择器的并集结果并返回(组合选择器)。
selector1selector2selectorN：取多个选择器的交集结果并返回(相交选择器)。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本选择器</title> </head> <body> <div id="div1" class="box">div1(class="box")</div> <div id="div2" class="box">div2(class="box")</div> <div id="div3">div3</div> <span class="box">span(class="box")</span> <br> <ul> <li>AAAAA</li> <li title="hello">BBBBB(title="hello")</li> <li class="box">CCCCC(class="box")</li> <li title="hello">DDDDDD(title="hello")</li> </ul> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> /* * 需求: * 1.选择id为div1的元素 * 2.选择所有的div元素 * 3.选择所有class属性为box的元素 * 4.选择所有的div和span元素 * 5.选择所有class属性为box的div元素 */ $(function (){ //1.选择id为div1的元素 $('#div1').css('background', 'red'); //2.选择所有的div元素 $('div').css('background', 'red'); //3.选择所有class属性为box的元素 $('.box').css('background', 'red'); //4.选择所有的div和span元素 $('div,span').css('background', 'red'); //5.选择所有class属性为box的div元素 $('div.box').css('background', 'red');//不能写.boxdiv }); </script> </body> </html>
层级选择器
说明：
查找子元素、后代元素、兄弟元素的选择器。
分类：
ancestor descendant：后代选择器，在给定的祖先元素下的后代元素中匹配元素。
parent > child：子元素选择器，在给定的父元素下的子元素中匹配元素。
prev + next：相邻元素选贼器，匹配所有紧接在prev元素后的next元素。
prev ~ siblings：后代兄弟选择器，匹配prev元素之后的所有siblings元素。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器</title> </head> <body> <ul> <li>AAAAA</li> <li class="box">CCCCC</li> <li title="hello"><span>BBBBB</span></li> <li title="hello"><span>DDDD</span></li> <span>EEEEE</span> </ul> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> /* * 需求: * 1.选中ul下所有的的span * 2.选中ul下所有的子元素span * 3.选中class为box的下一个li * 4.选中ul下的class为box的元素后面的所有兄弟元素 */ $(function (){ //1.选中ul下所有的的span $('ul span').css('background', 'red'); //2.选中ul下所有的子元素span $('ul>span').css('background', 'red'); //3.选中class为box的下一个li $('.box+li').css('background', 'red'); //4.选中ul下的class为box的元素后面的所有兄弟元素 $('ul .box~*').css('background', 'red'); }); </script> </body> </html>
过滤选择器
说明：
在原有选择器匹配的元素中进一步进行过滤的选择器。
基本过滤器：
:first：获取第一个元素。
:last：获取最后个元素。
:not(selector)：去除所有与给定选择器匹配的元素。
:even：匹配所有索引值为偶数的元素，从0开始计数。
:odd：匹配所有索引值为奇数的元素，从0开始计数。
:eq(index)：匹配一个给定索引值的元素。
:gt(index)：匹配所有大于给定索引值的元素。
:lt(index)：匹配所有小于给定索引值的元素。
:header：匹配如h1,h2,h3之类的标题元素。
:animated：匹配所有正在执行动画效果的元素。
内容过滤器：
:contains(text)：匹配包含给定文本的元素。
:empty：匹配所有不包含子元素或者文本的空元素。
:parent：匹配含有子元素或者文本的元素。
:has(selector)：匹配含有选择器所匹配的元素的元素。
属性过滤器：
[attribute]：匹配包含给定属性的元素。
[attribute=value]：匹配给定的属性是某个特定值的元素。
[attribute!=value]：匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value]：匹配给定的属性是以某些值开始的元素。
[attribute$=value]：匹配给定的属性是以某些值结尾的元素。
[attribute*=value]：匹配给定的属性是以包含某些值的元素。
[attrSel1][attrSel2][attrSelN]：复合属性选择器，需要同时满足多个条件时使用。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过滤选择器</title> </head> <body> <div id="div1" class="box">class为box的div1</div> <div id="div2" class="box">class为box的div2</div> <div id="div3">div3</div> <span class="box">class为box的span</span> <br/> <ul> <li>AAAAA</li> <li title="hello">BBBBB</li> <li class="box">CCCCC</li> <li title="hello">DDDDDD</li> <li title="two">BBBBB</li> <li style="display:none">我本来是隐藏的</li> </ul> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> /* * 需求: * 1.选择第一个div * 2.选择最后一个class为box的元素 * 3.选择所有class属性不为box的div * 4.选择第二个和第三个li元素 * 5.选择内容为BBBBB的li * 6.选择隐藏的li * 7.选择有title属性的li元素 * 8.选择所有属性title为hello的li元素 */ $(function (){ //1.选择第一个div $('div:first').css('background', 'red'); //2.选择最后一个class为box的元素 $('.box:last').css('background', 'red'); //3.选择所有class属性不为box的div $('div:not(.box)').css('background', 'red'); //4.选择第二个和第三个li元素 $('li:gt(0):lt(2)').css('background', 'red'); //索引起始位置发生变化，重新开始计算 $('li:lt(3):gt(0)').css('background', 'red'); //正确索引位置 //5.选择内容为BBBBB的li $('li:contains(BBBBB)').css('background', 'red'); //6.选择隐藏的li $('li:hidden ').show(); //7.选择有title属性的li元素 $('li[title]').css('background', 'red'); //8.选择所有属性title为hello的li元素 $('li[title=hello]').css('background', 'red'); }); </script> </body> </html>
表单选择器
表单：
:input：匹配所有input、textarea、select和button元素。
:text：匹配所有文本输入框。
:password：匹配所有的密码输入框。
:radio：匹配所有的单选框。
:checkbox：匹配所有的复选框。
:submit：匹配所有提交按钮。
:image：匹配所有img标签。
:reset：匹配所有重置按钮。
:button：匹配所有input type = button、<button>按钮。
:file：匹配所有input type = file文件上传。
:hidden：匹配所有不可见元素display:none或input type = hidden。
表单对象属性：
:enabled：匹配所有可用元素。
:disabled：匹配所有不可用元素。
:checked：匹配所有选中的单选、复选、下拉列表中选中的option标签对象。
:selected：匹配所有选中的option。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单选择器</title> </head> <body> <form> 用户名: <input type="text"/><br> 密码: <input type="password"/><br> 爱好: <input type="checkbox" checked="checked"/>篮球 <input type="checkbox" checked="checked"/>足球 <input type="checkbox" checked="checked"/>羽毛球 <br> 性别: <input type="radio" name="sex" value='male'/>男 <input type="radio" name="sex" value='female'/>女<br> 邮箱: <input type="text" name="email" disabled="disabled"/><br> 所在地: <select> <option value="1">北京</option> <option value="2" selected="selected">天津</option> <option value="3">河北</option> </select><br> <input type="submit" value="提交"/> </form> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> /* * 需求: * 1.选择不可用的文本输入框 * 2.显示选择爱好的个数 * 3.显示选择的城市名称 */ $(function (){ //1.选择不可用的文本输入框 $(':input:disabled').css('background', 'red'); //2.显示选择爱好的个数 console.log($(':checkbox:checked').length); //3.显示选择的城市名称 console.log($('select>option:selected').html()); console.log($('select').val()); //得到的是选择的option的value }); </script> </body> </html>
