什么是DOM？
DOM，即Document Object Model，对象文本模型，用于方便开发者对HTML结构元素内容进行展示和修改
DOM的三种形式：DOM、HTML DOM、CSS DOM
元素内容的操作
html()：获取元素中的HTML内容
html(value)：设置元素中的HTML内容
text()：获取元素中的文本内容
text()：设置元素中的文本内容
val()：获取表单中的文本内容
val(value)：设置表单中的文本内容
val(array[])：设置表单首选项
元素属性操作
attr(property)：获取属性property的值
attr(property,value)：设置属性property的值
attr({property1:value1,property2:value2,...})：设置多个属性及属性值
attr(property,function([index][,value]){return result})：设置属性property的值用function返回，index为下标，value为原来的值
removeAttr(property)：移除属性property
元素样式操作
css(style)：获取css样式值
css(style,value)：设置css样式
css(array())：获取多个css样式值，array()标示要获取的样式组成的数组，返回对象数组
each(JQObject,function(index,value){})|JQObject.each(function(index,value){})：遍历对象数组的元素
css({style1:value1,style2:value2,...})：设置多个样式及其值
addClass(class1[ class2 class3...])：添加css类
removeClass(class1[ class2 class3...])：删除css类\
toggleClass(class1[ class2 class3...])：样式之间的切换，默认样式与指定样式的切换
class可用function(index,className,switchBool)返回，控制切换，index表示元素的下标，className表示类名，switchBool表示切换频率。
方法
width()：获取样式width的值，返回为number类型
width(value)：设置样式width的值
height()：获取样式width的值，返回为number类型
height(value)：设置样式height的值
innerWidth()：获取元素宽度，包含内边距
innerHeight()：获取元素高度，包含内边距
outerWidth([true])：获取元素宽度，不使用true时，包含内边距和边框；使用true时，包含内外边距和边框
outerHeight([true])：获取元素高度，不使用true时，包含内边距和边框；使用true时，包含内外边距和边框
元素偏移方法
offset()：获取元素相对于视口的偏移位置，返回一个对象，具有left，top，right，bottom属性
position()：获取元素相对于父元素的偏移位置，返回一个对象，具有left，top，right，bottom属性
$(window).scrollTop()：获取垂直滚动条的位置
$(window).scrollTop(value)：设置垂直滚动条的位置
$(window).scrollLeft()：获取水平滚动条的位置
$(window).scrollLeft(value)：设置水平滚动条的位置
DOM节点操作
创建节点：${'节点内容'}
插入节点
内部插入
append(content)：向指定元素内部后面插入节点content
append(function(index,html){return content})：想指定元素内部后面插入节点content，index表示节点下标，html表示原本节点内部内容
appendTO(element)：将指定元素element移入指定指定元素内部后面
prepend(content)：向指定元素内部前面插入节点content
prepend(function(index,html){return content})：想指定元素内部前面插入节点content，index表示节点下标，html表示原本节点内部内容
prependTO(element)：将指定元素element移入指定指定元素内部前面
外部插入
after(content)：向指定元素外部后面插入节点content
after(function(index,html){return content})：想指定元素外部后面插入节点content，index表示上一节点下标，html表示上一节点内部内容
before(content)：向指定元素外部前面插入节点content
before(function(index,html){return content})：想指定元素外部前面插入节点content，index表示下一节点下标，html表示下一节点内部内容
insertAfter(element)：将指定元素element移入指定指定元素外部后面
insertBefore(element)：将指定元素element移入指定指定元素外部前面
包裹节点：使用字符串代码将指定元素的代码包裹起来
wrap(html)：向指定元素包裹一层html代码
wrap(element)：向指定元素包裹一层DOM节点
wrap(function(index){return element})：使用匿名函数向指定元素包裹一层自定义内容
unwrap()：移除一层指定元素包裹的内容
wrapAll(html)：用一层html将所有元素包裹在一起
wrapAll(element)：用一层DOM节点将所有元素包裹在一起
wrapInner(html)：向指定元素的子内容包裹一层html
wrapInner(element)：向指定元素的子内容包裹一层DOM节点
wrapInner(function(index){return element})：使用匿名函数向指定元素的子内容包裹一层自定义内容
节点操作
复制节点：clone([bool])：将节点复制到内存中，可使用 append或appendTo打印出来，若bool值设为true，则事件也会被复制
删除节点：
remove(selector)：将节点删除，可用selector更精确删除节点，不保留事件行为
detach(selector)：将节点删除，可用selector更精确删除节点，保留事件行为
清空节点：empty()：将节点中的子节点和内容清除
替换节点：事件也会被替换
replaceWith(html)：后面的内容替换前面的节点
replaceAll(element)：前面的内容替换后面的节点
来源：https://www.cnblogs.com/HuangWj/p/4492197.html