乐趣区

关于jquery:超详细的jQuery的-DOM操作一篇就足够

jiezi

摘要： 明天来和大家分享无关 jQuery 框架中 DOM 操作的相干技术，又是一个堪称 DOM“全家桶”系列的解说，倡议珍藏关注认真学习！

本文分享自华为云社区《【JQuery 框架】超具体 DOM 操作看这一篇就够了！》，原文作者：灰小猿。

明天来和大家分享无关 jQuery 框架中 DOM 操作的相干技术， 又是一个堪称 DOM“全家桶”系列的解说，倡议珍藏关注认真学习！

一、内容操作

在进行内容操作时，对于设置和获取元素的内容应用同一个函数进行操作，设置元素内容时间接在函数中传入参数即可。

1. html()

作用： 获取 / 设置元素的标签体内容 

// 获取 mydiv 的标签体内容
var divValue = $("#mydiv").html()

// 设置 mydiv 的标签体内容
var divValue = $("#mydiv").html(“你好”)

2. text()

作用： 获取 / 设置元素的标签体纯文本内容 

// 获取 mydiv 文本内容
var divText = $("#mydiv").text()

// 设置 mydiv 文本内容
var divText = $("#mydiv").text(“你好”)

3. val()

作用： 获取 / 设置元素的 value 属性值 

// 获取 myinput 的 value 值
var value = $("#myinput").val()

// 设置 myinput 的 value 值
var value = $("#myinput").val(“你好”)

对于上述代码的理论演示如下：

<!DOCTYPE html>
<html>
        <head>
               <meta charset="UTF-8">
               <title></title>
               <script  src="../js/jquery-3.3.1.min.js"></script>
               <script>
                       
                       $(function (){
                               // 获取 myinput 的 value 值
                               var value = $("#myinput").val()
                               // alert(value);

                               // 获取 mydiv 的标签体内容
                               var divValue = $("#mydiv").html()
                               alert(divValue);

                               // 获取 mydiv 文本内容
                               var divText = $("#mydiv").text()
                               // alert(divText)
                       });
               </script>
               
        </head>
        <body>
               <input id="myinput" type="text" name="username" value="张三" /><br />
               <div id="mydiv"><p><a href="#"> 题目标签 </a></p></div>
        </body>
</html>

二、属性操作

（1）通用属性操作

1. attr():

作用： 获取 / 设置元素的属性 

// 获取北京节点的 name 属性值
var bj = $("#bj").attr("name");
alert(bj);
// 设置北京节点的 name 属性的值为 dabeijing
$("#bj").attr("name", "dabeijing");
// 新增北京节点的 discription 属性 属性值是 didu
$("#bj").attr("discription", "didu");
// 删除北京节点的 name 属性并测验 name 属性是否存在

2. removeAttr()

作用： 删除属性 

// 删除北京节点的 name 属性并测验 name 属性是否存在
$("#bj").removeAttr("name");

3. prop()

作用： 获取 / 设置元素的属性 

// 取得 hobby 的的选中状态
var hobby_type = $("#hobby").prop("checkbox");

4. removeProp()

作用： 删除属性 

// 删除 hobby 的 CheckBox 属性
var hobby_type = $("#hobby").removeProp("checkbox");

5.attr 和 prop 区别

  1. 如果操作的是元素的固有属性，则倡议应用 prop
  2. 如果操作的是元素自定义的属性，则倡议应用 attr

（2）对 class 属性操作

1. addClass()

作用： 增加 class 属性值 

//<input type="button" value="addClass"  id="b2"/>
// 给 one 标签减少属性
$("#b2").click(function () {$("#one").addClass("second");
});

2. removeClass()

作用： 删除 class 属性值 //<input type=

//<input type="button" value="removeClass"  id="b3"/>
// 删除 one 标签的 class 属性
$("#b3").click(function () {$("#one").removeClass("second");
});

3. toggleClass()

作用： 切换 class 属性 

//<input type="button" value="切换款式"  id="b4"/>
// 为 one 标签的 class 款式进行切换，有 class 属性就删除，没有就增加
$("#b4").click(function () {$("#one").toggleClass("second");
});

在这里对该函数做一个具体的介绍：

如 toggleClass(“one”):

  • 判断如果元素对象上存在 class=”one”，则将属性值 one 删除掉。如果元素对象上不存在 class=”one”，则增加

4. css()

作用： 批改元素属性 

//<input type="button" value="通过 css() 取得 id 为 one 背景色彩"  id="b5"/>
$("#b5").click(function () {var backgroundColor = $("#one").css("backgroundColor");
   alert(backgroundColor);
});

//<input type="button" value="通过 css() 设置 id 为 one 背景色彩为绿色"  id="b6"/>
$("#b6").click(function () {$("#one").css("backgroundColor","green")
});

三、CRUD 操作

1. append()

作用：父元素将子元素追加到开端

样例：对象 1.append(对象 2): 将对象 2 增加到对象 1 元素外部，并且在开端

2. prepend()

作用：父元素将子元素追加到结尾

样例：对象 1.prepend(对象 2): 将对象 2 增加到对象 1 元素外部，并且在结尾

3. appendTo()

样例：对象 1.appendTo(对象 2): 将对象 1 增加到对象 2 外部，并且在开端

4. prependTo()

样例：对象 1.prependTo(对象 2): 将对象 1 增加到对象 2 外部，并且在结尾

5. after()

作用：增加元素到元素后边

样例：对象 1.after(对象 2)：将对象 2 增加到对象 1 后边。对象 1 和对象 2 是兄弟关系

6. before()

作用：增加元素到元素前边

样例：对象 1.before(对象 2)：将对象 2 增加到对象 1 前边。对象 1 和对象 2 是兄弟关系

7. insertAfter()

样例：对象 1.insertAfter(对象 2)：将对象 1 增加到对象 2 后边。对象 1 和对象 2 是兄弟关系

8. insertBefore()

样例：对象 1.insertBefore(对象 2)：将对象 1 增加到对象 2 前边。对象 1 和对象 2 是兄弟关系

9. remove()

作用：移除元素

样例：对象.remove(): 将对象删除掉

10. empty()

作用：清空元素的所有后辈元素。

样例：对象.empty(): 将对象的后辈元素全副清空，然而保留以后对象以及其属性节点

点击关注，第一工夫理解华为云陈腐技术~

退出移动版