JQuery-选择器

 

一、层次选择器 

<script type="text/javascript">
        $(function(){
         //祖先 后代(可以跨代)
        //$("div span").attr("class","txt");
        //$("div").find("span").attr("class","txt");
       
        //父辈>子辈(不能跨代)
        //$("div>span").attr("class","txt");
        //$("div").children("span").attr("class","txt");
       
        //元素+相邻元素(大兄弟:单个相邻同级元素)
        //$("div+span").attr("class","txt");
        //$("div").next("span").attr("class","txt");

        //元素~兄弟元素(所有兄弟:所有指定的同级元素)
        //$("div~span").attr("class","txt");//
        //$("div").nextAll("span").attr("class","txt");
      })
      </script>

    二、ID选择器
      <script type="text/javascript">
        $(function(){
            //$(showMsg).attr("class","txt");
            //$("#showMsg").attr("class","txt");
           })
      </script>

  三、元素和样式选择器
    <script type="text/javascript">
        $(function(){       
            $(".divClass").attr("class","txt");//divClass:class名称
            $("div").attr("class","txt");//div:元素名称
 
            $("div,p").attr("class","txt");//div,p:元素名称

</script>

 

四、索引选择器  
<script type="text/javascript">
        $(function(){
          $("div:first").attr("class","txt");
          $("div").first().attr("class","txt");
       
          $("td:last").attr("class","txt");
          $("td").last().attr("class","txt");

          $("div *:not(p)").attr("class","txt");//div下不含p的所有元素

         $("tr:even").attr("class","txt");//索引为偶数,索引从0开始
         $("tr:odd").attr("class","txt");//索引为奇数
      
         $("tr:eq(2)").attr("class","txt");//等于指定索引
         $("tr:gt(2)").attr("class","txt");//大于指定索引
         $("tr:lt(2)").attr("class","txt");//小于指定索引


         $(":header").attr("class","txt");//标题索引(:header 根元素下的所有标题元素)

       });
      </script>

 

五、内容选择器

 <script type="text/javascript">
        $(function(){
           $("div:contains('w')").attr("class","txt");//模糊查询,查询包含有指定内容的元素,(不是查询标签)
      
           $("div:empty").attr("class","txt");//查询空元素
           $("div:empty").html("你好!");//为空元素设置值

           $("div:parent").attr("class","txt");//查询非空元素
        
           $("div:has('span')").attr("class","txt");//div中含有span标签,则表示找到这个div元素
           $("div").parent('div').attr("class","txt");//父元素选择器,表示div的父元素如果是div元素,则表示找到这个父元素
      });
</script>

 

六、可见性选择器

     <script type="text/javascript">
	    $(function(){
	     // $("div:hidden").show();//使隐藏元素进行显示
	     // $("div:hidden").attr("class","txt");//隐藏元素

	     $("div:visible").attr("class","txt");//可见元素

              //style="display:block":可见的
              //style="display:none":不可见的
      });
     </script>

　　

七、属性选择器
  <script type="text/javascript">
        $(function(){
           // $("td[abc]").attr("class","txt");//指定属性名称(td元素的abc属性)
          // $("td[abc=a]").attr("class","txt");//指定属性内容(abc=a)
          // $("td[abc^=a]").attr("class","txt");//指定内容开头(以a开头)
          // $("td[abc$=b]").attr("class","txt");//指定内容结尾(以b结尾)
          // $("td[abc!=ab]").attr("class","txt");//不包含指定属性内容的其他所有元素(这里是指不包含abc=ab的元素,没有abc属性的也是属于不包含abc=ab的)
          // $("td[abc*=a]").attr("class","txt");//包含有指定内容(abc中包含有a的)的所有元素
          // $("td[abc][id]").attr("class","txt");//同时满足多个属性选择器的结合

      });
  </script>

 

八、表格列选择器

  <script type="text/javascript">
       $(function(){
        $("td:nth-child(1)").attr("class","txt");//获取指定列中的所有元素(列是从1开始)
        $("td:first-child").attr("class","txt");//获取首列所有元素
        $("td:last-child").attr("class","txt");//获取尾列所有元素
        $("td:nth-child(even)").attr("class","txt");//获取偶数列所有元素
        $("td:nth-child(odd)").attr("class","txt");//获取奇数列所有元素
        $("td:only-child").attr("class","txt");//获取只有一个子元素的父元素(<tr><td>用作行标题</td></tr>:此处就是tr只有一个子元素td,即tr就是父元素)
      });
   </script>

九、表单选择器

<script type="text/javascript">
$(function(){
　　$(":input").attr("class","txt");//取得所有的输入组件
　　$(":password").attr("class","txt");//取得所有的密码框组件
　　$(":checkbox").attr("class","txt");
　　$(":reset").attr("class","txt");
　　$(":file").attr("class","txt");//取得所有的上传组件
　　$(":hidden").attr("class","txt");//取得所有的隐藏域组件
});
</script>