jQuery：DOM的操作总结（一）

来源：互联网发布：java开发环境是什么编辑：程序博客网时间：2024/06/05 22:45

一、什么是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>元素节点属性titlealert(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>

阅读全文

0 0