jquery学习（二）-DOM操作

来自锋利的jquery第二版

一、DOM分类

 DOM分为3类DOM Core（核心）、HTML-DOM、CSS-DOM

1、DOM Core：其并不专属于javascript，任何一种支持DOM程序设计的语言都可以使用它。如javascript中的getElementById、getElementByTagName、getAttibute和setAttribute等方法，就是DOM Core的组成部分。

2、HTML-DOM：其比DOM Core出现的还要早，它提供了一些更简明的记号来描述各种HTML元素属性。如：element.src获取某元素上的src属性。

3、CSS-DOM：CSS-DOM是针对CSS操作的。Javascript中，CSS-DOM主要作用于获取和设置style对象的各种属性。如：element.style.color=”red”设置某元素的字体颜色。

二、DOM操作

1、查找节点：通过上面一章选择器，查找出想要的节点元素。

2、创建节点

1.创建元素节点

　　$(html)方法会根据传人的html标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。还有动态创建的新元素是脱离文档的（处于游离状态），需要其他方法将其插入文档中。如$(“ul”).append(“<li></li>”)

2.创建文本节点

　　在创建元素节点的时候直接加入文本内容。如$(“<div>hello word</div>”)

3.创建属性节点

　　与创建文本节点类似，在创建元素节点的时候直接加入属性设置。如$(‘<div id=”myDiv”></div>’)

3、插入节点

append()	向元素内部追加内容	<p>hello</p> $(“p”).append(‘<b>Eric</b>’) 显示结果： <p>hello<b>Eric</b></p>
appendTo()	将元素追加到指定的元素中，与append用法颠倒	<p>hello</p> $(“<b>Eric</b>”).appendTo(‘p’) 显示结果： <p>hello<b>Eric</b></p>
prepend()	想匹配元素内前置内容（向前追加）	<p>hello</p> $(“p”).prepend(‘<b>Eric</b>’) 显示结果： <p><b>Eric</b>hello</p>
prependTo()	将元素前置到指定元素内，与prepend用法颠倒	<p>hello</p> $(“<b>Eric</b>”).prependTo(‘p’) 显示结果： <p><b>Eric</b>hello</p>
after()	在匹配元素后面追加内容	<p>hello</p> $(“p”).after(‘<b>Eric</b>’) 显示结果： <p>hello</p><b>Eric</b>
insertAfter()	将要添加的元素插入到指定元素后面，与after用法颠倒	<p>hello</p> $(“<b>Eric</b>”).after(‘p’) 显示结果： <p>hello</p><b>Eric</b>
before()	在匹配元素之前插入内容	<p>hello</p> $(“p”).before(‘<b>Eric</b>’) 显示结果： <b>Eric</b><p>hello</p>
insertBefore()	将要添加的元素插入到指定元素之前，与before用法颠倒	<p>hello</p> $(“<b>Eric</b>”).insertBefore(‘p’) 显示结果： <b>Eric</b><p>hello</p>

4、删除节点

1.remove()方法

　　作用是从DOM中删除所有匹配的元素，传入参数用于根据jQuery表达式来筛选元素。删除成功后，会返回删除元素的引用，方便重新添加。

如：$(“ul li:eq(1)”).remove()是删除ul中第二个li元素；

$(“ul li”).remove(‘li[title!=”myTitle”]’)删除ul中li元素title属性值不等于myTitle的所有li元素。

2.Detach()方法

　　作用和remove一样，也是从DOM中去除所有匹配的元素。但是这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来在使用这些匹配的元素，与remove不同的是，所有绑定的事件、附加的数据等都会保留下来。总而言之，如果删除后，不会再重新添加使用该元素就用remove，反之用detach。

3.Empty()方法

　　empty方法其实是清空节点内容。

5、复制节点

　　使用clone()可以复制匹配的元素，如果需要复制的新元素具有本体的功能（如点击事件）可以添加一个true的参数。

如：$(“otherUL li”).click(function(){

$(this).clone().append(“myUL”);//不具有如何行为

//如果需要将其点击事件也复制就添加true参数

//$(this).clone(true).append(“myUL”);

})

6、替换节点

