Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung gängiger Methoden zur besseren Verwendung von jQuery

Zusammenfassung gängiger Methoden zur besseren Verwendung von jQuery

伊谢尔伦
伊谢尔伦Original
2017-06-19 14:28:311260Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn