Detaillierte Erläuterung der Verwendung in jquery

jQuery ist eine der am weitesten verbreiteten JavaScript-Bibliotheken und mittlerweile zu einer der wesentlichen Fähigkeiten für die Frontend-Entwicklung geworden. In diesem Artikel wird die Verwendung der jQuery-Bibliothek im Detail vorgestellt, um den Lesern ein besseres Verständnis der Grundkonzepte, Syntax und gängigen Methoden von jQuery zu ermöglichen.

1. Einführung in jQuery

jQuery ist eine schnelle und prägnante JavaScript-Bibliothek, die die Kernfunktionen von JavaScript kapselt. Es bietet eine benutzerfreundliche API, die das Durchlaufen von HTML-Dokumenten, die Ereignisbehandlung, Animationseffekte, AJAX-Interaktion und andere Vorgänge vereinfacht und es Entwicklern ermöglicht, Webanwendungen effizienter zu schreiben.

Sehen wir uns an, wie man jQuery in einer Webanwendung verwendet.

2. jQuery einführen

Um jQuery zu verwenden, müssen wir es in die Webanwendung einführen. Es gibt zwei Möglichkeiten, jQuery einzuführen:

1. Laden Sie die jQuery-Datei herunter (empfohlen)

Wir können die jQuery-Datei auf der offiziellen jQuery-Website herunterladen und sie dann wie folgt in die HTML-Seite einfügen:

<script src="jquery.js"></script>

In a36683aec53cbbdac353f7c8361226cc标签之前引入以上代码，即可将jQuery库引入到网页中。注意，文件名称可以根据你下载的版本而有所不同。

2. 通过CDN引入jQuery

另一种引入jQuery的方式是使用CDN（内容分发网络），你只需要在HTML页面中进行如下引入：

<script src="https://cdn.jsdelivr.net/jquery/3.5.0/jquery.min.js"></script>

这样就可以从CDN中引入最新版本的jQuery文件，而不需要下载并自己维护该文件。

三、jQuery语法

jQuery库中的所有功能都是通过jQuery()函数实现的。这个函数也称为 $ 函数，可以将选择器传递给它，以获取指定元素的jQuery对象，如下所示：

$(selector).action()

• $ 符号定义jQuery
• selector 是要操作的HTML元素
• action() 是要执行的动作，比如 addClass()、fadeOut()、animate() 等

四、jQuery选择器

jQuery选择器使我们能够根据元素的标记名、类、属性和属性值等内容来选择DOM元素。与传统的JavaScript DOM选择器不同，jQuery选择器不区分大小写。

下面是一些常见的jQuery选择器：

Einführung von jQuery über CDNEine andere Möglichkeit, jQuery einzuführen, ist die Verwendung eines CDN (Content Delivery Network). Sie müssen es nur wie folgt in die HTML-Seite einführen: rrreee

选择器	描述
*	选择所有元素
#id	选择具有指定id的元素
.class	选择具有指定class的元素
element	选择所有指定元素类型的元素
element.class	选择指定元素class属性中包含指定值的元素
element,element	选择所有指定元素类型的所有指定元素类型的元素
:first	选择文档中第一个指定的元素
:last	选择文档中最后一个指定的元素
:even	选择文档中所有偶数位置的指定元素
:odd	选择文档中所有奇数位置的指定元素
:eq(index)	选择指定位置的指定元素（从第0个开始）
:gt(no)	选择指定位置之后的指定元素
:lt(no)	选择指定位置之前的指定元素
:header	选择所有标题元素（h1 ~ h6）
:not(selector)	选择不符合指定选择器的元素
:contains(text)	选择包含指定文本的元素
:empty	选择不包含子元素和文本的元素
:hidden	选择所有隐藏的元素
:visible

Das ist Ziehen Sie die neueste Version der jQuery-Dateien aus dem CDN ein, ohne die Datei selbst herunterladen und verwalten zu müssen. 🎜🎜3. jQuery-Syntax🎜🎜Alle Funktionen in der jQuery-Bibliothek werden über die jQuery()-Funktion implementiert. Diese Funktion wird auch $-Funktion genannt, und Sie können ihr einen Selektor übergeben, um das jQuery-Objekt des angegebenen Elements abzurufen, etwa so: 🎜rrreee

