jQuery中的DOM操作

DOM操作的分类

DOM(Document Object Model— 文档对象模型 ) ：一种与浏览器 , 平台 , 语言无关的接口 , 使用该接口可以轻松地访问页面中所有的标准组件。
一般来说， DOM 操作分为 3 个方面：
• DOM Core : DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它 . 它的用途并非仅限于处理网页 , 也可以用来处理任何一种是用标记语言编写出来的文档 , 例如 : XML 。
• HTML DOM : 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时 , 　有许多专属于 HTML-DOM 的属性。
• CSS-DOM : 针对于 CSS 操作 , 在 JavaScript 中 , CSS-DOM 主要用于获取和设置 style 对象的各种属性。

jQuery中的DOM操作

构建一个网页，每一张网页都能用DOM表示出来，每一份DOM都可以看作一棵DOM树

构建DOM树：

对DOM的各种操作都是围绕DOM树展开。
设置元素及内容
通过各种选择器、过滤器得到想要操作的元素，对这些元素进行DOM操作，最常用的操作就是对元素内容的获取和修改。

html()和 text()
在常规的DOM元素中，我们可以使用html()和text()方法获取内部的数据。html()方法可以获取或设置html内容，text()可以获取或设置文本内容。

注意：当我们使用 html()或 text()设置元素里的内容时，会清空原来的数据。而我们期望能够追加数据的话，需要先获取原本的数据。

val()方法
如果元素是表单的话，比如input,select和textarea,jQuery提供了val()方法进行获取或设置内部的文本数据。

元素属性操作
除了对元素内容进行设置和获取，通过jQuery也可以对元素本身的属性进行操作，包括获取属性的属性值、设置属性的属性值，并且可以删除掉属性。

attr()和removeAttr()
attr () ：获取和设置元素属性。
removeAttr (name) ：从每一个匹配的元素中删除一个属性。

元素样式操作
元素样式操作包括了直接设置 CSS 样式、增加 CSS 类别、类别切换、删除类别这几种操作方法。而在整个 jQuery 使用频率上来看，CSS 样式的操作也是极高的，所以需要重点掌握。

css()方法
css()方法访问匹配元素的样式属性。

在需要设置多个样式的时候，我们可以传递多个CSS样式的键值对即可。

addClass()方法和removeClass()方法
addClass () 方法：为每个匹配的元素添加指定的类名。
removeClass () 方法：从所有匹配的元素中删除全部或者指定的类。
一个或多个要添加到元素中的 CSS 类名，请用空格分开

toggleClass()方法
我们还可以结合事件来实现 CSS 类的样式切换功能

CSS方法
jQuery 不但提供了 CSS 的核心操作方法，比如.css()、.addClass()等。还封装了一些特殊功能的 CSS 操作方法，比如：width（）、height（）、innerWidth()、innerHeight()、offset()、position()等方法。
width()方法


height()方法


内外边距和边框尺寸方法


元素偏移方法

DOM 节点操作

DOM 中有一个非常重要的功能，就是节点模型，也就是 DOM 中的“M”。页面中的元素结构就是通过这种节点模型来互相对应着的，我们只需要通过这些节点关系，可以创建、插入、替换、克隆、删除等等一些列的元素操作。

创建节点
为了使页面更加智能化，有时我们想动态的在 html 结构页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节点。

插入节点
在创建节点的过程中，其实我们已经演示怎么通过.append () 方法来插入一个节点 。 但除了这个方法之余呢， jQuery 提供了其他几个方法来插入节点。


外部插入节点方法


包裹节点
jQuery 提供了一系列方法用于包裹节点，那包裹节点是什么意思呢？其实就是使用字符串代码将指定元素的代码包含着的意思。


遍历节点
取得匹配元素的 所有子元素 组成的集合 : children(). 该方法只考虑子元素而不考虑任何后代元素 .
取得匹配元素 后面紧邻的同辈元素的 集合 ( 但集合中只有一个元素 ) : next()
取得匹配元素 前面紧邻的同辈元素的 集合 ( 但集合中只有一个元素 ) : prev ()
取得匹配元素前后所有的同辈元素 : siblings()