Maison > Article > interface Web > Exemple de partage du sélecteur jQuery sur le sélecteur de filtre d'attribut

Exemple de partage du sélecteur jQuery sur le sélecteur de filtre d'attribut

黄舟original: 2017-09-30 11:30:541421parcourir

Cet article présente principalement en détail le sélecteur de filtre d'attribut du sélecteur jQuery, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple de cet article partage les attributs jQuery avec tout le monde. le sélecteur de filtre est pour votre référence. Le contenu spécifique est le suivant

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" >
    <style type="text/css">
      p, span, p {
        width: 140px;
        height: 140px;
        margin: 5px;
        background: #aaa;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Verdana;
      }
      
      p.mini {
        width: 55px;
        height: 55px;
        background-color: #aaa;
        font-size: 12px;
      }
      
      p.hide {
        display: none;
      }      
    </style>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
      $(function(){
        
        $("#btn1").click(function(){
          $("p[title]").css("background", "#ffbbaa");
        });
        $("#btn2").click(function(){
          $("p[title=&#39;test&#39;]").css("background", "#ffbbaa");
        });
        $("#btn3").click(function(){
          //选取的元素中包含没有 title 的 p 元素. 
          $("p[title!=&#39;test&#39;]").css("background", "#ffbbaa");
        });
        
        $("#btn4").click(function(){
          $("p[title^=&#39;te&#39;]").css("background", "#ffbbaa");
        });
        
        $("#btn5").click(function(){
          $("p[title$=&#39;est&#39;]").css("background", "#ffbbaa");
        });
        $("#btn6").click(function(){
          $("p[title*=&#39;es&#39;]").css("background", "#ffbbaa");
        });
        $("#btn7").click(function(){
          $("p[id][title*=&#39;es&#39;]").css("background", "#ffbbaa");
        });
        
        $("#btn8").click(function(){
          $("p[title][title!=&#39;test&#39;]").css("background", "#ffbbaa");
        });
        
      })
    </script>
  </head>
  <body>    
    <input type="button" value="选取含有 属性title 的p元素." id="btn1"/>
    <input type="button" value="选取 属性title值等于&#39;test&#39;的p元素." id="btn2"/>
    <input type="button" value="选取 属性title值不等于&#39;test&#39;的p元素(没有属性title的也将被选中)." id="btn3"/>
    <input type="button" value="选取 属性title值 以&#39;te&#39;开始 的p元素." id="btn4"/>
    
    <input type="button" value="选取 属性title值 以&#39;est&#39;结束 的p元素." id="btn5"/>
    <input type="button" value="选取 属性title值 含有&#39;es&#39;的p元素." id="btn6"/>
    <input type="button" value="组合属性选择器,首先选取有属性id的p元素，然后在结果中 选取属性title值 含有&#39;es&#39;的 p 元素." id="btn7"/>
    <input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 p 元素." id="btn8"/>
    
    <br><br>
    <p class="one" id="one">
      id 为 one,class 为 one 的p
      <p class="mini">class为mini</p>
    </p>
    <p class="one" id="two" title="test">
      id为two,class为one,title为test的p
      <p class="mini" title="other">class为mini,title为other</p>
      <p class="mini" title="test">class为mini,title为test</p>
    </p>
    <p class="one">
      <p class="mini">class为mini</p>
      <p class="mini">class为mini</p>
      <p class="mini">class为mini</p>
      <p class="mini"></p>
    </p>
    <p class="one">
      <p class="mini">class为mini</p>
      <p class="mini">class为mini</p>
      <p class="mini">class为mini</p>
      <p class="mini" title="tesst">class为mini,title为tesst</p>
    </p>
    <p style="display:none;" class="none">style的display为"none"的p</p>
    <p class="hide">class为"hide"的p</p>
    <p>
      包含input的type为"hidden"的p<input type="hidden" value="123456789" size="8">
    </p>
    <p id="mover">正在执行动画的p元素.</p>
  </body>
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'exemple du sélecteur jQuery de sélecteur de filtre de sous-élémentArticle suivant：Explication détaillée de l'exemple du sélecteur jQuery de sélecteur de filtre de sous-élément

Articles Liés

Voir plus