🎜$ Symbol jQuery definieren🎜🎜selector ist das zu bedienende HTML-Element 🎜🎜action() ist die auszuführende Aktion, z. B. addClass(), fadeOut(), animate() usw. 🎜

🎜4. jQuery-Selektor🎜🎜jQuery-Selektor ermöglicht uns die Auswahl von DOM-Elementen basierend auf dem Tag-Namen, der Klasse, dem Attribut und dem Attributwert des Elements. Im Gegensatz zu herkömmlichen JavaScript-DOM-Selektoren wird bei jQuery-Selektoren die Groß-/Kleinschreibung nicht beachtet. 🎜🎜Hier sind einige gängige jQuery-Selektoren: 🎜🎜🎜 *🎜🎜Alle Elemente auswählen🎜🎜🎜#id🎜🎜Elemente mit der angegebenen ID auswählen🎜🎜🎜.class🎜🎜 Elemente mit der angegebenen Klasse auswählen🎜🎜🎜element🎜🎜Alle Elemente des angegebenen Elementtyps auswählen🎜🎜🎜element.class🎜🎜 Wählt Elemente aus dessen Klassenattribut des angegebenen Elements den angegebenen Wert enthält🎜🎜🎜element,element🎜🎜Wählt alle Elemente des angegebenen Elementtyps aller angegebenen Elementtypen aus🎜🎜🎜 :first🎜🎜Wählen Sie das erste angegebene Element im Dokument aus🎜🎜🎜:last🎜🎜Wählen Sie das letzte angegebene Element im Dokument aus🎜🎜🎜:even🎜🎜Wählt das angegebene Element an allen geraden Positionen im Dokument aus🎜🎜🎜:odd🎜🎜Wählt das angegebene Element an allen ungeraden Positionen im Dokument aus das Dokument🎜🎜🎜 :eq(index)🎜🎜Wählen Sie das angegebene Element an der angegebenen Position aus (beginnend mit dem 0.)🎜🎜🎜:gt(no )🎜🎜Wählen Sie die angegebene Position aus. Das angegebene Element nach 🎜🎜🎜:lt(no)🎜🎜Wählen Sie das angegebene Element vor der angegebenen Position aus 🎜🎜🎜:header🎜🎜Alle Titelelemente auswählen (h1 ~ h6)🎜🎜🎜:not(selector)🎜🎜Elemente auswählen, die nicht mit dem angegebenen Selektor übereinstimmen🎜🎜 🎜:contains(text)🎜🎜Wählen Sie Elemente aus, die den angegebenen Text enthalten🎜🎜<tr>🎜<code>:empty🎜🎜Wählen Sie Elemente aus, die keine untergeordneten Elemente enthalten und Text🎜🎜🎜:hidden code>🎜🎜Alle ausgeblendeten Elemente auswählen🎜🎜<tr>🎜<code>:visible🎜🎜Alle sichtbaren Elemente auswählen🎜🎜🎜🎜

5. jQuery-Ereignisse

jQuery-Ereignisse sind für uns die bequemste Möglichkeit, HTML-Elemente zu bedienen. Hier sind einige häufige jQuery-Ereignisse:

Selector	Description

Event	Description
click()click()	鼠标点击事件
dblclick()	鼠标双击事件
mouseenter()	鼠标移入事件
mouseleave()	鼠标移出事件
mousedown()	按下鼠标按钮事件
mouseup()	松开鼠标按钮事件
keydown()	按下键盘按钮事件
keyup()	松开键盘按钮事件
focus()	元素获取焦点事件
blur()	元素失去焦点事件
submit()	提交表单事件
load()	加载页面事件
resize()	调整页面大小事件
scroll()	页面滚动事件
change()	元素内容改变事件

六、jQuery效果

jQuery提供了一组强大的效果方法，可以让我们轻松地添加动画效果、改变元素内容、元素位置、元素大小等等。下面是一些常见的jQuery效果：

