jQuery中的DOM操作

DOM(Document Object Model—):独立于浏览器、平台和语言的界面，可以轻松访问页面中的所有标准组件。

DOM操作的分类：

DOM Core: DOM Core并不是JavaScript的专属，任何支持DOM的编程语言都可以使用。它的用途不仅限于处理网页，还可以用来处理任何用标记语言编写的文档，比如： XML。

当HTML DOM:使用JavaScript和DOM为HTML文件编写脚本时，有许多特定于HTML-DOM的属性。

CSS-DOM:针对CSS操作。在JavaScript中，CSS-DOM主要用于获取和设置样式对象的各种属性。

查找节点

查找节点：

通过jQuery选择器找到元素节点：

找到需要的元素后，属性节点：可以调用jQuery对象的attr()方法，获取其各种属性值。

创建节点

jQuery的工厂函数$(): $(html)用于创建节点：根据传入的html标记字符串，将创建一个DOM对象，这个DOM对象将被包装为jQuery对象并返回。

注意：

动态创建的新元素节点不会自动添加到文档中，而是需要通过其他方法插入到文档中。

创建单个元素时，请注意结束标记和使用标准的XHTML格式。例如，要创建P元素，可以使用$(“P/”)或$(“P/P”)，但不能使用$(“P”)或$(“P”)。

创建文本节点意味着在创建元素节点时直接写入文本内容；创建元素节点时也会创建属性节点。

插入节点(1)

动态创建HTML元素是没有用的，需要将新创建的节点插入到文档中，也就是成为文档中某个节点的子节点。

插入节点(2)

上述方法不仅可以将新创建的DOM元素插入到文档中，还可以移动原始的DOM元素。

删除节点

Remove():从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式过滤元素。当使用remove()方法删除节点时，该节点中包含的所有后代节点将同时被删除。此方法的返回值是对已删除节点的引用。

Empty():清除节点清除元素中的所有后代节点(不包括属性节点)。

复制节点

Clone():克隆匹配的DOM元素，返回值是克隆的副本。但是，复制的新节点此时没有行为。

克隆(真):复制元素和元素中的事件。

替换节点。

ReplaceWith():用指定的HTML或DOM元素替换所有匹配的元素。

replaceAll():反转了replaceWith()方法。

请注意，如果事件在替换之前已经绑定到元素，则最初绑定的事件将在替换之后随着原始元素一起消失。

宗地节点

Wrap():用其他标记包装指定的节点。这种方法对于在不破坏原始文档语义的情况下向文档中插入额外的结构化标签非常有用。

WrapAll():用一个元素包装所有匹配的元素，而wrap()方法单独包装所有元素。

WrapInner():使用其他结构化标签包装每个匹配元素的子内容(包括文本节点)。

属性操作

Attr():获取属性并设置属性。

当您将参数传递给此方法时，您可以为元素的获取指定一个属性。

为此方法传递两个参数时，将为元素设置指定属性的值。

jQuery中有很多方法，比如：attr()，html()，text()，val()，height()，width()，CSS()，等。

RemoveAttr():删除指定元素的指定属性。

设置并获取HTML、文本和值。

并在一个元素中设置HTML内容： html()。这种方法可以用于XHTML，但不能用于XML文档。

读取并设置元素中的文本内容： text()。这种方法可以用于XHTML和XML文档。

读取并设置元素中的值：Val()，这个方法类似于JavaScript中的value属性。对于文本框、下拉列表框，这个方法可以返回元素的值(多选框只能返回第一个值)。如果是多选下拉列表框，它将返回一个包含所有选定值的数组。