JQuery DOM操作

创建节点

1.创建元素

DOM方式：

var div = document.createElement("div");    //创建div元素

document.body.appendChild(div);               //将其添加到body元素下

JQuery方式：

var $div = $("<div></div>");

$("body").append($div);

2.输入文本

DOM方式：

var div = document.createElement("div");

var txt = document.createTxtNode("test");    //创建文本节点

div.appendChild(txt);

document.body.appendChild(div);

JQuery方式：

var $div = $("<div>test</div>");

$("body").append($div);

3.设置属性

DOM方式：

var div = document.createElement("div");

var txt = document.createTxtNode("test");

div.appendChild(txt);

document.body.appendChild(div);

div.setAttribute("title","我的标题");    //为div元素定义title属性

JQuery方式：

var $div = $("<div title='我的标题'>test</div>");

$("body").append($div);

插入内容

1.内部插入

append()          向元素最后面追加内容

appendTo()      颠倒了append()的用法，$(A).append(B)与$(B).appendTo(A)是等价的

prepend()         向元素最前面插入内容

prependTo()     颠倒了prependTo()的用法，$(A).prepend(B)与$(B).prependTo(A)是等价的

2.外部插入

after(content)或after(function(index))          在元素之后插入内容

before(content)或before(function(index))     在元素之前插入内容

insertAfter(target)                                      与after功能相同，用法相反

insertBefore(target)                                    与before功能相同，用法相反

删除内容

remove([selector])       删除元素以及其包含的所有内容，不可恢复

empty()                      删除其包含的内容，不删除当前元素

detach([expr])            删除元素以及其包含的所有内容，但保留了数据、事件等，可恢复

克隆内容

clone([withDataAndEvents])或clone([withDataAndEvents],[deepWithDataAndEvents])        withDataAndEvents是一个Boolean值，设置是否复制事件处理函数等数据；deepWithDataAndEvents也是一个Boolean值，设置是否对事件处理函数和克隆元素的所有子元素的数据进行复制。

替换内容

replaceWith(newContent)或replaceWith(function)         newContent表示用来插入的内容，可以是HTML字符串、DOM元素或JQuery对象；function返回HTML字符串，表示用来替换的内容。

replaceAll(selector)          selector表示JQuery选择器字符串，用于查找所要被替换的元素，与replaceWith实现的结果一致，但行为方式相反，$A.replaceAll($B)等同于$B.replaceWith($A)。

包裹内容

1.外包

wrap(wrappingElement)          wrappingElement表示一个HTML片段、选择器表达式、JQuery对象或DOM对象，用来包在匹配元素的外层。

wrap(wrappingFunction)         wrappingFunction表示一个用来包裹元素的回调函数

2.内包

wrapInner(wrappingElement)

wrapInner(wrappingFunction)

3.总包

wrapAll(wrappingElement)

4.卸包

unwrap                 将匹配元素的父级元素删除，保留自身（及兄弟元素，若存在）在原来的位置

属性操作

1.设置属性

prop(propertyName,value)          为匹配元素设置一个属性

prop(map)           为匹配元素设置多个属性，以{key:value}形式进行定义

prop(propertyName,function(index,oldPropertyValue))       function用来设置返回值的函数，接收到集合中的元素和属性的值作为参数旧的索引位置，函数中，this指的是当前元素。

说明：大多数情况下，prop()应该用于设置disabled和checked属性值。

attr(attributeName,value)         为匹配元素设置一个属性

attr(map)              为匹配元素设置多个属性，以{key:value}形式进行定义

attr(attributeName,function(index,attr))         function用来设置返回值的函数，接收到集合中的元素和属性的值作为参数旧的索引位置，函数中，this指的是当前元素。

2.访问属性

prop(propertyName)

attr(attributeName)

说明：检索或更改DOM使用prop()，获取一个字符串值使用attr()。

3.删除属性

removeProp(propertyName)

removeAttr(attributeName)

类操作

1.添加类样式

addClass(className)                    为元素追加一个或多个(空格隔开)样式

assClass(function(index,class))       function返回一个或多个用空格隔开的要增加的样式名，能够接收元素的索引位置和元素旧的样式名作为参数。

2.删除类样式

removeClass([className])

removeClass(function(index,class))

3.切换类样式

toggleClass(className)                                切换一个或多个(空格隔开)类样式

toggleClass(className,switch)                      switch表示添加或删除的boolean值

toggleClass(function(index,class),[switch])      function返回一个或多个用空格隔开的用来切换的样式名，能够接收元素的索引位置和元素旧的样式名作为参数。

4.判断样式

hasClass(className)     判断元素是否包含指定的类样式

读写文本和值

1.读写HTML

html()                                读取指定节点下的所有HTML结构

html(htmlString)                 写入HTML字符串，同时覆盖该节点原来包含的内容

html(function(index,html))   function返回要设置的HTML内容，能够接收元素的索引位置和元素旧的HTML作为参数。

2.读写文本

text()                                 读取指定节点下所有文本内容

text(textString)                    写入文本字符串，同时覆盖该节点原来包含的内容

text(function(index,text))    function返回要设置的文本内容，能够接收元素的索引位置和元素旧的文本值作为参数。

3.读写值

val()                                  读取指定表单的值

val(value)                           向指定表单写入值

val(function(index,value))    function返回要设置的值

样式表操作

1.读写CSS样式

css(propertyName)                                    读取指定CSS样式

css(propertyName,value)                            为指定元素设置CSS样式

css(propertyName,function(index,value))      function返回要设置的CSS样式

css(map)                                                    以名值对(如{name:"value"})为元素设置CSS样式

2.绝对定位

绝对定位是指指定元素距离浏览器窗口左上角的偏移距离

offset()                                    读，返回一个包含top(顶部偏移)和left(左侧偏移)属性的对象

offset(coordinates)                    写，coordinates是一个包含top(顶部偏移)和left(左侧偏移)属性的对象

offset(function(index,coords))    写，function返回一个包含top(顶部偏移)和left(左侧偏移)属性的对象

3.相对定位

相对定位是指指定元素距离最近父级元素左上角的偏移位置

position()         返回一个包含top(顶部偏移)和left(左侧偏移)属性的对象

4.设置大小

width()

width(value)

width(function(index,width))

height()

height(value)

height(function(index,height))

此外，还有innerWidth()，innerHeight()，outerWidth()，outerHeight()

5.访问文档树

基本遍历方法

children()     获取当前元素所包含的的所有子元素

next()           获取当前元素相邻的下一个同级元素

prev()          获取当前元素相邻的上一个同级元素

parent()        获取当前元素的父元素