超详细的 JQuery 的 DOM 操作，一篇就足够！

华为云开发者社区

关注

发布于: 2021 年 05 月 25 日

摘要：今天来和大家分享有关 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 属性值//<i

//<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():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

点击关注，第一时间了解华为云新鲜技术~

发布于: 2021 年 05 月 25 日阅读数: 197

原文链接:【http://xie.infoq.cn/article/671b9b374c49acaf7bee5015a】。文章转载请联系作者。

华为云开发者社区

关注

提供全面深入的云计算技术干货 2020.07.14 加入

华为云开发者社区，提供全面深入的云计算前景分析、丰富的技术干货、程序样例，分享华为云前沿资讯动态，方便开发者快速成长与发展，欢迎提问、互动，多方位了解云计算！传送门：https://bbs.huaweicloud.com/

发布

暂无评论

创作场景

超详细的 JQuery 的 DOM 操作，一篇就足够！

1. html()

2. text()

3. val()

二、属性操作

（1）通用属性操作

1. attr():

2. removeAttr()

3. prop()

4. removeProp()

5.attr 和 prop 区别

（2）对 class 属性操作

1. addClass()

2. removeClass()

3. toggleClass()

4. css()

三、CRUD 操作

1. append()

2. prepend()

3. appendTo()

4. prependTo()

5. after()

6. before()

7. insertAfter()

8. insertBefore()

9. remove()

10. empty()

华为云开发者社区

评论