JQuery學習四（過濾選取器）

標籤：style   blog   http   io   color   ar   sp   java   for   

：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>

 

JQuery學習四（過濾選取器）