jQuery中的DOM操作

jQuery中的DOM操作

DOM操作的分类

DOM操作分为3个方面：DOM Core(核心)、HTML-DOM和CSS-DOM。

DOM-Core

JavaScript中的getElementById()、getElementsByTagName()、getAtrribute()、setAttribute()等方法都是DOM Core的组成部分。例如：

document.getElementsByTagName("form");

element.getAttribute("src");

HTML-DOM

HTML-DOM提供了一些更加简明的记号来描述各种HTML元素的属性。例如：

document.forms;

element.src;

CSS-DOM

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

element.style.color = "red";

jQuery中的DOM操作

查找结点

可以使用jQuery选择器来完成

查找元素节点

var $li = $("ul li:eq(1)");     //获取<ul>里第二个<li>节点

查找属性节点

利用jQuery选择器获取元素后，可以使用attr()方法来获取它的各种属性值。attr()的参数是一个时，表示要查询的属性的名字。

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

创建节点

动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并达到各种各样的人机交互的目的。

创建元素节点

创建元素节点需要两个步骤，创建新元素并将新元素插入文档中。例如：

var $li = $("<li title="li">这是一个li标签</li>");
$("ul").append($li);

插入节点

• append()，向每个匹配的元素内部追加内容
• appendTo()，将所有匹配的元素追加到指定的元素内部
• prepend()，向每个匹配的元素内部前置内容
• prependTo()，将所有匹配的元素前置到指定元素内部
• after()，向每个匹配的元素之后插入内容
• insertAfter()，将所有匹配的元素插入到指定的元素后面
• before()，在每个匹配的元素之前插入内容
• insertBefore()，将所有匹配的元素插入到指定的元素前面

删除节点

• remove()，从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选。当某个节点用remove()删除后，该节点所包含的所有后代节点将同时被删除，返回值是一个指向已被删除节点的引用。例如：

var $li = $("ul li:eq(1)").remove(); //获取第2个<li>元素节点后，将它从网页中删除

var $li = $("ul li:eq(1)").remove("li[title!=li]"); //将<li>元素中属性title不等于"li"的<li>元素删除

• detach()，这个方法不会将匹配的元素从jQuery对象中删除，所有绑定的事件、附加的数据都会保留下来。
• empty()，这个方法并不是删除节点，而是清空节点，清空元素的所有后代节点。

复制节点

可以使用clone()方法来复制节点，复制节点后，被复制的新元素不具有任何行为，当在clone()方法中传入一个参数true，复制元素的同时复制元素所绑定的事件。例如：

$(this).clone(true).appendTo("body");

替换节点

replaceWith()、replaceAll()，将所有匹配的元素替换成指定的HTML或者DOM元素。如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。

$("p").replaceWith("<strong>hello world!</strong>");

$("<strong>hello world!</strong>").replaceAll("p");

包裹节点

wrap()，将某个节点用其他标记包裹起来。如果包裹的元素之间有其他元素的内容，其他元素会被放到包裹元素之后。

$("strong").wrap("<b></b>");       //用<b>标签将<strong>标签包裹起来

wrapAll()，将所有匹配的元素用一个元素来包裹。
wrapInner()，将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。例如：

$("strong").wrapInner("<b></b>");
//相当于
<strong><b>hello world!</b></strong>

属性操作

获取属性和设置属性

获取属性：

var $para = $("p");
var p_txt = $para.attr("title");

设置属性：

$("p").attr("title","your title");

也可以一次性为同一个元素设置多个属性：

$("p").attr({"title":"your title","name":"your name"});

删除属性

$("p").removeAttr("title");

样式操作

获取样式和设置样式

获取样式：

var p_class = $("p").attr("class");  //获取<p>元素的class

设置样式

$("p").attr("class","high");

追加样式

$("p").addClass("another");

如果不同的class设定了同一样式属性，则后者覆盖前者。

移除样式

$("p").removeClass("high");     //移除<p>元素中值为"high"的class
$("p").removeClass("high another");  //移除两个样式
$("p").removeClass();          //移除全部样式

切换样式

$toggleBtn.toggle(function(){
    //代码3
}，function(){
    //代码4
})；                           //交替执行代码3和代码4两个函数

$("p").toggleClass("another");  //重复切换类名"another"

判断是否有某个样式

hasClass()可以用来判断元素中是否有某个样式，有就返回true，没有就返回false。

$("p").hasClass("another");

也可以使用is()方法

$("p").is(".anpther");

设置和获取HTML、文本和值

html()，用于读取或设置某个元素的HTML内容

var p_html = $("p").html();

$("p").html("<strong>hello world!</strong>");

text()，读取或设置某个元素中的文本内容

var p_text = $("p").text();

$("p").text("hello world!");

val()，设置和获取元素的值

遍历节点

children()，取得匹配元素的子元素的集合

var $p = $("p").children();

next()，取得匹配元素后面紧邻的同辈元素
prev()，取得匹配元素前面紧邻的同辈元素
siblings()，取得匹配元素前后所有的同辈元素
closest()，取得最近的匹配元素

CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。
可以利用css()获取样式属性：

$("p").css("color");        //获取<p>元素的颜色样式

也可以直接利用css()设置某个元素的单个样式：

$("p").css("color","red");

offset()，获取元素在当前视窗的相对偏移，返回的元素包括两个属性，top和left，例如：

var offset = $("p").offset();
var left = offset.left;
var top = offset.top;

position()，获取元素相对于最近的一个position（设置为relative或者absolute）的祖父节点的相对偏移，返回值为left和top。
scrollTop()和scrollLeft()，获取元素的滚动条距顶端的距离和左侧的距离，同时也可以设置参数，控制元素的滚动条滚到指定的位置。