jQuery kann alles auswählen, was CSS3 auswählen kann. Aber es hört hier nicht auf! Es gibt eine Reihe zusätzlicher Selektoren, die jQuery anbietet (über die Sizzle-Selektor-Engine), die manchmal verdammt nützlich sind. Zum Beispiel verfügt CSS über Attributselektoren, mit denen Sie ein Element basierend auf einem beliebigen Attribut des Elements auswählen können. Zum Beispiel:
Es gibt einen CSS-Selektor, den wir in jQuery verwenden können, um Folgendes auszuwählen:
$("(data-whatever='elephant-eyeballs')");Es gibt Variationen des Attributselektor, wie statt =Sie tun können , ^=um „beginnt mit diesem Wert“ anzuzeigen. Aber aus irgendeinem Grund hat CSS nicht! = Oder "nicht gleich diesem Wert". jQuery macht! Dies ist ein Beispiel für eine jQuery-Auswahlerweiterung.
Es gibt viele dieser Selektorerweiterungen. Einige, über die wir in diesem Screencast speziell sprechen:
- : eq () - eine 0-indizierte Version von: nth-child ()
- : gerade - Abkürzung für: n-tes Kind (gerade)
- : gt (n) - Elemente mit einem größeren Index als n auswählen. Auch eine Abkürzung für ein komplexeres: nth-child () forumla.
Möglicherweise ist die nützlichste Selektorerweiterung von allen: has () - was die Auswahl auf Elemente beschränkt, die enthalten, was Sie diesem Pseudo-Selektor übergeben (oder ist es ein Pseudo-Pseudo-Selektor :) Es ist wahrscheinlich, dass CSS eines Tages so etwas haben wird Das ist für uns (ich denke, es wird so sein pre ! code), aber das ist noch ein langer Weg. Leider mache ich in diesem Screencast kein sehr überzeugendes Argument dafür, aber Sie werden wissen, wann Sie es brauchen! Zum Beispiel "Alle .Module auswählen, die eine h3.sports-Leiste enthalten" - so etwas.
Auf Wunsch können Sie auch eigene Auswahlerweiterungen vornehmen. Hier ist ein Artikel dazu. Das Beispiel besteht darin, :inviewein Element nur dann auszuwählen, wenn es auf der Seite an der aktuellen Bildlaufposition sichtbar ist. Es wäre so:
jQuery.extend(jQuery.expr(':'), ( inview: function (el) ( var $e = $(el), $w = $(window), top = $e.offset().top, height = $e.outerHeight(true), windowTop = $w.scrollTop(), windowScroll = windowTop - height, windowHeight = windowTop + height + $w.height(); return (top > windowScroll && top < windowHeight); ) ));