So implementieren Sie das Hinzufügen, Löschen, Ändern und Überprüfen von jquery DOM-Front-End-Fragen und Antworten-php.cn

So implementieren Sie das Hinzufügen, Löschen, Ändern und Überprüfen von jquery DOM

PHPz

Freigeben： 2023-04-26 10:49:53

Original

503 Leute haben es durchsucht

jQuery ist derzeit eine der beliebtesten JavaScript-Bibliotheken. Sie enthält eine Reihe von APIs, die uns die Manipulation von DOM-Elementen erleichtern. In jQuery können wir DOM-Elemente über Methoden abrufen oder manipulieren, die CSS-Selektoren ähneln, wodurch der gesamte Vorgang sehr einfach und schnell ist.

In diesem Artikel werden die häufig verwendeten Methoden zum Hinzufügen, Löschen, Ändern und Suchen von DOM in jQuery vorgestellt. Ich hoffe, dass die Leser die DOM-Operationen von jQuery besser verstehen können.

1. DOM-Elemente abrufen

In jQuery können wir gängige CSS-Selektoren verwenden, um DOM-Elemente abzurufen, wie zum Beispiel:

$('p') // 获取所有的p标签
$('.img') // 获取class名为img的元素
$('#box') // 获取ID为box的元素

Nach dem Login kopieren

Außerdem Zusätzlich zu diesen häufig verwendeten Selektoren bietet jQuery auch eine Reihe von Methoden zum Abrufen von DOM-Elementen. Beispielsweise können wir die Methode find() verwenden, um die Nachkommenelemente des angegebenen Elements zu finden: find()方法来查找指定元素的后代元素：

$('.container').find('.box') // 获取class名为container的元素中所有class名为box的后代元素

Nach dem Login kopieren

还可以通过parent()方法来获取指定元素的父元素：

$('.box').parent() // 获取所有class名为box的元素的父元素

Nach dem Login kopieren

二、添加元素

在执行DOM操作时，我们经常需要添加新的元素。jQuery提供了一系列的方法来添加元素到DOM中。

append()和appendTo()

这两个方法用于向指定元素内添加子元素，例如：

// 方法1
$('.container').append('<p>这是一个新的段落</p>');

// 方法2
$('<p>这是一个新的段落</p>').appendTo('.container');

Nach dem Login kopieren

prepend()和prependTo()

这两个方法用于向指定元素内添加子元素，但是是在子元素的前面添加，例如：

// 方法1
$('.container').prepend('<p>这是一个新的段落</p>');

// 方法2
$('<p>这是一个新的段落</p>').prependTo('.container');

Nach dem Login kopieren

after()和insertAfter()

这两个方法用于向指定元素后面添加兄弟元素，例如：

// 方法1
$('.box').after('<div class="box2">这是一个新的盒子</div>');

// 方法2
$('<div class="box2">这是一个新的盒子</div>').insertAfter('.box');

Nach dem Login kopieren

before()和insertBefore()

这两个方法用于向指定元素前面添加兄弟元素，例如：

// 方法1
$('.box').before('<div class="box2">这是一个新的盒子</div>');

// 方法2
$('<div class="box2">这是一个新的盒子</div>').insertBefore('.box');

Nach dem Login kopieren

三、删除元素

除了添加元素到DOM中之外，我们也会经常需要删除DOM中的元素。jQuery也提供了一系列的方法来删除元素。

remove()

这个方法用于删除指定元素，例如：

$('.box').remove() // 删除所有class名为box的元素

Nach dem Login kopieren

empty()

这个方法用于删除指定元素下面的所有子元素，例如：

$('.container').empty() // 删除class名为container的元素下所有子元素

Nach dem Login kopieren

三、修改元素

修改DOM元素也是我们常常需要思考的问题。在jQuery中，我们可以对元素进行属性修改、文本修改、样式修改等等。

修改属性

我们可以使用attr()方法来修改元素的属性，例如：

$('.box').attr('title', '新的标题') // 修改所有class名为box的元素的title属性

Nach dem Login kopieren

修改文本

我们可以使用text()方法来修改元素的文本，例如：

