Jquery之DOM操作

怼烎@ 2022-05-19 13:13 276阅读 0赞

# Jquery之DOM操作 #

### 一、DOM操作分类 ###

![70][]

### 二、操作示例 ###

1，属性操作

演示div：

操作按钮：

<table> 
 <tbody> 
  <tr> 
   <td style="width:3px;"> <p>1<br> 2<br> 3<br> 4<br> 5</p> </td> 
   <td style="width:1px;">&nbsp;</td> 
   <td> <p>&lt;label&nbsp;for=""&gt;属性操作：&lt;/label&gt;<br> &lt;span&nbsp;id="attr_get"&gt;获取属性：&lt;/span&gt;<br> &lt;span&nbsp;id="attr_set"&gt;修改属性:&lt;/span&gt;<br> &lt;span&nbsp;id="attr_remove"&gt;删除属性&lt;/span&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

script代码：

<table> 
 <tbody> 
  <tr> 
   <td style="width:16px;"> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15<br> 16<br> 17</p> </td> 
   <td style="width:7px;">&nbsp;</td> 
   <td> <p>&lt;script&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;$(function&nbsp;()&nbsp;{ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;属性操作&nbsp;获取&nbsp;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#attr_get").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert($("#img_src&nbsp;img").attr("src"));<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//设置<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#attr_set").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#img_src&nbsp;img").attr("src",'shixue.png');<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//删除<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#attr_remove").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#img_src&nbsp;img").removeAttr("src");<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> &nbsp;&nbsp;&nbsp;&nbsp;});<br> &lt;/script&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

2，节点内容获取

操作区域：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2<br> 3<br> 4<br> 5</p> </td> 
   <td>&nbsp;</td> 
   <td> <p>&lt;div&nbsp;id="node_get"&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="get_html"&gt;&lt;h6&gt;这里是带有h6的文本&lt;/h6&gt;&lt;/div&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;id="get_text"&gt;&lt;h6&gt;这里是带有h6的文本&lt;/h6&gt;&lt;/div&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type="text"&nbsp;id="get_val"&nbsp;value="帅哥，约吗？"/&gt;<br> &lt;/div&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

操作按钮：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2</p> </td> 
   <td>&nbsp;</td> 
   <td> <p>&lt;label&nbsp;for=""&gt;节点内容的获取：&lt;/label&gt;<br> &lt;span&nbsp;id="node_html"&gt;html:&lt;/span&gt;&lt;span&nbsp;id="node_text"&gt;text:&lt;/span&gt;&lt;span&nbsp;id="node_val"&gt;val&lt;/span&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

script代码：

<table> 
 <tbody> 
  <tr> 
   <td style="width:9px;"> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15</p> </td> 
   <td style="width:1.64px;">&nbsp;</td> 
   <td> <p>&lt;script&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;$(function&nbsp;()&nbsp;{ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//get&nbsp;html&nbsp;text&nbsp;val<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#node_html").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert($("#get_html").html());<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#node_text").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert($("#get_text").text());<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#node_val").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert($("#get_val").val());<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> &nbsp;&nbsp;&nbsp;&nbsp;});<br> &lt;/script&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

3，设置节点内容

操作区域：

操作按钮：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td>&nbsp;</td> 
   <td> <p>&lt;span&nbsp;id="node_shtml"&gt;set&nbsp;html:&lt;/span&gt;&lt;span&nbsp;id="node_stext"&gt;set&nbsp;text:&lt;/span&gt;&lt;span&nbsp;id="node_sval"&gt;set&nbsp;val&lt;/span&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

script代码：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15</p> </td> 
   <td>&nbsp;</td> 
   <td> <p>&lt;script&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;$(function&nbsp;()&nbsp;{ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;设置&nbsp;html&nbsp;text&nbsp;val<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#node_shtml").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#get_html").html('&lt;strong&gt;man&lt;/strong&gt;')<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#node_stext").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#get_text").text('man')<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#node_sval").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#get_val").val('不约！')<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> &nbsp;&nbsp;&nbsp;&nbsp;});<br> &lt;/script&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

4，文档处理之append相关

操作区域：

<table> 
 <tbody> 
  <tr> 
   <td style="width:19px;"> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8</p> </td> 
   <td style="width:11px;">&nbsp;</td> 
   <td> <p>&lt;div&nbsp;id="fabao"&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;追妹子的三大法宝：&lt;/li&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;坚持&lt;/li&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;不要脸&lt;/li&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;坚持不要脸&lt;/li&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;<br> &lt;/div&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

操作按钮：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2<br> 3</p> </td> 
   <td>&nbsp;</td> 
   <td> <p>&lt;label&nbsp;for=""&gt;文档操作展示：&lt;/label&gt;<br> &lt;span&nbsp;id="dom_add"&gt;追加[append][后面追加]&lt;/span&gt;&lt;span&nbsp;id="dom_pre_add"&gt;追加[prepend][前面追加]&lt;/span&gt;<br> &lt;span&nbsp;id="dom_to_add"&gt;追加到[appendTo][后面追加]&lt;/span&gt;&lt;span&nbsp;id="dom_preto_add"&gt;追加到[prependTo][前面追加]&lt;/span&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

script代码：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15<br> 16<br> 17<br> 18<br> 19</p> </td> 
   <td>&nbsp;</td> 
   <td> <p>&lt;script&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;$(function&nbsp;()&nbsp;{ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;文档处理<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_add").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#fabao&nbsp;ul").append('&lt;li&gt;老师，有没有第四条？&lt;/li&gt;');<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_pre_add").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#fabao&nbsp;ul").prepend('&lt;li&gt;老师，弱弱的问一下？&lt;/li&gt;');<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_to_add").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//$("#fabao&nbsp;ul").append('&lt;li&gt;老师，有没有第四条？&lt;/li&gt;');<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('&lt;li&gt;老师，有没有第四条？&lt;/li&gt;').appendTo("#fabao&nbsp;ul");<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_preto_add").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('&lt;li&gt;老师，弱弱的问一下？&lt;/li&gt;').prependTo("#fabao&nbsp;ul");<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br><br> &nbsp;&nbsp;&nbsp;&nbsp;});<br> &lt;/script&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

5，文档处理之after before相关

操作区域：

<table> 
 <tbody> 
  <tr> 
   <td style="width:6px;"> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6</p> </td> 
   <td style="width:1.96px;">&nbsp;</td> 
   <td> <p>&lt;div&nbsp;id="gongzi"&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;老板？&lt;/li&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;涨工资吗？&lt;/li&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;<br> &lt;/div&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

操作按钮：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2</p> </td> 
   <td>&nbsp;</td> 
   <td> <p>&lt;span&nbsp;id="dom_after"&gt;追加[after][后面追加]&lt;/span&gt;&lt;span&nbsp;id="dom_before"&gt;追加[before][前面追加]&lt;/span&gt;<br> &lt;span&nbsp;id="dom_insert_after"&gt;追加到[insert&nbsp;after][后面追加]&lt;/span&gt;&lt;span&nbsp;id="dom_insert_before"&gt;追加到[insert_before][前面追加]&lt;/span&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

script代码：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15<br> 16<br> 17<br> 18</p> </td> 
   <td>&nbsp;</td> 
   <td> <p>&lt;script&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;$(function&nbsp;()&nbsp;{ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;after&nbsp;before<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_after").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#gongzi&nbsp;ul").after('&lt;li&gt;这个可以有！&lt;/li&gt;');<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_before").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#gongzi&nbsp;ul").before('&lt;li&gt;嘿嘿&lt;/li&gt;');<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_insert_after").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('&lt;li&gt;这个可以有！&lt;/li&gt;').insertAfter("#gongzi&nbsp;ul");<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_insert_before").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('&lt;li&gt;嘿嘿&lt;/li&gt;').insertBefore("#gongzi&nbsp;ul");<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br><br> &nbsp;&nbsp;&nbsp;&nbsp;});<br> &lt;/script&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

6、wrap与unwrap操作

操作区域：

<table> 
 <tbody> 
  <tr> 
   <td style="width:2px;"> <p>1<br> 2<br> 3<br> 4<br> 5</p> </td> 
   <td style="width:2.96px;">&nbsp;</td> 
   <td> <p>&lt;div&nbsp;id="baoguo"&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;hello&lt;/p&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;girls&lt;/p&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;!&lt;/p&gt;<br> &lt;/div&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

操作按钮：

<table> 
 <tbody> 
  <tr> 
   <td style="width:1px;"> <p>1</p> </td> 
   <td style="width:1px;">&nbsp;</td> 
   <td> <p>&lt;span&nbsp;id="dom_wrap"&gt;包裹[wrap]&nbsp;操作&lt;/span&gt;&lt;span&nbsp;id="dom_unwrap"&gt;去掉包裹[unwrap]&nbsp;操作&lt;/span&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

scrip代码：

<table> 
 <tbody> 
  <tr> 
   <td style="width:15px;"> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12</p> </td> 
   <td style="width:1.64px;">&nbsp;</td> 
   <td> <p>&lt;script&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;$(function&nbsp;()&nbsp;{ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;wrap&nbsp;unwrap<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_wrap").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#baoguo&nbsp;p").wrap('&lt;div&nbsp;style="color:&nbsp;#a52a2a;"&gt;&lt;/div&gt;');<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_unwrap").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#baoguo&nbsp;p").unwrap('&lt;div&nbsp;style="color:&nbsp;#a52a2a;"&gt;&lt;/div&gt;');<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br><br> &nbsp;&nbsp;&nbsp;&nbsp;});<br> &lt;/script&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

7、文档处理 empty remove clone

操作区域：

<table> 
 <tbody> 
  <tr> 
   <td style="width:26px;"> <p>1<br> 2<br> 3<br> 4<br> 5</p> </td> 
   <td style="width:4px;">&nbsp;</td> 
   <td> <p>&lt;div&nbsp;id="shan"&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;id="node_empty"&gt;这个是&nbsp;empty&lt;/li&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;id="node_remove"&gt;这个是&nbsp;remove&lt;/li&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;id="node_clone"&gt;这个是&nbsp;clone&lt;/li&gt;<br> &lt;/div&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

操作按钮：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td>&nbsp;</td> 
   <td> <p>&lt;span&nbsp;id="dom_empty"&gt;清空[empty]操作&lt;/span&gt;&lt;span&nbsp;id="dom_remove"&gt;删除[remove]操作&lt;/span&gt;&lt;span&nbsp;id="dom_clone"&gt;复制[clone]操作&lt;/span&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

scrip代码：

<table> 
 <tbody> 
  <tr> 
   <td style="width:24px;"> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15</p> </td> 
   <td style="width:1.64px;">&nbsp;</td> 
   <td> <p>&lt;script&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;$(function&nbsp;()&nbsp;{ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;文档处理&nbsp;empty&nbsp;remove&nbsp;clone<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_empty").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#node_empty").empty();<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_remove").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#node_remove").remove();<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_clone").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert($("#node_clone").clone().html());<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br><br> &nbsp;&nbsp;&nbsp;&nbsp;});<br> &lt;/script&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

8、css 类的操作

操作区域：

<table> 
 <tbody> 
  <tr> 
   <td style="width:23px;"> <p>1<br> 2<br> 3</p> </td> 
   <td style="width:1.96px;">&nbsp;</td> 
   <td> <p>&lt;div&nbsp;id="dom_class"&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;这个是个展示区域<br> &lt;/div</p> </td> 
  </tr> 
 </tbody> 
</table>

操作按钮：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2<br> 3<br> 4</p> </td> 
   <td>&nbsp;</td> 
   <td> <p>&lt;style&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;.XXX{color:&nbsp;red;}<br> &lt;/style&gt;<br> &lt;span&nbsp;id="dom_addClass"&gt;新增&nbsp;.class&lt;/span&gt;&lt;span&nbsp;id="dom_removeClass"&gt;删除&nbsp;.class&lt;/span&gt;&lt;span&nbsp;id="dom_toggleClass"&gt;反复&nbsp;.class&lt;/span&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

scrip代码：

<table> 
 <tbody> 
  <tr> 
   <td style="width:33px;"> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13<br> 14<br> 15</p> </td> 
   <td style="width:3px;">&nbsp;</td> 
   <td> <p>&lt;script&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;$(function&nbsp;()&nbsp;{ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//css&nbsp;类的操作<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_addClass").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_class").addClass('XXX');<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_removeClass").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_class").removeClass('XXX');<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_toggleClass").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_class").toggleClass('XXX');<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br><br> &nbsp;&nbsp;&nbsp;&nbsp;});<br> &lt;/script&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

9、css 基础操作

操作区域：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td>&nbsp;</td> 
   <td> <p>&lt;div&nbsp;id="dom_css_set"&gt;这里是CSS的基础操作&lt;/div&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

操作按钮：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2</p> </td> 
   <td>&nbsp;</td> 
   <td> <p>&lt;label&nbsp;for=""&gt;css&nbsp;普通操作&lt;/label&gt;<br> &lt;span&nbsp;id="dom_css"&gt;普通的css编辑[color]&lt;/span&gt;&lt;span&nbsp;id="dom_height"&gt;普通的css编辑[height]&lt;/span&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

scrip代码：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12<br> 13</p> </td> 
   <td>&nbsp;</td> 
   <td> <p>&lt;script&gt;<br> &nbsp;&nbsp;&nbsp;&nbsp;$(function&nbsp;()&nbsp;{ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;css&nbsp;基础操作<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_css").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_css_set").css('color','red');<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_css_set").css({border:"red&nbsp;solid&nbsp;1px",height:"800px"});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_height").click(function(){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#dom_css_set").height('200px');<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br> &nbsp;&nbsp;&nbsp;&nbsp;});<br> &lt;/script&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

[70]: /images/20220519/67459a70e8f64660841721907ab5f1bf.png