：first选择第一个元素。$（“div:first”）进行选择第一个<div>
:last 选择最后一个最后一个元素 $（"div:last"）选取最后一个<div>
[:not(选择器）] 选择不满足“选择器”条件的元素
$("input:not(.myclass)")选取样式名不是Myclass的<input>
:even :odd 选取的索引数是奇数和偶数的元素。(把第零行看作第一行开始计算)
$("input:even")选择索引是奇数的<input>
:eq(索引序号)。 ：gt(索引序号) :lt(索引序号) 选取索引等于。
大于。小于索引序号的元素。比如 $("input:lt(1)")选取索引小于1的<input>
$(":header")选择所有的h1------h6的元素
$("div:animated")选择正在执行动画的<div>元素
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>JQuery</title> 5 <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function () {$("#change").click(function(){ 8 $("#table1 td:even").css("background", "red"); 9 $("#table1 td:odd").css("background", "gray"); 10 $("#table1 td:first").css("font-size", "50px").css("background","yellow"); 11 $("#table1 td:gt(0):lt(3)").css("font-size","30px"); 12 }) 13 } 14 ) 15 </script> 16 </head> 17 <body bgcolor="blue"> 18 <table id="table1"> 19 <tr> 20 <td>firstline</td> 21 </tr> 22 <tr> 23 <td>secondline</td> 24 </tr> 25 <tr> 26 <td>thirdline</td> 27 </tr> 28 <tr> 29 <td>fourthline</td> 30 </tr> 31 <tr> 32 <td>fifthline</td> 33 </tr> 34 <tr> 35 <td>sixthline</td> 36 </tr> 37 <tr> 38 <td>seventhline</td> 39 </tr> 40 <tr> 41 <td>eightthline</td> 42 </tr> 43 <tr> 44 <td>ninthline</td> 45 </tr> 46 <tr> 47 <td>tenthline</td> 48 </tr> 49 </table> 50 <input value="changecolor"type="button"id="change" onclick=""/> 51 </body> 52 </html>
$("table").click(function(){$("td",$(this)).css("background","red")});用法
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>JQuery</title> 5 <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function(){($("table").click( 8 function () { $("tr", $(this)).css("background", "white"); })) 9 }) 10 //this 传递的是相对自己的对象的意思。就是只在被点击的这个对象里的标签上改变颜色 11 </script> 12 </head> 13 <body bgcolor="blue"> 14 <table id="table1"> 15 16 </tr> 17 <tr> 18 <td>sixthline</td> 19 </tr> 20 <tr> 21 <td>seventhline</td> 22 </tr> 23 <tr> 24 <td>eightthline</td> 25 </tr> 26 <tr> 27 <td>ninthline</td> 28 </tr> 29 <tr> 30 <td>tenthline</td> 31 </tr> 32 </table> 33 <table id="table2"> 34 <tr> 35 <td>firstline</td> 36 </tr> 37 <tr> 38 <td>secondline</td> 39 </tr> 40 <tr> 41 <td>thirdline</td> 42 </tr> 43 <tr> 44 <td>fourthline</td> 45 </tr> 46 <tr> 47 <td>fifthline</td> 48 </tr> 49 50 </table> 51 <input value="changecolor" type="button" id="change" onclick="" /> 52 </body> 53 </html>
$("div[id]") 选取有id属性的div
$(div[title=test") 选取title==test的<div>
$("div[title!=test]")选取title属性不为test的<div>
$("#form1:disabled")//获得表单中所有未启用的控件
$("#form2:enabled")获得表单中所有启用的控件
#("input:checked")input中所有被选中的属性
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>JQuery</title> 5 <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function () { 8 $("#selectall").click(function () { 9 var elements = $("input[type=checkbox]"); 10 for (var i = 0; i < elements.length; i++) 11 elements[i].checked = true; 12 }) 13 }) 14 $(function () { 15 $("#reverse").click( 16 function () { 17 var elements = $("input[type=checkbox]"); 18 for (var i = 0; i < elements.length; i++) { 19 if (elements[i].checked ==false) 20 elements[i].checked = true; 21 else elements[i].checked = false; 22 } 23 24 }); 25 }) 26 </script> 27 </head> 28 <body bgcolor="blue"> 29 <input type="checkbox">a<br/> 30 <input type="checkbox">b<br /> 31 <input type="checkbox">c<br /> 32 <input type="checkbox">d<br /> 33 <input type="checkbox">e<br /> 34 <input type="checkbox">f<br /> 35 <input type="checkbox">g<br /> 36 <input type="button"id="selectall" value="全选"/> 37 <input type="button"id="reverse" value="反选" /> 38 39 </body> 40 </html>
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>JQuery</title> 5 <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function () { 8 $('input').change(function () { 9 var names=new Array(); 10 $("input:checked").each(function(key,value){names[key]=$(value).val();}); 11 $('#msgname').text("一共选中了"+names.length+"项,"+names.join(".")); 12 }); 13 }) 14 $(function () { 15 var link = $("<a href='http//:www.qq.com'>百度</a>"); 16 $("div:first").append(link); 17 }) 18 $(function () { 19 var data = {"新浪":"http://www.xinlang.com", 20 "腾讯":"http://www.qq.com","网易":"http://www.163.com" 21 ,"淘宝":"http://www.taobao.com"}; 22 $.each(data,function(key,value){ 23 var tr = $("<td><a href='" + value + "'>" + key + "</a></td>"); 24 $("#tablesite").append(tr); 25 }); 26 }) 27 </script> 28 </head> 29 <body bgcolor="blue"> 30 <input type="checkbox"value="a">a<br/> 31 <input type="checkbox"value="b">b<br /> 32 <input type="checkbox"value="c">c<br /> 33 <input type="checkbox"value="d">d<br /> 34 <input type="checkbox"value="e">e<br /> 35 <input type="checkbox"value="f">f<br /> 36 <input type="checkbox"value="g">g<br /> 37 <p id="msgname"></p> 38 <div></div> 39 <table id="tablesite"> 40 41 </table> 42 </body> 43 </html>