suchen

Heim >Web-Frontend >js-Tutorial >Ausführliche Erläuterung des Beispiels des jQuery-Selektors für den Unterelement-Filterselektor

Ausführliche Erläuterung des Beispiels des jQuery-Selektors für den Unterelement-Filterselektor

黄舟
黄舟Original
2017-09-30 11:26:511132Durchsuche

In diesem Artikel werden hauptsächlich die relevanten Informationen zum Filterselektor für untergeordnete Elemente des jQuery-Selektors vorgestellt. Er hat einen bestimmten Referenzwert.

Die Beispiele in diesem Artikel werden mit Ihnen geteilt Der spezifische Code des jQuery-Unterelementfilterselektors wird als Referenz bereitgestellt. 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>

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Beispiels des jQuery-Selektors für den Unterelement-Filterselektor. 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：Wie jQuery den Effekt des Herausgleitens der Maus-Navigationsunterstreichung implementiertNächster Artikel：Wie jQuery den Effekt des Herausgleitens der Maus-Navigationsunterstreichung implementiert

In Verbindung stehende Artikel

Mehr sehen