Jquery之基础知识开篇（三）--DOM操作

1.jQuery操作DOM

拿到了jQuery对象，就要操作对应的DOM节点了。 DOM 是 Document Object Model 的缩写，是指文档对象模型。

(1)DOM Core-可用来处理任何一种使用标记语言的文档

getElementById()
getElementByTagName()
getAttribute()
setAttribute()
(2)HTML_DOM-提供一些简明的记号来描述各种 HTML 元素的属性
(3)CSS_DOM-针对 CSS 的操作，主要是获取和设置 style 对象的各种属性

Paste_Image.png

(1)查找节点-通过 jQuery 选择器来进行查找
(2)创建节点-使用 jQuery 的工厂函数$()来创建
• $(html)
(3)插入节点-不仅能创建新的 DOM 元素，也能对原有的 DOM 元素进行移动

append()---------------向每个匹配的元素内部追加内容
appendTo()-----------将所有匹配的元素追加到指定的元素中，与 append 函数相反
prepend()--------------向每个匹配的元素内部前置内容
prependTo()----------将所有匹配的元素前置到指定的元素中，与 prepend 函数相反
+after()-------------------在每个匹配的元素之后插入内容
insertAfter()----------将所有匹配的元素插入到指定元素的后面，与 after 函数相反
before()----------------在每个匹配的元素之前插入内容
insertBefore()-------将所有匹配的元素插入到指定的元素的前面，与 before 函数相反
(4)删除和清空节点
remove()-删除所匹配的元素
empty()-清空所匹配元素的所有后代节点
(5)复制节点
clone(flag)-flag 表示复制元素的同时是否复制元素中所绑定的事件
(6)替换节点
replaceWith()-将所有匹配的元素都替换成指定的 HTML 或者 DOM 元素
replaceAll()-与 replaceWith 函数相反
(7)包裹节点
wrapAll()-将所有匹配的元素用一个元素包裹起来
wrap()-将所有的匹配的元素进行单独的包裹
wrapInner()-将每一个匹配的元素的子内容用其他结构化的标记包裹起来

(1)获取和设置属性

(1)获取和设置样式

(1)HTML

width()-获取元素的宽度
height()-获取元素的高度
offset()-获取元素在当前视窗的相对偏移
position()-获取元素相对于最近的一个 position 样式属性设置的 relative 或者 absolute 的祖父节点的相对偏移
scrollTop()-获取元素的滚动条距离顶端的距离
scrollLeft-获取元素的滚动条距离左侧的距离
注意：
原生JS与jQuery操作DOM对比：
http://blog.poetries.top/2017/01/14/js-and-jquery-dom-compare/