详解Jquery中DOM操作

jopen 11年前

Jquery中的DOM操作

为了能全面的讲解DOM操作，首先需要构建一个网页。

HTML代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  <%  String path = request.getContextPath();  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  %>     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html>    <head>       </head>        <body>    <p title="选择你最喜欢的水果。">你最喜欢的水果是？</p>    <ul>     <li title='苹果'>苹果</li>     <li title='橘子'>橘子</li>     <li title='菠萝'>菠萝</li>    </ul>    </body>  </html>

n 节点操作：

一、查找节点

1、查找元素节点

获取元素节点并打印它的文本内容，jQery代码如下：

var li_txt=$("ul li:eq(1)").text();//获取<ul>里第二个<li>节点的文本内容      alert(li_txt);//结果为橘子

2、查找属性节点

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

获取属性节点并打印它的文本内容：

var p_txt=$("p").attr("title");//获取<p>元素节点属性title      alert(p_txt);//结果为  选择你最喜欢吃的水果

二、创建节点

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

1、创建元素节点

如果要创建两个<li>元素节点，并要把他们作为<ul>元素节点的子节点添加到DOM节点树上。则需要：

（1）创建<li>新元素

（2）将新元素插入到文档中

首先创建<li>元素：  var $li_1=$("<li></li>");//创建<li>元素  然后使用jQuery中的append等方法将新元素插入文档中  $("ul").append($li_1);//添加到<ul>节点中，使之能在网页中显示

注意：

1、动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中

2、当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。

2、创建文本节点

创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append()等方法将它们添加到文档中就可以。

var $li_1=$("<li>香蕉</li>");//创建一个<li>元素，"香蕉"就是创建的文本节点  $("ul").append($li_1);//添加到<ul>节点中，使之能在网页中显示

注意：无论$(html)中的HTML代码多么复杂，都要使用相同的方式来创建。

例如：$(“<li>这是一个<a href=”#”>复杂的组合</a></li>”)

3、创建属性节点

创建属性节点与创建文本节点类似：

var $li_1=$("<li title='香蕉'>香蕉</li>");//创建一个<li>元素，title="香蕉"就是创建的title="香蕉属性节点       $("ul").append($li_1);//添加到<ul>节点中，使之能在网页中显示

三、插入节点

append()

向每个匹配的元素内部追加内容：

HTML代码：  <p>我想说：</p>  jQuery代码：  $("p").append("<b>你好</b>");  结果：  <p>我想说：<b>你好</b></p>

appendTo()

将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中：

HTML代码：

<p>我想说：</p>

jQuer代码：

$("<b>你好</b>").appendTo("p");

结果：

我想说：你好

prepend()

向每个匹配的元素内部前置内容：

HTML代码：

<p>我想说：</p>

jQuer代码：

$("p").prepend<"<b>你好</b>");

结果：

你好我想说：

prependTo()

将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中：

HTML代码：

<p>我想说：</p>

jQuer代码：

$("<b>你好</b>").prependTo("p");

结果：

你好我想说：

after()

在每个匹配的元索之后插入内容：

HTML代码：

<p>我想说：</p>

jQuer代码：

$("p").after("<b>你好</b>");

结果：

我想说：你好

insertAfler()

将所有匹配的元素插入到指定元素的后面。实际上，使用该方法是颠倒了常规的$(A).after(B)的操作，即不是将B插入到A后面，而是将A插入到B后面：

HTML代码：

<p>我想说：</p>

jQuer代码：

$("<b>你好</b>").insertAfter("p");

结果：

我想说：你好

before()

在每个匹配的元素之前插入内容：

HTML代码：

<p>我想说：</p>

jQuer代码：

$("p").before("<b>你好</b>");

结果：

你好我想说：

insertBefore()

将所有匹配的元素捅入到指定的元素的前面。实际上，使用该方法是颠倒了常规的$(A).before(B)的操作，即不是将B插入到A前面，而是将A插入到B前面：

HTML代码：

<p>我想说：</p>

jQuer代码：

$("<b>你好</b>").insertBefore("p");

结果：

你好我想说：

这些插入节点的方法不仅能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动。例如利用它们创建新元素并对其进行插入操作：

