jQuery（3）——DOM操作

---恢复内容开始---

 

jQuery中的DOM操作

【DOM操作分类】

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

DOM Core：任何一种支持DOM的程序设计语言都可以使用它。它不仅可以用于处理网页，也可以处理任何一种使用标记语言编写出来的文档。

HTML-DOM：它提供了一些更简明的记号来描述各种HTML元素的属性。不过它只能用来处理web文档。

CSS-DOM：是针对CSS的操作，其主要作用是获取设置style对象的各种属性。通过改变style对象的各种属性，可以使网页呈现出不同的效果。

【jQuery中的DOM操作】

查找元素节点

var $li=$("ul li:eq(1)");    //获取<ul>里第二个<li>节点
var li_txt=$li.text();         //获取第二个<li>元素节点文本内容
alert(li_txt);                     //打印文本内容

查找属性节点：利用jQuery选择器查找到需要的元素后，就可以使用attr()方法来获取它的各种属性的值。此方法的参数可以是一个，也可以是两个。

var $para=$("p");                     //获取<p>节点
var p_txt=$para.attr("title");    //获取<p>元素节点属性title
alert(p_txt);                             //打印title属性

创建节点：常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$("html结构")。如

//创建元素节点
var $li_1=$("<li></li>")  //创建一个<li>元素
$("ul").append($li_1);      //添加到<ul>节点中，使之能在网页中显示
//创建文本节点
var $li_2=$("<li>香蕉</li>")  //创建一个<li>元素，包括元素节点和文本节点
$("ul").append($li_2);

创建属性节点与创建文本节点类似，也是直接在创建元素节点时一起创建。

插入节点的方法：

append()	向每个匹配的元素内部追加内容
appendTo()	将所有匹配的元素追加到指定元素中。 实际上，使用该方法是颠倒了常规的 $(A).append(B)的操作，即不是将B追加到 A中，而是将A追加到B中
prepend()	向每个匹配的元素内部前置内容
prependTo()	将所有匹配的元素前置到指定元素中。 实际上，使用该方法是颠倒了常规的 $(A).append(B)的操作，即不是将B前置到 A中，而是将A前置到B中
after()	在每个匹配的元素之后插入内容
insertAfter()	将所有匹配的元素插入到指定元素后。 实际上，使用该方法是颠倒了常规的 $(A).after(B)的操作，即不是将B插入到 A后面，而是将A插入到B后面
before()	在每个匹配的元素之前插入内容
insertBefore()	将所有匹配的元素插入到指定元素前面。 实际上，使用该方法是颠倒了常规的 $(A).before(B)的操作，即不是将B插入到 A前面，而是将A插入到B前面

删除节点：jQuery提供了remove()、detach()和empty()三种删除节点的方法。

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

detach()方法：从DOM中去掉所有匹配的元素。但这个方法不会把匹配的元素从jQuery对象中删除。

empty()方法：这个方法并不是删除节点，而是清空节点。它能清空元素中所有后代节点。

复制节点

使用clone()方法

$("ul li").click(function(){
    $(this).clone().appendTo("ul");  //复制当前单击的节点，并将它追加到<ul>元素中
})

替换节点：replaceWith()和replaceAll()方法。

replaceWith()方法是将所有匹配的元素都替换成指定的HTML或者DOM元素。而replaceAll()方法的作用与replaceWith()相同，只是颠倒了replaceWith()的操作。

包裹节点：wrap()方法。对于要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。

wrapAll()：会将所有匹配的元素用一个元素来包裹。

wrapInner()方法：将每个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。

属性操作：用attr()方法来获取和设置元素属性，removeAttr方法来删除元素属性。

获取属性和设置属性：

var $para=$("p");       //获取<p>节点
var p_txt=$para.attr("title");    //获取<p>元素节点属性title

如果要设置<p>元素的属性的title值，也可以使用同一方法，只不过需要传递两个参数，即属性名称和对应的值。

删除属性

$("p").removeAttr("title");    //删除<p>元素的属性title
//运行代码后，<p>元素的title属性将被删除，由
<p title="选择你最爱的水果">你最爱的水果？</p>
//变为
<p>不最爱的水果？</p>

jQuery1.6中新增了prop()和removeProp()，分别用来获取在匹配的元素集中的第一个元素的属性值和为匹配的元素删除设置的属性。

样式操作

追加样式：addClass()方法来追加样式。

$("p").addClass("another"); //给<p>元素追加“another”类

如果给一个元素添加多个class值，那么久相当于合并他们的样式。如果不同的class设定了同一样式的属性，则后者覆盖前者。

移除样式：removeClass()方法。从匹配的元素中删除全部或指定的class。

切换样式：toggle()方法，主要是控制行为上的重复切换。toggleClass()方法可以控制样式上的重复切换，如果类名存在则删除它，如果不存在则添加它。

判断是否含有某个样式：hasClass()方法。有，返回true，否则返回false。

设置和获取HTML、文本和值

html()方法：类似于JavaScript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。

　　　　　　html()方法可以用于XHTML文档，但不能用于XML文档。

text()方法：类似于JavaScript中的innerText属性，可以用来读取或设置某个元素中的文本内容。

　　　　　　JavaScript中的innerText属性并不能在Firefox浏览器下运行，而jQuery的text()方法支持所有浏览器。

　　　　　　text()方法符HTML文档和XML文档都有效。

val()方法：类似于JavaScript中的value属性，可以用来设置和获取元素的值。

遍历节点

children()方法：用于匹配元素的子元素合集。而且children()方法只考虑子元素而不考虑其他后代元素。

next()方法：用于取得匹配元素后面紧邻的同辈元素。

prev()方法：用于取得匹配元素前面紧邻的同辈元素。

siblings()方法：用于取得匹配元素前后所有同辈元素。

closest()方法：用于取得最近的匹配元素。

CSS-DOM操作

简单来说，就是读取和设置style对象的各种属性。

offset()方法：获取元素在当前视窗的相对偏差。其中返回的对象包含top和left两个属性，它只对可见元素有效。

position()方法：获取相对于最近的一个position样式属性设置为relative汇总absolute的祖父节点的相对偏差。返回的对象属性与offset()一样。

scrollTop()方法和scrollLeft()方法：分别可以获取元素的滚动条距顶端的距离和距左侧的距离。可以将这两个方法指定一个参数，控制元素的滚动条滚动到指定位置。

---恢复内容结束---