Übersicht und grundlegende Verwendung von jQuery

jQuery-Übersicht

jQuery ist eine leichtgewichtige Javascript-Bibliothek, die Kerndatei ist nur einige zehn KB groß und die darin enthaltenen Methoden und Funktionen sind grundsätzlich mit den aktuellen Mainstream-Browsern kompatibel. Es unterstützt nicht nur Ereignisse, Stile und Animationen, vereinfacht DOM-Operationen erheblich, ermöglicht Kettenprogrammierung und implizite Iteration, sondern unterstützt auch die Entwicklung von Plug-In-Erweiterungen, die mithilfe von Plug-Ins von Drittanbietern schnell entwickelt werden können.

Konzept der JavaScript-Bibliothek

Die Javascript-Bibliothek bezieht sich auf eine JS-Datei, die viele spezifische Funktionen und Methoden kapselt (vordefiniert) . Entwickler kapseln unseren nativen js-Code gemäß den funktionalen Anforderungen, z. B. Animation animieren, ausblenden, anzeigen und abrufen, und speichern ihn in dieser Datei. Auf diese Weise können wir diese gekapselten Funktionen bei Bedarf schnell und effizient nutzen. Zu den gängigen Javascript-Bibliotheken gehören der jQuery-Prototyp YUI Dojo zepto usw. Sie alle enthalten natives Javascript und werden intern von Javascript implementiert.

jQuery-Konzept

jQuery ist eine schnelle und übersichtliche Javascript-Bibliothek, j steht für Javascript und Query bedeutet Query. Es kapselt hauptsächlich die DOM-Operation in js, und wir können die darin enthaltenen Funktionen schnell abfragen und verwenden. Darüber hinaus umfassen die häufig verwendeten Funktionscodes von jQuery, die in Javascript gekapselt sind, die Ereignisbehandlung, das Animationsdesign und die Ajax-Interaktion . Das Wesentliche beim Lernen von jQuery ist das Verständnis der grammatikalischen Regeln der gekapselten Funktionen und Methoden.

Grundlegende Verwendung von jQuery

Herunterladen und importieren

Download Wir können auf die offizielle Website von jquery gehen, um die gewünschte Version herunterzuladen, und wir können hier auch lernen, wie man sie verwendet. Importieren Sie die komprimierte Version der Javascript-Datei nach dem Herunterladen in die Seite, die wir verwenden möchten, und verwenden Sie dann jQuery für die Entwicklung.

Die offizielle Website ist möglicherweise nicht zugänglich. Ich habe die jQuery-Datei hier heruntergeladen (Download)

Eingabefunktion von jQuery

// 方式一:
$(function () {
    
    
	...   // 页面的DOM加载完成的入口
});
// 方式二:
$(document).ready(function () {
    
    
	...   // 页面的DOM加载完成的入口
});

1. In beiden Methoden kann der interne Code ausgeführt werden, nachdem die DOM-Struktur gerendert wurde (entspricht dem DOMContentLoaded-Ereignis in nativen js). Es ist nicht erforderlich, zu warten, bis alle externen Ressourcen geladen sind. JQuery hilft uns, die Kapselung abzuschließen.
2. Anders als beim Ladeereignis in nativem js wird der interne Code ausgeführt, nachdem das Seitendokument, die externe js-Datei, die CSS-Datei und das Bild geladen wurden.

jQuerys oberstes Objekt

Das $ -Zeichen ist ein anderer Name für jQuery. Sie können auch jQuery anstelle des $ -Zeichens in Ihrem Code verwenden. $ Ist das Objekt der obersten Ebene von jQuery, das dem Fensterobjekt in unserem nativen Javascript entspricht . Nachdem Sie das Element mit $ in ein jQuery-Objekt eingeschlossen haben, können Sie die Methoden in jQuery aufrufen.

jQuery-Objekte und DOM-Objekte

1. Das Elementobjekt, das mithilfe der in nativem js bereitgestellten API erhalten wird, ist das DOM-Objekt.
2. Das mit der jQuery-Methode erhaltene Elementobjekt ist das jQuery-Objekt.
3. jQuery-Objekte sind im Wesentlichen Objekte, die durch Umschließen von DOM-Objekten mit $ generiert werden, und sie werden in Form von Pseudo-Arrays gespeichert.

Besonderer Hinweis: Nur jQuery-Objekte können die von jQuery bereitgestellten Methoden verwenden, und DOM-Objekte verwenden native Javascript-Methoden .

Gegenseitige Konvertierung zwischen jQuery-Objekt und DOM-Objekt

Native js ist größer als jQuery (jQuery wird intern mit js implementiert), und einige der nativen Attribute und Methoden von jQuery sind für uns nicht gekapselt. Wenn wir also einige jQuery-Objekte verwenden, die von jQuery-Methoden erhalten wurden, und die Attribute und Methoden von nativen js verwenden möchten, müssen wir die jQuery-Objekte in DOM-Objekte konvertieren, bevor sie verwendet werden können.

// 1、DOM对象转换成为jQuery对象：$(DOM元素对象);
var search = $(".search"); // 类名为search的jQuery对象
var div = document.querySelector('div');
div = $(div); // 将div这个DOM对象转换为jQuery对象

// 2、jQuery对象转换为DOM对象的两种方式
// 因为是以伪数组的形式进行存储所以有
search = $(".search")[0] // 0（index）是索引号
// get 方法
search = $(".search").get(0) // 0（index）是索引号