三、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");//复制当前单击的节点，并将它追加到<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就是当前文本框的默认值

 

 
示例：

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