jQuery中DOM操作
1.DOM操作的分类
DOM操作一般分为3个方面，即DOM Core、HTML-DOM和CSS-DOM。
2.查找节点
2.1查找元素节点
获取元素节点并打印它的文本内容
var $li = $("ul li:eq(1)");
var li_next = $li.text();
alert(li_next);
2.2查找属性节点
获取属性节点并打印它的文本内容
var li_next = $("p").attr("title");
alert(li_next);
3. 创建节点
3.1 创建元素节点
jQuery的工厂函数$()
var $li_1 = $("<li></li>");
$("ul").append($li_1);
3.2创建文本节点
var $li_1 = $("<li>香蕉</li>");
$("ul").append($li_1);
3.3 创建属性节点
var $li_1 = $("<li title = 'banana'>香蕉</li>");
$("ul").append($li_1);
4. 插入节点
| 方法 | 描述 |
|---|---|
| append() | 向每个匹配元素内部追加内容 |
| appendTo() | 将所有匹配元素追加到指定的元素中。$("A").appendTo(B)将追加到B中，与append()相反 |
| prepend() | 向每个匹配元素内部前置内容 |
| prependTo() | 将所有匹配元素前置匹配元素内部，与prependTo()相反 |
| after() | 在指定元素之后插入内容 |
| insertAfter() | 将所有匹配元素插入到指定元素后,与after()相反 |
| befor() | 在指定元素之前插入内容 |
| insertBefor() | 在所有匹配内容之前插入指定元素 |
5. 删除节点
5.1 remove()
当某个节点用remove()删除后，该节点的所有后代节点将同时删除，返回值是一个指向被删除的节点的引用，可以在以后再使用这些元素。
var $li = $("ul li:eq(1)").remove();
$("ul").append($li);
5.2 detach()
从DOM中删除所有匹配的元素，但是不会把匹配元素从jQuery对象中删除，可以在将来使用，但是与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
$("ul li").click(function(){
alert($(this).html());
})
var $li = $("ul li:eq(1)").remove();//删除元素
$("ul").append($li); //重新追加此元素，它之前绑定的事件还在，若使用remove()，它之前绑定的事件将会失效
5.3 empty()
empty()方法不是删除节点，而是清空节点，清空元素中所有后代节点。
var $li = $("ul li:eq(1)").empty();//注意是元素里
6 复制节点
$(this).clone(true).appendTo(body);
在clone()中传递参数true，表示复制元素的同事复制元素中所绑定的事件。
7 替换节点
replaceWith()将所有匹配元素都替换成指定的Html或DOM元素。
replaceALL()与replaceWith()作用相同，只是顺序颠倒。
$("p").replaceWith("<strong>内容</strong>");
$("<strong>内容</strong>").replaceAll("p");//二者效果相同
注意：如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换元素一起消失。
8 包裹节点
wrap()将所有的元素进行单独的包裹
wrapAll()将所有匹配的元素用一个元素包裹
wrapInner()将每一个匹配的元素的子内容用其他结构化的标记包裹起来。
$("strong").wrap("b");
$("strong").wrapAll("b");
$("strong").wrapInner("b");
效果如下：
<!--wrap()-->
<b><strong>水果</strong></b>
<b><strong>香蕉</strong></b>
<!--wrapAll()-->
<b>
<strong>水果</strong>
<strong>香蕉</strong>
</b>
<!--wrapInner()-->
<strong><b>水果</b></strong>
9 属性操作
9.1 获取设置属性
获取属性和设置属性都是用的同一函数，类似于getter和setter,包括html()、text()、val()、css()、height()等。
$("strong").attr("title");//获取属性title
$("strong").attr("title","St");//设置属性title为St
9.2 删除属性
$("strong").removeAttr("title");//删除属性title
10 样式操作
10.1 获取样式和设置样式
$("p").attr("class");//获取元素p的class
$("strong").removeAttr("title");//删除属性title
10.2 追加样式
$("strong").addClass("title");//删除属性title
10.3移除样式
$("p").removeClass(); //移除p中所有样式
$("p").removeClass("high");//移除单个样式
$("p").removeClass("high another");//移除多个样式，中间用空格隔开
10.4切换样式
$("p").toggle(function(){
//显示元素 代码 1
},function(){
//显示元素 代码 2
});
toggle()方法是指交替执行代码1和代码2，另外jQuery还提供了一个toggleClass()方法控制样式上的重复切换，如果类名存在则删除，类名不存在则添加。
$("p").toggleClass("another"); // 重复切换类名 "another"
10.5判断是否含有某个样式
$("p").hasClass("another"); // 若含有类another则返回true，否则返回false
$("p").is("another"); // 在jQuery内部实际调用的是，is()方法
11.设置和获取HTML、文本和值
11.1 html()方法
类似于JavaScript中的innerHTML属性，用了获取或设置某个元素的HTML内容。可以用于xhtml文档，但是不能用于xml文档。
$("p").html(); //获取p中的html代码
$("p").html("<strong>水果</strong>"); //设置p中的html代码
11.2 text()方法
类似于JavaScript中的innerText属性，用了获取或设置某个元素中的文本内容。
$("p").text(); //获取p中的文本元素
$("p").text("水果"); //设置p中的文本元素
11.3 val()方法
类似于JavaScript中的value属性，用了获取或设置某个元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。
$("#login").val(); //获取p中的文本元素
$("#login").val("admin"); //设置p中的文本元素
12 遍历节点
12.1 children()方法
该方法用于取得匹配元素的子元素集合。
var $body = $("body").children();
alert($body.length); //输出body元素下的元素个数
children()方法只考虑子元素而不考虑其他后代元素。
12.2 next()方法
用于取得匹配元素后面紧邻的同辈元素
var $body = $("p").next(); //取得紧邻p后的同辈元素
12.3 prev()方法
用于取得匹配元素前面紧邻的同辈元素
var $body = $("p").prev();
12.4 siblings()方法
用于取得匹配元素前后所有同辈元素
var $body = $("p").siblings();
12.5 closest()方法
用于取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配直接返回元素本身，若不匹配则向上查找父元素，逐级向上知道找到匹配选择器的元素，如果什么都没找到，则返回空的jQuery对象。
$(document).bind("click",function(e){
$(e.target).closest("li").css("color","red");
})
