Explication détaillée de la méthode jQuery d'ajout et de suppression d'éléments DOM_jquery

Cet article analyse la méthode jQuery d'ajout et de suppression d'éléments DOM. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Présentation

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. Noyau DOM

DOM Core n'est pas exclusif au javascript. Tout langage de programmation prenant en charge DOM peut l'utiliser. Ses utilisations vont bien au-delà des simples pages Web. Il peut également être utilisé pour traiter n'importe quel document écrit à l'aide d'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 de DOM pour écrire des scripts pour des fichiers HTML, de nombreux attributs appartiennent à HTML-DOM. HTML-DOM est apparu encore plus tôt que DOM Core. Il fournit des notations plus concises pour décrire diverses propriétés de l'élément HTML.
Par exemple :

Copier le code Le code est le suivant :

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 attributs de l'objet de style, afin que la page Web puisse présenter divers effets.

Par exemple :

Copier le code Le code est le suivant :

element.style.color="red" ;//Settings Méthode pour définir la couleur de la police d'un élément.

Méthodes courantes

1. Rechercher un nœud d'élément

Copier le code Le code est le suivant :

var $li = $("ul li:eq(0)" );/ /Obtenez le premier li sous la balise ul, qui peut également s'écrire $("#ulID li:eq(0)");

2. Rechercher les attributs des éléments

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属性值.二个参数

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

$(html) Pour expliquer brièvement, la méthode $(html) créera un objet dom basé sur la chaîne de balise html entrante, empaquetera l'objet dom dans un objet jquery et le renverra. En bref, elle mettra tout. le code html de la balise. Allez simplement dans la fabrique $() !

Exemple :

var $htmlLi = $(" <li title='香蕉'>香蕉</li>"); //创建DOM对象
var $ul = $("ul");  //获取UL对象
$ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表

Vous trouverez ci-dessous quelques méthodes d'insertion de nœuds

Méthode	Description	Exemple
Ajouter()	Ajouter du contenu à chaque élément correspondant	HTMLCode JQueryCode $(“ul”).append(“ AA ”); Résultats AA
appendTo()	Cette méthode est opposée à Append() a.Append(b) consiste à remplacer <🎜. >b est ajouté à a, et appendTo() doit ajouter b poursuit a dans	HTMLCode JQueryCode $ (« AA »).appendTo (« ul »).; 결과 AA
앞에 추가()	일치하는 각 요소 안에 콘텐츠를 추가하세요	HTML코드 ㅋㅋㅋ JQuery코드 $(“p”).prepend(“ABC”); 결과 ABCㅋㅋㅋ
prependTo()	이 방법은 Prepend()와 반대입니다. a. Prepend(b)는 b는 a 앞에 붙고 prependTo()는 앞에 붙습니다. b는 의 a 앞에 붙습니다.	HTML코드 ㅋㅋㅋ JQuery코드 $(“ABC”).prependTo.(“p”); 결과 ABCㅋㅋㅋ
이후()	은 일치하는 각 요소 뒤에 콘텐츠를 삽입하고, 는 뒤에 있습니다.	HTML코드 AAA JQuery코드 $(“p”).After(“cc”); 결과 AAA cc
insertAfter()	은 After() 의 반대입니다.	HTML코드 AAA JQuery코드 $ (“cc”).After(“p”); 결과 AAA cc
전()	일치하는 각 요소 앞에 콘텐츠를 삽입하세요	HTML코드 AAA JQuery코드 $(“p”). 이전(“cc”); 결과 cc AAA
insertBefore()	은 Before() 의 반대입니다.	HTML코드 AAA JQuery코드 $(“cc”). insertBefore(“p”); 결과 cc AAA

好了，不要斋看，自己动手试试吧:)

4.删除元素节点

由于我们需要经常动态去改变DOM元素，因此Jquery提供了两种删除节点的方法，即remove()和empty();

4.1 remove()方法

$("p").remove();// 我们可以获取到要删除的元素，然后调用remove()方法
$("ul li:eq(0)").remove().appendTo("ul");// 删除ul下面的第一个li标记，然后再把删除的li标记重新加到ul里面，remove()方法返回删除元素的引用，这时你可以继续使用
$("ul li").remove("li[title!=ABC]");//remove可以接受通过参数来选择性的删除符合条件的元素;

4.2 empty()方法

严格来讲，empty()方法并不是删除元素，而是清空

例：

HTML代码：

<ul>
<li title="AAA">AAA</li>
</ul>

JQuery代码：

复制代码 代码如下:

$("ul li:eq(0)").empty();

结果

<ul>
<li title="AAA"></li>
</ul>

记住，只会清空内容，不会请空属性;

更多关于jQuery操作DOM元素相关内容感兴趣的读者可查看本站专题：《jQuery操作DOM节点方法总结》

希望本文所述对大家jQuery程序设计有所帮助。