jQuery HTML/CSS 方法

jQuery的一个非常重要的部分是可以操纵DOM元素。

jQuery提供了有效地操作HTML元素,属性和CSS的方法。

类属性

这些方法检查和操作分配给元素的类属性:

方法描述
addClass()将一个或多个类名称添加到所选元素
hasClass()检查是否有任何选定的元素具有指定的类名
removeClass()从所选元素中删除一个或多个类
toggleClass()在添加/删除所选元素中的一个或多个类之间切换

复制中

这种方法使我们可以复制元素:

方法描述
clone()创建所选元素的深层副本

DOM插入-周围

这些方法使我们可以在现有内容周围插入新内容:

方法描述
wrap()将HTML元素环绕每个选定的元素
wrapAll()将HTML元素环绕所有选定的元素
wrapInner()将HTML元素环绕每个选定元素的内容

DOM插入-内部

这些方法使我们可以在现有元素中插入新内容:

方法描述
append()在所选元素的末尾插入内容
appendTo()在所选元素的末尾插入HTML元素
html()设置或获取所选元素的HTML内容
prepend()在所选元素的开头插入内容
prependTo()在所选元素的开头插入HTML元素
text()设置或获取所选元素的文本内容

DOM插入-外部

这些方法使我们可以在现有元素之外插入新内容:

方法描述
after()在所选元素之后插入内容
before()在所选元素之前插入内容
insertAfter()在所选元素之后插入HTML元素
insertBefore()在所选元素之前插入HTML元素

DOM移除

这些方法使我们可以从DOM中删除元素:

方法描述
detach()删除选定的元素(保留数据和事件)
empty()从所选元素中删除所有子节点(包括文本节点)
remove()删除选定的元素(包括数据和事件)
unwrap()删除所选元素的父元素

DOM替换

这些方法用于从DOM中删除内容并将其替换为新内容:

方法描述
replaceAll()用新的HTML元素替换选定的元素
replaceWith()用新内容替换所选元素

一般属性

这些方法获取并设置元素的DOM属性:

方法描述
attr()设置或返回所选元素的属性/值
prop()设置或返回所选元素的属性/值
removeAttr()从所选元素中删除一个或多个属性
removeProp()删除prop()方法设置的属性
val()设置或返回所选元素的value属性(对于表单元素)

样式方法

这些方法获取并设置元素的CSS相关属性:

方法描述
css()为所选元素设置或返回一个或多个样式属性
height()设置或返回选定元素的高度
innerHeight()设置或返回元素的高度(包括填充,但不包括边框)
innerWidth()设置或返回元素的宽度(包括填充,但不包括边框)
offset()设置或返回所选元素的偏移坐标(相对于文档)
offsetParent()返回第一个定位的父元素
outerHeight()设置或返回元素的高度(包括填充,边框和可选的边距)
outerWidth()设置或返回元素的宽度(包括填充,边框和可选的边距)
position()返回元素相对于偏移父级的位置
scrollLeft()设置或返回所选元素的水平滚动条位置
scrollTop()设置或返回所选元素的垂直滚动条位置
width()设置或返回所选元素的宽度