JQuery(二)

续...

选择器

一． 内容选择器:

  1、:contains("") 匹配含有指定文本的元素对象集合

  2、:empty 匹配空元素 没有子元素或没有文本的元素

  3、:has(text) 匹配含有指定选择器所有匹配的元素的对象集合              

   $("#tbdy:has(.rdc)");获取tbdy中含有.rdc的tbdy的对象集合

  4、:parent 匹配含有子元素或者文本的元素的对象集合

  总结：在内容选择器中谁(A)匹配谁(B)那就是获取A对象的集合

案例演示：

   <script>

       $(function(){        

           /**获取td中含有10的td的对象集合*/         

          var $tds=$("td:contains('10')");

          alert($tds.size()+"---------"+$tds.text());

         

          /**获取tr中含有redarmy的tr对象的集合*/

          var $trred=$("tr:contains('redarmy')");

          alert($trred.size()+"---------"+$trred.text());

         

          /**获取rdc中td的含有redarmy的td对象集合*/

          var $rdctd=$(".rdc>td:contains('redarmy')");

          alert($rdctd.size()+"---------"+$rdctd.text());

          

           /**获取id为qw的tr对象中td的空元素*/

          var $tdqw=$("#qw>td:empty");

          alert($tdqw.size()+"---------"+$tdqw.text());

         

           //获取tbody中含有rdc的tbody对象

          var $tbdrdc=$("#tbdy:has(.rdc)");

          alert($tbdrdc.size()+"---------"+$tbdrdc.text());

        

           //获取tbody中含有rdc的tr对象集合

          var $tbdtr=$("#tbdy>.rdc");

          alert($tbdtr.size()+"---------"+$tbdtr.text());

   

          //获取.rdc中含有子元素或者文本元素的(.rdc)tr的对象

         var $rdc=$(".rdc:parent");

         alert($rdc.size()+"---------"+$rdc.text()); //tr对象

       });

</script>

             

二．其它选择器

 

 结合案例介绍

 :input 匹配textarea input select button 等的对象 

:hidden 设置元素的不可见性

:visible 设置元素的可见性

:button  获取按钮的JQuery对象

:checkbox 获取复选框的JQuery对象

... ...  

 

<script type="text/javascript">

      $(function(){              

        /**不可见性的测试*/

         var $hidden=$(":hidden");

         /**可见性测试*/

         var $vlis = $("div:visible");// 通过样式设计不可见！

         /**表单选择器*/

          // 1.button

          var $buttons=$(":button"); 

          /**遍历所有的button的value属性值*/

         for(var i=0;i<$buttons.length;i++){

           alert($($buttons[i]).attr("value"));  /**注意DOM对象转换成Jquery对象 |Jquery对象转换成DOM对象*/  

         }               

         //获取btn的子元素为button按钮的input对象

         var $inpbut=$("#btn>input:button");

         //获取所有checkbox的复选框

         var $chec=$(":checkbox");

         //获取ckb中所有checkbox的复选框

         var $ckbchbox=$("#ckb input:checkbox");

         alert($ckbchbox.size()+"----"+$ckbchbox.text());

         //获取所有的input select 的对象集合

           var $inpselec=$("input:input");

           alert($inpselec.size()+"----"+$inpselec.text());

          //获取所有的checkedinput表单对象 不包含select中的option

         //var $checinp=$("input:checked"); //方法一

          var $checinp=$("input[checked='checked']");//利用[attribute value]

          //获取所有复选框checkbox被选中的表单对象

            var $checkedbox=$("input[type='checkbox']:checked");//根据获取input元素的type类型：状态

            alert($checkedbox.size());

      });

    </script>