讲给后台程序员看的前端系列教程(59)——jQuery DOM操作

最新推荐文章于 2019-10-23 10:25:44 发布
最新推荐文章于 2019-10-23 10:25:44 发布
阅读量702 收藏 3
点赞数
分类专栏： 讲给后台程序员看的前端系列教程 文章标签： jQuery DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lfdfhl/article/details/102669755
版权

C语言自学完备手册(33篇)

Android多分辨率适配框架

JavaWeb核心技术系列教程

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

  • 本文原创作者：谷哥的小弟
  • 作者博客地址：http://blog.csdn.net/lfdfhl

在本节教程中，我们重点关注jQuery中的DOM操作。

获取和设置元素内容

常用方法及其作用如下:

html( )
获取和设置元素的标签体内容并保留原格式。

text( )
获取和设置元素的标签体纯文本内容。

val( )
获取和设置元素的value属性值。

示 例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>获取和设置元素内容</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				//获取input元素value属性的值
				var value=$("#inputid").val();
				console.log("value="+value);
				//设置input标签value属性的值
				$("#inputid").val("tom");
				value=$("#inputid").val();
				console.log("value="+value);
				
				//获取div元素内容
				var htmlContext=$("#divid").html();
				console.log("htmlContext="+htmlContext);
				//设置div元素内容
				$("#divid").html("<p>hello jQuery</p>");
				htmlContext=$("#divid").html();
				console.log("htmlContext="+htmlContext);
				
				//获取div元素纯文本
				var textContext=$("#divid").text();
				console.log("textContext="+textContext);
				//设置div元素纯文本
				$("#divid").text("bye JavaScript");
				textContext=$("#divid").text();
				console.log("textContext="+textContext);
			});
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
		<input id="inputid" type="text" name="username" value="lucy" /><br />
		<div id="divid"><p><a href="#">内容</a></p></div>
	</body>
</html>

在这里插入图片描述

操作元素属性

关于操作元素属性，我们分为两部分讲解：先学习对于通用属性的操作再学习对于class属性的操作

操作元素通用属性

常用方法及其作用如下：

attr( )
获取和设置元素的属性

removeAttr( )
删除元素属性

prop( )
获取和设置元素的属性

removeProp( )
删除元素属性

attr( )和removeAttr( )与prop( )和removeProp( )的区别

  • 操作元素的HTML原始自带属性时建议使用prop( )和removeProp( )
  • 操作元素的自定义属性时建议使用attr( )和removeAttr( )

示 例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>操作元素通用属性</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				//获取bj节点的cityname属性的值
				var citynameValue = $("#bj").attr("cityname");
				console.log("citynameValue=" + citynameValue);
				//设置bj节点的cityname属性的值
				$("#bj").attr("cityname", "capital");
				citynameValue = $("#bj").attr("cityname");
				console.log("citynameValue=" + citynameValue);
				//为bj节点新增discription属性,属性值是beautiful city
				$("#bj").attr("discription", "beautiful city");
				var discriptionValue = $("#bj").attr("discription");
				console.log("discriptionValue=" + discriptionValue);
				//删除bj节点的discription属性
				$("#bj").removeAttr("discription");

				//获得agree节点的HTML自带属性checked
				var isChecked = $("#agree").prop("checked");
				console.log("isChecked=" + isChecked);
				//设置agree节点的HTML自带属性checked
				$("#agree").prop("checked", "true");
				isChecked = $("#agree").prop("checked");
				console.log("isChecked=" + isChecked);
			});
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
		<ul>
			<li id="bj" cityname="beijing">北京</li>
			<li id="cd" cityname="chengdu">成都</li>
		</ul>
		<input id="agree" type="checkbox" /> Yes , I agree

	</body>
</html>

在这里插入图片描述

操作元素class属性

常用方法及其作用如下：

addClass( )
为元素添加class属性

removeClass( )
删除元素的class属性值

toggleClass( )
切换元素的class属性。调用该方法后如果元素本身存在class属性则将其移出，如果元素本身不存在class属性则添加。

示 例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>操作元素class属性</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				margin: 20px;
				background: #9999CC;
				border: #000 1px solid;
				float: left;
				font-size: 17px;
				font-family: Roman;
			}

			.divstyle{
				width: 300px;
			    height: 300px;
			    margin: 20px;
			    background: yellow;
			    border: pink 3px dotted;
				float:left;
			    font-size: 22px;
			    font-family:Roman;
			}
		</style>

		<script type="text/javascript">
			$(function() {
				$("#firstButton").click(function () {
					$("#one").prop("class","divstyle");
				});
				$("#secondButton").click(function () {
					$("#one").addClass("divstyle");
				});
				$("#thirdButton").click(function () {
					$("#one").removeClass("divstyle");
				});
				$("#fourthButton").click(function () {
					$("#one").toggleClass("divstyle");
				});
				$("#fifthButton").click(function () {
					var backgroundColorValue = $("#one").css("backgroundColor");
					alert("backgroundColorValue="+backgroundColorValue);
				});
				$("#sixthButton").click(function () {
					$("#one").css("backgroundColor","red");
				});
				
			});
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
		<input type="button" value="通过prop()添加属性为id为one的元素增加样式" id="firstButton" />
		<br />
		<input type="button" value="通过addClass()添加属性为id为one的元素增加样式" id="secondButton" />
		<br />
		<input type="button" value="通过removeClass()移出id为one的元素的样式" id="thirdButton" />
		<br />
		<input type="button" value="通过toggleClass()切换id为one的元素的样式" id="fourthButton" />
		<br />
		<input type="button" value="通过css()获得id为one背景颜色" id="fifthButton" />
		<br />
		<input type="button" value="通过css()设置id为one背景颜色为红色" id="sixthButton" />
		<br /><br />
		<div id="one" title="title1">
			id为one的div
		</div>
	</body>
