jQuery九大选择器

jQuery 九大选择器

 目的：通过选择器，能定位web页面（HTML/JSP/XML）中的任何标签

（1） 基本选择器

//1)查找ID为"div1ID"的元素个数         alert( $("#div1ID").size() );             //2)查找DIV元素的个数        alert( $("div").size() );            //3)查找所有样式是"myClass"的元素的个数        alert( $(".myClass").size() );       //4)查找所有DIV,SPAN,P元素的个数        alert( $("div,span,p").size() );            //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数        alert( $('#div1ID,.myClass,p').size() );

 

（2） 层次选择器

//1)找到表单form里所有的input元素的个数     alert( $("form input").size() );      //2)找到表单form里所有的子级input元素个数    alert( $("form > input").size() );       //3)找到表单form同级第一个input元素的value属性值        alert( $("form + input").val() );       //4)找到所有与表单form同级的input元素个数    alert( $("form ~ input").size() );

 

（3） 增强基本选择器

//1)查找UL中第一个元素的内容 alert( $("ul li:first").text() );      //2)查找UL中最后个元素的内容 alert( $("ul li:last").text() );      //4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始 alert( $("table tr:odd").size() );      //5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始 alert( $("table tr:even").size() );      //6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式        alert( $("table tr td:eq(1)").text() );      //7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大 alert( $("table tr:gt(0)").size() );      //8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小 alert( $("table tr:lt(2)").size() );      //9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色 $(":header").css("background-color","red").css("color","blue");      //3)查找所有未选中的input为checkbox的元素个数 alert( $(":checkbox:NOT(:checked)").size() );

 

（4） 内容选择器

//1)查找所有包含文本"John"的div元素的个数     alert( $("div:contains('John')").size() );         //2)查找所有p元素为空的元素个数        alert( $("p:empty").size() );       //3)给所有包含p元素的div元素添加一个myClass样式    $("div:has(p)").addClass("myClass");       //4)查找所有含有子元素或者文本的p元素个数,即p为父元素        alert( $("p:parent").size() );

 

（5） 可见性选择器

<table border="1" align="center"> <tr style="display:none"> <td>Value 1</td> </tr> <tr> <td>Value 2</td> </tr> <tr> <td>Value 3</td> </tr> </table> <script type="text/javascript"> //1)查找隐藏的tr元素的个数 //alert( $("table tr:hidden").size() ); //2)查找所有可见的tr元素的个数 //alert( $("table tr:NOT(:hidden)").size() ); alert( $("table tr:visible").size() );//提倡 </script>

 

 

（6） 属性选择器

<div>   <p>Hello!</p> </div> <div id="test2"></div>   <input type="checkbox" name="newsletter" value="Hot Fuzz"/> <input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="newsaccept" value="Evil Plans" />   <!-- <input type="checkbox" name="letternews" value="Hot Fuzz"/> <input id="myID" type="checkbox" name="letnewster" value="Cold Fusion" /> <input type="checkbox" name="accNEWSept" value="Evil Plans" /> -->   <script type="text/javascript">   //1)查找所有含有id属性的div元素个数 //alert( $('div[id]').size() );     //2)查找所有name属性是newsletter的input元素，并将其选中 //$("input[name='newsletter']").attr("checked","checked");      //3)查找所有name属性不是newsletter的input元素，并将其选中 //$("input[name!='newsletter']").attr("checked","true"); /* 请问：在JS中如下符号表示什么意思 1)=/==/=== 2)!=/!==  */    //4)查找所有name属性以'news'开头的input元素，并将其选中 //$("input[name^='news']").attr("checked","checked");       //5)查找所有name属性以'letter'结尾的input元素，并将其选中    //$("input[name$='letter']").attr("checked","checked");       //6)查找所有name属性包含'news'的input元素，并将其选中 //$("input[name*='news']").attr("checked","checked");       //7)找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中    $("input[id][name$='letter']").attr("checked","true");    </script>

（7） 子元素选择器

<ul>   <li>John</li>   <li>Karl</li>   <li>Brandon</li> </ul>   <ul>   <li>Glen</li>   <li>Tane</li>   <li>Ralph</li> </ul>   <ul>   <li>Marry</li> </ul>       <ul>   <li>Jack</li> </ul>     <script type="text/javascript">   /*1)迭代[each]每个ul中第1个li元素中的内容,索引从1开始 $("ul li:first-child").each(function(){ alert( $(this).text() ); }); */     /*2)迭代每个ul中最后1个li元素中的内容,索引从1开始 $("ul li:last-child").each(function(){ alert( $(this).text() ); }); */   /*4)迭代每个ul中第2个li元素中的内容,索引从1开始 $("ul li:nth-child(2)").each(function(){ alert( $(this).text() ); });*/     //3)在ul中查找是唯一子元素的li元素的内容   $("ul li:only-child").each(function(){   alert( $(this).text() );   });       </script>

 

（8）表单选择器

<form>     <input type="button" value="Input Button"/><br/>     <input type="checkbox" /><br/>     <input type="file" /><br/>     <input type="hidden" name="id" value="123"/><br/>     <input type="image" src="../images/lb.jpg" width="25px" height="25px"/><br/>     <input type="password" /><br/>     <input type="radio" /><br/>     <input type="reset" /><br/>     <input type="submit" /><br/>     <input type="text" /><br/>     <select><option>Option</option></select><br/>     <textarea></textarea><br/>     <button>Button</button><br/> </form>   <script type="text/javascript">   //1)查找所有input元素的个数 //alert( $("input").size() );//10，找input标签 //alert( $(":input").size() );//13，找input标签和select/textarea/button      //2)查找所有文本框的个数    //alert( $(":text").size() );       //3)查找所有密码框的个数    //alert( $(":password").size() );       //4)查找所有单选按钮的个数    //alert( $(":radio").size() );       //5)查找所有复选框的个数    //alert( $(":checkbox").size() );       //6)查找所有提交按钮的个数    //alert( $(":submit").size() );       //7)匹配所有图像域的个数    //alert( $(":images").size() );       //8)查找所有重置按钮的个数    //alert( $(":reset").size() );       //9)查找所有普通按钮的个数    //alert( $(":button").size() );      //10)查找所有文件域的个数   //alert( $(":file").size() );     //11)查找所有input元素为隐藏域的个数   //alert( $(":input:hidden").size() );   </script>

 

（9）表单对象属性选择器

<form>     <input type="text" name="email" disabled="disabled" />   <input type="text" name="password" disabled="disabled" />   <input type="text" name="id" />     <input type="checkbox" name="newsletter" checked="checked" value="Daily" />   <input type="checkbox" name="newsletter" value="Weekly" />   <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />         <select id="provinceID">   <option value="1">广东</option>   <option value="2" selected="selected">湖南</option>   <option value="3">湖北</option>   </select>   </form>       <script type="text/javascript">   //1)查找所有可用的input元素的个数 //alert( $("input:enabled").size() );     //2)查找所有不可用的input元素的个数 //alert( $("input:disabled").size() );     //3)查找所有选中的复选框元素的个数 //alert( $(":checkbox:checked").size() );     //4)查找所有未选中的复选框元素的个数 //alert( $(":checkbox:NOT(:checked)").size() );     //5)查找所有选中的选项元素的个数   //alert( $("select option:selected").size() );   alert( $("#provinceID option:NOT(:selected)").size() );   </script>

 

转载于:https://my.oschina.net/u/3187968/blog/824927