码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript--DOM操作

时间:2015-12-08 18:11:41      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:

1、jQuery中的DOM操作:

--DOM操作的分类:

  --1)DOM Core: DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它,它的用途并非仅限于处理网页,也可以用来处理任何一种标记语言编写    出来的文档,如XML文档;

  --2)HTML DOM:使用JavaScript和DOM为HTML文件编写脚本时,有许多专属于HTML-DOM的属性;

  --3)CSS-DOM: 针对CSS的操作,在JavaScript中,CSS-DOM主要用于获取和设置style对象的各种属性。

2、创建及插入节点:

--创建节点:使用jQuery的工厂函数 $():$(html); 会根据传入的html标记字符串创建一个DOM对象,并把这个DOM对象包装成一个jQuery对象返回;

--动态创建的新元素不会被自动自动添加到文档当中,而需要使用给定的方法将其插入;

--当创建单个元素时,需注意闭合标签和使用标准的XHTML格式。例如创建一个<P>元素,可以使用 $("<p/>") 或 $("<p></p>"), 但不能直接使用 $("<p>");

--创建文本节点就是在创建元素节点时直接把文本内容写出来;创建属性节点也是在创建元素节点时一起创建。

--插入节点的方法一:

技术分享

--插入节点方法二:

技术分享

--以上方法不但能将新创建的DOM元素插入到文档中,也能对原有的DOM元素进行移动。

3、删除节点:

--1)remove():从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式来筛选元素,当某个节点用remove方法删除后,该节点所包含的所有后代节点(子节点)将被删除,该方法的返回值是一个指向已被删除的节点的引用;

--2)empty():清空节点-清空元素中的所有后代节点(不含属性节点)。

4、克隆和替换子节点:

--复制节点 clone():克隆匹配的DOM元素,返回值为克隆后的副本,但此时复制的新节点不具有任何行为;clone(true):复制元素的同时也复制元素中的事件;

--替换节点 replaceWith():将所有匹配的元素都替换为指定的HTML或DOM元素;

--replaceAll():颠倒了的 replaceWith() 方法;

--若在替换之前,已经在元素上绑定了事件,替换后原先绑定的事件会与原先的元素一起消失;

5、包裹节点:

--wrap() : 将指定节点用其他标记包裹起来,该方法对于需要在文档中插入额外的结构化标记非常有用,而且不会破坏原始文档的语义;

--wtapAll() : 将所有匹配的元素用一个元素来包裹。而 wrap() 方法是将所有的元素进行单独包裹;

--wrapInner() : 将每一个匹配的元素的之内容(包括文本节点)用其他结构化标记包裹起来。

6、属性操作:

--attr() : 获取属性和设置属性--当只传入一个参数时,即为获取指定属性;传入两个参数时,即为指定属性设置属性值;

--jQuery 中的很多方法都是一个函数实现获取和设置,如attr()、html()、text()、val()、height()、width()、css()等;

--removeAttr() : 删除指定元素的指定属性;

7、jQuery方法:

--1)html() : 读取和设置某个元素中的HTML内容;该方法可以用于XHTML,但不能用于XML文档;

--2)text() : 读取和设置某个元素的文本内容;该方法既可以用于XHTML也可以用于XML文档;

--3)val() : 读取和设置某个元素的value属性。注:val()可以获取所有selected的值,但是只能获取第一个checked的值;

JavaScript--DOM操作

标签:

原文地址:http://www.cnblogs.com/tengtao93/p/5026596.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!