效果	描述
hide()	隐藏指定的元素
show()	显示指定的元素
toggle()	隐藏显示元素的状态
fadeIn()	淡入指定的元素，基于透明度
fadeOut()	淡出指定的元素，基于透明度
fadeToggle()	隐藏显示元素的状态，基于透明度
slideDown()	向下滑动显示指定的元素
slideUp()	向上滑动隐藏指定的元素
slideToggle()	展开或收缩元素
animate()	创建自定义动画
stop()	停止动画
scrollTop()	将滚动条向上移动到指定元素的顶部
scrollLeft()	将滚动条向左移动到指定元素的左侧
css(property)	获取指定CSS属性的值
css(property, value)	设置CSS属性的值
width()	获取元素的宽度
height()	获取元素的高度

七、jQuery AJAX

AJAX是一种异步JavaScript和XML技术，使我们能够通过JavaScript使用HTTP请求和响应数据，无需重新加载整个页面即可更新部分页面。

jQuery提供了一组强大的AJAX方法，使我们可以轻松地使用AJAX技术。下面是一些常见的jQuery AJAX方法：

Mouse click eventdblclick() code >

AJAX方法	描述
$.ajax()	使用HTTP请求从远程服务器获取数据
$.get()	使用HTTP GET请求从远程服务器获取数据
$.post()	使用HTTP POST请求从远程服务器获取数据
$.getJSON()	获取JSON格式的数据
$.ajaxSetup()	设置全局AJAX设置
$.ajaxError()	处理AJAX错误
$.ajaxComplete()	处理AJAX请求的完成事件
$.ajaxStart()	处理AJAX开始时的事件
$.ajaxSend()	处理AJAX请求发送前的事件
$.ajaxSuccess()	处理AJAX请求成功的事件
$.ajaxStop()	处理AJAX结束时的事件
$.ajaxSetup()

Maus-Doppelklick-Ereignis

