element（标签、元素）选择器：$("div")
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>element选择器</title> 5 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> 6 </head> 7 8 <body> 9 <button id="btntest">点我</button> 10 <script type="text/javascript"> 11 $("button").attr("disabled","true"); 12 </script> 13 </body> 14 </html>
id选择器：$("#id")
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>#id选择器</title> 5 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> 6 </head> 7 8 <body> 9 <div id="divtest">div的内容</div> 10 <div id="default"></div> 11 <script type="text/javascript"> 12 $("#default").html($("#divtest").html()); 13 </script> 14 </body> 15 </html>
类选择器：$(".class")
<!DOCTYPE html> <html> <head> <title>.class选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="red">立正，向我这边看齐</div> <div class="green">我先歇歇脚</div> <script type="text/javascript"> var $redHTML = $(".red").html(); $(".green").html($redHTML); </script> </body> </html>
*选择器：$("*")
<!DOCTYPE html> <html> <head> <title>*选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> </head> <body> <form action="#"> <input id="Button1" type="button" value="button" /> <input id="Text1" type="text" /> <input id="Radio1" type="radio" /> <input id="Checkbox1" type="checkbox" /> </form> <script type="text/javascript"> $("form *").attr("disabled", "true"); </script> </body> </html>
sele1、sele2、seleN选择器：$(".div,#span1,p")
<!DOCTYPE html> <html> <head> <title>sele1,sele2,seleN选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="red">选我吧！我是red</div> <div class="green">选我吧！我是green</div> <div class="blue">选我吧！我是blue</div> <script type="text/javascript"> $(".red,.green").html("hi,我们的样子很美哦!"); </script> </body> </html>
ance desc选择器：$("父类标签 子孙类标签")
<!DOCTYPE html> <html> <head> <title>ance desc选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div>码农家族 <p> <label></label> </p> <label></label> </div> <script type="text/javascript"> $("div label").css("background-color","blue"); </script> </body> </html>
parent>child选择器：$("父类标签>子类标签")
<!DOCTYPE html> <html> <head> <title>parent > child选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div> 码农家族 <p> <label></label> </p> <label></label> <label></label> </div> <label></label> <script type="text/javascript"> $("div>label").css("border", "solid 5px red"); </script> </body> </html>
prev+next选择器：$("首标签+紧邻标签")
<!DOCTYPE html> <html> <head> <title>prev + next选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div> 码农家族 <label></label> <p></p> <label></label> <label></label> </div> <label></label> <script type="text/javascript"> $("p+label").css("background-color","red"); </script> </body> </html>
prev~siblings：$("首标签~相邻标签")
<!DOCTYPE html> <html> <head> <title>prev ~ siblings选择器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div> 码农家族 <label></label> <p></p> <label></label> <label></label> </div> <label></label> <script type="text/javascript"> $("p~label").css("border", "solid 1px red"); $("p~label").html("我们都是p先生的粉丝"); </script> </body> </html>