jQuery进行DOM操作详解
介绍
DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面。
1、DOM Core
DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,用途也远不止仅限于网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML。
例如:document,getElementsByTagName("form");//使用DOM Core来获取表单对象的方法。
2、HTML-DOM
在使用Javascript和DOM为HTML文件编写脚本时,有许多属于HTML-DOM的属性,HTML-DOM的出现甚至比DOM Core还要早,他提供了一些更简明的记号来描述各种HTML元素的属性。
例如:document.forms //HTML-DOM提供了一个forms对象。
PS:可以看出,获取对象、属性即可以用DOM Core来实现民,也可以用HTML-DOM实现。
3、CSS-DOM
CSS-DOM是针对CSS的操作,在javascript中,CSS-DOM主要的作用是获取和设置style对象的各种属性,由此达到网页呈现出各种不同的效果.
例如:element.style.color="red";//设置某元素的字体颜色的方法。
为了能全面地讲解DOM操作,首先需要构建一个网页。因为每一张网页都能用DOM表示出来,而每一份DOM都可以看作一棵DOM树。HTML代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dom</title>
</head>
<body>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
</html>
接下来,对DOM的各种操作都将围绕这棵DOM树而展开。
一、查找节点
使用jQuery在文档树上查找节点非常容易,可以通过在第2章介绍的jQuery选择器来完成。
1.查找元素节点
获取元素节点并打印出它的文本内容,jQuery代码如下:
var $li = $("ul li:eq(1)"); // 获取第二个<li>元素节点
var li_txt = $li.text(); // 输出第二个<li>元素节点的text
alert(li_txt);
以上代码获取了
- 元素里第2个
- 节点,并将它的文本内容“橘子”打印出来。
2.查找属性节点
利用jQuery选择器查找到需要的元素之后,就可以使用attr()方法来获取它的各种属性的值。attr()方法的参数可以是一个,也可以是两个。当参数是一个时,则是要查询的属性的
名字,例如:获取属性节点并打印出它的文本内容,jQuery代码如下:
var $para = $("p"); // 获取<p>节点 var p_txt = $para.attr("title"); // 输出<p>元素节点属性title alert(p_txt);
以上代码获取了
节点,并将它的title属性的值设为“选择你最喜欢的水果.”打印出来。
二、创建节点
从第3.2.1小节可知,用jQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值。
真正的DOM操作并非这么简单。在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互的目的。
1.创建元素节点
例如要创建两个
- 元素节点,并且要把它们作为
- 元素节点的子节点添加到DOM节点树上。完成这个任务需要两个步骤。
- 新元素。
(2) 将这两个新元素插入文档中。
第(1)个步骤可以使用jQuery的工厂函数$()来完成,格式如下:
$(html);
$(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。
首先创建两个
- 元素,jQuery代码如下:
var $li_1 = $("<li></li>"); // 创建第一个<li>元素 var $li_2 = $("<li></li>"); // 创建第二个<li>元素
然后将这两个新元素插入文档中,可以使用jQuery中的append()等方法(将在第3.2.3小节进行介绍)。
jQuery代码如下:
var $parent = $("ul"); // 获取<ul>节点。<li>的父节点 $parent.append($li_1); // 添加到<ul>节点中,使之能在网页中显示 $parent.append($li_2); // 可以采取链式写法:$parent.append($li_1).append($li_2);
注意:
(1) 动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入文档中。
(2) 当创建单个元素时,要注意闭合标签和使用标准的XHTML格式。例如创建一个
元素,可以用$("
")或者$("
"),但不要使用$("")或者大写的$("
")。
运行代码后,新创建的
- 元素将被添加到网页中,因为暂时没有在它们内部添加任何文本,所以只能看到
- 元素默认的“.”。
2.创建文本节点
已经创建了两个
- 元素节点并把它们插入文档中了。此时需要为创建的元素节点添加文本内容。
jQuery代码如下:
var $li_1 = $("<li>香蕉</li>"); // 创建一个<li>元素,包括元素节点和文本节点 //“香蕉”就是创建的文本节点。 var $li_2 = $("<li>雪梨</li>"); // 创建一个<li>元素,包括元素节点和文本节点 //“雪梨”就是创建的文本节点。 var $parent = $("ul"); // 获取<ul>节点。<li>的父节点 $("ul").append($li_1); // 添加到<ul>节点中,使之能在网页中显示 $("ul").append($li_2); // 添加到<ul>节点中,使之能在网页中显示
如以上代码所示,创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用append()等方法将它们添加到文档中就可以了。注意:无论$(html)中的HTML代码多么复杂,都要使用相同的方式来创建。例如$("
- 这是一个复杂的组合 ");
(1) 创建两个
3.创建属性节点
创建属性节点与创建文本节点类似,也是直接在创建元素节点时一起创建。
jQuery代码如下:
var $li_1 = $("<li title='香蕉'>香蕉</li>"); //创建一个<li>元素 //包括元素节点,文本节点和属性节点 //其中title='香蕉' 就是创建的属性节点 var $li_2 = $("<li title='雪梨'>雪梨</li>"); //创建一个<li>元素 //包括元素节点,文本节点和属性节点 //其中title='雪梨' 就是创建的属性节点 var $parent = $("ul"); // 获取<ul>节点。<li>的父节点 $parent.append($li_1); // 添加到<ul>节点中,使之能在网页中显示 $parent.append($li_2); // 等价于:$parent.append($li_1).append($li_2);
运行代码后,效果一样。但事实上两者还是有差别的,通过浏览器查看源代码工具查看代码,可以看到最后两个
- 新元素。
- 元素多了名为“title”的属性节点。由此可以判断,创建的元素的文本节点和属性节点都已经添加到网页中了。
由此可见用jQuery来动态创建HTML元素是非常简单、方便和灵活的。
下面对上面的解释归纳一下
1.在元素内部插入DOM元素
①插入到元素内部原有元素之后
append(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery
为每一个匹配的元素内添加一些元素,参数既可以是字符串也可以是jQuery对象,如下:
$("#1").append("input type='button' value='确定'/>") 在1的内部元素的后面添加一个按钮
$("#1").append($(".class")[0]) 在1的内部元素的后面添加css类为class的元素集中的第一个元素
appendTo(content) 返回值:jQuery 参数-content:被插入的元素StringElement,jQuery
把所有匹配的元素添加到指定的元素内,参数既可以是字符串也可以是jQuery对象,如下:
$("#1").appendTo($("#2")) 在2的内部元素的后面添加1
②插入到元素内部原有元素之前
prepend(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery
prependTo(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery
它们分别与append(content)和appendTo(content)的用法一致,但区别是它们是在被插元素的内部元素之前插入元素
以上函数都只能匹配div等容器性质的元素,因为这些函数是为匹配元素内部添加元素,如一下给input添加元素会出错,因为input不能包含元素
$("input").append("ABC");
2.在元素外部插入DOM元素
①插入到元素外部之后
after(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery
为每一个匹配的元素后面添加一些元素,参数既可以是字符串也可以是jQuery对象
insertAfter(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery
把所有匹配的元素添加到指定的元素后面
$("#1").after($("#2")) 把2添加到1后面 $("#1").insertAfter($("#2")) 把1添加到2后面
②插入到元素外部之前
before(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery
insertBefore(content) 返回值:jQuery 参数-content:要插入的元素String,Element,jQuery
它们分别与after(content)和insertAfter(content)的用法一致,但区别是它们是在被插元素的外部之前插入元素
3.包裹DOM元素
①包裹外部元素
wrap(content) 返回值:jQuery 参数-content:包裹元素的元素Element,String,jQuery
为每一个匹配的元素外面包上一层元素
$(".1").wrap("#2") 为css类是1的元素外面包上2元素 $(".1").wrap("
") 包上wrapAll(content) 返回值:jQuery 参数-content:包裹元素的元素Element,String,jQuery
为所有匹配元素只在他们外面包裹一个元素
$(".1").wrapAll("
") 为所有css类是1的元素外面只包一层②包裹内部元素
wrapInner(content) 返回值:jQuery 参数-content:包裹元素的元素Element,String,jQuery
为每一个匹配元素内的所有子元素外部包一层元素
4.替换DOM元素
replaceAll(selector) 返回值:jQuery 参数-selector:被替换的元素Element,jQuery
用匹配的元素替换掉所有selector匹配的元素
$("#1").replaceAll(".class") 用1替换掉所有css类是class的元素
replaceWith(content) 返回值:jQuery 参数-content:用来替换的元素String,Element,jQuery
将所有匹配的元素用指定的HTML或DOM元素替换
$(".class").replaceWith("#1") 用1替换掉所有css类是class的元素
$(".class").replaceWith("
") 用div替换掉所有css类是class的元素5.删除DOM元素
empty() 返回值:jQuery 删除所有匹配元素的内容,只是内容,还剩架子
remove(expr) 返回值:jQuery 参数-expr:筛选元素的表达式String 删除所有匹配的DOM元素
6.克隆DOM元素
clone(true) 返回值:jQuery 参数-true:是否将被克隆的元素的所有事件也克隆到新的元素上
$("#1").clone(true).appendTo("#2")
将1连其绑定的事件一起克隆,然后将克隆的新元素添加到2元素的内部所有子元素之后