jQuery操作DOM

一、创建节点
在web开发中，主要操作的节点包括元素、属性和文本
1）创建元素
使用DOM创建节点，使用appendChild()方法添加到文档中
document.createElement("tagName")
使用jQuery构造函数$()创建元素对象（返回一个jQuery对象）
$(html字符串) eg:$("<div></div>")使用append()方法添加到文档中

2）创建文本节点l
使用DOM创建文本节点
document.createTextNode(字符串)
使用jQuery创建文本节点
$("<div>Text</div>")

3）创建属性
使用DOM的setAttribute(name字符串,value字符串)

二、插入节点
1）内部插入
在DOM中，使用appendChild（）和insertBefore（）方法
nodeObject.appendChild(newchild)
nodeObject.insertBefore(newchild,refchild)
在jQuery中使用
①append()
②appendTo(target)，等效于append()的反向$("div").append($("h2"))等效于$("h2").appendTo($("div"))
其中target表示一个选择符，HTML字符串，元素或jQuery对象
③prepend()，插入到指定元素里面的最前面
④prependTo()

2）外部插入
DOM没有提供外部插入的方法
jQuery提供了多个外部插入内容的方法

方法	说明
after()	在每个匹配元素之后插入内容
before()	在每个匹配元素之前插入内容
insertAfter()	效果同after()，但是方法相反
insertBefore()	效果同before()，但是方法相反

jQuery这四种方法具有破环行操作特性，如果选择已经存在的内容，并把它插入到指定对象中时，则原位置的内容将被删除

三、删除节点
DOM使用removeChild()方法可以删除指定节点及其包含的所有子节点
jQuery定义了三个删除内容的方法:remove()，empty()，detach()
remove([selector])同DOMremoveChild()，删除所有匹配的节点
empty()删除匹配元素集合中所有的子节点
detach([expr])将匹配的元素从当前元素分离，并不删除

四、复制节点
使用DOM的cloneNode()方法可以复制节点
nodeObject.cloneNode(boolean include_all)
include_all是个布尔值，取值true时会复制节点本身，所有子节点以及所有事件处理函数，取值false时会只复制节点本身
jQuery使用clone()方法复制节点
clone(boolean 是否复制事件处理函数等数据)
clone(boolean 是否复制事件处理函数等数据，boolean 是否复制所有子节点的数据)

五、替换节点
使用DOM的replaceChild()方法可以替换节点
replaceChild(new_node,old_node)
jQuery提供了replaceWith()和replaceAll()方法
replaceWidth(newContent)将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll(selector)效果同replaceWidth()，但是操作相反

六、包裹元素
DOM没有提供包裹元素的方法，jQuery提供了三种包裹元素的方法：wrap（）、wrapAll（）和wrapInner（）。
1）外包
wrap( content),content表示一个HTML片段、选择表达式或者jQuery对象
eg：$("div li").wrap("<span></span>")
2）内包
wrapInner(content)，content同上
$("body").wrapInner("<div></div>")
3）总包
wrapAll(content)
4）卸包
unwrap()将匹配的元素的父级元素删除。

七、操作属性
1）设置属性
DOM使用setAttribute()方法
elementNode.setAttribute(name字符串,value字符串)
jQuery定义了两个用来设置属性值的方法：prop()和attr()
prop（propertyName,value)
prop（map)
prop（propertyName,function(index,oldPropertyValue)
attr()同上
区别：prop()用来获取表单属性值

2）访问属性
在DOM中使用getAttribute()方法可以访问属性的值。
element.getAttribute(name)
jQuery同样使用prop()和attr()两个方法来读取属性值
prop()方法值获取jQuery对象中第一个匹配元素的属性值。如果没有则返回undefined
attr()同上

3）删除属性
DOM中使用removeAttribute()方法删除指定的属性。
elementNode.removeAttribute(name)
jQuery定义了removeProp()和removeAttr()方法都可以删除指定的元素属性
而removeProp()主要是删除由prop()方法设置的属性集
removeAttr()使用DOM原生的removeAttribute()方法

八、操作类
1）添加类样式
jQuery使用addClass()方法专门负责为元素追加样式
addClass(classname)
addClass(function(index,class))
函数接受一个元素的索引位置和旧的class作为参数
eg:$("div").addClass("highlight")
eg:$("div").removeClass("class1 class2").addClass("highlight")

2）删除类样式
removeClass([classname]}
removeClass(function(index,class))
eg:$("div").removeClass("blue under")

3）切换类样式
toggleClass(className)
toggleClass(className, switch)
toggleClass(function(index,class),[switch])

4）判断类样式
hasAttribute(name)和hasClass(classname)两个方法
hasClass()方法实际上是is()方法的再包装

九、操作内容
1、读写HTML字符串
DOM为每个元素定义了innerHTML属性
jQuery使用html()方法来读写HTML字符串
html()
html(htmlString)
html(function(index,html))
当html()不包含参数时会读取旧的HTML结构

2、读写文本
jQuery使用text()方法来读写指定元素下的文本
text(textString)
text(function(index,text))
当text()不包含参数时会读取元素里的text文本

3、读写值
jQuery使用val()方法读写指定表单对象包含的值
val()
val(value)
val(function(index,value))
在读写单选按钮、复选框、下拉菜单和列表框时，操作速度快。如果为表单指定多个值，则可以以数组的形式进行传参

十、操作样式表
jQuery把所有与CSS样式相关的操作都封装到css()方法中。
1、读写CSS样式
CSS样式存在三种形式：行内样式、文档内部样式和文档外部样式。 行内样式可以使用style属性进行读写，而文档内部样式和文档外部样式统一被视为外部样式，这些样式只能够通过DOM的StyleSheets、CSS和CSS2模块提供的对象、方法和属性才能够访问和操作。
css(propertyName)
css(propertyName,value)
css(propertyName,function(index,value))
css(map)
该方法既可以接受CSS的连字符版属性名，也可以接受驼峰表示法
使用css的回调函数参数

2、绝对定位
在DOM中使用offsetLeft和offsetTop属性可以获取元素最近的偏移位置，但是不同浏览器会有不同的解释。jQuery提供了一种简化的定位操作，使用offset()可以获取元素在当前视口的相对偏移
offset()
offset(coordinates)
offset(function(index,coords))
coordinates表示一个坐标对象，包含一个left和top属性
若设置时，原元素是文档流的化，自动变成relative的定位实现重定位

3、相对定位
jQuery使用position()方法可以获取匹配元素的相对偏移位置。
用法与offset()相同，但是这个偏移位置是相对于离该元素最近的而且被定位过的祖先元素。
PS：另外jQuery还定义了scrollTop()和scrollLeft()两个方法获取相对于滚动条顶部和左侧的偏移量。

4、控制大小
jQuery使用width()和height()方法读写元素的大小
width()
width(value)
width(function(index,width))
height()
height(value)
height(function(index,height))

除了width()和height()两个方法以外，jQuery还定义了innerWidth()、innerHeight()、outerWidth()和outerHeight()四种方法。
其中innerWidth()和innerHeight()包含了内容、补白
outerWidth()和outerHeight()包含了内容、补白和边框

十一、遍历文档
jQuery使用children()、next()、prev()、parent()方法遍历文档中的任何元素。
children()获取当前元素包含的所有子元素
next()获取当前元素相邻的下一个同级元素
prev()获取当前元素相邻的上一个同级元素
parent()获取当前元素的父元素