（一）基本选择器：
1、根据类名、id名、标签名，直接选择；
2、* 选择全部标签，包含body；
3、选择器之间用逗号隔开，可同时并列选择多个，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="jquery-1.12.4.min.js"></script> <script> $(function(){ $(".cla").css("color","red"); $("#dd").css("color","green"); $("p").css("color","yellow"); $("*").css("border","1px solid pink"); $(".cla,.back").css("background-color","gray"); }) </script> </head> <body> <div class="cla">class变红</div> <div id="dd">id变绿</div> <p>element变黄</p> <div>匹配所有元素:加边框,所有元素包括body，</div> <div class="back">并列选择加背景</div> </body> </html>
（二）层级选择：后代、儿子、兄弟、长辈
1、直接使用层级选择器、
2、应用选择器加筛选器
注意：1）虽然可以实现相同的功能，但是层级选择器在进行选择时，语法中需要进行字符串的拼接，不易扩展和复用，效率低；推荐使用筛选器；
2）选择器在使用的时候，由于空格代指后代，在使用过程中，常与显示格式的空格混淆，容易出错，不推荐使用，
最常用的：所有兄弟：$（selector）.siblings（），
儿子：$（selector）.children（），
上一个：$（selector）.prev（），
下一个：$（selector）.next（），
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="jquery-1.12.4.min.js"></script> <script> $(function(){ ////////////////////层级选择器//////////////////////////////////////////// /* //后代 $(".levelSelector div").css("color","blue"); //儿子 $(".levelSelector > .boy").css("font-size","16px"); //下一个兄弟 $(".levelSelector .dad+").css("background-color","gray"); //$(".levelSelector .dad + .girl").css("background-color","gray"); //无效果 //后面所有的兄弟 $(".levelSelector .dad~ ").css("border","1px solid pink"); */ /////////////////////筛选器///////////////////////////////////////////// //$(".yeye").children(".boy").css("color","blue"); //儿子 //$(".yeye").find(".boy").css("font-size","16px"); //后代 /* $(".lucy").parent().css("background-color","gray"); //爸爸 $(".lucy").parents().css("color","blue"); //全部祖先 $(".lucy").parentsUntil(".yeye").css("text-align","center"); //直到指定位置的长辈 */ /* //$(".yeye").children(".girl").prev().css("background-color","gray"); //上一个兄弟 //$(".yeye").children(".girl").prevAll().css("border","1px solid pink"); //上面所有兄弟 //$(".yeye").children(".girl").prevUntil(".dad").css("text-align","center"); //上面直到指定位置的兄弟 */ /* //$(".yeye").children(".dad").next().css("background-color","gray"); //下一个兄弟 //$(".yeye").children(".dad").nextAll().css("border","1px solid pink"); //下面所有兄弟 //$(".yeye").children(".dad").nextUntil(".girl").css("text-align","center"); //下面直到指定位置的兄弟，不包含 */ /* //最常用的：所有兄弟 $(".yeye").children(".boy").siblings().css("border","1px solid pink"); */ }) </script> </head> <body> <div class="levelSelector yeye"> 爷爷 <div class="dad"> 爷爷-爸爸 <div class="boy"> 爷爷-爸爸-孙子 </div> <div class="girl lucy"> 爷爷-爸爸-孙女 </div> </div> <div class="boy"> 爷爷-叔叔 <div class="boy"> 爷爷-叔叔-表哥 </div> </div> <div class="girl"> 爷爷-姑姑 <div class="girl"> 爷爷-姑姑-表姐 </div> </div> </div> </body> </html>
（三）指定位置
1、第一个first（）、最后一个last（）
2、按索引指定位置eq（）、按索引切片silce（）
3、关于奇数索引位置、偶数索引位置，筛选器无法实现，使用悬选择器$（selector:odd（））、$（selector:even（））,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="jquery-1.12.4.min.js"></script> <script> $(function(){ /*//第一个 $("#yeye").children().first().css("color","blue"); $("#yeye>:first").css("color","blue"); //第一个孩子，也是第一个节点 $("#yeye :first").css("color","blue"); //第一个节点 */ /*//最后一个 $("#yeye").children().last().css("color","red"); $("#yeye>:last").css("color","red"); //最后一个儿子 $("#yeye :last").css("color","red"); //最后一个节点 */ /*//指定索引位置 //$("#yeye").children().eq(1).css("color","pink"); $("#yeye>:eq(1)").css("color","pink"); */ /*//按索引切片 //$("#yeye").children().slice(1,).css("color","pink"); //end索引位置可以省略，表示到最后 //$("#yeye").children().slice(1,2).css("color","pink"); //包含开始，不包含结束 $("#yeye>:lt(2):gt(0)").css("color","pink"); //gt不包含，lt不包含 */ //奇数位置、偶数位置 $("#yeye>:even()").css("color","pink"); //偶数索引 $("#yeye>:odd()").css("color","red"); //奇数索引 }) </script> </head> <body> <div id="yeye"> 爷爷 <div> 爷爷-爸爸 <div> 爷爷-爸爸-孙子 </div> <div> 爷爷-爸爸-孙女 </div> </div> <div> 爷爷-叔叔 <div> 爷爷-叔叔-表哥 </div> </div> <div> 爷爷-姑姑 <div> 爷爷-姑姑-表姐 </div> </div> </div> </body> </html>
（四）内容选择
1、has（），包含指定后代的元素，筛选器的参数范围较大：选择器字符串、DOM元素，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="jquery-1.12.4.min.js"></script> <script> $(function(){ /* //包含特定后代的元素，参数：选择器 //$("#yeye>:has(p)").css("color","blue"); //$("#yeye>:has(.sn)").css("color","blue"); //包含特定后代的元素，参数：选择器字符串、DOM元素 //$("#yeye").children().has("p").css("color","blue"); //$("#yeye").children().has(".sn").css("color","blue"); var ret = document.getElementById("ss"); $("#yeye").children().has(ret).css("color","blue"); */ }) </script> </head> <body> <div id="yeye"> <p>p爷爷</p> <div> div爷爷-爸爸 <div> <p>p爷爷-爸爸-孙子</p> </div> <div class="sn"> div爷爷-爸爸-孙女 </div> </div> <div class="ss"> <p>p爷爷-叔叔</p> <div id="ss"> div爷爷-叔叔-表哥 </div> </div> <div> 爷爷-姑姑 <div> div爷爷-姑姑-表姐 </div> </div> </div> </body> </html>
2、not（），指定元素意外的其他元素，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="jquery-1.12.4.min.js"></script> <script> $(function(){ //指定之外其他元素 $("#yeye").children().not(".ss").css("color","blue"); }) </script> </head> <body> <div id="yeye"> <p>p爷爷</p> <div> div爷爷-爸爸 <div> <p>p爷爷-爸爸-孙子</p> </div> <div class="sn"> div爷爷-爸爸-孙女 </div> </div> <div class="ss"> <p>p爷爷-叔叔</p> <div id="ss"> div爷爷-叔叔-表哥 </div> </div> <div> 爷爷-姑姑 <div> div爷爷-姑姑-表姐 </div> <div></div> </div> </div> </body> </html>
3、：contains（），包含指定文本的元素，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="jquery-1.12.4.min.js"></script> <script> $(function(){ //含有指定文本 $("#yeye :contains('表姐')").css("color","blue"); }) </script> </head> <body> <div id="yeye"> <p>p爷爷</p> <div> div爷爷-爸爸 <div> <p>p爷爷-爸爸-孙子</p> </div> <div class="sn"> div爷爷-爸爸-孙女 </div> </div> <div class="ss"> <p>p爷爷-叔叔</p> <div id="ss"> div爷爷-叔叔-表哥 </div> </div> <div> 爷爷-姑姑 <div> div爷爷-姑姑-表姐 </div> <div></div> </div> </div> </body> </html>
4、：empty，空元素，不含子元素、不含文本，
：parent，非空元素，含有子元素或者文本，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="jquery-1.12.4.min.js"></script> <script> $(function(){ //empty:空元素,不含子元素、不含文本， //$("#yeye :empty").prev().css("color","red"); //$("#yeye>:empty").css("background","red"); //parent：非空元素，含有子元素或文本 $("#yeye>:parent").css("background","yellow"); }) </script> </head> <body> <div id="yeye"> <p>p爷爷</p> <div> div爷爷-爸爸 <div> <p>p爷爷-爸爸-孙子</p> </div> <div class="sn"> div爷爷-爸爸-孙女 </div> </div> <div class="ss"> <p>p爷爷-叔叔</p> <div id="ss"> div爷爷-叔叔-表哥 </div> </div> <div> 爷爷-姑姑 <div> div爷爷-姑姑-表姐 </div> <div></div> </div> <div style="width:100%;height:50px;border:1px solid red;"></div> </div> </body> </html>
注意：hasClass（），判断是否含有指定类，返回布尔值
is（），判断是否有元素符合is指定内容，返回布尔值，参数可以是选择器字符串、DOM元素、函数function，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="jquery-1.12.4.min.js"></script> <script> $(function(){ /* //hasClass()，判断元素是否含有指定类，返回布尔值 console.log($("#yeye").children().hasClass("ss")); //true console.log($("#yeye").children().hasClass("sn")); //false */ //is(),判断是否有元素符合指定内容，返回布尔值,还可以添加函数 //console.log($("#yeye").children().is(".ss")); //true }) </script> </head> <body> <div id="yeye"> <p>p爷爷</p> <div> div爷爷-爸爸 <div> <p>p爷爷-爸爸-孙子</p> </div> <div class="sn"> div爷爷-爸爸-孙女 </div> </div> <div class="ss"> <p>p爷爷-叔叔</p> <div id="ss"> div爷爷-叔叔-表哥 </div> </div> <div> 爷爷-姑姑 <div> div爷爷-姑姑-表姐 </div> <div></div> </div> </div> </body> </html>
（五）属性选择器
1、基本属性选择器，语法：$（selector【attr】）,其中attr还可以进一步的进行判断，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="jquery-1.12.4.min.js"></script> <script> $(function(){ $("div[attr]").css("font-size","18px"); $("div[attr = 'hin']").css("color","red"); $("div[attr != 'hin']").css("color","blue"); $("div[attr ^= 'h']").css("border","1px solid yellow"); $("div[attr $= 'o']").css("background","gray"); $("div[attr *= 'n']").css("text-align","center"); $("div[attr = 'lucy'][maam = 'dongxue']").css("color","pink"); }) </script> </head> <body> <div attr="hin">属性选择器</div> <div attr="hello">属性选择器</div> <div attr="no">属性选择器</div> <div attr="lucy" maam="dongxue">组合1</div> <div attr="lucy">组合2</div> </body> </html>
2、input表单的type属性，例如：$（input【type=text】），可以缩写成：$（：text），其他type属性值类似
其他表单对象的属性，：selected、：checked、：disabled、：enabled、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery</title> <script src="jquery-1.12.4.min.js"></script> <script> $(function(){ //input表单type属性简写，：checked //$(":checkbox:checked").removeAttr("checked"); //$(":radio:checked").removeAttr("checked"); //：selected //$(":selected").removeAttr("selected"); //$(":not(':selected')").attr("selected","selected"); //：disabled //$(":disabled").removeAttr("disabled"); //：enabled $(":enabled").attr("disabled","disabled"); }) </script> </head> <body> <div class="like"> <input type="checkbox" name="ch" value="1" checked="checked"/>画画 <input type="checkbox" name="ch" value="2" disabled="disabled" />游泳 <input type="checkbox" name="ch" value="3" disabled="disabled" />轮滑 <input type="checkbox" name="ch" value="4" />跳舞 </div> <div class="sex"> <input type="radio" name="se" value="1" checked="checked" />男 <input type="radio" name="se" value="2" />女 </div> <select class="sel"> <option value="2" disabled="disabled" >上海</option> <option value="3" selected="selected" disabled="disabled">南京</option> </select> </body> </html>
浙公网安备 33010602011771号