$(function(){  var $li_1 = $("<li title='新增节点：数据结构'>新增节点：数据结构</li>");    //  创建第一个<li>元素  var $li_2 = $("<li title='新增节点：设计模式'>新增节点：设计模式</li>");    //  创建第二个<li>元素  var $li_3 = $("<li title='新增节点：计算机算法'>新增节点：计算机算法</li>"); //  创建第三个<li>元素     var $parent = $(".nm_ul");  // 获取<ul>节点。<li>的父节点  var $two_li = $(".nm_ul li:eq(1)"); //  获取<ul>节点中第二个<li>元素节点  $("#btn_1").click(function(){  $parent.append($li_1);     // 添加到<ul>节点中，使之能在网页中显示  });  $("#btn_2").click(function(){  // 可以采取链式写法：$parent.append($li_1).append($li_2);  $parent.append($li_2);       });  $("#btn_3").click(function(){  //  insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后  $li_3.insertAfter($two_li);      });  });

也利用它们对原有的DOM元素进行移动：

$(function(){  var $one_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点  var $two_li = $("ul li:eq(2)"); // 获取<ul>节点中第三个<li>元素节点  $two_li.insertBefore($one_li); //移动节点  });

四、删除节点

1、Remove

$("ul li:eq(1)").remove();//获取第2个<li>元素节点后，将它从网页中删除

这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

$("ul li").remove("li[title!=菠萝]");

2、Empty

严格来讲，empty()方法并不是删除元素，而是清空节点，它能清空元素中所有的后代节点。

$("ul li:eq(1)").empty();//获取第2个<li>元素节点后清空此元素里的内容，注意是元素里

五、复制节点

复制实现了节点重用，而不用另外新建，复制的时候可以一并复制节点上面的行为(也就是绑在它上面的事件),也可以只复制节点，分别使用clone(true)和clone()
例如：

    $("ul li").click(function(){          $(this).clone().appendTo("ul")//复制当前的li单击节点，并将其最加到ul元素下      })

六、替换节点
  替换是将已经存在的节点替换成其他的，使用的方法有replaceWith()，replaceAll()
   replaceWith():XX用XXX替换掉
   replaceAll()：那XXX替换所有的XX
七、包裹节点
  包裹节点的意思就是将某个或者是符合条件的一组节点用其他的标记包裹起来，在jquery中使用wrap()
   例如：

    $("strong").wrap("<b></b>");//使用b标签把strong元素包裹起来

包裹的方法还有wrapAll(),wrapInner()
 wrapAll：将所有匹配的元素用一个元素来包裹<与wrap的不同是，wrap对每个符和条件的元素都进行包裹，而wrapAll不是>
 wrapInner：将每个匹配的元素的子内容进行包裹
 $("strong").wrapInner("");//strong元素的子元素被b标签包

n 属性操作：

1、.获取和设置属性

var $var_1=$("p");//这句话是获取节点P   var $p_1=$var_1.attr("title");//获取节点P的title属性  var $p_2=$var_1.attr("title","你好");//设置节点P的title属性为"你好"

2、.删除属性

$("p").removeAttr("title");//删除节点P的Title属性

n 样式操作：

1.获取和设置样式

var $var_class=$("p").attr("class");//获取节点P的class属性

$("p").attr("class","class1");设置节点P的class属性为样式表类class1

2.追加样式

addClass() 添加样式到A

例子：$("p").addClass("another");添加样式表类another类到P

3.移除样式

removeClass() 移除类

4.切换样式

toggleClass() 切换clss属性类为新的类

5.判断某个样式是否存在

hasClass()

n 内容操作：

html() 该方法获取html元素的内容，如：var var1=$("p").html();//获取P元素内的内容

text() 获取或设置某个html元素的内容

val() 获取元素的Value值

children() 获取html元素的所有子节点

next() 获取html元素后紧邻的同辈节点

prev() 获取html元素前紧邻的同辈节点

siblings() 获取html元素前后紧邻的同辈节点

n CSS-DOM技术：

$("p").css("color");//获取颜色属性

$("p").css("color","red");//设置颜色

$("p").css({"fontSize"："30px"，”backgroundColor“：”#888888“});//同时设置多个样式。

有两个注意点：

(1)如果值是数字，将会被自动转化为像素值。

(2)在css()方法中，如果属性中带有”-“符号，例如font-size和background-color属性，用驼峰式写法。

hight().width();

offset() .left .top 获取元素在当前视窗的偏移量，返回值对象包含两个属性left和top。

position() .left .top 获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的偏移量。

scrollTop() 、scrollLeft()方法。分别获取元素的滚动条距顶端的距离和距左侧的距离。也可以设置值。scrollTop(300)

来自：http://blog.csdn.net/u011955534/article/details/16373481

详解Jquery中DOM操作

相关经验

目录