jquery dom lernen

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('dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68')
.unwrap(): ist das Gegenteil der Wrap-Methode. Löschen Sie das übergeordnete Element des Satzes übereinstimmender Elemente und behalten Sie sich selbst (und Geschwisterelemente, falls vorhanden) an ihrer ursprünglichen Position
.wrapAll(): Fügen Sie den übereinstimmenden Elementen in eine äußere umschließende HTML-Struktur hinzu the set
wrapInner(): Fügt dem Inneren der übereinstimmenden Elemente in der Sammlung eine umschlossene HTML-Struktur hinzu.

children()-Methode: gibt die Übereinstimmung zurück Elemente in der Sammlung Alle untergeordneten Elemente jedes Elements
.find()-Methode: Die
-Methode ind dient zum Durchlaufen der Nachkommen jedes Elements in der aktuellen Elementsammlung. Solange sie die Voraussetzungen erfüllen, spielt es keine Rolle, ob es sich um Söhne oder Enkel handelt.
Im Gegensatz zu anderen Baumdurchquerungsmethoden ist der Selektor--Ausdruck ein erforderliches Argument für .find(). Wenn wir alle untergeordneten Elemente abrufen müssen, können wir den Platzhalter-Selektor „*“ übergeben.
find durchquert nur Nachkommen und schließt sich selbst aus.
Der Selektorkontext wird durch die .find()-Methode implementiert; daher ist $('.item-ii').find('li') äquivalent zu $('li', '.item-ii') (Suchen Sie das li-Tag unter dem Tag mit dem Klassennamen item-ii).
parent findet die übergeordnete Klasse.parent()

parents()-Methode: closest()-Methode close()-Methode akzeptiert einen Selektor für übereinstimmende Elemente Zeichen Die Zeichenfolge beginnt beim Element selbst, passt sich Schritt für Schritt dem übergeordneten Element im DOM-Baum an und gibt das erste übereinstimmende Vorfahrenelement zurück

Zum Beispiel: im div-Element, um alle li zu finden Elemente nach oben können Sie wie folgt ausdrücken:

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

next()-Methode findet das nächste Geschwisterelement

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

prev()-Methode findet das vorherige Geschwisterelement

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

siblings()-MethodeGeschwisterelemente finden

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

add()-Methode

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

each()-Methode

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

Das Obige ist der gesamte Inhalt des JQuery-Dom-Lernens, ich hoffe, es wird für alle hilfreich sein!

Verwandte Empfehlungen:

jQuery lädt eine HTML-Seite in das angegebene Div

jQuery implementiert Klick- und Mauserkennungsereignisse

Lösung für das Versagen von Jquery, Klickereignisse an neu eingefügte Knoten zu binden

Das obige ist der detaillierte Inhalt vonjquery dom lernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!