Zusammenfassung gängiger Methoden zur besseren Verwendung von jQuery-js-Tutorial-php.cn

Zusammenfassung gängiger Methoden zur besseren Verwendung von jQuery

伊谢尔伦

Freigeben： 2017-06-19 14:28:31

Original

1293 Leute haben es durchsucht

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

$(&#39;li.item-ii&#39;).find(&#39;li&#39;).css(&#39;background-color&#39;, &#39;red&#39;);

Nach dem Login kopieren

.filter(selector)Elemente in der aktuellen Sammlung filtern

$(&#39;li&#39;).filter(&#39;:even&#39;).css(&#39;background-color&#39;, &#39;red&#39;);

Nach dem Login kopieren

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

Nach dem Login kopieren

.each(function(index,element)), die die Sammlung jedes Elements durchläuft

$("li" ).each(function( index ) {
  console.log( index + ": " + $(this).text() );
});

Nach dem Login kopieren

jQuery.extend( target [, object1 ] [, objectN ] ) Objekte zusammenführen

var object = $.extend({}, object1, object2);

Nach dem Login kopieren

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!