jQuery中的DOM操作（一）

最新推荐文章于 2022-05-04 01:42:04 发布

白小宇

最新推荐文章于 2022-05-04 01:42:04 发布

阅读量626

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端 jQuery jQuery学习笔记文章标签： jquery DOM

本文链接：https://blog.youkuaiyun.com/b954960630/article/details/78825652

web前端同时被 3 个专栏收录

121 篇文章

订阅专栏

jQuery

10 篇文章

订阅专栏

jQuery学习笔记

8 篇文章

订阅专栏

本文详细介绍了使用 jQuery 进行 DOM 操作的方法，包括获取、创建、插入、删除、复制、替换、包裹节点及遍历节点等操作。通过具体实例展示了如何使用 jQuery 对网页元素进行高效管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是DOM？

DOM是 Document Object Model 的缩写，意思是文档对象模型 。

DOM 是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。

DOM 让Web设计师能够轻松  获取和操作网页中的数据、脚本和表层对象。

二、DOM的操作分类
DOM操作分3类，即DOM Core(核心)、HTML-DOM 和 CSS-DOM
1.DOM Core
2.HTML-DOM

3.CSS-DOM

三、jQuery中的DOM操作     节点

1、获取节点及其值
（1）获取节点var $li =$("ul li:eq(1)");        //获取节点（2）text()：获取节点的文本内容. 例：var $li =$("ul li:eq(1)");     //获取<ul>里第2个<li>节点
var li_txt=$li.text();         //获取第二个<li>元素节点的文本内容
alert(li_txt);（3）attr():获取节点的各种属性的值。例：var $li =$("ul li:eq(1)");     //获取<ul>里第2个<li>节点
var li_title=$li.attr("title");//获取第二个<li>元素节点属性title
alert(li_title);
2、创建节点 、插入节点

append()、appendTo()    ：插入内的最后面

prepend()、prependTo() ：插入内的最前面

after()、insertAfter()       ：插入外的最后面

before()、insertBefore()  ：插入外的最前面

append()

var $li=$("<li><em>这是</em><b>一个</b>人</li>");
$("ul").append($li);

prepend()

HTML代码：
     <p>我想说：</p>
jQuery代码：
     $("p").prepend("<b>你好</b>");
结果:
     <p><b>你好</b>我想说：</p>

prependTo()

HTML代码：
     <p>我想说：</p>
jQuery代码：
     $("<b>你好</b>").prependTo("p");
结果:
     <p><b>你好</b>我想说：</p>

after()

HTML代码：
     <p>我想说：</p>
jQuery代码：
     $("p").after("<b>你好</b>");
结果:
     <p>我想说：</p><b>你好</b>

before()

HTML代码：
     <p>我想说：</p>
jQuery代码：
     $("p").before("<b>你好</b>");
结果:
     <b>你好</b><p>我想说：</p>

3、删除节点

remove()  :删除节点，删除节点后，该删除的节点所包含的所有后代节点将被同时删除

empty()   ：清空节点，清空节点后，该清空的节点所包含的所有后代节点将被同时清空

remove()

var $li=$("ul li:eq(1)").remove();   //获取第2个<li>元素节点后，将它从网页中删除；
//删除后，remove()方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。
$li.appendTo("ul");                  //把刚才删除的节点重新添加到ul里的最后

empty()

$("ul li:eq(1)").empty();

4、复制节点

clone()

$("ul li").click(function(){
     $(this).clone(true).appendTo("ul");
//复制当前单击的节点，并将它追加到<ul>元素中
//在clone()方法中传递了一个参数ture,它的含义是复制元素的同时复制元素中所绑定的事件，因此该元素的副本也同样具有复制功能
})

5、替换节点

replaceWith()

replaceAll()

两者用法相同，只是颠倒了以下操作顺序

//例如将"<p title="asas">你最喜欢的水果？</p>"  替换为  "<strong>你最不喜欢的水果</strong>"
replaceWith()
$("p").replaceWith("<strong>你最不喜欢的水果</strong>");

replaceAll()
$("<strong>你最不喜欢的水果</strong>").replaceAll("p");

6、包裹节点

将某个节点用其他节点包裹起来

wrap()         :外包裹一条

wrapAll()     :外包裹多条

wraplnner() :内包裹所有

wrap()

  $("strong").wrap("<b></b>");
结果：
     <b><strong title="sda">11313</strong></b>

wrapInner()

    $("strong").wrapInner("<b></b>");
结果
     <strong title="sda"><b>11313</b></strong>

7、遍历节点

children()     :取得匹配元素的子元素的集合(不考虑子元素的子元素等)
next()           :取得匹配元素后面紧邻（第一个）的同辈元素
prev()           :取得匹配元素前面紧邻（第一个）的同辈元素
siblings()       :取得匹配元素前后所有的同辈元素
closest()        :取得最近的匹配元素
其他遍历节点的方法：find()、filter()、nextAll()、prevAll()、parent()、parents()
以这颗DOM树为例

children()var $body=$('body').children();
var $p=$('p').children();
var $ul=$('ul').children();
alert($body.length);          //<body>元素下有2个子元素
alert($p.length);             //<p>元素下有0个子元素
alert($ul.length);            //<ul>元素下有3个子元素
for(var i=0,len=$ul.length;i<len;i++){
     alert($ul[i].innerHTML); //循环输出<li>元素的HTML内容
}next()var $pl=$("p").next();         //取得紧邻<p>元素后的同辈元素   
结果:
<ul>
     <li>135</li>
     <li>4646</li>
     <li>sadassd</li>
</ul>prev()   var $ul=$("ul").prev();         //取得紧邻<ul>元素前的同辈元素
结果：
      <p title="sda">6546554</p>