Explication détaillée des fonctions d'ajout, de remplacement, de suppression et de copie de nœuds à l'aide de jQuery-js tutoriel-php.cn

Explication détaillée des fonctions d'ajout, de remplacement, de suppression et de copie de nœuds à l'aide de jQuery

小云云

Libérer： 2018-01-01 10:54:04

original

1705 Les gens l'ont consulté

Cet article présente principalement jQuery pour implémenter les fonctions d'ajout, de remplacement, de suppression et de copie des nœuds. Il analyse les compétences opérationnelles de jQuery pour les nœuds DOM sur la base d'exemples spécifiques, notamment append(), prepend(), replaceAll() et replaceWith(). Les amis dans le besoin peuvent se référer aux conseils d'utilisation de empty(), remove(), clone(), clone() et d'autres méthodes. J'espère que cela pourra aider tout le monde.

L'exemple de cet article décrit comment jQuery implémente les fonctions d'ajout, de remplacement, de suppression et de copie de nœuds. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1. L'ajout de nœuds est divisé en ajout de nœuds père-fils et frères et sœurs. Chaque méthode d'ajout de nœuds est divisée en ajout actif et ajout passif.

//1、父子关系的添加
//主动添加
$(&#39;#shu&#39;).append(&#39;<li>关羽</li>&#39;);//往后添加
$(&#39;#shu&#39;).prepend(&#39;<li>黄忠</li>&#39;);//往前添加
//被动添加
$(&#39;<li>黄盖</li>&#39;).appendTo($(&#39;#wu&#39;));
$(&#39;<li>陆逊</li>&#39;).prependTo($(&#39;#wu&#39;));
//添加已存节点，发生位置改变
$(&#39;#shu&#39;).prepend($(&#39;#wu li:eq(1)&#39;));
//2、兄弟关系的添加.after .before .insertAfter .insertBefore
//主动
$(&#39;#liu&#39;).after(&#39;<li>赵云</li>&#39;);
$(&#39;#liu&#39;).before(&#39;<li>诸葛亮</li>&#39;);
//被动
$(&#39;<li>黄月英</li>&#39;).insertAfter($(&#39;#liu&#39;));
$(&#39;<li>孙尚香</li>&#39;).insertBefore($(&#39;#liu&#39;));

Copier après la connexion

2. Remplacer le nœud .replaceAll .replaceWith

//replaceAll主动替换
$(&#39;#wu&#39;).replaceAll($(&#39;#shu&#39;));
//replaceWith被动替换
$(&#39;#yu&#39;).replaceWith(&#39;<li>黄盖</li>&#39;);

Copier après la connexion

3. Supprimer le nœud .empty() .remove()

$(&#39;#wu&#39;).empty(); //清空对应的子节点
$(&#39;#fei&#39;).remove(); //删除匹配到的节点

Copier après la connexion

4. (faux)

Si le paramètre est vrai, le nœud et ses événements seront copiés
Si le paramètre est faux, seul le nœud lui-même (y compris les informations internes) sera copié

$(&#39;#fei&#39;).clone(false); //只复制节点本身
$(&#39;#fei&#39;).clone(true); //复制节点和事件

Copier après la connexion

Recommandations associées :

Une brève discussion sur le bouillonnement d'événements, la délégation d'événements et les opérations de nœud d'élément jQuery

zTree asynchrone chargement et expansion de la méthode de nœud de premier niveau Implémenter

Exemples pour partager le sélecteur JQuery et les exercices d'opération de nœud DOM

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!