jquery dom apprentissage

jquery对dom的操作是很重要的，在网站中需要用到jquery的地方最多的也就是对dom的操作了，所以学好jquery对dom的操作是多么重要的事。

append()：向每个匹配的元素内部追加内容
prepend()：向每个匹配的元素内部前置内容
appendTo()：把所有匹配的元素追加到另一个指定元素的集合中
prependTo()：把所有匹配的元素前置到另一个指定的元素集合中

.after(content) ：在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点
.before(content)： 在匹配元素前面插入指定内容
insertAfter()：将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将JQuery对象插入；
insertBefore()：将JQuery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将JQuery对象插入；

empty() ：顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了 指定元素中的所有子节点。
remove() ：remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。
detach()：通过detach方法删除元素,只是页面不可见，但是这个节点还是保存在内存中,数据与事件都不会丢失
.clone()方法：深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
//clone处理一
$("div").clone()   //只克隆了结构，事件丢失
//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
.replaceAll( target )：用集合的匹配元素替换每个目标元素
.wrap(wrappingElement)： 在集合中匹配的每个元素周围包裹一个HTML结构，$('p').wrap('

')
.unwrap() : est l'opposé de la méthode wrap. Supprimez l'élément parent de l'ensemble d'éléments correspondants, conservez-le (ainsi que les éléments frères, s'ils sont présents) dans sa position d'origine
.wrapAll() : Ajoutez une structure HTML d'emballage externe aux éléments correspondants dans l'ensemble
wrapInner() : Ajoute une structure HTML enveloppée à l'intérieur des éléments correspondants dans la collection

méthode children() : renvoie la correspondance éléments de la collection Tous les éléments enfants de chaque élément Méthode
.find() : La méthode
ind consiste à parcourir les descendants de chaque élément dans la collection d'éléments actuelle. Tant qu'ils remplissent les conditions, peu importe qu'ils soient fils ou petits-fils.
Contrairement aux autres méthodes de parcours d'arbres, le sélecteur expression est un argument obligatoire pour .find(). Si nous devons récupérer tous les éléments descendants, nous pouvons passer le sélecteur générique '*'.
find ne traverse que les descendants, sans s'inclure lui-même.
Le contexte du sélecteur est implémenté par la méthode .find() ; donc, $('.item-ii').find('li') est équivalent à $('li', '.item-ii') (Trouvez la balise li sous la balise avec le nom de classe item-ii).
parent trouve le parent class.parent()

méthode parents() : méthode closest() la méthode close() accepte un sélecteur pour les éléments correspondants caractères La chaîne part de l'élément lui-même, correspond pas à pas à l'élément supérieur dans l'arborescence DOM et renvoie le premier élément ancêtre correspondant

Par exemple : dans l'élément div, pour trouver tous les li éléments vers le haut, vous pouvez Exprimé comme ceci

$("div").closet("li')

méthode next() trouve l'élément frère suivant

$("li.item-2").css("border","3px solid red");

méthode prev() trouve l'élément frère précédent

$("li.item-2").prev().css("border","3px solid red");

méthode siblings()Recherche d'éléments frères

$(".item-2").siblings().css("border","3px solid red");

méthode add()

$('li').add('p')

Méthode each()

$("ul li").each(function(index, element) {  
     index 索引 0,1  
     element是对应的li节点 li,li  
     this 指向的是li  
})

Ce qui précède est tout le contenu de l'apprentissage de jquery dom, j'espère que cela sera utile à tout le monde !

Recommandations associées :

jQuery charge une page HTML dans le div spécifié

JQuery implémente des événements de détection de clic et de souris

Solution à l'échec de Jquery à lier les événements Click aux nœuds nouvellement insérés

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!