DOM-Manipulation mit JavaScript und jQuery

001 1 , Elementknoten erstellen

002 Traditionelle Javascript-Methode, Elementknoten erstellen

003 var a = document.createElement("p");

004 Die Methode zum Erstellen von Knoten in jQuery ist:

005 $('< p>< /p>');

006 Wie bei createElement() wird der neue Elementknoten nicht erstellt automatisch zum Dokument hinzugefügt werden.

007 Wenn Sie es dem Dokument hinzufügen möchten, können Sie die Methode append() oder insertAfter() oder die Methode before() in jQuery verwenden.

008 Zum Beispiel:

009 var a = $('< p>< /p>');

010 $('body').append ( a);//Am Ende des Körperelements hinzufügen

011

012

013 2. Textknoten erstellen:

014 Traditionell Javascript-Methode, Textknoten erstellen

015 var b = document.createTextNode("my demo");

016 Normalerweise werden das Erstellen eines Textknotens und ein Elementknoten zusammen verwendet

017 Zum Beispiel:

018 var mes = document.createTextNode("hello world");

019 var container = document.createElement("p"); 020 container.appendChild (mes);

021 document.body.appendChild(container);

022

023 Und das Erstellen von Knoten in jQuery muss nicht sein problematisch:

024 $('< p>hello world< /p>');

025 Wie bei createElement() wird der neu erstellte Elementknoten nicht automatisch zum Dokument hinzugefügt .

026 Wenn Sie es dem Dokument hinzufügen möchten, können Sie die Methode append() oder insertAfter() oder die Methode before() in jQuery verwenden.

027 Zum Beispiel:

028 var a = $('< p>hello world< /p>');

029 $('body'). append (a); // Am Ende des Body-Elements hinzufügen

030

031 3. Knoten kopieren

032 Traditionelle Javascript-Methode, Knoten kopieren:

033 Zum Beispiel:

034 var mes = document.createTextNode("hello world");

035 var container = document.createElement("p");

036 container.appendChild(mes);

037 document.body.appendChild(container);

038 var newpara = container.cloneNode(true);//Der Unterschied zwischen true und false

039 document.body.appendChild(newpara);

041 true: ist

042 false: Nur

<

043 Sie können Firebug verwenden, um zu sehen.

044

045 Knoten in jQuery kopieren:

046 var a = $('< p>hello world< /p>'); >047 $('body').append(a);

048 var clone_a = a.clone();

049 $('body').append(clone_a); 🎜>

050

051 Wie bei createElement() wird der kopierte neue Elementknoten nicht automatisch zum Dokument hinzugefügt.

052 Wenn Sie es dem Dokument hinzufügen möchten, können Sie die Methode append() oder insertAfter() oder die Methode before() in jQuery verwenden.

053 Noch ein Hinweis: Wenn die ID nach dem Klonen dieselbe ist, vergessen Sie nicht, .attr("id","new_id") zu verwenden, um die ID des neuen Knotens zu ändern.

054 " endChild () :

059 Hängen Sie einen untergeordneten Knoten an das Element an und fügen Sie den neuen Knoten am Ende ein.

060 var container = document.createElement("p");

061 document.body.appendChild(container);

062

063 insertBefore() :

064 Wie der Name schon sagt, fügt es einen neuen Knoten vor dem Zielknoten ein.

065 Element.insertBefore( newNode , targeterNode );

066

067 Das Einfügen von Knoten in jQuery ist viel mehr als das, was Javascript mit sich bringt,

068 Zum Beispiel:

069 .append()

070 .appendTo()

071 .prepend()

072 .prepend To()

073 .after()

074 .insertAfter()

075 .before()

076 .insertBefore() Also ja. Die Vereinfachung von DOM-Operationen ist auch eines der Highlights von jquery.

078

079

080 5, Knoten löschen

081 traditionelle Javascript-Methode, Knoten löschen:

082 zum Beispiel:

083 var b = document.getElementById("b");

084 var c = b.parentNode;

085 c.removeChild(b); 🎜>086

087 Knoten in jQuery löschen:

088 Zum Beispiel:

089 $('#test2').remove();

090

091 6. Knoten ersetzen

092 Traditionelle Javascript-Methode, Knoten ersetzen:

093 Zum Beispiel:

094 Element.repalceChild( newNode , oldNode );

095 oldNode muss ein untergeordneter Knoten von Element sein.

096

097 Ersatzknoten in jQuery:

098 Zum Beispiel:

099 $("< p>Replace test1! < / p> ;").replaceAll("#test1");

100

101 7, Attribute festlegen, Attribute abrufen

102 Traditionelle Javascript-Methode, Attribute festlegen, Attribute abrufen:

103 Zum Beispiel:

104 setAttribute();//Set

105 var a = document.createElement(“p”);

106 a.setAttribute("title","my demo");

107 Unabhängig davon, ob es zuvor ein Titelattribut gab, wird der zukünftige Wert meine Demo sein.

108

109 getAttribute();//Get

110 var a =document.getElementById("cssrain");

111 var b = a.getAttribute("title");

112 Wenn das Attribut nicht vorhanden ist, wird es leer zurückgegeben,

113

114 Attribute in jQuery festlegen, Attribute abrufen:

115 Zum Beispiel:

116 $("#test1").attr({ "class" : "test" , "title" : "TestDemo!" });

117 $("#test1").attr("class");

118

119 8. Knoten finden

120 Knotenpaar finden jQuery Es ist ein Kinderspiel.

121 Das Interessanteste an jQuery ist der Suchknoten, der allgemein als Selektor bekannt ist.

123 $ ('#id')

124 $('.class')

125 $('tag')

126 $('tag.class')

127 $('#id tag')

128 $('tag#id')

129 $('#id:visible')

130 $('#id .class')

131 $('.class .class')

132 ....

Das Obige ist das DOM von JavaScript und jQuery Der Inhalt der Operation. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!