dom操作 属性操作 样式操作

jQuery DOM操作

1 插入子元素

append('<img>')             插后面  被插入元素调用
appendTo('<img scr="...">') 新元素调用
prepend()                   插前面
prependTo()

2 插入兄弟元素

after()                     插后面  被插入元素调用
insertafter()               新元素调用
before()                    插前面
insertbefore()

3 包裹

wrap()                      所有元素分别添加一个父元素
wrapAll()                   添加一个共同的父元素
wrapInner()                 添加一个子元素，该元素包裹在所有子元素外
unwrap()                    删除一个父元素

4 替换

replaceWith('新元素')       被替换元素调用
replaceAll()                新元素调用

5 删除

empty()                     删除所有子节点
remove()                    删除调用元素自己

6 克隆

clone()                     克隆

jQuery属性操作

1 属性

attr(attrName,[value])      单个参数查看，两个设置 可以用于内置属性和自定义属性
prop(attrName,[value])      单个参数查看，两个设置 可以用于内置属性
removeAttr(attrName)
removeProp(attrName)

2 类

addClass()                  添加
removeClass()               删除
toggleClass()               自动
hasClass()                  返回布尔值

3 文本值

html([html])                等同于innerHTML  没有参数获取，有参数则设置
text([text])                等同于innerText没有参数获取，有参数则设置
val([val])                  用于表单控件 设置或获取

jQuery样式操作

1 CSS操作

css('属性','值')
css('属性')

2 元素位置

offset()                    相对于视口 可以获取可以设置 返回对象{left:,top:}
position()                  相对于第一个定位的祖先元素，margin减掉，只能获取
scrollLeft()                控制里面内容的滚动  水平
scrollTop()                 控制里面内容的滚动  垂直

3 尺寸

width()/height()            内容大小
innerWidth()                内容+padding大小
outerWidth()                内容+padding+border大小