jQuery 的 DOM操作。

jQuery 中的 DOM 操作包含查找节点、创建节点、插入节点、删除节点、复制节点、替换节点、包裹节点、属性操作、样式操作、设置和获取 HTML 文本和值、遍历节点。

1、查找节点

1.1 查找元素节点

查找元素节点就是通过选择器选取节点：

   1:  var $li = $("ul li:eq(22)");

1.2 查找属性节点

在 jQuery 中查找到元素节点后就可以利用 attr() 方法获取节点的属性了：

   1:  var $para = $("p");

   2:  var p_text = $para.attr("tittle");

2、创建节点

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

2.1 创建元素节点

   1:  var $li = $("

创建的节点作为参数通过 appen() 方法插入文档中：

   1:  $("ul").appen($li);

2.2 创建属性节点

创建属性节点合创建元素节点一样，只需要将属性写在 html 语句中即可：   Honey

   1:  var $li = $("");

3、插入节点

插入节点的节点对象既可以是新创建的节点元素，也可以是从文档中选取的节点元素：

   1:  $("ul").append("

");//对新创建的节点进行插入；

   2:  $("ul").append($(".cc")); //对已有的节点进行插入（即移动原节点）；

4、删除节点

首先通过 $(html) 查找节点，然后调用 remove() 方法删除节点：

   1:  $("ul li:even").remove();

此外我们还可以通过调用 empty() 方法清空节点：

   1:  $("ul li:even").empty();

假设我们有如下 html 代码：

   1:  <ul>

   2:      <li>1li>

   3:      <li>2li>

   4:      <li>3li>

   5:      <li>4li>

   6:      <li>5li>

   7:      <li>6li>

   8:  ul>

在 $(“ul li:even”).empty() 代码作用后，通过 firebug 查看代码如下：

   1:  <ul>

   2:      <li>li>

   3:      <li>2li>

   4:      <li>li>

   5:      <li>4li>

   6:      <li>li>

   7:      <li>6li>

   8:  ul>

可见 empty() 方法清空了

• 标签内的内容。 
  

  5、复制节点

  复制节点可以调用 clone() 方法：

     1:  $("ul li").clone().appenTo("ul");

  复制节点还有一个 clone(true) 方法：

     1:   $("ul li").clone(true).appenTo("ul");

  带有参数 true 的方法意味着复制出来的节点同时包含了元节点所绑定的事件，不带参数的仅仅是复制节点而已，不包含事件。

  6、替换节点

  替换节点也有两个方法，分别是 replaceWith() 和 replaceAll() ，replaceWith () 是调用者替换成参数，而 replaceAll() 是将参数替换成调用者：

     1:  $("p").raplaceWith("baby");

     2:  $("baby").replaceAll("p");

  上面的两句代码等价，都是将

  标签换成 baby。

  7、包裹节点

  有如下 html ：

     1:  <i>babyi>

     2:  <i>babyi>

  执行包裹节点有三个方法 wrap()、 wrapAll() 和 wrapInner()。

  a、当使用 wrap() 方法时候：

     1:  $("i").wrap("

  ");

  结果如下：

     1:  <div><i>babyi>div>

     2:  <div><i>babyi>div>

  b、当使用 wrapAll() 方法时候：

     1:   $("i").wrapAll("

  ");

  结果如下：

     1:  <div>

     2:      <i>babyi>

     3:      <i>babyi>

     4:  div>

  c、当使用 wrapInner() 方法时候：

     1:  $("i").wrapInner("

  ");

  结果如下：

     1:  <i><div>babydiv>i>

     2:  <i><div>babydiv>i>

   

  8、属性操作

  8.1 获取属性

  就和查找属性节点一样，通过同样的方式获取属性：

     1:  var $para = $("p");

     2:  var p_text = $para.attr("title");

   

  
  

  8.2 设置属性

  如果想设置属性，我们可以通过下面的代码：

     1:  $("p").attr("title","baby");

  两个参数分别问属性名称和属性值。

  若要一次性的设置多个属性的话，我们采用以下代码：

     1:  $("p").attr({"title":"baby","id"："honey","class":"banana"});

  8.3 删除属性

  删除属性我们使用 removeAttr() 方法：

     1:  $("p").removeAttr("title");

  9、样式操作

  9.1 获取样式

  样式是标签的 class 属性，所以我们可以通过获取 class 属性来获取样式：

     1:  var $p _class = $("p").attr("class");

  9.2 设置样式

  还是通过 attr() 方法来设置 class 属性，即设置样式：

     1:  $("p").attr("class","highlight");

  注意在设置样式的时候的 class 属性的值，即 highlight 不需要带 “.” 了。

  9.3 追加样式

  追加样式是在原有的样式基础上再添加一个样式，可以通过 addClass() 方法实现：

     1:  $("div").addClass("highlight");

  9.4 移除样式

  当我们不需要此样式的时候，需要移除样式，但移除样式不等同于移除 class 属性：

     1:  $("p").removeClass("highlight");

  当需要一次移除多个样式的时候，我们可以通过下面方法：

     1:  $("p").removeClass("highlight").removeClass("hot");

  或者

     1:  $("p").removeClass("highlight hot");

  有时候我们需要一次的移除所有属性，此时我们可以调用不带参数的 removeClass() 方法移除所有样式：

     1:  $("p").removeClass();

  9.5 切换样式

  切换样式我们可以使用一个简单的方法 toggle() 来实现：

     1:  $("#baby").toggle(

     2:      function(){

     3:          $("div").attr("class","highlight");

     4:      },function(){

     5:          $("div").attr("class","hot");

     6:      }

     7:  );

  toggle() 方法就是在几个 function 之间不停的切换。

  jQuery 还提供了一个更为简单的切换样式的方法 toggleClass() ：

     1:  $("#baby").click(function(){

     2:      $("div").toggleClass("highlight");

     3:  });

  toggleClass() 就是检查 $(“div”) 是不是已有 highlight 样式，如果有则将样式移去，若果没有则将样式加上。

  9.6 判断是否含有某个样式

  判断是否含有某个样式可以通过 hasClass() 方法，如果含有则返回 true，没有则返回 false：

     1:  $("p").hasClass("highlight");

  10、设置和获取 html 、文本和值

  10.1 html() 方法

  html() 方法用于获取或设置某个元素中的 html 内容。

  假设用如下 html 内容：

     1:  <p><stong>babystrong>p>

  通过下面的代码可以得到元素内部的 html 代码：

     1:  $("p").html();

  通过下面的代码可以设置

  元素内部的 html 代码：

     1:  $("p").html("honey");

  10.2 text() 方法

  text() 方法和 html() 方法相似，可以取出或设置某个元素的文本内容：

     1:  var $p_text = $("p").text();

     2:  $("ul li").text($p_text);

  10.3 val() 方法

  val() 方法的作用也和上面的方法类似，可以取出或设置某个元素的值：

     1:  var $baby_val = $("#baby").val();

     2:  $("#honey").val($baby_val);

  此外，val() 方法还可以改变单选和多选的默认选项：

     1:  $("#single").val("baby");

     2:  $("#multi").val(["baby","lady"]);//以数组形式赋值；

  11、遍历节点

  11.1 children() 方法

  children() 方法是用来获取某元素的直接子元素集合的，不包含子元素的子元素：

     1:  $("ul").children("li").slideDown("slow");

  11.2 next() 方法

  next() 方法用于获取下一个同辈元素：

  有如下 html ：

     1:  <p>babyp>

     2:  <i>ladyi>

  调用下面代码：

     1:  $("p").next();

  即可得到元素 lady 。

  11.3 prev() 方法

  prev() 方法和 next() 方法相反，prev() 方法用于获取上一个同辈元素，不演示了。

  11.4 siblings() 方法

  siblings() 方法用于获取某元素的前后的所有同辈元素集合。

  遍历节点还有很多方法，jQuery 文档是个很好的参考。

  —EOF—

  DOM (Document Object Model) 分为 DOM Core 、HTML-DOM 和 CSS-DOM。