浅谈JQuery中的DOM操作

Posted 2021-04-08 小小前端路

为了能全面的讲解dom操作，首先需要构建一个网页，因为每一张网页都能用DOM表示出来而每一份DOM都可以看作是一颗DOM树。

DOM树就不说了，大家都知道，今天主要给大家讲解各个属性添加以及查找、插入、删除等。

1、查找节点.text()

   查找元素节点：

   Var  $li=$(“ul li:eq(1)”);//获取ul的第二个li节点

   Var  li_text=$li.text();//获取第二个li元素的节点的文本内容

   Alert(li_text);//打印文本内容    

   这时候第二个文本内容就会打印出来了

2、查找属性节点.attr()

     Var  $p=$(“p”);//获取ul的第二个li节点

     Var  p_text=$p.attr();//获取第二个li元素的节点的文本内容

     Alert(p_text);//打印文本内容   

这个时候就把p节点的title值打印出来了。

3、创建节点以及文本节点

   在jquery中直接添加html元素以及文本内容即可

  Var $li=$(“<li>香蕉</li>”);

4、创建属性节点

 Var $li=$(“<li title=”香蕉”>香蕉</li>”);

5、插入节点的方法

 Append()向每个匹配的元素追加内容

 $(“p”).append(“<b>你好</b>”);

 结果：<p>我想说：<b>你好</b></p>

Prepend()向每个匹配的元素内部前置内容

$(“p”).prepend(“<b>你好</b>”);

结果为：

<p><b>你好</b>我想说</p>

after()在每个匹配元素之后插入内容

$(“p”).after(“<b>你好</b>”);

结果：

 <p>我想说：</p><b>我想说：</b>

before()在每个匹配元素之前插入内容

$(“p”).before(“<b>你好</b>”);

结果：

<b>你好</b><p>我想说：</p>

 

END