jQuery进行DOM操作详解

泡在网上的日子 / 文 发表于2012-05-26 12:51 次阅读 jQuery

 介绍

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); 

以上代码获取了<ul>元素里第2个<li>节点,并将它的文本内容“橘子”打印出来。

2.查找属性节点

利用jQuery选择器查找到需要的元素之后,就可以使用attr()方法来获取它的各种属性的值。attr()方法的参数可以是一个,也可以是两个。当参数是一个时,则是要查询的属性的
名字,例如:

获取属性节点并打印出它的文本内容,jQuery代码如下:

var $para = $("p");          // 获取<p>节点    
var p_txt = $para.attr("title"); // 输出<p>元素节点属性title    
alert(p_txt); 

以上代码获取了<p>节点,并将它的title属性的值设为“选择你最喜欢的水果.”打印出来。

二、创建节点

从第3.2.1小节可知,用jQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值。

真正的DOM操作并非这么简单。在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互的目的。

1.创建元素节点

例如要创建两个<li>元素节点,并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。完成这个任务需要两个步骤。

(1) 创建两个<li>新元素。

(2) 将这两个新元素插入文档中。

第(1)个步骤可以使用jQuery的工厂函数$()来完成,格式如下:

$(html); 

$(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。

首先创建两个<li>元素,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格式。例如创建一个<p>元素,可以用$("<p/>")或者$("<p></p>"),但不要使用$("<p>")或者大写的$("<P/>")。

运行代码后,新创建的<li>元素将被添加到网页中,因为暂时没有在它们内部添加任何文本,所以只能看到<li>元素默认的“.”。

2.创建文本节点

已经创建了两个<li>元素节点并把它们插入文档中了。此时需要为创建的元素节点添加文本内容。

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代码多么复杂,都要使用相同的方式来创建。例如$("<li><em>这是</em><b>一个</b><a href="#">复杂的组合</a></li>");

 

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); 

运行代码后,效果一样。但事实上两者还是有差别的,通过浏览器查看源代码工具查看代码,可以看到最后两个<li>元素多了名为“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("<div class='3'></div>") 包上<div>

wrapAll(content) 返回值:jQuery 参数-content:包裹元素的元素Element,String,jQuery

为所有匹配元素在他们外面包裹一个元素

$(".1").wrapAll("<div class='3'></div>") 为所有css类是1的元素外面只包一层<div>

②包裹内部元素

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 class='3'></div>") 用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元素的内部所有子元素之后

 

收藏 赞 (0) 踩 (0)
上一篇:ExtJs表格控件Grid的使用
EXT中的表格功能非常强大,包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等使用功能。 我们首先介绍如何制作一个简单的Grid。 1、创建表格的列信息: var cm=new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'
下一篇:关于language = "JavaScript" type="JavaScript"的区别
script language = "JavaScript" script type="text/javascript" script 这三个标签的使用有什么区别? 虽然一直在用,却也没有好好去弄清楚,这里详细说明一下。 查阅一些资料,主要是浏览器支持问题。type 和 language 属性都可用来指定 script 标签中的脚