Heim > Artikel > Web-Frontend > Zusammenfassung gängiger Methoden zur besseren Verwendung von jQuery
Die Tatsache, dass jQuery so einfach zu verwenden ist, hat viel mit der Verwendung einer mit CSS-Selektoren kompatiblen Syntax beim Abrufen von Objekten zu tun. Schließlich ist jeder mit CSS-Selektoren vertraut (mehr über CSS-Selektoren können Sie in lesen). zehn Minuten) CSS-Selektor), aber seine Leistung ist mit CSS3-Selektoren und noch viel mehr kompatibel.
Sobald Sie die Grundlagen von CSS-Selektoren kennen, ist es sehr einfach, sich jQuery-Selektoren anzusehen.
Basisselektor | |
$('*' ) | stimmt mit allen Elementen auf der Seite überein |
$('#id') | id-Selektor |
$('.class') | Klassenauswahl |
$('element') | Tag-Auswahl |
Kompositions-/Ebenenauswahl | |
$('E,F') | Mehrelementselektor , getrennt durch ",, stimmt gleichzeitig mit Element E oder Element F überein |
$('E F') | Nachkommenselektor , getrennt durch Leerzeichen, entspricht allen Nachkommen des E-Elements (nicht nur untergeordneten Elementen, untergeordnete Elemente rekursieren). nach unten) Element F |
$(E>F) | Selektor für untergeordnete Elemente, getrennt durch „>“, entspricht allen direkten untergeordneten Elementen des E-Elements. |
$('E+F') | direkt angrenzender Selektor, entspricht dem E-Element nach s benachbartem s Geschwister- Element F |
$('E~F') | Gewöhnlicher benachbarter Selektor (jüngerer Bruder-Selektor), entspricht Geschwister- Element F von nach E-Element (ob direkt angrenzend oder nicht) |
$('.class1.class2') | Übereinstimmung mit Elementen, deren Klassenname sowohl Klasse1 als auch Klasse2 enthält |
Grundlegender Filterselektor | |
$("E:first") | Das erste aller E's |
$("E :last") | Das letzte aller E |
$("E:not(selector)") | E nach Selektor filtern |
$("E:even") | $("E:odd") 🎜>Alle Elemente in E mit Index n|
$("E: ll(n)") | |
$(": header") | |
$("p:animated") | |
Inhaltsfilter | |
Elemente, deren Inhalt Wert enthält | |
Elemente, deren Inhalt ist leer | $('E:has(F)') |
$('E: parent') | Das übergeordnete Element ist das Element von E, $('td: parent') : Das übergeordnete Element ist das Element von td |
Visual Selector | |
$(' E:hidden') | |
$('E:visible') | |
Attributfilterselektor | |
$('E[attr]') | |
$('E[attr=value]') | |
$( 'E[attr !=value]') | Attribut attr!E |
$('E[attr ^=value]') | E |
$('E[attr $=value]') | E mit Attribut attr, das auf value endet |
$('E[attr *=value] ') | E |
$('E[attr][attr *=value]') | kann zusammen verwendet werden |
Filter für untergeordnete Elemente | |
$('E:nth-child(n) ') | Der n-te untergeordnete Knoten von E |
$('E:nth-child(3n+1)') | E's Index Untergeordnete Knoten, die dem 3n+ entsprechen 1 Ausdruck |
$('E:nth-child(even)') | Untergeordnete Knoten mit einer geraden Anzahl von Indizes |
$('E:nth-child(odd)') | E's untergeordneter Knoten, dessen Index eine ungerade Zahl ist |
$ ('E:first- clild') | Der erste untergeordnete Knoten von allen E |
$('E:last-clild') | Der letzte untergeordnete Knoten von allen E |
$('E:only-clild') | Der untergeordnete Knoten von E mit nur einem eindeutigen untergeordneten Knoten |
Formularelementauswahl | |
$('E:type') | Spezifische Typeingabe |
$(':checked') | Das ausgewählte Kontrollkästchen oder Radio |
$('option : selected') | Ausgewählte Option |
.find(selector) Finden Sie die Sammlung. Die untergeordneten Knoten jedes Elements
$('li.item-ii').find('li').css('background-color', 'red');
.filter(selector)Elemente in der aktuellen Sammlung filtern
$('li').filter(':even').css('background-color', 'red');
.ready(handler) Methode, die ausgeführt wird, nachdem das Laden des Dokuments abgeschlossen ist, anders als window.onload
$(document).ready(function() { // Handler for .ready() called.});
.each(function(index,element)), die die Sammlung jedes Elements durchläuft
$("li" ).each(function( index ) { console.log( index + ": " + $(this).text() ); });
jQuery.extend( target [, object1 ] [, objectN ] ) Objekte zusammenführen
var object = $.extend({}, object1, object2);
Das obige ist der detaillierte Inhalt vonZusammenfassung gängiger Methoden zur besseren Verwendung von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!