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、插入节点

方法	HTML 代码	jQuery 代码	结果
append()	Baby	$("p").append("Honey")	BabyHoney
appendTo()	Baby	$("Honey").appenTo("p")	BabyHoney
prepend()	Baby	$("p").prepend("Honey")	HoneyBaby
prependTo()	Baby	$("Honey").prependTo("p")	HoneyBaby
after()	Baby	$("p").after("Honey")	Baby Honey
insertAfter()	Baby	$("Honey").insertAfter("p")	Baby Honey
before()	Baby	$("p").before("Honey")	Honey Baby
insertBefore()	Baby	$("Honey").insertBefore("p")	Honey Baby

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

   1:  $("ul").append("
Baby
");//对新创建的节点进行插入；

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

4、删除节点

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

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

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

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

假设我们有如下 html 代码：

   1:  <ul>

   2:      <li>1</li>

   3:      <li>2</li>

   4:      <li>3</li>

   5:      <li>4</li>

   6:      <li>5</li>

   7:      <li>6</li>

   8:  </ul>

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

 

   1:  <ul>

   2:      <li></li>

   3:      <li>2</li>

   4:      <li></li>

   5:      <li>4</li>

   6:      <li></li>

   7:      <li>6</li>

   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>baby</i>

   2:  <i>baby</i>

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

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

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

结果如下：

   1:  <div><i>baby</i></div>

   2:  <div><i>baby</i></div>

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

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

结果如下：

   1:  <div>

   2:      <i>baby</i>

   3:      <i>baby</i>

   4:  </div>

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

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

 

结果如下：

   1:  <i><div>baby</div></i>

   2:  <i><div>baby</div></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>baby</strong></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>baby</p>

   2:  <i>lady</i>

调用下面代码：

   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。