jquery选择器的分类

时间:2019-09-14
本文章向大家介绍jquery选择器的分类，主要包括jquery选择器的分类使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

一、基本选者器

<script type="text/javascript">
      $(function () {
               // <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
         $("#b1").click(function () {
            $("#one").css("backgroundColor","pink");
               })
               // <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
         $("#b2").click(function () {
             $("div").css("backgroundColor","red");
               })
               // <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
         $("#b3").click(function () {
            $(".mini").css("backgroundColor","pink");
               })
               // <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
         $("#b4").click(function () {
            $("span,#two").css("backgroundColor","blue");
               })
           });
</script>

二、属性选择器
<script type="text/javascript">
      $(function () {
        // <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
        // <input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
        $("#b1").click(function () {
           $("div[title]").css("backgroundColor","pink");
             }) ;
        // <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
             $("#b2").click(function () {
                 $("div[title='test']").css("backgroundColor","blue");
             }) ;
          // <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
             $("#b3").click(function () {
                 $("div[title!='test']").css("backgroundColor","pink");
             }) ;
         // <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
             $("#b4").click(function () {
                 $("div[title^='te']").css("backgroundColor","pink");
             }) ;
          // <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
             $("#b5").click(function () {
                 $("div[title$='est']").css("backgroundColor","pink");
             }) ;
         // <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
             $("#b6").click(function () {
                 $("div[title*='es']").css("backgroundColor","pink");
             }) ;
        // <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
             $("#b7").click(function () {
                 $("div[id][title*='es']").css("backgroundColor","pink");
             }) ;
         })
</script>

三、层级选择器
<script type="text/javascript">
   $(function () {
           // <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
      $("#b1").click(function () {
         $("body div").css("backgroundColor","yellow");
           })
           // <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
           $("#b2").click(function () {
               $("body > div").css("backgroundColor","pink");
           })
       })
</script>
四、过滤选择器
<script type="text/javascript">
   $(function () {
      // <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
           $("#b1").click(function () {
         $("div:first").css("backgroundColor","pink");
           })
      // <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
           $("#b2").click(function () {
               $("div:last").css("backgroundColor","pink");
           })
      // <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
           $("#b3").click(function () {
               $("div:not(.one)").css("backgroundColor","pink");
           })
      // <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
           $("#b4").click(function () {
               $("div:even").css("backgroundColor","pink");
           })
      // <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
           $("#b5").click(function () {
               $("div:odd").css("backgroundColor","pink");
           })
      // <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
           $("#b6").click(function () {
               $("div:gt(3)").css("backgroundColor","pink");
           })
      // <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
           $("#b7").click(function () {
               $("div:eq(3)").css("backgroundColor","pink");
           })
      // <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
           $("#b8").click(function () {
               $("div:lt(3)").css("backgroundColor","pink");
           })
      // <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
           $("#b9").click(function () {
               $(":header").css("backgroundColor","pink");
           })
       })
</script>
五、表单过滤选择器
<script type="text/javascript">
     $(function () {
       // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
      $("#b1").click(function () {
         $("input[type='text']:enabled").val("aaaa")
           });
        // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
            $("#b2").click(function () {
                $("input[type='text']:disabled").val("aaaa")
            });
        // <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/>
            $("#b3").click(function () {
                alert($("input[type='checkbox']:checked").length);
            });
        // <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
            $("#b4").click(function () {
                alert($("#job > option:selected").length);
            });
        })
</script>
 

原文地址：https://www.cnblogs.com/newcityboy/p/11520138.html

随机文章
Javascript知识点必读
最近更新