So verwenden Sie das JQuery-Paket

Vorwort

In der Webentwicklung ist JavaScript zu einem notwendigen Werkzeug geworden. Und die jQuery-Bibliothek ist zweifellos eine der beliebtesten JavaScript-Bibliotheken. Es bietet eine einfache und benutzerfreundliche API, die uns helfen kann, DOM, Ajax, Ereignisverarbeitung usw. effizienter zu betreiben. In diesem Artikel wird die Verwendung von jQuery vorgestellt, das für Anfänger geeignet ist.

1. Installieren Sie jQuery

Bevor wir beginnen, müssen wir zuerst jQuery installieren.

1. Laden Sie jQuery auf der offiziellen Website herunter

Wir können die neueste Version der Datei jQuery.zip oder jQuery.min.js auf der offiziellen Website von jQuery herunterladen. Website herunterladen: https://jquery.com/download/

2. Verwenden Sie ein CDN (Content Delivery Network)

Mit einem CDN können Sie die jQuery-Datei effizienter abrufen und müssen sie nicht lokal speichern.

Im Folgenden sind zwei häufig verwendete jQuery-CDNs aufgeführt:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. Verwenden Sie jQuery zum Auswählen von Elementen.

jQuery verwendet eine Selektorsyntax zum Auswählen von Elementen und bietet eine praktische und benutzerfreundliche API zum Bedienen dieser Elemente.

1. Basisselektor

Sie können die folgenden vordefinierten Basisselektoren verwenden, um HTML-Elemente auszuwählen:

$("element")              匹配所有给定元素。
$(".class")               匹配所有给定类名的元素。
$("#id")                  匹配所有给定 id 的元素。

Zum Beispiel:

$("p")   //匹配所有的 <p> 标签
$(".intro")  //所有类名为 "intro" 的元素
$("#demo")   //id 为 demo 的元素

2. Hierarchischer Selektor

Sie können hierarchische Selektoren verwenden, um Elemente mit bestimmten Beziehungen auszuwählen von:

$("parent>child")         匹配父元素下的子元素。
$("prev + next")          匹配紧接在 prev 元素之后的 next 元素。
$("prev ~ siblings")      匹配 prev 元素之后的所有同级 siblings 元素。

Zum Beispiel:

$("div>p")  //匹配 <div> 中所有 <p> 元素
$("h1+p")   //所有 <h1> 元素后直接跟着的 <p> 元素
$("h1~p")   //所有 <h1> 元素后的同级 <p> 元素

3. Filterselektor

Filterselektor filtert basierend auf dem ausgewählten Element. Hier sind einige Beispiele für Filterselektoren:

:first                    选择序列中的第一个元素。
:last                     选择序列中的最后一个元素。
:even                     选择序列中索引为偶数（从 0 开始）的元素。
:odd                      选择序列中索引为奇数（从 0 开始）的元素。
:eq(index)                选择序列中索引指定为 index 的元素。
:gt(no)                   选择索引大于 no 的元素。
:lt(no)                   选择索引小于 no 的元素。

Zum Beispiel:

$("li:first")  //选取列表中的第一个 <li> 元素
$("li:last")   //选取列表中的最后一个 <li> 元素
$("li:even")   //选取列表中的偶数 <li> 元素
$("li:eq(1)")  //选取列表中第二个 <li> 元素

3. jQuery verwaltet DOM-Elemente

Wir können Seitenelemente über jQuery ändern, hinzufügen oder entfernen.

1. Neues Element

Sie können die folgende Methode verwenden, um ein neues HTML-Element zu erstellen:

$(html)            从字符串中创建元素。
$("<element>")     创建元素。
$("<element>", {    创建设置元素属性的元素。
    html: "",
    css: "",
    id: ""
})

Zum Beispiel:

$("p").after("<p>Hello World!</p>");  //在所有的 <p> 元素后添加一个 <p> 元素

2. Ein Element löschen

Sie können die Methode „remove()“ verwenden, um ein Element zu löschen:

$("element").remove();              从页面中删除元素。

Zum Beispiel:

$("p").remove();  //删除所有的 <p> 元素

3. Elemente ändern

jQuery verfügt über eine Reihe von Methoden zum Ändern der Attribute und des Inhalts von Elementen, von denen die Methoden attr() und text() am häufigsten verwendet werden.

$("element").attr("attribute", "value")    改变元素的属性。
$("element").html(content)                 更改元素的内容。
$("element").text(content)                 更改元素的文本内容。

Zum Beispiel:

$("img").attr("src", "new_src.jpg");  //更改图片的 src 属性
$("<p>").text("Hello World!");       //创建一个新的 <p> 元素，以文本 Hello World! 作为其内容

4. Elemente durchqueren

jQuery verfügt über die folgenden Methoden zum Durchqueren von Elementen:

next()                  返回下一个兄弟元素。
prev()                  返回前一个兄弟元素。
parent()                返回当前元素的直接父元素。
parents()               返回当前元素的所有先辈元素。
find()                  查找匹配选择器的后代元素。

Zum Beispiel:

$("p").next()     //返回第一个 <p> 元素的下一个兄弟元素
$("p").parent()   //返回第一个 <p> 元素的直接父元素
$("p").parents()  //返回第一个 <p> 元素的所有先辈元素

5. Ereignisbehandlung

Sie können die folgenden Methoden verwenden, um Ereignishandler zu binden:

click()                 当元素被点击时运行的函数。
mouseover()             当指针移动到元素上时运行的函数。
keydown()               当键盘上按下键时运行的函数。
submit()                当提交表单时运行的函数。
ready()                 当文档被加载时运行的函数。

Zum Beispiel:

$("button").click(function(){
    alert("Button Clicked!");
});

6. Ajax

jQuery verwendet AJAX (Asynchronous JavaScript und XML), um den Inhalt der Webseite dynamisch zu aktualisieren, ohne die gesamte Seite neu zu laden.

jQuery kann die Funktion $.ajax() oder $.get() zum Senden von Anfragen und die Funktion $.parseJSON() oder $.getJSON() zum Verarbeiten von JSON-Daten vom Server verwenden.

Zum Beispiel:

$.ajax({
    url: "demo.txt",
    success: function(result){
        $("div").html(result);
    }
});

Fazit

In diesem Artikel werden die Grundlagen von jQuery vorgestellt, einschließlich Installation, Auswahl von Elementen, Bearbeiten von DOM-Elementen, Durchlaufen von Elementen, Ereignisbehandlung und AJAX. Natürlich gibt es viele fortgeschrittene Einsatzmöglichkeiten von jQuery, die ein gründliches Studium und Verständnis erfordern.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das JQuery-Paket. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!