jQuery（二）：jQuery选择器
jQuery选择器类似于CSS选择器，用来选取网页中的元素。例如：
$("h3").css("background-color","red");
说明：
- 获取并设置网页中所有<h3>元素的背景色。
- “h3”为选择器语法，必须放在$()中。
- $("h3")返回jQuery对象。
一、jQuery选择器
jQuery选择器功能强大，种类也很多，分类如下：
1、类CSS选择器
- 基本选择器
- 层次选择器
- 属性选择器
2、过滤选择器
- 基本过滤选择器
- 可见性过滤选择器
3、表单选择器
4、内容过滤器
二、基本选择器
基本选择器语法如下图所示：
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jQuery基本选择器示例</title> <style> #box{ background-color: #ffffff; border: 2px solid #000000; padding: 5px; } </style> <script src="jquery-3.3.1.js"></script> <script> $(function(){ // id选择器 $("#btn").click(function(){ // 标签选择器 选择h3标签并将其添加背景颜色 $("h3").css("background-color","red"); // 类选择器 选取并设置所有class为title的元素的背景颜色 $(".title").css("background-color","#09F"); // id选择器 选取并设置id为box的元素的背景颜色 $("#box").css("background-color","#09F"); // 并集选择器 相当于css中的群组选择器 选取并设置所有的h2、dt、class为title //的元素的背景色 $("h2,dt,.title").css("background-color","#09A"); // 交集选择器 等同于CSS中的指定标签选择器 选取并设置class为title的h3标签的背景色 $("h3.title").css("background-color","yellow"); // 全局选择器 改变所有元素的字体颜色 $("*").css("color","blue"); }); }); </script> </head> <body> <input type="button" id="btn" value="显示效果" /> <div id="box" style="margin-top:10px;"> id为box的div <h2 class="title">class为title的h2标签</h2> <h3 class="title">class为title的h3标签</h3> <h3>热门排行</h3> <dl> <dt><img src="qq.jpg" width="391" height="220" alt="斗地主" /></dt> <dd class="title">斗地主</dd> <dd>休闲游戏</dd> <dd>QQ斗地主是国内同时在线人数最多的棋牌游戏......</dd> </dl> </div> </body> </html>
效果：
三、层次选择器
层次选择器通过DOM元素之间的层次关系来获取元素，语法如下：
请看下面的示例
需求说明：点击标题，使用层次选择器选择不同的元素使得其背景色为蓝色，如下图所示：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>层次选择器演示示例</title> <!--css样式--> <style> *{ margin: 0px; padding: 0px; line-height: 30px; } body{ margin: 10px; } #menu{ border: 2px solid #0033cc; padding: 10px; } a{ text-decoration: none; margin-right: 5px; } span{ font-weight: bold; padding: 3px; } h2{ margin: 10px; cursor: pointer;/*鼠标为手状*/ } </style> <!--引入jQuery--> <script src="jquery-3.3.1.js"></script> <!--javascript--> <script> $(function(){ // 点击h2标题时改变背景色 $("h2").click(function(){ // 后代选择器 获取并设置#menu下的span元素的背景色 $("#menu span").css("background-color","blue"); // 子选择器 获取并设置#travel下的a元素的背景色 $("#travel>a").css("background-color","red"); // 相邻选择器 只会选择第一个相邻的元素 //获取并设置#ticket下的第一个a元素的背景色 $("#ticket+a").css("background-color","red"); // 同辈选择器 会选择所有的元素 //获取并设置#rest下的所有a元素的背景色 $("#rest~a").css("background-color","yellow"); }); }); </script> </head> <body> <div id="menu"> <h2 title="点击查看效果">全部旅游产品分类</h2> <dl> <dt>北京周边旅游<span>特价</span></dt> <dd id="travel"> <a href="#">按天数</a> <a href="#">海边旅游</a> <a href="#">草原</a> </dd> </dl> <dl> <dt>景点门票</dt> <dd > <a href="#" id="ticket">名胜</a> <a href="#">暑期</a> <a href="#">乐园</a> </dd> <dd > <a href="#" id="rest">山水</a> <a href="#">双休</a> <a href="#">园林</a> </dd> </dl> <span>更多分类</span> </div> </body> </html>
效果：
四、属性选择器
属性选择器通过HTML元素的属性来选择元素。语法如下：
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>属性选择器演示示例</title> <!--css样式--> <style> #box{ background-color: #ffffff; border: 2px solid #000000; padding: 5px; } h2{ cursor: pointer; } </style> <!--引入jQuery--> <!--引入jQuery--> <script src="jquery-3.3.1.js"></script> <!--javascript--> <script> $(function(){ $("h2").click(function(){ // 改变含有title属性的h2元素的背景颜色 $("h2[title]").css("background-color","blue"); // 改变含有class属性为odds元素的背景颜色 $("[class='odds']").css("background-color","red"); // 改变含有class属性不等于odds元素的字体颜色 //$("[class!=odd]").css("color","green"); // 改变含有title属性以h开头的元素的字体颜色 区分大小写 $("[title^=h]").css("color","green"); // 改变含有title属性以jp结尾的元素的字体颜色 区分大小写 $("[title$=jp]").css("color","yellow"); // 改变含有title属性中含有s的元素的字体颜色 区分大小写 $("[title*=s]").css("color","pink"); // 改变含有class属性并且title属性中含有y的li元素的字体颜色 区分大小写 $("li[class][title*=y]").css("color","violet"); }); }); </script> </head> <body class="odd"> <div id="box" class="odd"> <h2 class="odd" title="cartoon-list">动画列表</h2> <ul> <li class="odds" title="kn_jp">名侦探柯南</li> <li class="evens" title="hy_rz">火影忍者</li> <li class="odds" title="ss_JP">死神</li> <li class="evens" title="yj_jp">妖精的尾巴</li> <li class="odds" title="yh_jp">银魂</li> <li class="evens" title="Hm_dS">黑猫警长</li> <li class="odds" title="xl_ds">仙履奇缘</li> </ul> </div> </body> </html>
效果：
五、过滤选择器
过滤选择器通过特定的过滤规则来刷选元素。
语法特点是使用“：”，例如：
$("li:first")
表示选取第一个li元素。
1、基本过滤选择器
基本过滤选择器可以选择第一个元素、最后一个元素、索引为奇数或偶数的元素，语法如下：
基本过滤选择器还可以根据索引的值选取元素
基本过滤选择器还支持一些特殊的选择方式
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>基本过滤选择器</title> <style> h2{ cursor: pointer; } </style> <!--引入jQuery--> <script src="jquery-3.3.1.js"></script> <!--javascript--> <script> $(function(){ $("h2").click(function(){ // 选取第一个li标签并设置背景色 //$("li:first").css("background-color","blue"); // 选取第一个li标签并设置背景色 //$("li:last").css("background-color","red"); // 选取偶数行的li标签并设置背景色 //$("li:even").css("background-color","green"); // 选取奇数行的li标签并设置背景色 //$("li:odd").css("background-color","pink"); // 改变索引值为1的li标签的背景色 //$("li:eq(1)").css("background-color","pink"); // 改变索引值大于4的li标签的背景色 //$("li:gt(4)").css("background-color","green"); // 改变索引值小于4的li标签的背景色 //$("li:lt(4)").css("background-color","red"); // 选取class不是three的元素并设置背景色 $("li:not(.three)").css("background-color","green"); // 选取所有标题元素并设置背景色 $(":header").css("background-color","red"); }); $("input[type='text']").click(function(){ // 设置当前获取焦点的元素的背景色 $(":focus").css("background-color","yellow"); }); }); </script> </head> <body> <h2>网络小说</h2> <ul> <li>王妃不好当</li> <li>致命交易</li> <li class="three">珈蓝寺</li> <li>逆天至宠</li> <li>交错时光的爱恋</li> <li>张震讲鬼故事</li> <li>第一次亲密接触</li> </ul> <input type="text" value="Hello World" /> </body> </html>
结果：
2、可见性过滤选择器
可见性过滤选择器可以通过元素的显示状态来选取元素，语法如下：
例如：
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>可见性元素选择器演示示例</title> <style> p{ display: none; } </style> <!--引入jQuery--> <script src="jquery-3.3.1.js"></script> <!--javascript--> <script> $(function(){ $("#show").click(function(){ $("p:hidden").show(); }); $("#hidden").click(function(){ $("p:visible").hide(); }); }); </script> </head> <body> <input type="button" id="show" value="显示" /> <input type="button" id="hidden" value="隐藏" /> <p>嗨，您好!</p> </body> </html>
效果：
点击显示：
点击隐藏：
3、内容过滤器
内容过滤器根据内容来选取元素，语法如下：
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>内容过滤器演示示例</title> <style> .title{ background-color: gray; } </style> <!--引入jQuery--> <script src="jquery-3.3.1.js"></script> <!--javascript--> <script> $(function(){ // 改变包含“运动鞋”的表格背景色设置为蓝色 $("td:contains('运动鞋')").css("background-color","blue"); // 没有内容的单元格的背景色设置为红色 $("td:empty").css("background-color","red"); // 包含链接的单元格的背景色设置为绿色 $("td:has('a')").css("background-color","green"); // 含有子节点或文本的表格的背景色设置为灰色 $("td:parent").css("background-color","gray"); }); </script> </head> <body> <table> <thead> <tr class="title"> <th>序号</th> <th>订单号</th> <th>商品名称</th> <th>价格(元)</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>10035900</td> <td><a href="#">Nike透气减震运动鞋</a></td> <td>231.00</td> </tr> <tr> <td>2</td> <td>10036114</td> <td>天美太阳伞</td> <td>51.00</td> </tr> <tr> <td>3</td> <td>10035110</td> <td><a href="#">万圣节儿童蜘蛛侠装</a></td> <td>31.00</td> </tr> <tr> <td>4</td> <td>10035120</td> <td>匹克篮球运动鞋</td> <td>231.00</td> </tr> <tr> <td>5</td> <td>10032900</td> <td>jQuery权威指南</td> <td></td> </tr> </tbody> </table> </body> </html>
效果：
六、表单选择器
表单选择器根据不同类型的表单元素进行选取，语法如下：
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表单选择器演示示例</title> <!--引入jQuery--> <script src="jquery-3.3.1.js"></script> <!--javascript--> <script> $(function(){ // 点击提交按钮，如果为空则设置边框为红色 $(":submit").click(function(){ // 获取用户名 var username= $(":input[name='username']"); // 获取密码 var pwd= $(":password[name='pwd']"); // 获取确认密码 var repwd= $(":password[name='repwd']"); // 获取昵称 var nickname= $(":input[name='nickname']"); // 获取已选的单选按钮 var radio=$(":radio:checked"); // 获取已选的复选框 var chk=$(":checkbox:checked") // 获取已选的下拉框 var sel=$(":selected"); redSet(username); redSet(pwd); redSet(repwd); redSet(nickname); redSet2(radio); redSet3(chk); redSet4(sel); }); function redSet(obj){ if(obj.val()==""){ obj.css("border","1px solid red"); }else{ obj.css("border","1px solid yellow"); } }; function redSet2(obj){ if(obj.length==0){ $(":radio").parent().css("border","1px solid red") }else{ $(":radio").parent().css("border","1px solid yellow") } }; function redSet3(obj){ if(obj.length==0){ $(":checkbox").parent().css("border","1px solid red") }else{ $(":checkbox").parent().css("border","1px solid yellow") } }; function redSet4(obj){ if(obj.val()==""){ $("select").css("border","1px solid red") }else{ $("select").css("border","1px solid yellow") } }; }); </script> </head> <body> <fieldset> <legend>注册表单</legend> <form onsubmit="return false;"> <input type="hidden" name="pid" value="1" /> <p> 账号：<input type="text" name="username" /> </p> <p> 密码：<input type="password" name="pwd" /> </p> <p> 确认密码：<input type="password" name="repwd" /> </p> <p> 昵称：<input type="text" name="nickname" /> </p> <p> 性别: <input type="radio" name="sex" value="1" id="man"><label for="man">男</label> <input type="radio" name="sex" value="2" id="woman"><label for="woman">女</label> </p> <p> 爱好: <input type="checkbox" name="hobby" value="篮球" id="basketball" /><label for="basketball">篮球</label> <input type="checkbox" name="hobby" value="足球" id="football" /><label for="football">足球</label> <input type="checkbox" name="hobby" value="羽毛球" id="badminton" /><label for="badminton">羽毛球</label> <input type="checkbox" name="hobby" value="其他" id="other" /><label for="other">其他</label> </p> <p> 省份： <select> <option value="">--省份--</option> <option value="北京">北京</option> <option value="云南">云南</option> <option value="河北">河北</option> <option value="河南">河南</option> </select> </p> <input type="submit" value="提交" /> </form> </fieldset> </body> </html>
效果：
七、补充
1、特殊符号的转义
2、选择器中的空格
