1、基本选择器-5个
1 <html>
2 <head>
3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
4 <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
5 </head>
6 <body>
7 <div id="div1ID">div1</div>
8 <div id="div2ID">div2</div>
9 <span class="myClass">span1</span>
10 <span class="myClass">span2</span>
11 <span class="myClass">span3</span>
12 <p>p</p>
13 <script type="text/javascript">
14
15 //1)查找ID为"div1ID"的元素--a)#id
16 //var $div = $("#div1ID");//一定要注意要加#号
17 //alert($div[0].nodeName);
18 alert($("#div1ID").html());
19
20 //2)查找DIV元素的个数[size()方法和length属性]--b)element
21 //alert($("div").size());
22 //alert($("div").length);
23
24 //3)查找所有样式是"myClass"的元素的个数--c).class
25 //alert($(".myClass").size());
26
27 //4)查找所有DIV,SPAN,P元素的个数--d)selector1,selector2,selectorN
28 //alert($("div,span,p").length);
29
30 //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
31 //alert($("#div1ID,.myClass,p").size());
32
33 </script>
34 </body>
35 </html>
2、层级选择器-4个
form input： 查询form下所有input元素，含有后代关系，即包括儿子和孙子及后代
form>input：查询form下所有input元素，只有父子关系，没有后代关系
form+input：查询与form同级的第一个input元素，是兄弟关系
form~input：查询与form同级的所有input元素，是兄弟关系
1 <html>
2 <head>
3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
4 <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
5 </head>
6 <body>
7 <form>
8 <input type="text" value="a"/>
9 <table>
10 <tr>
11 <td>
12 <input type="checkbox" value="b"/>
13 </td>
14 </tr>
15 </table>
16 <input type="text" value="a1"/>
17 </form>
18 <input type="radio" value="c"/>
19 <input type="radio" value="d"/>
20 <input type="radio" value="e"/>
21 <script type="text/javascript">
22 //1)找到表单form下所有的input元素的个数--空格：代表后代，包括儿子，孙子及后代
23 //alert($("form input").size());
24
25 //2)找到表单form下所有的直接儿子input元素个数-->：代表直接儿子，不包括孙子及后代
26 //alert($("form>input").size());
27
28 //3)找到表单form同级第一个input元素的value属性值--+:代表同级第一个元素
29 //alert($("form+input").val());
30
31 //4)找到所有与表单form同级的input元素个数--~：代表同级所有的元素
32 //alert($("form~input").size());
33 </script>
34 </body>
35 </html>
3、增强型基本选择器--
:first：查询第一个元素
:last：查询最后个元素
:checked：查询选中的复选框
:not(:checked)：查询未选中的复选框
:even：查找表格的1、3、5...行（即索引值0、2、4...）--查找的是索引值为偶数（html页面中所有表格，第一个算起，以此类推）
:odd： 查找表格的0、2、4...行（即索引值1、3、5...）--查找的是索引值为奇数
:eq()：索引从0开始 equals
:gt():大于索引号 greater than
:lt()：小于索引号 less than
:header：查询所有<h1/2/3/4/5/6>标签
.css("key","value")为查询到的所有标签添加CSS样式
1 <html>
2 <head>
3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
4 <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
5 </head>
6 <body>
7 <ul>
8 <table><tr><td><li>list item 0</li></td></tr></table>
9 <li>list item 1</li>
10 <li>list item 2</li>
11 <li>list item 3</li>
12 <li>list item 4</li>
13 <li>list item 5</li>
14 <table><tr><td><li>list item 6</li></td></tr></table>
15 <!--<table><tr><td><li>list item 7</li></td></tr></table>
16 <table><tr><td><li>list item 8</li></td></tr></table>!-->
17 </ul>
18 <input type="checkbox" checked/>
19 <input type="checkbox" checked/>
20 <input type="checkbox"/>
21 <table border="1">
22 <tr><td>line1</td></tr>
23 <tr><td>line2</td></tr>
24 <tr><td>line3</td></tr>
25 </table>
26 <h1>h1</h1>
27 <h2>h2</h2>
28 <h3>h3</h3>
29 <p>p</p>
30 <script type="text/javascript">
31 //1)查找UL中第一个元素的内容
32 //alert($("ul li:first").html());//list item 0
33 //alert($("ul>li:first").html());//list item 1
34
35 //2)查找UL中最后个元素的内容
36 //alert($("ul li:last").html());//list item 6
37 //alert($("ul>li:last").html());//list item 5
38
39 //3)查找所有未选中的input元素个数
40 //alert($("input:not(:checked)").size());
41
42 //4)查找表格的1、3、5...奇数行个数[从0开始计数]
43 //alert($("table tr:even").size());
44
45 //5)查找表格的2、4、6...偶数行个数[从0开始计数]
46 //alert($("table tr:odd").size());
47
48 //6)查找表格中第二行的内容，从索引号0开始
49 //alert($("table tr:eq(1)").html());
50
51 //7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大
52 //alert($("table tr:gt(0)").size());
53
54 //8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
55 //alert($("table tr:lt(2)").size());
56
57 //9)给页面内所有标题<h1><h2><h3>加上红色背景色
58 //$(":header").css("background","#ff0000;");
59 </script>
60 </body>
61 </html>
4、内容选择器-4个
:contains('john')：表示包含指定字符串的标签，字符串大小写敏感
:empty：表示查询空标签的元素
:has('p')：表示查询有子元素的元素
.addClass("样式名")：为查询到的所有标签添加样式
:parent：表示查询非空标签
1 <html>
2 <head>
3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
4 <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
5 <style type="text/css">
6 .myClass{
7 font-size:44px;
8 color:blue
9 }
10 </style>
11 </head>
12 <body>
13 <p>hha</p>
14 <div><p>John Resig hacket</p></div>
15 <div><p>George Martin</p></div>
16 <div>Malcom John Sinclair hacket</div>
17 <div>J. Ohn</div>
18 <p></p>
19 <p></p>
20 <div></div>
21 <script type="text/javascript">
22
23 //1)查找所有包含文本"John"的div元素的个数
24 //alert($("div:contains('hacket')").size());
25
26 //2)查找所有p元素为空的元素个数
27 //alert($("p:empty").size());
28
29 //3)给所有包含p元素的div元素添加一个myClass样式
30 //$("div:has('p')").addClass("myClass");
31
32 //4)查找所有含有子元素或者文本的p元素个数,即p为父元素
33 alert($("p:parent").size());
34
35 </script>
36 </body>
37 </html>
5、可见性选择器-2个
:hidden：表示查询所有隐蔽的标签
:visible：表示查询所有显示的标签
或:not(:hidden)
1 <html>
2 <head>
3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
4 <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
5 </head>
6 <body>
7 <table border="1" align="center">
8 <tr style="display:none">
9 <td>Value 1</td>
10 </tr>
11 <tr>
12 <td>Value 2</td>
13 </tr>
14 <tr>
15 <td>Value 3</td>
16 </tr>
17 </table>
18 <script type="text/javascript">
19 //1)查找隐藏的tr元素的个数
20 //alert($("table tr:hidden").size());
21 //alert($("tr:hidden").size());
22
23 //2)查找所有可见的tr元素的个数
24 //alert($("table tr:visible").size());
25 alert($("table tr:not(:hidden)").size());
26 </script>
27 </body>
28 </html>
6、属性选择器
div[id]：表示查询含有id属性的div元素
input[name='newsletter']：表示查询含有name属性，且其值是"newsletter"的input元素
input[name!='newsletter：表示查询含有name属性，且其值不是"newsletter"的input元素
input[name^='newsletter：表示查询含有name属性，且其值以"news"开头的input元素
input[name$='letter'：表示查询含有name属性，且其值以"letter"结尾的input元素
input[name*='news']：：表示查询含有name属性，且其包含"news"的input元素
1 <html>
2 <head>
3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
4 <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
5 </head>
6 <body>
7 <div>
8 <p>Hello!</p>
9 </div>
10 <div id="test2"></div>
11 <input type="checkbox" name="newsletter" value="Hot Fuzz" />
12 <input type="checkbox" name="newsletter" value="Cold Fusion" id="myID" />
13 <input type="checkbox" name="newsaccept" value="Evil Plans" />
14 <script type="text/javascript">
15 //1)查找所有含有id属性的div元素个数
16 //alert($("div[id]").size());
17
18 //2)查找所有name属性是newsletter的input元素，并将其选中
19 //alert($("input[name='newsletter']").size());
20
21 //3)查找所有name属性不是newsletter的input元素，并将其选中
22 //alert($("input[name!='newsletter']").size());
23 //$("input[name!='newsletter']").attr("checked","checked");
24
25 //4)查找所有name以'news'开始的input元素，并将其选中
26 //$("input[name^='news']").attr("checked","checked");
27
28 //5)查找所有name 以'letter'结尾的input元素，并将其选中
29 //$("input[name$='letter']").attr("checked","checked");
30
31 //6)查找所有name包含'news'的input元素，并将其选中
32 //$("input[name*='news']").attr("checked","checked");
33
34 //7)找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中
35 //$("input[id][name$='letter']").attr("checked","checked");
36 </script>
37 </body>
38 </html>
7、子元素选择器
:first-child：表示查询第一个子元素
:last-child：表示查询最后一个子元素
:only-child:表示查询只有一个子元素的元素
:nth-child(编号从1开始)，表示查询指定编号的元素
1 <html>
2 <head>
3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
4 <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
5 </head>
6 <body>
7 <ul>
8 <li>John</li>
9 <li>Karl</li>
10 <li>Brandon</li>
11 </ul>
12 <ul>
13 <li>Glen</li>
14 <li>Tane</li>
15 <li>Ralph</li>
16 </ul>
17 <ul>
18 <li>Jack</li>
19 </ul>
20 <script type="text/javascript">
21 //1)迭代每个ul中第1个li元素中的内容,索引从1开始
22 /*$("ul li:first-child").each(function(){//$("ul li:first")如果是这个，只找到第一个ul的li的内容
23 alert($(this).html());
24 });*/
25
26 //2)迭代每个ul中最后1个li元素中的内容,索引从1开始
27 /*$("ul li:last-child").each(function(){
28 alert($(this).html());
29 });*/
30
31 //3)在ul中查找是唯一子元素的li元素的内容
32 /*$("ul li:only-child").each(function(){
33 alert($(this).html());
34 });*/
35
36 //4)迭代每个ul中第2个li元素中的内容,索引从1开始
37 /*$("ul li:nth-child(2)").each(function(){
38 alert($(this).html());
39 });*/
40 </script>
41 </body>
42 </html>
8、表单选择器
:input：查找所有input元素的个数，注：包含所有input,textarea,select和button元素
:text
:password
:radio
:checkbox
:file
:submit
:reset
:image
:file
1 <html>
2 <head>
3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
4 <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
5 </head>
6 <body>
7 <form>
8 <input type="button" value="Input Button"/><br/>
9 <input type="checkbox" /><br/>
10 <input type="file" /><br/>
11 <input type="hidden" /><br/>
12 <input type="image" /><br/>
13 <input type="password" /><br/>
14 <input type="radio" /><br/>
15 <input type="radio" /><br/>
16 <input type="reset" /><br/>
17 <input type="submit" /><br/>
18 <input type="text" /><br/>
19 <select><option>Option</option></select><br/>
20 <textarea></textarea><br/>
21 <button>Button</button><br/>
22 </form>
23 <script type="text/javascript">
24
25 //1)查找所有input元素的个数，
26 //alert($("input").size());//10
27 //alert($(":input").size());//14 注：包含所有input,textarea,select和button元素
28
29 //2)查找所有文本框的个数
30 //alert($(":text").size());
31
32 //3)查找所有密码框的个数
33 //alert($(":password").size());
34
35 //4)查找所有单选按钮的个数
36 //alert($(":radio").size());
37
38 //5)查找所有复选框的个数
39 //alert($(":checkbox").size());
40
41 //6)查找所有提交按钮的个数，非IE可能将<button>当作一个提交按钮
42 //alert($(":submit").size());//2
43 //alert($(":submit").val());
44
45 //7)匹配所有图像域的个数
46 //alert($(":image").size());
47
48 //8)查找所有重置按钮的个数
49 //alert($(":reset").size());
50
51 //9)查找所有普通按钮的个数
52 //alert($(":button").size());
53
54 //10)查找所有文件域的个数
55 //alert($(":file").size());
56
57 //11)查找所有input元素为隐藏域的个数
58 //alert($(":input:hidden").size());
59 </script>
60 </body>
61 </html>
9、表单对象属性
:enabled：表示查询可用的元素
:disabled：表示查询不可用的元素
:checked：表示查询选中的复选/单选框的元素
:selected：表示查询选中的下拉框元素
1 <html>
2 <head>
3 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
4 <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
5 </head>
6 <body>
7 <form>
8 <input name="email" disabled="disabled" />
9 <input name="password" disabled="disabled" />
10 <input name="id" />
11 <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
12 <input type="checkbox" name="newsletter" value="Weekly" />
13 <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
14 <select>
15 <option value="1">Flowers</option>
16 <option value="2" selected="selected">Gardens</option>
17 <option value="3">Trees</option>
18 </select>
19 </form>
20 <script type="text/javascript">
21 //1)查找所有可用的input元素的个数
22 //alert($(":input:enabled").size());5//:input <select>也算作一个input
23 //alert($("input:enabled").size());4
24
25 //2)查找所有不可用的input元素的个数
26 //alert($(":input:disabled").size());
27
28 //3)查找所有选中的复选框元素的个数
29 //alert($(":checkbox:checked").size());
30
31 //4)查找所有未选中的复选框元素的个数
32 //alert($(":checkbox:not(:checked)").size());
33
34 //5)查找所有选中的选项元素的个数
35 //alert($("select option:selected").size());
36 </script>
37 </body>
38 </html>
扫一扫
176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
