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节点树上。完成这个任务需要两个步骤。

      (1) 创建两个

    • 新元素。

      (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代码多么复杂,都要使用相同的方式来创建。例如$("

    • 这是一个复杂的组合
    • ");

      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元素的内部所有子元素之后