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.

Selektor

Sobald Sie die Grundlagen von CSS-Selektoren kennen, ist es sehr einfach, sich jQuery-Selektoren anzusehen.

$("E:odd")                                                                                        🎜>Alle Elemente in E mit Index n$("E:gt(n)")                                                                               Alle Elemente in E mit Index kleiner als nWählen Sie h1~h7-Elemente ausWählen Sie das Element aus, das den Animationseffekt ausführtInhaltsfilter$ ('E:contains(value)')$('E:empty')Das Element mit F im untergeordneten Element, $('p:has(a)' ): p$('E: parent')Das übergeordnete Element ist das Element von E, $('td: parent') : Das übergeordnete Element ist das Element von td$(' E:hidden')Alle versteckten E$('E:visible')Alle sichtbaren E$('E[attr]')E mit Attribut attr$('E[attr=value]')E mit Attribut attr=value$( 'E[attr !=value]') Attribut attr!E des Attributs attr beginnend mit dem Wert

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: ll(n)")
	$(": header")
	$("p:animated")
Elemente, deren Inhalt Wert enthält
Elemente, deren Inhalt ist leer	$('E:has(F)')
	Visual Selector
	Attributfilterselektor
$('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

Filtermethode

.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');

Grundlegende Methode

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