jQuery中的DOM操作(样式、元素、节点、属性）

样式操作

增、改
$(selector).css(name,value)
$(selector).addClass(“classname”)
----增加多个时classname用空格隔开
$(selector).addClass(“classname1” “classname2” “classname3” “classname4”)
获取
$(selector).css(name)

其他方法

方法	说明
$(selector).height(参数可选)	返回或设置匹配元素的高，参数无单位
$(selector).width(参数可选)	返回或设置匹配元素的宽，参数无单位
$(selector).scrollTop(参数可选)	返回或设置匹配元素相对滚动条顶部的偏移
$(selector).scrolLeft(参数可选)	返回或设置匹配元素相对滚动条左侧的偏移
$(selector).offset()	返回元素的定位left和top的坐标，以像素为单位
$(selector).offsetParent()	返回最近的已定位祖先元素。祖先设置了position的元素
$(selector).position()	返回第一个匹配元素到其父元素的位置

删除
$(selector).removeClass(“classname”)
----删除多个时classname用空格隔开
$(selector).removeClass(“classname1” “classname2” “classname3” “classname4” )
切换
$(selector).toggleClass(“classname”)
判断
$(selector).hasClass(“classname”)
----如果该元素有class = classname返回true
----如果没有class = classname则返回false

元素操作

方法	说明
$(selector).html()	获取第一个匹配元素的html内容
$(selector).html(***)	修改所有符合匹配条件的元素的html内容
$(selector).text()	获取所有匹配元素的文本内容
$(selector).text(***)	修改匹配元素的文本内容
$(selector).val()	获取第一个匹配元素的value属性值
$(selector).val(***)	修改所有符合匹配条件的元素的value属性值

节点操作

增
语法：$(“新增标签名”)
eg.新建一个p标签------- $("< p > < / p >")
删

方法	说明
$(selector).remove()	完全删除
$(selector).detach()	删除标签但保留节点事件
$(selector).empty()	只删除节点内容

改

插入

内部插入

方法	说明
A.append(B)	把B追加到A末尾
A.appendTo(B)	把A追加到B末尾
A.prepend(B)	把B追加到A首部
A.prependTo(B)	把A追加到B首部

外部插入

方法	说明
A.after(B)	把B追加到A后面
A.insertAfter(B)	把A追加到B后面
A.before(B)	把B追加到A前面
A.insertBefore(B)	把A追加到B前面

复制

语法：A.clone(空/true/false)
true:复制节点的事件
false:只复制节点

替换

语法：
A.replaceWith(B) 表示：用B替换A
A.replaceAll(B) 表示：用A替换B

属性操作

改、查
查看：$ (selector).attr(name)
修改：$ (selector).attr(name, value)
删除
$(selector).removerAttr(name)

---

今天的分享就是这些啦，欢迎正在学习web的伙伴们“挑毛病”“提意见”，当然了也欢迎各种表扬奥～（比心，比心）