jQuery 的 DOM操作

最新推荐文章于 2024-08-12 20:21:42 发布

mzule

最新推荐文章于 2024-08-12 20:21:42 发布

阅读量1.1k

点赞数

分类专栏： jQuery 文章标签： jquery html class div c function

本文链接：https://blog.csdn.net/mzule/article/details/6193796

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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。

mzule

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 的 DOM操作

jQuery 中的 DOM 操作包含查找节点、创建节点、插入节点、删除节点、复制节点、替换节点、包裹节点、属性操作、样式操作、设置和获取 HTML 文本和值、遍历节点。 1、查找节点 1.1 查找元素节点查找元素节点就是通过选择器选取节点： 1: var $li = $("ul li:eq(22)");.csharpcode, .csharpcode pre{ font-size: small;
复制链接

扫一扫