🎜mouseenter()🎜🎜Mouse-in-Ereignis🎜🎜🎜🎜mouseleave()🎜🎜Mouse-out-Ereignis🎜🎜 🎜🎜mousedown()🎜🎜Maustaste gedrückt-Ereignis🎜🎜🎜🎜mouseup()🎜🎜Maustaste losgelassen-Ereignis🎜🎜🎜🎜keydown() Code >🎜🎜Ereignis „Tastaturtaste gedrückt“🎜🎜🎜🎜<code>keyup()🎜🎜Ereignis „Tastaturtaste losgelassen“🎜🎜🎜🎜focus()🎜🎜Element erhält Fokusereignis🎜 🎜 🎜🎜blur()🎜🎜Element verliert Fokusereignis🎜🎜🎜🎜submit()🎜🎜Formularereignis senden🎜🎜🎜🎜load()🎜🎜Seitenereignis laden🎜🎜🎜🎜resize()🎜🎜Seitengröße ändern🎜🎜🎜🎜scroll()🎜🎜Seitenscrollereignis🎜🎜🎜🎜 change()🎜🎜Elementinhaltsänderungsereignis🎜🎜🎜🎜🎜 6. jQuery-Effekte🎜🎜jQuery bietet eine Reihe leistungsstarker Effektmethoden, mit denen wir auf einfache Weise Animationseffekte hinzufügen, Elementinhalte, Elementpositionen und Elemente ändern können Größe usw. Hier sind einige häufige jQuery-Effekte: 🎜🎜🎜🎜🎜Effect🎜🎜Description🎜🎜🎜🎜🎜🎜hide()🎜🎜Hide the spezifiziertes Element🎜🎜🎜🎜show()🎜🎜Zeigen Sie das angegebene Element an🎜🎜🎜🎜<code>toggle()🎜🎜Verstecken Sie den Status des angezeigten Elements🎜🎜🎜🎜fadeIn()🎜🎜Einblenden des angegebenes Element, basierend auf Transparenz🎜🎜🎜🎜fadeOut()🎜🎜Das angegebene Element ausblenden, basierend auf Transparenz🎜🎜🎜🎜fadeToggle()🎜🎜Status ausblenden des angezeigten Elements, basierend auf der Transparenz 🎜🎜🎜🎜slideDown()🎜🎜Nach unten schieben, um das angegebene Element anzuzeigen🎜🎜🎜🎜slideUp()🎜🎜Nach oben schieben das angegebene Element ausblenden🎜🎜🎜🎜slideToggle()🎜🎜Elemente erweitern oder reduzieren🎜🎜🎜🎜animate()🎜🎜Benutzerdefinierte Animationen erstellen🎜🎜🎜🎜 stop()🎜 🎜Animation stoppen🎜🎜🎜🎜scrollTop()🎜🎜Bewegen Sie die Bildlaufleiste nach oben zum oberen Rand des angegebenen Elements🎜🎜🎜🎜scrollLeft()🎜🎜Bewegen Sie die Bildlaufleiste nach links. Bewegen Sie sich zur linken Seite des angegebenen Elements.🎜🎜🎜🎜<code>css(property)🎜🎜Erhalten Sie den Wert der angegebenen CSS-Eigenschaft css(property, value)🎜🎜Settings Der Wert der CSS-Eigenschaft 🎜🎜🎜🎜width()🎜🎜Ruft die Breite des Elements ab🎜🎜🎜🎜height()🎜🎜Erhält die Höhe des Elements🎜🎜🎜🎜🎜VII, jQuery AJAX🎜🎜AJAX ist eine asynchrone JavaScript- und XML-Technologie, die es uns ermöglicht, HTTP-Anfragen und Antwortdaten über JavaScript zu verwenden, um Teile zu aktualisieren der Seite, ohne die gesamte Seite neu laden zu müssen. 🎜🎜jQuery bietet einen leistungsstarken Satz von AJAX-Methoden, die uns die einfache Nutzung der AJAX-Technologie ermöglichen. Hier sind einige gängige jQuery-AJAX-Methoden: 🎜🎜🎜🎜🎜AJAX-Methode 🎜🎜 Beschreibung 🎜🎜🎜🎜🎜🎜 🎜$.get()🎜🎜Daten vom Remote-Server mithilfe einer HTTP-GET-Anfrage abrufen🎜🎜 🎜🎜$.post()🎜🎜Daten vom Remote-Server mithilfe von HTTP-POST-Anfragedaten abrufen🎜🎜🎜🎜$.getJSON()🎜🎜Daten im JSON-Format abrufen🎜 🎜🎜🎜$.ajaxSetup()🎜🎜Globale AJAX-Einstellungen festlegen🎜🎜🎜🎜 $.ajaxError()🎜🎜AJAX-Fehler behandeln🎜🎜🎜🎜$ .ajaxComplete()🎜🎜Verarbeitet das Abschlussereignis der AJAX-Anfrage🎜🎜🎜🎜$. ajaxStart()🎜🎜Verarbeitet Ereignisse beim Start von AJAX🎜🎜🎜🎜$.ajaxSend ()🎜🎜Verarbeitet Ereignisse, bevor AJAX-Anfragen gesendet werden🎜🎜🎜🎜$.ajaxSuccess ()🎜🎜Verarbeitet das Ereignis, wenn die AJAX-Anfrage erfolgreich ist🎜🎜🎜🎜$. ajaxStop()🎜🎜Verarbeiten Sie das Ereignis, wenn AJAX endet🎜🎜🎜🎜$.ajaxSetup() 🎜🎜Globale AJAX-Einstellungen festlegen🎜🎜🎜🎜🎜 8. Zusammenfassung🎜🎜Dieser Artikel stellt vor die Verwendung der jQuery-Bibliothek im Detail, einschließlich ihrer Grundkonzepte, Syntax und gängigen Methoden. Mit diesem Wissen können Entwickler Webanwendungen effizienter schreiben. jQuery ist derzeit eine der beliebtesten und übersichtlichsten JavaScript-Bibliotheken. Sie bietet viele leistungsstarke APIs für JavaScript, wodurch die JavaScript-Entwicklung einfacher zu verstehen, zu verwalten und zu erweitern ist. Durch die Verwendung der jQuery-Bibliothek können Entwickler problemlos komplexe Aufgaben erledigen, verschiedene DOM-Ereignisse verarbeiten, verschiedene Effekte und AJAX-Operationen ausführen, was dazu beiträgt, die Benutzererfahrung, Zuverlässigkeit und Reaktionsgeschwindigkeit von Webanwendungen zu verbessern. 🎜

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!