jQuery 9种选择器
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>