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