Comment implémenter l'ajout, la suppression, la modification et la vérification du DOM jquery-Questions et réponses frontales-php.cn

Comment implémenter l'ajout, la suppression, la modification et la vérification du DOM jquery

PHPz

Libérer： 2023-04-26 10:49:53

original

555 Les gens l'ont consulté

jQuery est actuellement l'une des bibliothèques JavaScript les plus populaires. Elle contient une série d'API pour nous faciliter l'exploitation des éléments DOM. Dans jQuery, nous pouvons obtenir ou manipuler des éléments DOM via des méthodes similaires aux sélecteurs CSS, rendant l'ensemble de l'opération très simple et rapide.

Cet article présentera les méthodes d'ajout, de suppression, de modification et de recherche DOM couramment utilisées dans jQuery. J'espère que les lecteurs pourront avoir une compréhension plus claire des opérations DOM de jQuery.

1. Obtenir des éléments DOM

Dans jQuery, nous pouvons utiliser des sélecteurs CSS courants pour obtenir des éléments DOM, tels que :

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

Copier après la connexion

En plus de ces sélecteurs courants, jQuery fournit également une série de méthodes pour obtenir des éléments DOM. Par exemple, nous pouvons utiliser la méthode find() pour trouver les éléments descendants de l'élément spécifié : find()方法来查找指定元素的后代元素：

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

Copier après la connexion

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

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

Copier après la connexion

二、添加元素

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

append()和appendTo()

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

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

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

Copier après la connexion

prepend()和prependTo()

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

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

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

Copier après la connexion

after()和insertAfter()

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

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

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

Copier après la connexion

before()和insertBefore()

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

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

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

Copier après la connexion

三、删除元素

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

remove()

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

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

Copier après la connexion

empty()

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

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

Copier après la connexion

三、修改元素

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

修改属性

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

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

Copier après la connexion

修改文本

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

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

Copier après la connexion

修改样式

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

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

Copier après la connexion

设置属性

我们可以使用prop()

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

Copier après la connexion

Nous pouvons également utiliser la méthode parent() pour obtenir le élément parent de l'élément spécifié :

rrreee

2. Ajouter des éléments

Lors de l'exécution d'opérations DOM, nous devons souvent ajouter de nouveaux éléments. jQuery fournit une série de méthodes pour ajouter des éléments au DOM. 🎜

append() et appendTo()

🎜Ces deux méthodes sont utilisées pour ajouter des éléments enfants à l'élément spécifié , par exemple : 🎜rrreee

prepend() et prependTo()

🎜Ces deux méthodes Utilisé pour ajouter des éléments enfants à l'élément spécifié, mais devant les éléments enfants, par exemple : 🎜rrreee

after() et insertAfter( )

🎜Ces deux méthodes sont utilisées pour ajouter des éléments frères après l'élément spécifié, par exemple : 🎜rrreee

before() et insertBefore()

🎜Ces deux méthodes sont utilisées pour ajouter des éléments frères devant l'élément spécifié, par exemple : 🎜rrreee🎜Trois, supprimer des éléments 🎜🎜En plus d'ajouter En plus d'ajouter des éléments au DOM, nous devons souvent supprimer des éléments dans le DOM. jQuery fournit également une série de méthodes pour supprimer des éléments. 🎜

remove()

🎜Cette méthode est utilisée pour supprimer l'élément spécifié, par exemple : 🎜rrreee

empty()🎜Cette méthode est utilisée pour supprimer tous les éléments enfants sous l'élément spécifié, par exemple : 🎜rrreee🎜Modifier les éléments🎜🎜Modifier les éléments DOM. C'est aussi quelque chose auquel nous devons souvent réfléchir. Dans jQuery, nous pouvons modifier les attributs, le texte, le style, etc. des éléments. 🎜

Modifier les attributs

🎜On peut utiliser la méthode attr() pour modifier les attributs d'un élément, par exemple : 🎜rrreee

Modifier le texte

🎜On peut utiliser la méthode text() pour modifier le texte d'un élément, par exemple : 🎜rrreee

Modifier le style

🎜Nous pouvons utiliser la méthode css() pour modifier le style de l'élément, par exemple : 🎜rrreee

Définir les attributs

🎜Nous pouvons utiliser la méthode prop() pour définir les attributs des éléments, par exemple : 🎜rrreee🎜Résumé🎜🎜Ceci L'article présente les méthodes d'ajout, de suppression, de modification et de requête DOM couramment utilisées dans jQuery. J'espère que les lecteurs pourront grâce à cet article, vous aurez une compréhension plus claire des opérations DOM de jQuery et appliquerez ce que vous avez appris dans des projets réels. Bien entendu, jQuery propose également d’autres méthodes puissantes pour manipuler le DOM, et les lecteurs peuvent en apprendre davantage à leur sujet grâce à la documentation officielle. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!