suchen

Heim >Web-Frontend >js-Tutorial >Eine kurze Erklärung des Unterelement-Filterselektors in jQuery_jquery

Eine kurze Erklärung des Unterelement-Filterselektors in jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 15:04:502039Durchsuche

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

Wir wissen, wie man es verwendet

:first

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

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


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

<script type="text/javascript">
  $("li:first-child").css("color", "red");
</script>

Der im Browser angezeigte Effekt:

2016418172340814.jpg (489×326)

Bestanden

$("li:first-child")
Der

-Selektorcode ruft das erste 25edfb22a4f469ecb59f1190150159c6-Element der beiden ff6d136ddc5fdfeffaf53ff6ee95f185-Elemente ab und verwendet 

css()
Die Methode

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

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：Beispielfreigabe für die Konvertierung von HTML-Seiten in Bilder mithilfe von PHP+JavaScript_Javascript-KenntnissenNächster Artikel：Beispielfreigabe für die Konvertierung von HTML-Seiten in Bilder mithilfe von PHP+JavaScript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen