JQuery学习四（过滤选择器）
生活随笔
收集整理的這篇文章主要介紹了
JQuery学习四（过滤选择器）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
：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" οnclick=""/> 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" οnclick="" /> 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>?
轉載于:https://www.cnblogs.com/sytu/p/4101135.html
總結
以上是生活随笔為你收集整理的JQuery学习四（过滤选择器）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 准备去西安玩，大家知道有什么好玩的地方吗
- 下一篇： 在社会实践中长本领