纸上得来终觉浅，绝知此事要躬行。书上写的再好，手动敲出书上的代码，切身体验才是真真道理。
书本代码下载
DOM可以让程序员轻松获取和操作网页中的数据、脚本和表现层对象。
插入节点的方法
| 方法 | 描述 |
| append() | 向每个匹配的元素内部追加内容 |
| appendTo() | 将所有匹配的元素追加到指定的元素中 |
| prepend() | 在每个匹配的元素内部前置内容 |
| prependTo() | 将所有匹配的元素前置到指定的元素中 |
| after() | 在每个匹配的元素之后插入内容 |
| insertAfter() |
将所有匹配的元素插入到指定的元素的后面。 例如：$("<b>lilian</b>").insertAfter("p"); |
| before() | 在每个匹配的元素之前插入内容 |
| insertBefore() |
将所有匹配的元素插入到指定的元素的前面。 例如：$("<b>lilian</b>").insertBefore("p"); |
删除节点的方法
- remove()方法
例如：$("p").remove();当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。
- datach()方法
例如：$("ul li:eq(1)").detach();这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来在使用这些元素。
- empty()方法
例如：$("ul li:eq(1)").empty;这个方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。
复制节点的方法
$(this).clone(true).appendTo("body");
替换节点的方法
$("p").replaceWith("<strong>这里是美国</strong>");
$("<strong>这里是美国</strong>").repalceAll("p");
包裹节点的方法
- 将所有匹配的元素用一个元素包裹
$("strong").wrapAll("<b></b>");
- 将每一个匹配的元素的子内容用其他结构化的标记包裹起来。
$("strong").wrapInner("<b></b>");
属性操作
用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。
- 获取和设置属性
$("p").attr("title","your title");
$("p").attr({"title":"your title","name":"test"});
- 删除属性
$("p").removeAttr("title");
- 获取样式和设置样式
$("p").attr("class","high");
- 追加样式
$("p").addClass("another");
- 移除样式
$("p").removeClass("high");
- 切换样式
$("p").toggleClass("another");
- 判断是否含有某个样式
$("p").hasClass("high");
设置和获取HTML、文本和值
- html()方法
获取html内容，类似于javascript里面的inner HTML。
var p_html=$("p").html();
$("p").html("*****");
- text()方法
获取文本内容，类似于javascript里面的innerText。
var p_text=$("p").text(); $("p").text("******");
- val()方法
此方法类似于javascript里面的value属性。
$("p").val();
遍历节点
- children()方法
children()方法只考虑子元素而不考虑其他后代元素。
var body=$("body").children();
- next()方法
匹配元素后边紧邻的同辈元素
$("p").next();
- prev()方法
匹配元素前面紧邻的同辈元素
$("p").prev();
- siblings()方法
匹配元素前后所有的同辈元素
$("p").siblings();
- closest()方法
用于取得最近的匹配元素
$(document).bind("click",function(e){
$(e.target).closest("li").css("color","red");
})
- parent(),parents()与closest()的区别
| 方法 | 描述 |
| parent() | 返回父级元素 |
| parents() | 返回所有匹配的祖先元素 |
| closest() | 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素 |
CSS-DOM操作
- offset()方法
获取元素在当前视窗的相对偏移
var left=$("p").offset().left; var right=$("p").offset().right;
- position()方法
获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖先父节点的相对偏移。
var left=$("p").position().left; var right=$("p").position().right;
- scrollTop()方法和scrollLeft方法
这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。
var top=$("p").scrollTop(); var left=$("p").scrollLeft();