suchen

Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie den Filterselektor für jQuery-Unterelemente

So verwenden Sie den Filterselektor für jQuery-Unterelemente

小云云
小云云Original
2018-01-31 13:26:391311Durchsuche

In diesem Artikel werden hauptsächlich die relevanten Informationen zum Filterselektor für untergeordnete Elemente von jQuery vorgestellt. Ich hoffe, dass er jedem helfen kann. 


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

Verwandte Empfehlungen:

Detaillierte Erläuterung des jQuery-Unterelementfilterselektors

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Filterselektor für jQuery-Unterelemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery 选择器
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：Grunts ausführliche Erklärung der statischen Dateikomprimierung und VersionskontrollpaketierungNächster Artikel：Grunts ausführliche Erklärung der statischen Dateikomprimierung und Versionskontrollpaketierung

In Verbindung stehende Artikel

Mehr sehen