</html>

在这里插入图片描述

DOM常见操作

常用方法及其作用如下：

append( )
父元素将子元素追加至自身末尾。

例如：A.append(B)

<A>
	....
	<B></B>
<A>

prepend( )
父元素将子元素追加至自身开头

例如：A.prepend(B)

<A>
	<B></B>
	....
<A>

appendTo( )
父元素将子元素追加至自身末尾。

例如：A.appendTo(B)

<B>
	....
	<A></A>
<B>

prependTo( )
父元素将子元素追加至自身开头。

例如：A.prependTo(B)

<B>
	<A></A>
	....
<B>

after( )
添加元素到自身后面

例如：A.after(B)

<A></A>
<B></B>

before( )
添加元素到自身前面

例如：A.before(B)

<B></B>
<A></A>

insertAfter( )
添加元素到自身后面

例如：A.insertAfter(B)

<B></B>
<A></A>

insertBefore( )
添加元素到自身前面

例如：A.insertBefore(B)

<A></A>
<B></B>

remove( )
移除元素

empty( )
清空元素的所有后代元素，但保留当前对象及其属性节点

示 例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>DOM常用操作</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$("#firstButton").click(function() {
					//$("#city").append($("#ql"));
					$("#ql").appendTo($("#city"));
				});
				$("#secondButton").click(function() {
					//$("#city").prepend($("#ql"));
					$("#ql").prependTo("#city");
				});
				$("#thirdButton").click(function() {
					//$("#cd").after($("#ql"));
					$("#ql").insertAfter($("#cd"));
				});
				$("#fourthButton").click(function() {
					//$("#cd").before($("#ql"));
					$("#ql").insertBefore($("#cd"));
				});
				$("#fifthButton").click(function() {
					$("#bj").remove();
				});
				$("#sixthButton").click(function() {
					var sy=$("<li id='bj' name='sanya'>三亚</li>");
					sy.appendTo($("#city"));
				});
				$("#seventhButton").click(function() {
					$("#city").empty();
				});
			});
		</script>
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
		<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
		<input type="button" value="将晴朗放置到city最后面" id="firstButton" />
		<input type="button" value="将晴朗放置到city最前面" id="secondButton" />
		<input type="button" value="将晴朗插入到成都后面" id="thirdButton" />
		<input type="button" value="将晴朗插入到成都前面" id="fourthButton" />
		<input type="button" value="删除北京节点" id="fifthButton" />
		<input type="button" value="增加三亚节点" id="sixthButton" />
		<input type="button" value="删除城市的子节点" id="seventhButton" />
		
		<ul id="city">
			<li id="bj" name="beijing">北京</li>
			<li id="cd" name="chengdu">成都</li>
			<li id="bd" name="baoding">保定</li>
		</ul>

		<ul id="weather">
			<li id="ql" name="sunny">晴朗</li>
			<li id="xy" name="sprinkle">小雨</li>
			<li id="dy" name="cloudy">多云</li>
		</ul>
		
	</body>
</html>

在本示例中，在增加三亚节点的操作过程中：

$("#sixthButton").click(function() {
	var sy=$("<li id='bj' name='sanya'>三亚</li>");
	sy.appendTo($("#city"));
});

请注意单引号与双引号的嵌套，一般说：单引号中嵌套双引号或者双引号中嵌套单引号。

在这里插入图片描述

