Heim > Web-Frontend > js-Tutorial > Hauptteil

Eine kurze Erklärung des Unterelement-Filterselektors in jQuery_jquery

WBOY
Freigeben: 2016-05-16 15:04:50
Original
2014 Leute haben es durchsucht

Die Filterregel des untergeordneten Elementfilters besteht darin, das entsprechende Element durch die Beziehung zwischen dem übergeordneten Element und dem untergeordneten Element zu erhalten.

2016418172315508.png (694×613)

$('li:first-child').css('background', '#ccc'); //每个父元素第一个li 元素 
 
$('li:last-child').css('background', '#ccc'); //每个父元素最后一个li 元素 
 
$('li:only-child').css('background', '#ccc'); //每个父元素只有一个li 元素 
 
$('li:nth-child(odd)').css('background', '#ccc'); //每个父元素奇数li 元素 
 
$('li:nth-child(even)').css('background', '#ccc'); //每个父元素偶数li 元素 
 
$('li:nth-child(2)').css('background', '#ccc'); //每个父元素第三个li 元素 
Nach dem Login kopieren

Wir wissen, wie man es verwendet

:first
Nach dem Login kopieren

Der Filterselektor kann das erste untergeordnete Element im angegebenen übergeordneten Element abrufen, dieser Selektor gibt jedoch nur ein Element zurück, keine Sammlung, und verwendet

:first-child
Nach dem Login kopieren

Der Filterselektor für untergeordnete Elemente kann das erste untergeordnete Element abrufen, das in jedem übergeordneten Element zurückgegeben wird. Es handelt sich um eine Sammlung und wird häufig für die Auswahlverarbeitung mehrerer Sammlungsdaten verwendet.

Wie unten gezeigt, wenn Sie das erste Li in jeder UL auf der Seite erhalten und seine Farbe ändern möchten. Dann können Sie

verwenden
: first-child

Nach dem Login kopieren
<body>
  <h3>该百年额米格“蔬菜水果”中第一行的文字颜色</h3>
  <ul>
    <li>芹菜</li>
    <li>茄子</li>
    <li>萝卜</li>
    <li>大白菜</li>
    <li>西红柿</li>
  </ul>
  <ul>
    <li>橘子</li>
    <li>香蕉</li>
    <li>葡萄</li>
    <li>苹果</li>
    <li>西瓜</li>
  </ul>
</body>
Nach dem Login kopieren
<script type="text/javascript">
  $("li:first-child").css("color", "red");
</script>

Nach dem Login kopieren

Der im Browser angezeigte Effekt:

2016418172340814.jpg (489×326)

Bestanden

$("li:first-child")
Nach dem Login kopieren
Der

-Selektorcode ruft das erste

  • -Element der beiden
      -Elemente ab und verwendet

      css()
      
      Nach dem Login kopieren
      Die Methode

      ändert die Textfarbe, die auf der Seite angezeigt wird.

  • Quelle:php.cn
    Erklärung dieser Website
    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
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage