Detaillierte Erläuterung der grundlegenden Wissenspunkte von JQuery

Dieses Mal werde ich Ihnen die grundlegenden Wissenspunkte von jquery ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung der grundlegenden Wissenspunkte von jquery? Das Folgende ist ein praktischer Fall.

jQuery ist eine ausgezeichnete, leichte JS-Bibliothek, die mit CSS3 und verschiedenen Browsern (IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+) kompatibel ist. jQuery2 .0 und nachfolgende Versionen sind jedoch nicht kompatibel Unterstützt IE6/7/8-Browser nicht mehr. Mit jQuery können Benutzer HTML (eine Anwendung unter Standard Universal Markup Language) und Ereignisse einfacher verarbeiten, Animationseffekte implementieren und problemlos AJAX-Interaktion für Websites bereitstellen. Ein weiterer großer Vorteil von jQuery ist, dass die Dokumentation sehr vollständig ist und verschiedene Anwendungen ausführlich erklärt werden. Außerdem stehen viele ausgereifte Plug-Ins zur Auswahl.

1. Der Unterschied zwischen der jQuery-Eingabefunktion und der Js-Eingabefunktion

[Hinweis] Die js-Eingabefunktion bezieht sich auf: window.onload = function (){};

Unterschied 1: Verschiedene Schreibnummern

Die Js-Eintragsfunktion kann nur einmal vorkommen. Wenn sie mehrmals erscheint, erfolgt eine Ereignisabdeckung Problem.

Die Eingabefunktion von jQuery kann ohne Ereignisabdeckung beliebig oft vorkommen.

Unterschied 2: Unterschiedliche Ausführungszeitpunkte

Die Js-Eingabefunktion wird ausgeführt, nachdem alle Dateiressourcen geladen wurden. Zu diesen Dateiressourcen gehören: Seitendokumente, externe JS-Dateien, externe CSS-Dateien, Bilder usw.

Die Eingabefunktion von jQuery wird ausgeführt, nachdem das Dokument geladen wurde. Der Abschluss des Dokumentladens bedeutet: Nachdem der DOM-Baum geladen wurde, können Sie das DOM bedienen, ohne auf das Laden aller externen Ressourcen warten zu müssen.

Die Reihenfolge beim Laden des Dokuments: von oben nach unten, gleichzeitiges Parsen und Ausführen.

2. Gegenseitige Konvertierung zwischen jQuery-Objekt und DOM-Objekt

①DOM-Objekt bezieht sich hier auf: Verwendung von js Das Ergebnis zurückgegeben durch Betrieb von DOM

var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象

②jQuery-Objekt bezieht sich hier auf: das Ergebnis, das durch Verwendung der von jQuery bereitgestellten Methode zum Betrieb von DOM zurückgegeben wird

var $btn = $(“#btnShow”); // $btn就是一个jQuery对象

③DOM-Objekt in jQuery-Objekt konvertiert

var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1
// $(document）.ready(function(){}); // 调用入口函数
// 此处是将document这个js的DOM对象，转换成了jQuery对象，然后才能调用jQuery提供的方法：ready

④jQuery-Objekt in DOM-Objekt konvertiert

// 第一种方式
var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1 （推荐使用此方式）
// 第二种方式
var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2

3. jQuery-Selektor

Symbol (Name)	Beschreibung	Verwendung
Basisauswahl(Wichtige Punkte)
#	ID-Auswahl	$(“#btnShow”).css(“color”, “red”); Auswählen ein Element mit der ID btnShow (der Rückgabewert ist ein jQuery-Objekt, das gleiche unten)
.	Klassenselektor	$(.liItem”).css(„color“, „red“); Alle Elemente auswählen, die die Klasse liItem enthalten
Element	Tag-Selektor	$(“li”).css(“color”, “red”); Alle Elemente mit dem Tag-Namen li auswählen
Ebenenauswahl
Leerzeichen	Nachkommenauswahl	$(„#j_wrap li“).css(“color“, „red“); Wählen Sie das Element mit der ID j_wrap aus. Alle Nachkommenelemente von li
>	Kinderauswahl	$(“#j_wrap > ul > ; li").css(" color", "red"); Alle untergeordneten Elemente ul aller untergeordneten Elemente des Elements mit der ID j_wrap li auswählen
Basisfilter Selektor
:eq(index)	Wählen Sie die Indexnummer des übereinstimmenden Elements aus. Es ist ein Element des Index, der Index beginnt von 0	$(“li:eq(2)”).css(“color“, „red“); Select li Ein Element mit der Indexnummer 2
:odd	wählt alle übereinstimmenden Elemente mit einer ungeraden Indexnummer aus. Element, Index beginnt bei 0	$(“li:odd”).css(“color”, “red”); Wählen Sie die ungerade Indexnummer im li-Element Alle Elemente aus
:even	Wählen Sie alle Elemente mit geraden Indexnummern unter den übereinstimmenden Elementen aus, und der Index beginnt bei 0	$("li:odd").css("color", "red"); Wählen Sie alle Elemente mit geraden Indexnummern im li-Element aus
Filterselektor (Methode) (Schlüsselpunkt)
Suchen(Selektor)	Alle Nachkommenelemente des angegebenen Elements finden (Nachkommen)	$(“#j_wrap”).find(“li”).css(“color“, „red“); Wählen Sie den mit der ID j_wrap aus Alle untergeordneten Elemente li
children()	Suchen Sie die direkten untergeordneten Elemente (untergeordnete Elemente) des angegebenen Elements	$ ("#j_wrap").children("ul").css("color","red"); Wählen Sie alle untergeordneten Elemente ul mit der ID von j_wrap aus
siblings()	Alle Geschwisterelemente finden (außer sich selbst)	$("#j_liItem").siblings().css("color" , "rot"); Alle Geschwisterelemente mit der ID j_liItem auswählen
parent()	Das übergeordnete Element finden (Darling) )	$(“#j_liItem”).parent(“ul”).css(“color”,“red”); Wählen Sie das übergeordnete Element mit der ID j_liItem aus
eq(index)	Suchen Sie das Indexelement des angegebenen Elements. Index ist die Indexnummer, beginnend bei 0	$("li").eq(2).css("color", "red"); Wählen Sie das zweite unter allen li-Elementen aus

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Gesamtarchitekturanalyse und Verwendung von jquery

Detaillierte Erläuterung der Methode von jQuery Beurteilung der Art und Größe der hochgeladenen Bilder

Detaillierte Erläuterung der Verwendung des jQuery-Frameworks

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der grundlegenden Wissenspunkte von JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!