谷哥的小弟
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端技术——代码片段 给更多程序员补充前端开发的知识和小技巧
04-02
前端技术——代码片段 给更多程序员补充前端开发的知识和小技巧 提升你的开发效率的工具 掌握它，可以让开发更顺畅
后端开发必须要掌握的前端知识
King Gigi的博客
08-13 2240
后端开发必会知识，包括es6 vue node npm 等知识
讲给后台程序员看的前端系列教程(53)——jQuery入门
谷哥的小弟
10-20 674
jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。该框架封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化DOM操作、事件处理、动画设计和Ajax交互。
讲给后台程序员看的前端系列教程(63)——jQuery应用示例
谷哥的小弟
10-23 676
本节教程，介绍jQuery的常见应用。
讲给后台程序员看的前端系列教程(58)——jQuery选择器与常用方法
谷哥的小弟
10-21 707
在本节教程中，我们按照类别讲解jQuery选择器；在讲解选择器的同时介绍jQuery中一些常用的方法。
程序员web前端视频教程（文档+代码+视频）.rar
05-29
这是一个关于web前端开发的资源文件，非常适合入门的开发人员使用
程序员的角度看web安全——兼谈php代码审计.pdf
01-02
程序员的角度看web安全——兼谈php代码审计.pdf
2018黑马程序员前端36期全套视频教程【就业班+文档+代码+视频】
02-18
黑马程序员全套前端视频教程，网络分享赚点积分，如有侵权请联系删除
讲给后台程序员看的前端系列教程(38)——事件处理
热门推荐
谷哥的小弟
09-12 1万+
事件被看作是JavaScript与网页之间交互的桥梁，当事件发生时，可以通过JavaScript 代码执行相关的操作。例如，用户可以通过鼠标拖曳登录框、改变登录框的显示位置、单击鼠标、双击鼠标等等。其实，在软件开发领域，几乎所有的GUI编程都会涉及到事件机制。比如，我们在Android中非常熟悉的单击，触摸，滑动，双击，长按等等都属于事件的范畴。今天我们就来学习JavaScript中事件处理机制。
讲给后台程序员看的前端系列教程(26)——CSS综合练习
谷哥的小弟
09-09 1389
在本节中，我们对CSS知识进行综合练习
讲给后台程序员看的前端系列教程(01)——HTML5概述
谷哥的小弟
09-04 1176
大概两年前我写了《讲给Android程序员看的前端和后台教程》；在该专栏中介绍了前端开发基本技能，例如：HTML5、CSS、JavaScript等等。随着技术的更新和迭代，我决定在此基础之上重写此系列教程以供工作和学习之需。本系列教程概述如下：主要内容为前端基础知识和常用框架、每篇博客均附示例源码及运行效果截图、本系列教程免费，欢迎转载
讲给后台程序员看的前端系列教程(34)——对象
谷哥的小弟
09-10 1132
在看到"对象"这两个字的时候，很多人会立马会联想到Java中的类、对象、继承、封装、多态…打住，打住，不要继续往下想了。在这或许要抛弃一下我们的惯性思维了。JavaScript并不是完全纯粹的面向对象，或者说它和大家熟知的Java中的面向对象不完全一样。在JavaScript中所有东西，比如：字符串、数字、数组、日期，甚至函数都是对象。
讲给后台程序员看的前端系列教程(02)——HTML5标签(1)
谷哥的小弟
09-04 1050
HTML不是程序设计语言，而是一种标记语言，它用一些标记、标签来说明文本的显示效果。要制作网页和建立网站，就必须对HTML语言有所了解。客观地讲：HTML标签没有多少逻辑性而言，为了大家更好的理解和记忆，我们对这些标签进行分门别类的讲解，主要分为：
讲给后台程序员看的前端系列教程(39)——正则表达式
谷哥的小弟
09-15 1002
正则表达式(Regular Expression,简称RegExp)是一种描述字符串结构的语法规则，是一个特定的文本模式，用于验证各种字符串是否匹配这个特征，进而实现文本查找、替换、截取内容等操作。正则表达式的应用范围非常之广泛，最初是由Unix普及开来的，后来在广泛运用于Scala 、PHP、C# 、Java、C++ 、Objective-c、Perl 、Swift、VBScript 、Javascript、Ruby以及Python等等。
讲给后台程序员看的前端系列教程(43)——JSON数据格式及其解析
谷哥的小弟
09-18 945
SON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。SON 比 XML 更小、更快，更易解析，所以从Web API和服务端编程语言到NoSQL数据库和客户端框架
讲给后台程序员看的前端系列教程(30)——运算符与表达式
谷哥的小弟
09-09 945
JavaScript提供了丰富的运算符，比如：算数运算符，赋值运算符，比较运算符，逻辑运算符等等。在此，介绍JavaScript中常用的运算符和表达式。
讲给后台程序员看的前端系列教程(11)——HTML综合练习
谷哥的小弟
09-04 893
HTML5常用标签及布局综合练习
讲给后台程序员看的前端系列教程(36)——BOM
谷哥的小弟
09-11 861
在实际开发中，JavaScript经常需要操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。为此，浏览器提供了一系列内置对象，统称为浏览器对象；各内置对象之间按照层次组织起来的模型统称为浏览器对象模型Browser Object Model简称BOM，其架构如下图所示：
前端程序员推荐看的书籍
最新发布
03-03
由于我是一个人工智能模型，我并不知道您是想了解哪些前端程序员推荐看的书籍。以下是一些广受欢迎的前端开发书籍，供您参考： 1.《JavaScript高级程序设计》（作者：Nicholas C. Zakas） 2.《JavaScript权威指南...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

谷哥的小弟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值