JQ中操作DOM的方法小结

JQ中操作DOM的方法小结 胡健超

JQ中操作DOM的一些方法小结

(1) 要在HTML中创建新元素,使用$()函数。
(2) 要在每个匹配的元素中插入新元素,使用:
n .append()   方法在被选元素的结尾(仍然在内部)插入指定内容。
n .appendTo()  方法在被选元素的结尾(仍然在内部)插入指定内容

提示:append() 和 appendTo() 方法执行的任务相同。不同之处在于:内容和选择器的位置,以及 append() 能够使用函数来附加内容。


n .prepend()   方法在被选元素的开头(仍位于内部)插入指定内容。
n .prependTo()  方法在被选元素的开头(仍位于内部)插入指定内容。

提示:prepend() 和 prependTo() 方法作用相同。差异在于语法:内容和选择器的位置,以及 prependTo() 无法使用函数来插入内容。

 

 

(3) 要在每个匹配的元素相邻的位置上插入新元素,使用:
n .after()   方法在被选元素后插入指定的内容。
n .insertAfter()   方法在被选元素之后插入 HTML 标记或已有的元素。
n .before() 方法在被选元素前插入指定的内容。
n .insertBefore()  方法在您指定的已有子节点之前插入新的子节点。


(4) 要在每个匹配的元素外部插入新元素,使用:
n .wrap()  方法把每个被选元素放置在指定的 HTML 内容或元素中。
n .wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素。
n .wrapInner()  方法使用指定的 HTML 内容或元素,来包裹每个被选元素中的所有内容 (inner HTML)。


(5) 要用新元素或文本替换每个匹配的元素,使用:
n .html()  方法返回或设置被选元素的内容 (inner HTML)。

如果该方法未设置参数,则返回被选元素的当前内容。

n .text() 方法方法设置或返回被选元素的文本内容。当该方法用于设置值时,它会覆盖被选元素的所有内容。
n .replaceAll()  方法用指定的 HTML 内容或元素替换被选元素。
n .replaceWith()  方法用指定的 HTML 内容或元素替换被选元素。

提示:replaceWith() 与 replaceAll() 作用相同。差异在于语法:内容和选择器的位置,以及 replaceAll() 无法使用函数进行替换。


(6) 要移除每个匹配的元素中的元素,使用:
 n.empty()  方法从被选元素移除所有内容,包括所有文本和子节点。


(7) 要从文档中移除每个匹配的元素及其后代元素,但不实际删除它们,使用:
n .remove()  方法移除被选元素,包括所有文本和子节点。

该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。


n .detach()  方法移除被选元素,包括所有文本和子节点。

这个方法会保留 jQuery 对象中的匹配的元素,因而可以在将来再使用这些匹配的元素。

detach() 会保留所有绑定的事件、附加的数据,这一点与 remove() 不同。

 

小结:

20180914221859339.png

 

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :