#06: jQuery-Selektorerweiterungen

jQuery kann alles auswählen, was CSS3 auswählen kann. Aber damit ist es noch nicht getan! jQuery bietet eine Reihe zusätzlicher Selektoren (über die Sizzle-Selektor-Engine), die manchmal ziemlich nützlich sind. Zum Beispiel gibt es in CSS Attributselektoren, die es Ihnen ermöglichen, ein Element basierend auf einem beliebigen Attribut auszuwählen, das das Element möglicherweise hat. Zum Beispiel

<div data-whatever="elephant-eyeballs"></div>

Es gibt einen CSS-Selektor, den wir in jQuery verwenden können, um diesen auszuwählen

$("[data-whatever='elephant-eyeballs']");

Es gibt Variationen des Attributselektors, wie z. B. anstelle von = können Sie ^= verwenden, um "beginnt mit diesem Wert" anzuzeigen. Aber aus irgendeinem Grund hat CSS kein != oder "ungleich diesem Wert". jQuery schon! Das ist ein Beispiel für eine jQuery-Selektorerweiterung.

Es gibt viele dieser Selektorerweiterungen. Einige, über die wir in diesem Screencast speziell sprechen

• :eq() – eine 0-indizierte Version von :nth-child()
• :even – Kurzschreibweise für :nth-child(even)
• :gt(n) – wählt Elemente mit einem größeren Index als n aus. Ebenfalls eine Kurzschreibweise für eine komplexere :nth-child()-Formel.

Möglicherweise die nützlichste Selektorerweiterung von allen ist :has() – die die Auswahl auf Elemente beschränkt, die das enthalten, was Sie diesem Pseudo-Selektor übergeben (oder ist es ein Pseudo-Pseudo-Selektor :) Es ist wahrscheinlich, dass CSS in Zukunft etwas Ähnliches für uns haben wird (ich glaube, es wird so etwas wie pre ! code sein), aber das liegt noch in weiter Ferne. Leider mache ich in diesem Screencast keine sehr überzeugende Argumentation dafür, aber Sie werden es wissen, wenn Sie es brauchen! Zum Beispiel "Wählen Sie alle .module aus, die ein h3.sports-bar enthalten" – so etwas in der Art.

Sie können auch eigene Selektorerweiterungen erstellen, wenn Sie möchten. Hier ist ein Artikel dazu. Das Beispiel ist, :inview zu erstellen, das ein Element nur dann auswählt, wenn es an der aktuellen Scroll-Position auf der Seite sichtbar ist. Es würde so aussehen

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);  
  }
});