三、jQuery中的DOM操作

DOM简介

DOM：Document ObjectModel文档对象模型，DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松的访问页面中所有的标准组件。

 

DOM操作的分类：

DOMCore（核心）、HTML-DOM和CSS-DOM

 

jQuery中的DOM操作

1.查找节点

查找元素节点

查找属性节点attr()

2.创建节点

$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回

3.插入节点

append()appendTo()

prepend()prependTo()

after()insertAfter()

before()insertBefore()

 

4.删除节点

• remove()方法

从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素

$("ulli").remove(":eq(1)")等价于$("ul li:eq(1)").remove()

当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。

这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

eg:var $li = $("ul li:eq(1)").remove();$li.appendTo("ul");

 

• detach()方法

与remove不同的是，所有绑定的事件、附加的数据都会保留下来。

 

• empty方法

empty方法不是删除节点，而是清空节点，能清空元素中的所有后代节点

 

5.复制节点

$("ulli").click(function(){

$(this).clone().appendTo("ul");//复制当前单击的节点，并将它追加到

元素中

})

另：

$(this).clone(true).appendTo("ul");//复制元素的同时复制元素中所绑定的事件

 

6. 替换节点

replaceWith()和replaceAll()

这两个方法的作用相同，只是颠倒了操作

注意：替换后，原先绑定的事件将会消失

 

7.包裹节点

wrap():将所有的元素进行单独的包裹

wrapAll()：将所有匹配的元素用一个元素来包裹，如果被包裹的多个元素间有其他元素，其他元素会被放到包裹元素之后。

wrapInner():将每一个匹配的元素的子内容用其他结构化标记包裹起来

 

8、属性操作

attr(name,value)

removeAttr(name)

 

9.样式操作

• 获取样式和设置样式 attr(name,value)
• 追加样式 addClass(name)
• 移除样式 removeClass(name1 name2)//可以以空格的方式删除多个class名
  • 注意：如果removeClass()方法不带参数，则会将class的值全部删除
• 切换样式 toggleClass(name)

 

10.设置和获取HTML、文本和值

html()html(value)

text()text(value)        

val()val(value)  this.defaultValue()

val()方法还有另外一个用处，它能够使select（下拉列表框）、checkbox(多选框)和radio（单选框）相应的选项被选中，在表单操作中经常用到

           $("#multiple").val(["选择2号","选择3号"]);

                      $(":checkbox").val(["check1","check2"]);

                      $(":radio").val(["radio2"]);

以上等价于attr的以下方式：

    $("#multiple>option").removeAttr("selected");

      $("#multiple>option:eq(1),#multiple>option:eq(2)").attr("selected",true);

      $(":checkbox:eq(1),:checkbox:eq(2)").attr("checked",true);

      $(":radio:eq(1)").attr("checked",true);

 

11.遍历节点

• children()方法，只考虑子元素，不考虑其他后代元素
• next()方法，用于取得匹配元素后面紧邻的同辈元素
• prev()方法，取得匹配元素前面紧邻的同辈元素
• siblings*()方法，取得匹配元素前后所有的同辈元素
• closest()方法，用于取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身，如果不匹配则向上查找父元素，逐级向上知道找到匹配选择器的元素，如果什么都没找到则返回一个空的jQuery对象。
• parent()
• parents()
• find()
• fileter()
• nextAll()
• prevAll()

 

 

CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。style属性很有用，但最大不足是无法通过它来提取到通过外部CSS设置的样式属性，jQuery可以做到。

 

可以直接利用css()方法获取元素的样式属性。

也可以直接利用css()方法设置元素的样式属性

 

css()方法获取的高度值与样式的设置有关，而height()方法获取的高度值则是元素在页面中的实际高度，与样式的设置无关。

 

offset()

position()

scrollTop()和scollLeft()

 

 

 

关键点：

$("p").is(".another")

$("p").is("#page1")

$("input").is(":checked")

$("input").is(":disabled")

$("input").removeAttr("disabled")

this指向当前的文本框，this.defaultValue就是当前文本框的默认值

 

 

示例：

网站超链接和图片提示效果