$('.box').text('新的文本内容') // 修改所有class名为box的元素的文本

Nach dem Login kopieren

修改样式

我们可以使用css()方法来修改元素的样式，例如：

$('.box').css('color', 'red') // 修改所有class名为box的元素的文本颜色为红色

Nach dem Login kopieren

设置属性

我们可以使用prop()

$('input[type="checkbox"]').prop('checked', true) // 将所有type为checkbox的input元素的checked属性设置为true

Nach dem Login kopieren

Sie können auch die Methode

parent() verwenden. Code> Methode zum Abrufen des angegebenen Elements Das übergeordnete Element des Elements: <p>rrreee</p> 2. Elemente hinzufügen <p></p> Bei der Durchführung von DOM-Operationen müssen wir häufig neue Elemente hinzufügen. jQuery bietet eine Reihe von Methoden zum Hinzufügen von Elementen zum DOM. #🎜🎜#<ol><li>
<code>append()

und appendTo() #🎜🎜#Diese beiden Methoden werden zum Hinzufügen verwendet untergeordnete Elemente innerhalb des angegebenen Elements, zum Beispiel: #🎜🎜#rrreee

prepend() und prependTo()

#🎜🎜#Diese beiden Methoden werden verwendet, um Unterelemente zum angegebenen Element hinzuzufügen, jedoch vor den Unterelementen, zum Beispiel: #🎜🎜#rrreee

after() und insertAfter()#🎜🎜#Diese beiden Methoden werden verwendet, um Geschwisterelemente nach dem angegebenen Element hinzuzufügen, z Beispiel: #🎜 🎜#rrreee

before() und insertBefore()

#🎜🎜 #Diese beiden Die Methode wird verwendet, um Geschwisterelemente vor dem angegebenen Element hinzuzufügen, zum Beispiel: #🎜🎜#rrreee#🎜🎜# 3. Elemente löschen #🎜🎜##🎜🎜# Zusätzlich zum Hinzufügen von Elementen zum DOM , müssen wir auch oft die DOM-Elemente in löschen. jQuery bietet außerdem eine Reihe von Methoden zum Löschen von Elementen. #🎜🎜#

remove()

#🎜🎜#Diese Methode wird verwendet, um bestimmte Elemente zu löschen, zum Beispiel: #🎜🎜#rrreee

empty()

#🎜🎜#Diese Methode wird verwendet, um alle untergeordneten Elemente unter dem angegebenen Element zu löschen, zum Beispiel: # 🎜🎜#rrreee #🎜🎜#3. Elemente ändern #🎜🎜##🎜🎜#Das Ändern von DOM-Elementen ist auch eine Frage, über die wir oft nachdenken müssen. In jQuery können wir Attribute, Text, Stil usw. von Elementen ändern. #🎜🎜#

Attribute ändern

#🎜🎜#Wir können die Methode attr() verwenden, um die Attribute eines Elements zu ändern, zum Beispiel: #🎜🎜# rrreee

Text ändern

#🎜🎜#Wir können die Methode text() verwenden, um den Text von zu ändern ein Element, zum Beispiel: #🎜 🎜#rrreee

Stil ändern

#🎜🎜#Wir können css() verwenden Methode zum Ändern des Stils eines Elements, zum Beispiel: #🎜🎜#rrreee

Attribute festlegen

#🎜🎜#Wir können die prop verwenden ()-Methode zum Festlegen der Attribute des Elements, zum Beispiel: #🎜🎜#rrreee#🎜🎜#Zusammenfassung#🎜🎜##🎜🎜#In diesem Artikel werden die häufig verwendeten DOM-Hinzufügungen, -Löschungen, -Änderungen und -Überprüfungen vorgestellt Ich hoffe, dass die Leser durch diesen Artikel ein klareres Verständnis der DOM-Operationen von jQuery erlangen und das Gelernte in tatsächlichen Projekten anwenden können. Natürlich bietet jQuery auch einige andere leistungsstarke Methoden zur Manipulation des DOM, und Leser können in der offiziellen Dokumentation mehr darüber erfahren. #🎜🎜#

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Hinzufügen, Löschen, Ändern und Überprüfen von jquery DOM. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!