jQuery中的DOM操作
首先附图一张，大家了解一下此篇博文的大概内容，里面的具体内容还需大家耐心细看：
jQuery中的DOM操作
一、 DOM操作的分类
DOM操作分为3个：DOM Core（核心）、HTML_DOM和CSS_DOM
1. DOM Core：
任何一中支持DOM的程序设计语言都可以使用DOM Core，它并非仅限于处理网页，也用来处理任何一种使用标记语言编写出来的文档，如XML。
Javascript中使用DOM Core获取txtName对象的方法：
Document.getElementById(“txtName”);
Javascript中使用DOM Core获取某元素的src属性的方法：
(元素)Element.getAttribute(“src”);
2. HTML DOM：
提供了一些简明的记号描述各种HTML元素的属性。
使用HTML _DOM获取表单对象的方法：
Document.forms //HTML DOM提供了一个forms对象的集合
使用HTML_DOM获取某元素的src属性方法：
Element.src;
注：HTML DOM的代码相对DOM Core的简短，但HTML DOM只能用来处理Web文档。
3. CSS DOM
CSS DOM是针对CSS的操作。CSS DOM技术主要用于获取和设置style对列的各种属性。
如：设置某元素的style对象字体颜色的方法：
Element.style.color=”blue”;
二、 jQuery中的DOM操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<p title=”选择你最喜欢的球类运动。”>你最喜欢的球类运动？</p>
<ul>
<li title=’篮球’>篮球</li>
<li title=’足球’>足球</li>
<li title=’网球’>网球</li>
</ul>
</body>
</html>
1. 查找节点
（1） 查找节点元素
获取元素节点并打印出它的文本内容
Var $li=$(“ul li:eq(1)”); //获取ul里的第二个li节点
Var li_txt=$li.txt(); //获取第2个li元素节点的文本内容
Alert(li_txt); //打印文本内容
（2） 查找节点属性
使用attr()方法获取元素的各种属性的值。当Attr()方法的参数是一个时，要查询属性的名字。如：
Var $p=$(“p’); //获取<p>节点
Var ptxt=$p.attr(“title“); //获取p元素节点属性title
Alert(ptxt); //打印title属性值
2. 创建节点
（1）创建两个li元素节点：
Var $li1=$(“<li></li>”);
Var $li2=$(“<li></li>”);
将这两个li元素插入文档
$(“ul”).append($li1);
$(“ul”).append($li2); //链式操作$(“ul”).append($li1).append($li2);
注：动态创建的节点不会自动添加到文档中，需使用append()方法。
（2）创建文本节点
Var $li1=$(“<li>乒乓球</li>”);
Var $li2=$(“<li>羽毛球</li>”);
（3） 创建属性节点
Var $li1=$(“<li title=”乒乓球”>乒乓球</li>”);
Var $li2=$(“<li title=”羽毛球”>羽毛球</li>”);
3. 插入节点
插入节点的方法
|
方法 |
描述 |
示例 |
|
Append() |
在每个匹配的元素内部追加内容 |
$(“p”).append(“<b>hello</b>”); |
|
appendTo() |
将所有的匹配元素追加到指定的元素中 |
$(“<b>Hello</b>”).appendTo(“p”); |
|
Prepend() |
向每个匹配的元素内部前置内容 |
$(“p”).prepend(“<b>Hello</b>”); |
|
prependTo() |
将所有匹配的元素插入到指定元素的前面 |
$(“<b>Hello</b>”).prependTo(“p”); |
|
After() |
在每个匹配的元素后插入内容 |
$(“p”).after(“<b>Hello</b>”); |
|
insertAfter() |
将所有匹配的元素插入到指定的元素后面 |
$(“<b>Hello</b>”).insertAfter(“p”); |
|
Before() |
在每个匹配的元素之前插入内容 |
$(“p“).before(“<b>Hello</b>”); |
|
InsertBefore() |
将所有匹配的元素插入到指定的元素前面 |
$(“<b>Hello</b>”).insertBefore(“p”); |
4.删除节点
(1)、remove()方法，如：
$("ul li:eq(1)").remove(); //获取第二个li元素节点后，将它从网页中删除
当某个节点用remove删除后，并非整个节点被彻底删除不可用，而是删除该节点的后代元素。下面的代码演示的是将remove删除的节点获取后继续使用：
//获取第二个li元素节点，将它从网页删除 var $li=$("ul li:eq(1)").remove(); //将刚删除的节点又重新添加到ul元素中 $li.appendTo("ul");
使用appendTo方法简化以上代码：
$("ul li:eq(1)").appendTo("ul");
(2)、empty()方法
严格上讲，empty()方法并非删除节点，而是清空节点，它能清空元素中的所有后代节点。
$("ul li:eq(1)").empty();
5.复制节点
使用clone()方法; 沿用上面的例子：
$(function() { //复制当前点击的节点，将它追加到<li>元素 $(this).clone().appendTo(“ul”); });
6.替换节点
使用replaceWith()和replaceAll()。
ReplaceWith()方法的作用是将所有匹配元素都替换成指定的HTML或者DOM元素。如：
$(“p”).replaceWith(“<strog>你最不喜欢的运动是？</strong>”);
用replaceAll方法实现同样的效果：
$(“<strog>你最不喜欢的运动是？</strong>”).replaceAll(“p”);
7.包裹节点
(1)、Wrap():
$(“strong”).wrap(“<b></b>”); //用<b>标签将<strong>元素包裹起来。
<b><strong>你最喜欢的球类运动是？</strong></b>
<b><strong>你最喜欢的球类运动是？</strong></b>
(2)、wrapAll()方法：
$(“strong”).wrapAll(“<b></b>”);
<b>
<strong>你最喜欢的球类运动是？</strong>
<strong>你最喜欢的球类运动是？</strong>
</b>
(3)、wraplnner()方法：
此方法将每一个匹配元素的子内容(包括文本节点)用其他结构化标记包裹起来。
$(“strong”).wrpainner(“<b></b>”);其结果如下：
<strong title=”选择你最喜欢的球类运动。”><b>你最喜欢的球类运动是？</b></strong>
8.属性操作
在jquery中用attr()方法来获取和设置元素属性，removeArrt()方法来删除元素属性。
(1) 获取和设置属性
Var $para=$(“p”); //获取<p>节点
Var p_txt=$para.attr(“title”); //获取<p>元素节点属性title
为<p>元素设置title属性值
$(“p”).attr(“title”,”我的标题1”); //设置单个属性值。
$(“p”).attr(“title”:”我的标题1”,”name”:”张三”);
！注：attr()方法，既能设置元素属性的值，也能获取元素属性的值。类似的还有Html()、text()、height()、width()、val()和css()等方法。
(2) 删除属性（removeAttr()）
$(“p”).removeAttr(“title”); //删除<p>元素的属性title
9.样式操作
(1) 使用attr()方法来获取和设置<p>元素的class：
Var p_class=$(“p”).attr(“class”); //获取<p>元素的class
Var (“p”).attr(“class”,”high”); //设置<p>元素的class 为”high”
在多数情况下，此方法是将原来的class替换为新的class，而不是在原来的基础上追加新的class。
(2) 追加样式
Jquery中提供了addClass()方法来追加样式：
$(“input:eq(2)”).click(function()
{
$(“p”).addClass(“anther”); //给<p>元素追加“anther”类
})
(3)、移除样式：
$(“p”).removeClass(“high”); //移除<p>元素中值为“high”的class
当需要移除多个class时，可以使用空格将两个class隔开：
$(“p”).removeClass(“high anther”); //anther和high分别为两个不同的class
当removeClass()方法不带参数时，表示移除全部class
$(“P”).removeClass(); //不带任何参数，移除全部class
(4)、切换样式（toggleClass()方法）：
例：对<p>元素进行toggleClass()方法操作
<p class=”myClass” title=”test”>test</p>
$(“p”).toggleClass(“another”);当添加toggleClass()方法后<p>元素的class会在myClass和myClass another中切换。
(5)判断是否含有某个样式
hasClass()方法用来判断元素中是否含有某个Class,如果有，则返回true，否则返回false。
10.设置和获取HTML，文本和值
(1)、html()方法
此方法类似与javascript中的innerHTML属性，可以用来获取或设置某个元素中的html内容。例：
<p title=”这是一个p标签”><strong>这真的是一个p标签</strong></p>
Var p_html=$(“p”).html();
Alert(p_html); //输出“<strong>这真的是一个p标签</strong>”
(2)、text()方法
类似于javascript中的innerText属性，例：
Var p_txt=$(“p”).text(); //获取<p>元素的text
Alert(p_txt); //输出“这真的是一个p标签”
(3)、val()方法
类似于javascript中的value属性，用来获取和设置元素的值，无论元素是文本框，下拉框还是单选框，都可以返回元素的值。如果元素为多选，则返回一个包含所有选择值的数组。
<input type=”text” id=”txtuid” value=”请输入用户名”/>
//获取value的jquery代码
Var txt_val=$(“#uid”).val(); //获取p元素的代码
//设置value的jquery代码
$(”#txtuid”).val(“admin”)HTML //设置p元素的代码
Val()方法的另一个用处：能使下拉列表框、多选框和单选框相应的选项被选中。
$(“#single”).val(“checkbox1”); //设置下拉框的默认选项为“checkbox1”
$(“:checkbox”).val([“check2”,”check3”]); //下拉框的第2项和第3项被选中
同样使用attr()方法实现单选框和多选框的选中
$(“#single opton:eq(1)”).attr(“selected”,true);
$(“[value=radio2]:radio”).attr(“checked”,true);
11.遍历节点
(1)、children()方法
Var $ul=$(“ul”).children();
For(var i=0;i<$ul.length;i++)
{
Alert($ul[i].innerHTML);
}
(2)、next()方法
用于取得匹配元素后面紧邻的同辈元素
Var $p;
$p=$(“p”).next();
(3)、prev()方法
用于取得匹配元素前面紧邻的同辈元素
Var $ul=$(“ul”).prev();
(4)、siblings()方法
用于取得匹配元素前后所有的同辈元素
Var $p2=$(“p”).siblings();
(5)closest()方法
用来取得最近的匹配元素。首先检查当前元素是否匹配。如果匹配则直接返回元素本身。如不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。如什么都没有找到则返回一个空的jquery对象。
在jquery中其他遍历节点的方法，如：find()、filter()、nextAll()、prevAll()、parent()和parents()等。
12.Css DOM操作
(1)、css()方法
获取元素的样式属性
$(“p”).css(“color”);
设置css属性
$(“p”).css(“color”,”red”); //设置单个属性
$(“p”).css({“fontSize”:”30px”,”backgroundColor”:”#88888”});
(2)、opacity属性
对透明度的设置 $(“p”).css(“opacity”,”0.5”)
(3)、height()方法
$(“p”).height(); //获取p元素的高度值
$(“p”).height(“100px”); //设置p元素的高度值
(4)、width()方法与height()方法用法一致
(5)、offset()方法
获取元素在当前视窗的相对偏移，返回两个属性（left,top）,只对可见元素有效
Var offset=$(“p”).offset():
Var left=offset.left; //获取左偏移
Var top=offset.top; //获取右偏移
(6)、position()方法 与offset()方法相同
获取元素相对于最近的一个position样式属性设置为relative或absolute的祖父节点的相对偏移。
(7)、scrollTop()和scrollLeft()
获取元素滚动条距顶端的距离和距左侧的距离
Var $p=$(“p”);
Var scrollTop=$p.scrollTop(); //获取元素滚动条距顶端的距离
Var scrollLeft=$p.scrollLeft (); //获取元素滚动条距左侧的距离
$(“textarea”).scrollTop(300);
$(“textarea”).scrollTop(300);
