jQuery入门——选择器
jQuery选择器可以分为四类：基础选择器，层级选择器，属性选择器，过滤选择器
基础选择器：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>基本选择器</title> 6 <style type="text/css"> 7 </style> 8 <script type="text/javascript" src="../js/jQuery-3.2.1.js"></script> 9 <script type="text/javascript"> 10 /* 11 基本选择器： 12 1.交集(AB) 一个元素，必须保证AB两个属性同时具备。 13 $("input[name]").css("color", "red"); 14 2.并集 (A,B,C) 满足任何一个逗号的分区都会被锁定 15 $("div,span").css("color", "red"); 16 3.全局 17 $("*").css("color", "red"); 18 */ 19 $(function() { 20 //交集选择器 21 //$("ul#second").css("color", "red"); 22 //并集选择器 23 //$("ul#second,div").css("color", "red"); 24 //html 25 $("*").css("color", "red"); 26 }); 27 </script> 28 </head> 29 <body> 30 <ul> 31 <li class="myred">上海</li> 32 <li class="myred">北京</li> 33 <li id="gz">广州</li> 34 </ul> 35 36 <ul id="second"> 37 <li class="myred">上海</li> 38 <li class="myred">北京</li> 39 <li id="gz">广州</li> 40 </ul> 41 <div>我是div</div> 42 43 </body> 44 </html>
层级选择器：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>层级选择器</title> 6 <style type="text/css"> 7 </style> 8 <script type="text/javascript" src="../js/jQuery-3.2.1.js"></script> 9 <script type="text/javascript"> 10 $(function() { 11 //后代:子元素的子元素也可以被锁定到 12 //$("html body ul li").css("color","red"); 13 14 //子选择器 直接子元素 15 $("#bigbox>p>span").css("color","red"); 16 17 //相邻选择器 + 直接相邻，一般是后一个 18 //$("ul+div").css("color","red"); 19 20 //同辈 ~ 与family同辈的所有div,不包含family 21 //$("#family~div").css("color", "red"); 22 }); 23 </script> 24 </head> 25 <body> 26 <div id="family"> 27 <div id="father">1</div> 28 <div id="mother">2</div> 29 <div id="samllthree">3</div> 30 </div> 31 <div> 32 一个div 33 </div> 34 <ul> 35 <li class="myred">上海</li> 36 <li class="myred">北京</li> 37 <li id="gz">广州</li> 38 </ul> 39 <div id="bigbox"> 40 <p>我是p标签 41 <span>一个span</span> 42 </p> 43 <div id="small">我是小的div</div> 44 </div> 45 <p>我是小武，我骄傲，我傲娇</p> 46 </body> 47 </html>
属性选择器：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>属性选择器</title> 6 <style type="text/css"> 7 </style> 8 <script type="text/javascript" src="../js/jQuery-3.2.1.js"></script> 9 <script type="text/javascript"> 10 $(function() { 11 //选择指定属性的值是指定值的元素 12 $("[href='baidu.com']").css("color","red"); 13 //选择指定属性是以给定元素结尾的元素 14 $("[href$='Driver']").css("color","red"); 15 //选择指定属性具有包含一个给定的子字符串的元素 16 $("[href*='com']").css("color", "red"); 17 //选择指定属性就是以给定字符串开始的元素 18 $("[href^='com']").css("color", "red"); 19 }); 20 </script> 21 </head> 22 <body> 23 <a href="baidu.com">去百度</a> 24 <a href="com.mysql.jdbc.Driver">新浪</a> 25 <p href="com.mysql.jdbc.Driver">我是p</p> 26 </body> 27 </html>
过滤选择器：这就比较多了，总的来说就是以":"开头的选择器，下面举几个例子。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>过滤选择器</title> 6 <style type="text/css"> 7 </style> 8 <script type="text/javascript" src="../js/jQuery-3.2.1.js"></script> 9 <script type="text/javascript"> 10 $(function() { 11 //基本过滤选择器 first last odd even 12 //$("li:odd").css("color","red"); 13 /* $("li:eq(2)").css("color","red"); */ 14 // $("li").eq(2).css("color","red"); 15 /* $("li:gt(2)").css("color","red"); */ 16 //$(":header").css("color","red"); 17 /* $("[name=txtName]").focus(); 18 $(":focus").css("color","red"); */ 19 $("#run").click(function() { 20 $("div:not(:animated)").animate({ 21 width : "+=200" 22 }, 1000); 23 }); 24 $("#show").click(function() { 25 $(":hidden").show(3000); 26 }); 27 }); 28 </script> 29 </head> 30 <body> 31 <ul> 32 <li>农村包围城市</li> 33 <li>武装夺取政权</li> 34 <li>敌进我退，敌退我扰，敌疲我打</li> 35 <li>农村包围城市</li> 36 <li>武装夺取政权</li> 37 <li>敌进我退，敌退我扰，敌疲我打</li> 38 </ul> 39 <h2>过滤选择器专题</h2> 40 <input name="txtName" value="五一假期，我要学习" /> 41 <input type="hidden" value="我是隐藏的input" /> 42 <input type="button" id="show" value="点我显示一个p" /> 43 <!-- 伪造隐藏元素 --> 44 <p style="display: none;">我是隐藏的</p> 45 <button id="run">Run</button> 46 <div style="width: 200px; height: 200px; border: 1px solid red;">我是div</div> 47 </body> 48 </html>
