jQuery支持的属性选择器

最新推荐文章于 2022-01-24 07:00:00 发布

生活中的思索

最新推荐文章于 2022-01-24 07:00:00 发布

阅读量479

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery 选择器 click div function

本文链接：https://blog.youkuaiyun.com/qq_35864642/article/details/80115640

本文通过实例演示了jQuery中各种属性选择器的应用方法，包括基于属性存在与否、属性值相等、属性值前缀、后缀及包含子串的选择器使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说啦，直接来干货。

英文解释：
这里写图片描述
中文解释：
E [A] 匹配具有标签名称E的所有具有任何属性A的元素值
E [A =’V’] 匹配具有属性A的所有具有标签名称E的元素值正好是V
E [A ^ =’V’] 匹配具有属性A的所有标签名称为E的元素值从V开始
E [A $ =’V’] 匹配具有属性A的所有标签名称为E的元素值以V结尾
E [A！=’V’] 匹配具有属性A的所有标签名称为E的元素值不符合V（不等于V）或缺少属性A.全然
E [A * =’V’] 匹配具有属性A的所有标签名称为E的元素值包含V
E [A | =’V’] 匹配具有属性A的所有具有标签名称E的元素值等于V或V-（V后跟一个连字符）
E [A〜=’V’] 匹配具有属性A的所有标签名称为E的元素值等于V或包含V由空格分隔
E [C1] [C2] 匹配标签名称为E且具有满足条件C1和C2的属性的所有元素

实例：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>jQuery in Action, 3rd edition</title>
      <link rel="stylesheet" href="../css/main.css"/>
   </head>
   <body>
   <input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
    <input type="button" value="选取 属性title值等于'test'的div元素." id="btn2"/>
    <input type="button" value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3"/>
    <input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4"/>

    <input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5"/>
    <input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6"/>
    <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素." id="btn7"/>
    <input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8"/>

    <br><br>
    <div class="one" id="one">
      id 为 one,class 为 one 的div
      <div class="mini">class为mini</div>
    </div>
    <div class="one" id="two" title="test">
      id为two,class为one,title为test的div
      <div class="mini" title="other">class为mini,title为other</div>
      <div class="mini" title="test">class为mini,title为test</div>
    </div>
    <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
    </div>
    <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini" title="tesst">class为mini,title为tesst</div>
    </div>
    <div style="display:none;" class="none">style的display为"none"的div</div>
    <div class="hide">class为"hide"的div</div>
    <div>
      包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
    </div>
    <div id="mover">正在执行动画的div元素.</div>
      <script src="../js/jquery-1.11.3.min.js"></script>
      <style type="text/css">
      div, span, p {
        width: 140px;
        height: 140px;
        margin: 5px;
        background: #aaa;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Verdana;
      }

      div.mini {
        width: 55px;
        height: 55px;
        background-color: #aaa;
        font-size: 12px;
      }

      div.hide {
        display: none;
      }      
    </style>
    <script type="text/javascript">
      $(function(){

        $("#btn1").click(function(){
          $("div[title]").css("background", "#ffbbaa");
        });
        $("#btn2").click(function(){
          $("div[title='test']").css("background", "#ffbbaa");
        });
        $("#btn3").click(function(){
          //选取的元素中包含没有 title 的 div 元素. 
          $("div[title!='test']").css("background", "#ffbbaa");
        });

        $("#btn4").click(function(){
          $("div[title^='te']").css("background", "#ffbbaa");
        });

        $("#btn5").click(function(){
          $("div[title$='est']").css("background", "#ffbbaa");
        });
        $("#btn6").click(function(){
          $("div[title*='es']").css("background", "#ffbbaa");
        });
        $("#btn7").click(function(){
          $("div[id][title*='es']").css("background", "#ffbbaa");
        });

        $("#btn8").click(function(){
          $("div[title][title!='test']").css("background", "#ffbbaa");
        });

      })
    </script>
   </body>
</html>