Maison > interface Web > js tutoriel > le corps du texte

Comment ajouter et supprimer des éléments jQuery

yulia
Libérer: 2018-09-17 15:43:40
original
1147 Les gens l'ont consulté

En raison des exigences de travail, il est souvent nécessaire d'ajouter, de supprimer, de modifier et de rechercher des éléments. Quelles sont leurs méthodes ? Cet article vous expliquera comment ajouter et supprimer des éléments jQuery. Les amis dans le besoin peuvent s'y référer, j'espère qu'il vous sera utile.

DOM est l'abréviation de Document Object Modeule. De manière générale, les opérations DOM sont divisées en trois aspects.

1. DOM Core

DOM Core n'est pas exclusif à Javascript. Tout langage de programmation prenant en charge DOM peut l'utiliser, et ses utilisations vont bien au-delà de simples pages Web. peut également être utilisé pour traiter tout document écrit dans un langage de balisage, tel que XML.
Par exemple : document,getElementsByTagName("form"); //Utilisez DOM Core pour obtenir l'objet formulaire.

2. HTML-DOM

Lors de l'utilisation de Javascript et du DOM pour écrire des scripts pour des fichiers HTML, de nombreux attributs appartiennent au HTML-DOM. -DOM encore plus ancien que DOM Core, il fournit des notations plus concises pour décrire les attributs de divers éléments HTML.
Par exemple : document.forms //HTML-DOM fournit un objet formulaires.
PS : On voit que l'obtention d'objets et d'attributs peut être implémentée en utilisant DOM Core ou HTML-DOM.

3. CSS-DOM

CSS-DOM est une opération pour CSS En javascript, la fonction principale de CSS-DOM est d'obtenir et de définir divers aspects de. l'objet style. Cet attribut permet à la page web de présenter divers effets.
Par exemple : element.style.color="red";//Méthode pour définir la couleur de police d'un élément.

Méthodes courantes

1. Rechercher des nœuds d'élément

var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”);
Copier après la connexion

2. >

Utilisez la méthode attr() de jquery pour obtenir les valeurs des différents attributs de l'élément. Le paramètre de la méthode attr() peut être un ou deux.

Lorsque le paramètre vaut un, c'est le nom de l'attribut à interroger.
Lorsqu'il y a deux paramètres, vous pouvez définir la valeur de l'attribut.

alert($(“#id”).attr(“title”)); //输出元素的title属性.一个参数
$(“#id”).attr(“title”,”改变title值”); //改变元素的title属性值.二个参数
Copier après la connexion

3. Ajouter un nœud d'élément

$(html) Expliquez brièvement que la méthode $(html) créera un dom basé sur la chaîne de balise html entrante. objet, et enveloppez cet objet dom dans un objet jquery et renvoyez-le. En bref, mettez simplement tout le code html de la marque dans la fabrique $() !

Exemple :

 var $htmlLi = $(”  <li title=’香蕉’>香蕉</li>”);  //创建DOM对象
         var $ul = $(“ul”);   //获取UL对象
         $ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表
Copier après la connexion

4. Supprimer les nœuds d'éléments

Comme nous devons fréquemment modifier dynamiquement les éléments DOM, Jquery propose deux méthodes pour supprimer. nœuds, à savoir Remove() et Empty();

Méthode 4.1 Remove()

$(“p”).remove();// On peut obtenir l'élément à supprimer, puis appelez la méthode remove()

$("ul li:eq(0)").remove().appendTo("ul"); // Supprime le premier élément sous ul li tag, puis ajoutez à nouveau la balise li supprimée à ul. La méthode Remove() renvoie la référence de l'élément supprimé. À ce stade, vous pouvez continuer à utiliser
$("ul li").remove("li). [title !=ABC]");//remove peut accepter des paramètres pour supprimer sélectivement des éléments qualifiés ;

Méthode 4.2 empty()

À proprement parler, la méthode empty( ) ne supprime pas les éléments, mais efface

Exemple :

HTML代码
       <ul>
          <li title=”AAA”>AAA</li>
       </ul>
      JQuery代码
      $(“ul li:eq(0)”).empty();
Copier après la connexion
Résultat


    <ul>
          <li title=”AAA”></li>
       </ul>
Copier après la connexion
N'oubliez pas qu'elle effacera uniquement le contenu, pas Veuillez laisser les attributs vides .

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal