每天学点JQuery(2)—DOM操作

DOM操作分为三方面，即DOM Core（核心）、HTML-DOM和CSS-DOM。

DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用他，JS中的getElementById，getElementsByTagName，getAttribute和setAttribute等方法，都是DOM Core的组成部分。

HTML-DOM的出现的比DOM Core还要早，它提供了一些更简明的记号来描述各种HTML元素属性，例如document.forms，element.src。

CSS-DOM是针对CSS的操作，主要是用来获取和设置style对象的各种属性，如element.style.color=”red”。

JQuery中的DOM操作

1.查找节点：

$("p").attr("title") //获取<p>元素的title属性值

2.创建节点

var node1 = $("<li title='node1'>Node1</li>") //创建一个<li>元素，包括属性节点，文本节点和元素节点。

3.插入节点

$("p").append("<b>Insert</b>") //<p>节点内的最后插入<b>Insert</b>
$("<b>Insert</b>").appendTo("p") //将<b>Insert</b>插入到<p>节点内的最后

$("p").prepend("<b>Insert</b>") //<p>节点内的最前插入<b>Insert</b>
$("<b>Insert</b>").prependTo("p") //将<b>Insert</b>插入到<p>节点内的最后


$("p").after("<b>Insert</b>") //<p>节点外的后面插入<b>Insert</b>
$("<b>Insert</b>").insertAfter("p") //将<b>Insert</b>插入到<p>节点外后面

$("p").before("<b>Insert</b>") //<p>节点外的前面插入<b>Insert</b>
$("<b>Insert</b>").insertBefore("p") //将<b>Insert</b>插入到<p>节点外的前面

4.删除节点

(1) remove()：当某个节点用remove删除后，该节点包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此在以后可以再使用这些元素。另外remove()方法也可以通过传递参数来选择性的删除元素。

var del = $("ul li").remove("li[title=delete]") //删除title名为delete的li元素

del.appendTo("ul") //将删除的元素重新添加

(2)detach()：唯一与remove()不同的地方就是之前绑定的事件和附加的数据不会消失。

(3)empty()：其并不是删除节点，而是清空节点，它能清空元素中的所有后代节点

$("ul li:eq(1)").empty();//清空此元素里内容，注意是元素里，也就是只删除文本内容，不会删除列表的"."标志。

5.复制节点：

$("ul li:eq(0)").clone().appenTo("ul")
$("ul li:eq(0)").clone(true).appenTo("ul") //绑定的事件也被复制

6.替换节点：

$("p").repalceWith("<strong>123</strong>") //将<p>替换为<strong>123</strong>

$("<strong>123</strong>").replaceAll("p") 用<strong>123</strong>替换<p>元素

注:被替换元素的绑定事件会随之消失

7.包裹节点：

$("strong").wrap("<b></b>") //用<b></b>包裹<strong>
$("strong").wrapAll("<b></b>") //与$("strong").wrap("<b></b>")的区别是 :wrap()会对每个匹配到的元素都包裹，而wrapAll()会对所有匹配到的元素统一包裹
$("strong").wrapInner("<b></b>") //将匹配元素的子内容用<b></b>包裹起来

8.属性操作：

$("p").attr("title")//获取<p>元素的title属性
$("p").attr("title","132">设置<p>元素的tilte属性值为132
$("p").attr({"title":"132", "name", "test"}>设置<p>元素的多个属性
$("p").removeAttr("title") //删除<p>元素的title属性

9.样式操作：

$("p").addClass("div") //给<p>元素追加div类
$("p").removeClass("div") //移除div类
$("p").removeClass("div p") //删除多个样式
$("p").removeClass() //删除所有样式
$("p").toggleClass("div") //切换样式，有div则删除，没有则加上
$("p").hasClass("div") //是否含有div样式

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

$("p").html() //获取p元素的html代码
$("p").html("<b>123</b>") //设置p元素内的代码为<b>123</b>

$("p").text() //获取p元素内的文本内容
$("p").text("123") //设置p元素内的文本内容为123

val()：无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值，如果元素为多选，则返回一个包含所有选择的值和数组

$("input").val() //获取文本框的值
$("input").val("123") //设置文本框的值为123

$("select").val("2") //设置select元素中包含2的选项为选中值
$("select").val(["1","2"]) //设置multiple select元素中包含1,2的选项为多个被选中的值
$(":checkbox").val(["2"]) //设置checkbox元素中初始勾选的为2的选项
$(":radio").val(["2"]);//设置radio元素中初始勾选的为2的选项

11.遍历节点：

$("div").children() // 返回div的子元素集合，不包含子元素的子元素
$("p").next() //返回匹配元素后面紧邻的同辈元素
$("p").prev() //返回匹配元素前面紧邻的同辈元素
$("p").siblings() //返回匹配元素前后所有同辈元素

closest()：从自身节点查找，逐级向上查找，返回一个匹配的第一个元素节点
parent()：从指定类型的父节点开始查找，返回一个元素节点
parents()：同parent() 类似，但查找到一个后不停止，继续查找，返回多个父节点

12.CSS-DOM操作：

$("p").css("color") //获取<p>的样式颜色 无论是外部导入还是内嵌都可获得
$("p").css("color", "red") //设置<p>元素样式颜色
$("p").css({"color":"red","fontSize":"30px"}) //设置<p>元素多个样式

$("p").height() //获取p元素高度值
$("p").height(100) //设置p元素高度值

$("p").width() //获取p元素宽度值
$("p").width(100) //设置p元素宽度值

$("p").offset().left //获取元素相对当前视窗的左偏移
$("p").offset().top //获取元素相对当前视窗的上偏移

$("p").position().left //获取元素相对于最近的一个position样式属性设置为relativee或absolute的祖父节点的相对左偏移
$("p").position().top //获取元素相对于最近的一个position样式属性设置为relativee或absolute的祖父节点的相对上偏移


$("p").scrollTop() //获取元素滚动条距顶端的距离
$("p").scrollLeft() //获取元素滚动条距左侧的距离

$("p").scrollTop(30) //垂直滚动条滚动到指定位置
$("p").scrollLeft(30) //横向滚动条滚动到指定位置