JQuery学习四（过滤选择器）

浏览数：53 / 时间：2015年06月09日

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