：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>
时间： 2024-10-17 19:40:04