Detaillierte Erläuterung des Filterselektors für jQuery-Unterelemente-js-Tutorial-php.cn

Detaillierte Erläuterung des Filterselektors für jQuery-Unterelemente

小云云

Freigeben： 2017-12-27 09:51:50

Original

1343 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die relevanten Informationen zum Filterselektor für untergeordnete Elemente von jQuery vor. Ich hoffe, dass er jedem helfen kann.

Das Beispiel in diesem Artikel teilt den spezifischen Code des jQuery-Unterelementfilterselektors 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">
      $(document).ready(function(){
        
        $("#btn1").click(function(){
          //选取子元素, 需要在选择器前添加一个空格. 
          $("p.one :nth-child(2)").css("background", "#ffbbaa");
        });
        $("#btn2").click(function(){
          $("p.one :first-child").css("background", "#ffbbaa");
        });
        $("#btn3").click(function(){
          $("p.one :last-child").css("background", "#ffbbaa");
        });
        
        $("#btn4").click(function(){
          $("p.one :only-child").css("background", "#ffbbaa");
        });
        
      });
    </script>
  </head>
  <body>    
    <input type="button" value="选取每个class为one的p父元素下的第2个子元素." id="btn1"/>
    <input type="button" value="选取每个class为one的p父元素下的第一个子元素." id="btn2"/>
    <input type="button" value="选取每个class为one的p父元素下的最后一个子元素." id="btn3"/>
    <input type="button" value="如果class为one的p父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
    
    <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>

Nach dem Login kopieren

Verwandte Empfehlungen:

Beispielfreigabe des jQuery-Selektors zum Attributfilter-Selektor

Attributfilter-Selektor in jquery

Detaillierte Erläuterung des Attributfilterselektors des JQuery-Selektors

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Filterselektors für jQuery-Unterelemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!