Bücher online kostenlos Kostenlos Online Lesen
JQuery Kochbuch (German Edition)

JQuery Kochbuch (German Edition)

Titel: JQuery Kochbuch (German Edition) Kostenlos Bücher Online Lesen
Autoren: jQuery Community Experts
Vom Netzwerk:
Kleinschreibung geachtet, daher würde nichts gefunden werden, wenn wir nach bob suchen würden (mit einem kleinen b ). Zudem sind die Anführungszeichen nicht immer erforderlich, aber es ist sinnvoll, sie zu haben, falls Sie sie dann doch einmal benötigen (zum Beispiel, wenn Sie Klammern nutzen wollen).
    Um auf verschachtelte Elemente zu prüfen, können Sie den Filter
:has()
nutzen.Dabei können Sie einen beliebigen gültigen Selektor übergeben:
jQuery('div:has(p a)');
    Dieser Selektor findet alle

-Elemente, in denen

-Elemente (Anker) innerhalb von


-Elementen (Absätzen) verschachtelt sind.
    Diskussion
    Der Filter
:contains()
erfüllt eventuell nicht immer ihre Anforderungen, vor allem, wenn Sie eine bessere Kontrolle darüber haben wollen, welcher Text zugelassen ist und welcher nicht. In solchen Fällen schlage ich vor, einen regulären Ausdruck zu nutzen und den Text des Elements damit zu testen, zum Beispiel so:
jQuery('p').filter(function(){
    return /(^|\s)(Apfel|Orange|Zitrone)(\s|$)/.test(jQuery(this).text());
});
    Damit werden alle Absätze selektiert, die eines der Worte Apfel , Orange oder Zitrone enthalten. Mehr zur jQuery-Methode
filter()
finden Sie in Elemente mit bestimmten Eigenschaften selektieren .

Elemente über eine negative Selektion selektieren
    Problem
    Sie müssen eine Reihe von Elementen selektieren, die nicht einem bestimmten Selektor entsprechen.
    Lösung
    Dafür bietet jQuery den Filter
:not
an,den Sie wie folgt einsetzen können:
jQuery('div:not(#content)'); // Selektieren aller DIVs außer #content
    Dieser Filter entfernt alle Elemente aus der aktuellen Collection, die vom übergebenen Selektor gefunden werden. Dabei kann dieser Selektor beliebig kompliziert sein, zum Beispiel:
jQuery('a:not(div.important a, a.nav)');
// Selektieren von Ankern, die nicht in 'div.important' liegen
// oder die Klasse 'nav' besitzen
    ----
    Warning
    Das Übergeben komplexer Selektoren an den Filter
:not
ist erst ab jQuery 1.3 möglich. In vorherigen Versionen waren nur einfache Selektions-Ausdrücke erlaubt.
    ----
    Diskussion
    Neben dem
:not
-Filter gibt es in jQuery auch noch eine Methode mit ähnlicher Funktionalität. Dieser werden Selektoren oder DOM-Collections/Knoten übergeben. Hier ein Beispiel:
var $anchors = jQuery('a');
$anchors.click(function(){
    $anchors.not(this).addClass('not-clicked');
});
    Mit diesem Code werden beim Anklicken eines Ankers alle anderen Anker mit der Klasse
not-clicked
versehen. Das Schlüsselwort
this
bezieht sich dabei auf das angeklickte Element.
    Der Methode
not()
können auch Selektoren übergeben werden:
$('#nav a').not('a.active');
    Dieser Code selektiert alle Anker innerhalb von
#nav
, die nicht die Klasse
active
besitzen.

Elemente anhand ihrer Sichtbarkeit selektieren
    Problem
    Sie wollen ein Element abhängig von seiner Sichtbarkeit selektieren.
    Lösung
    Sie können entweder den Filter
:hidden
oder
:visible
nutzen:
jQuery('div:hidden');
    Hier ein paar Beispiele für die Anwendung:
if (jQuery('#elem').is(':hidden')) {
    // Tue etwas abhängig von der Sichtbarkeit
}
jQuery('p:visible').hide(); // Verberge nur Elemente, die aktuell sichtbar sind
    Diskussion
    ----
    Warning
    Seit jQuery 1.3.2 haben sich diese Filter drastisch geändert. Vor 1.3.2 reagierten beide Filter so, wie Sie es für die Eigenschaft
visibility
erwarten würden,aber das ist nicht mehr länger der Fall. Stattdessen prüft jQuery die Höhe und Breite des Elements (relativ zu seinem
offsetParent
). Wenn eine der Dimensionen Null ist, wird dieses Element als verborgen betrachtet, ansonsten als sichtbar.
    ----
    Falls Sie eine bessere Kontrolle benötigen, können Sie immer die jQuery-Methode
filter()
nutzen,mit der Sie das Element beliebig testen können. Stellen Sie sich zum Beispiel vor, dass Sie alle Elemente selektieren wollen, die auf
display:none
gesetzt sind, aber nicht die, die auf
visibility:hidden
  gesetzt sind. Der Filter
:hidden
würde hier nicht funktionieren, da er entweder alle Elemente mit einer der beiden Eigenschaften findet (vor v1.3.2) oder keine der beiden Eigenschaften berücksichtigt (seit v1.3.2):
jQuery('*').filter(function(){
    return jQuery(this).css('display') === 'none'
     && jQuery(this).css('visibility') !== 'hidden';
});
    Mit diesem Code sollten Sie eine Collection mit Elementen erhalten, bei denen
display:none
, aber nicht
visibility:hidden
gesetzt ist. Beachten Sie allerdings, dass diese Selektion nicht unbedingt notwendig sein muss – der