　　jQuery提供了两个方法实现替换节点，即replaceWith和replaceAll，这两个方法实现功能一样，不同的只是使用方法相颠倒。

举个栗子

将<p>我帅吗？</p>替换成<strong>你真帅</strong>

哈哈这里意淫一下，继续我们的栗子，分别用两种方法实现

$(“p”).replaceWith(“<strong>你真帅</strong>”);

$(“<strong>你真帅</strong>”).replaceAll(“p”);

7、包裹节点

1.wrap()方法

　　该方法对于需要在文档插入额外的结构化标签非常有用，而且它不会破坏原始文档的语义。代码如下：

$(“strong”).wrap(“<b></b>”);//用b标签把strong原始包裹起来

效果：<b><strong>你真帅</strong></b>

2.wrapAll()方法

　　该方法会将所有匹配元素用一个元素包裹。它不同于wrap方法，wrap方法是将所有的元素单独包裹。

Html代码

<strong>我帅吗？</strong>

<strong>你真帅！</strong>

$(“strong”).wrapAll(“b”)

效果：

<b>

<strong>我帅吗？</strong>

<strong>你真帅！</strong>

</b>

$(“strong”).wrap(“b”)

效果：

<b><strong>我帅吗？</strong></b>

<b><strong>你真帅！</strong></b>

3.wrapInner()方法

　　该方法将每一个匹配的元素的子内容（包括文本节点）用其他结构化标签包裹起来。例如：

<p>hello<strong>Eric</strong></p>

$(“p”).wrapInner(“<b></b>”)

效果：

<p>

<b>hello<strong>Eric</strong></b>

</p>

8、属性操作

1.获取和设置属性

　　jQuery提供attr方法来获取和设置属性。如：

var title=$(“p”).attr(“title”);

$(“p”).attr(“title”,”你真帅！”);

　　在jQuery1.6版本后添加了prop方法，该方法用于修复之前版本attr的一下问题，如用attr获取和设置属性值是boolean值的属性（checked、selected、disabled等）时可能异常（如：不设置时获取的值是undifend，而不是预期的false；还有再次设置checkbox的cheched为true时还是显示选不上），而一prop就可以解决这些问题。所以本人总计关于属性值是boolean类型的就使用prop，其它的使用attr。。

2.删除属性

jQuery提供removeAttr方法来获取和设置属性。如：

$(“p”).removeAttr(“title”);

jQuery1.6版本后可以使用removeProp

9、样式操作

1.追加样式：用addClass()方法

2.移除样式:removeClass()方法

3.切换样式

使用toggle方法，代码如下：

$(element).toggle(function(){

//显示元素代码

},functuon(){

//隐藏元素代码

})

还可以使用toggleClass方法实现样式切换，代码如下：

$(element).toggleClass(“myClass”)//反复切换类名myClass

4.判断是否包含某种样式：用hasClass方法

10、遍历节点

1.children()方法

　　该方法获取匹配元素的子元素。注意：该方法只考虑子元素而不考虑其他后代元素

2.next()方法

　　该方法用于获取匹配元素后面紧邻的同辈元素。

3.prev()方法

　　该方法用于获取匹配元素前面紧邻的同辈元素。

4.Siblings ()方法

　　该方法用于获取匹配元素前后的所有同辈元素。

5.Closest ()方法

　　该方法用于取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配就直接返回元素本身。如果不匹配则向上查找父元素，逐级向上查找匹配选择器的元素。如果什么都没有找到就返回一个空的jQuery对象。

比如，给点击目标元素的最近li元素添加背景颜色，代码如下：

$(document).click(function(e){

$(e.target).closest(“li”).css(“background”,”red”)

})

11、CSS-DOM操作

1.offset方法

　　它的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left。获取p元素的偏移量，代码如下：

var pOffset=$(“p”).offset();

var left=pOffset.left;

var top=pOffset.top;

2.position方法

　　它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset使用一样。

3.scrollTop 和scrollLeft 方法

　　这两个方法作用是分别获取和设置获取元素的滚动条距离顶端距离和左侧距离。代码如下：

var p=$(“p”);

//获取

var scrollTop=p.scrollTop();

Var scrollLeft=p.scrollLeft();

//设置

p.scrollTop(300);

p.scrollLeft(300);