jQuery中的DOM操作详细解决方案
DOM(文档对象模型文档对象模型):具有浏览器、平台和语言无关的接口,可以方便地访问页面中的所有标准组件。
DOM操作的分类:
DOM核心:DOM核心不是Javascript独有的。可以使用任何DOM编程语言。它的使用不仅限于处理网页,还包括以标记语言编写的任何文档,如XML。
当HTML DOM:写使用Javascript和DOM HTML文件的脚本,有很多属性,属于html-dom。
css-dom:为CSS的操作,在Javascript中,css-dom主要用于获取和设置的样式对象的各种属性
查找节点
查找节点:
查找元素节点:由jQuery选择器完成。
找到属性节点:经过查阅所需的元素,你可以叫attr()来获取其各种属性值的jQuery对象的方法
创建一个节点
创建节点:使用jQuery的工厂函数$():$(HTML);根据传入的HTML标记字符串创建DOM对象,并将DOM对象包装到jQuery对象中返回。
小心:
动态创建的新元素节点不会自动添加到文档中,但需要通过其他方法插入文档中。
在创建单个元素时,我们应该密切注意关闭标签和使用标准XHTML格式。例如,创建一个元素,您可以使用$()或$(),但不能使用$()或$()。
创建文本节点是在创建元素节点时直接写入文本内容;在创建元素节点时也创建了属性节点。
插入节点(1)
动态创建HTML元素是不现实的,您需要将新创建的节点插入到文档中,也就是文档中节点的子节点。
插入节点(2)
上述方法不仅可以将新创建的DOM元素插入文档中,还可以移动原来的DOM元素。
删除节点
(删除):从DOM中删除所有匹配的元素,根据jQuery表达式传入的参数来过滤元素。当删除节点的所有子代后的节点(删除)方法将同时被删除。这个方法是指返回值是一个节点被删除的引用。
空():清空节点——空元素中的所有子节点(无属性节点)。
复制节点
克隆():克隆匹配的DOM元素,返回值是克隆的副本,但此时复制的新节点没有任何行为。
克隆(true):复制元素并复制元素中的事件
替换节点
用():替换所有匹配的元素作为指定HTML或DOM元素
替换():反用()的方法。
注意:如果已进行替换,则事件已绑定到元素,以前绑定的事件将与原始元素一起消失。
包裹结
包装():用其他标记包装指定节点。此方法对于在文档中插入额外的结构化标记非常有用,并且不会破坏原始文档的语义。
WrapAll():所有匹配的元素用一个元素,和包()方法是将所有的元素。
WrapInner():包裹在每一个匹配元素的子目录(包括文本节点)与其他结构化标记。
属性操作
attr():获取属性和设置属性
当为该方法传递参数时,将为一个元素获取指定的属性。
当为该方法传递两个参数时,为某个元素设置指定属性的值。
有jQuery获取和设置功能,如多方式:attr()、()、文本(HTML)、瓦迩()、高度(宽度)、()、()和CSS等。
RemoveAttr():删除指定的属性指定元素的
设置并获取HTML、文本和值
读取并设置html元素中的HTML内容:HTML()。此方法可用于XHTML,但不能在XML文档中使用。
读取并设置文本元素中的文本内容:文本()。此方法既可以用于XHTML,也可以用于XML文档。
读取并设置元素中的一个值:value()-这个方法类似于value属性中的Javascript。文本框、下拉列表框、复选框,该方法可以返回元素的值(复选框只返回第一个值)。如果多个下拉列表框,返回一个包含所有选择的值数组。