jQuery中的DOM操作

1 选择节点

通过选择器进行选择
$("#id")

2 创建节点

var $li_1 = $("<li></li>") 创建一个元素
$("ul").append($li_1); 追加到ul中

3 插入节点

$("ul").append("<li></li>") 	<ul><li></li></ul> 向每个匹配的元素内部追加内容
$("ul").appendTo("<li></li>") 	<li><ul></ul></li>
$("ul").prepend("<li></li>")  	<ul><li></li>Hello</ul> 向每个匹配的元素前置内容
$("ul").prependTo("<li></li>") 	<li><ul></ul>Hello</li>
$("ul").after("<li></li>") 		<ul></ul><li></li> 在每个匹配的元素之后插入内容
$("ul").insertAfter("<li></li>")<li></li><ul></ul>
$("ul").before("<li></li>")		<li></li><ul></ul> 在每个匹配的元素之前插入内容
$("ul").insertBefore("<li></li>")<ul></ul><li></li>

4 操作节点

remove() 删除所有匹配的元素以及子元素,返回值是删除的元素的引用
empty()  清空匹配元素中的内容
clone()  复制匹配的元素
replaceWith("<b></b>") 替换匹配的元素(替换匹配元素的所有类容)
wrap("<b></b>") 用<b>元素包裹指定的元素(每个元素单独一个<b>元素)
wrapAll() 包裹所有匹配的元素(所有元素都被一个<b>元素包裹)
wrapInner() 将匹配的元素的子元素以及内容,用指定的元素包裹

5 属性操作

attr(属性[,值]) 获取和设置元素属性 
removeAttr(expr) 删除属性

6 样式操作

addClass(expr) 追加class{在原来的基础上添加一个新的值}
removeClass(expr) 删除指定的class
toggle(function(){},function(){}) 交替执行两个函数
toggleClass(expr) 如果class名存在就删除,不存在就创建
hasClass(expr) 判断元素中是否含有某个class

7 设置和获取HTML、文本和值

html() 获取或者设置指定元素的HTML代码
text() 获取或者设置指定元素的文本内容
val() 可以用来设置或者获取元素的值 

8 遍历节点

children() 获取匹配元素的子元素集合
next() 获取匹配元素后面相邻的同辈元素
prev() 获取匹配元素的前面相邻的同辈元素
siblings() 获取匹配元素前后的所有同辈元素
closest() 获取最近的匹配元素
find(selector) 方法获得当前元素集合中每个元素的后代

9 CSS-DOM操作

css() 获取或设置css样式
css("color")
css("color","red")
css({"":"","":""})

height([expr]) 设置或获取元素的高
width([expr]) 设置或获取元素的宽
offset() 获取元素在当前视窗的相对偏移(left和top)
position() 获取元素相对于最近一个position样式属性设置为relative或者absolute的祖父节点的相对偏移
scrollTop() 获取元素的滚动条距离顶端的距离
scrollLeft()获取元素的滚动条距离左侧的距离