Heim > Artikel > Web-Frontend > Beispiel für die gemeinsame Nutzung des jQuery-Selektors zum Attributfilter-Selektor

Beispiel für die gemeinsame Nutzung des jQuery-Selektors zum Attributfilter-Selektor

黄舟Original: 2017-09-30 11:30:541413Durchsuche

In diesem Artikel wird hauptsächlich der Attributfilterselektor des jQuery-Selektors ausführlich vorgestellt, der einen bestimmten Referenzwert hat.

Das Beispiel dieses Artikels teilt die jQuery-Attribute mit allen Die Filterauswahl dient als Referenz. Der spezifische Inhalt lautet wie folgt:

<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>

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung des jQuery-Selektors zum Attributfilter-Selektor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erläuterung des Beispiels des jQuery-Selektors für den Unterelement-FilterselektorNächster Artikel：Ausführliche Erläuterung des Beispiels des jQuery-Selektors für den Unterelement-Filterselektor

In Verbindung stehende Artikel

Mehr sehen