jQuery-DOM操作

已于 2022-11-16 18:43:35 修改
阅读量343 收藏
点赞数 1
文章标签： 前端 javascript jquery
于 2022-11-16 18:42:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57051895/article/details/127881214
版权

目录

获取和设置属性值(css)

追加和删除样式(addClass、removeClass)

切换样式(toggleclass)

元素内容操作(html、text) 

属性值操作(value) 

删除节点(remove)

克隆节点(clone)

获取、设置、删除元素属性(attr、removeAttr)

获取和设置属性值(css)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取和设置样式值</title>
		<script src="js/jQuery.js"></script>
		<style>
			p{
				color: #f00;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<p>段落标签</p>
	</body>
	<script>
		$(document).ready(function(){
			//获取p标签并获取样式值
			var color = $('p').css('color');
			console.log(color);
			var fontSize = $("p").css("font-size");
			console.log(fontSize);
			
			//获取p标签并设置样式
			$('p').css("background-color","#0f0");
			//获取P标签并且同时设置多个样式
			$('p').css({
				'text-decoration':'underline',
				'text-algin':'center',
				'border':'1px solid #00f'
			})
						
		});
		
	</script>
</html>

追加和删除样式(addClass、removeClass)

  • addClss()：追加样式
  • removeClass()：删除样式

示例：

//获取p元素标签并追加样式text

$('p').addClass('test');

//获取p元素标签并删除样式demo

$('p').removeClass('demo');

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>追加和删除样式</title>
		<script src="js/jQuery.js"></script>
		<style>
			.demo{
				color: #f00;;
				font-size: 30px;
			}
			
			.test{
				background-color: #ccc;
				border: 1px solid #00f;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<p class="demo">段落标签</p>
		<button>追加样式</button>
		<button>移出样式</button>
	</body>
	<script>
		$(function(){
			// 获取添加样式按钮，添加点击事件
			$('button:first').click(function(){
				$('p').addClass('test');
			});
			
			// 获取移出样式按钮，添加点击事件
			$('button:last').click(function(){
				$('p').removeClass('demo');
			});
		});
	</script>
</html>

切换样式(toggleclass)

toggleclass()：切换样式

示例

$('p').toggleClass('demo');//获取p元素标签并切换demo样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>切换样式</title>
		<script src="js/jQuery.js"></script>
		<style>
			.demo{
				color: #f00;
				font-size: 36px;
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<p>段落标签</p>
		<button>切换样式</button>
	</body>
	<script>
		$(function(){
			$('button').click(function(){
				$('p').toggleClass('demo');
			})
		});
	</script>
</html>

元素内容操作(html、text) 

  • html：获取的内容包括标签和文本
  • text:获取的内容只有文本
  • html:加入标签和文本时标签不显示，标签效果存在
  • text:加入标签和文本时，标签显示且没有效果

示例

//获取div节点内的所有内容，包括标签和文本

$('div').html();

//只获取div节点内的文本

$('div').text();

//使用html向id为demo的元素标签中添加文本内容

$('#demo').html('大户名城，建设高地');

//使用text向id为demo的元素标签中添加文本内容
$('#demo').text('大湖名城，建设高地');

//使用html向id为demo的元素标签中添加元素标签和文本内容时，添加的元素标签有效果
$('#demo').html('<h2>大湖名城，建设高地<h2/>');

//使用text向id为demo的元素标签中添加元素标签和文本内容时，添加的元素标以文本显示且无效果
$('#demo').text('<h2>大湖名城，建设高地<h2/>');

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内容操作</title>
		<script src="js/jQuery.js"></script>
	</head>
	<body>
		<div>
			<ul>
				<li>
					<p>段落标签1</p>
				</li>
				<li>
					<p>段落标签2</p>
				</li>
			</ul>
		</div>
		<p id="demo"></p>
	</body>
	<script>
		$(function(){
			var result1= $('div').html();
			console.log(result1);
			
			var result2= $('div').text();
			console.log(result2);
			
			// $('#demo').html('大户名城，建设高地');
			// $('#demo').text('大湖名城，建设高地');
			// $('#demo').html('<h2>大湖名城，建设高地<h2/>');
			// $('#demo').text('<h2>大湖名城，建设高地<h2/>');
		});
	</script>
</html>

属性值操作(value) 

示例：

//获取input元素标签中的value属性值

$('input').val();

//设置input元素标签中的value属性值

$('input').val('篮球');

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>value属性值操作</title>
		<script src="js/jQuery.js"></script>
	</head>
	<body>
		<input type="checkbox" value="basketball"/>篮球
	</body>
	<script>
		$(function(){
			var result1 = $('input').val();
			console.log(result1);
			
			$('input').val('篮球');
			var result2 = $('input').val();
			console.log(result2);
		});
	</script>
</html>

创建节点

  • A.append(B)：在当前标签（A）中添加新建标签（B）
  • B.appendTo(A)：将新建标签（B）添加到当前标签（A）中     
  • A.prepend(B)：将新建标签（B）添加到当前标签（A）中
  • B.prependTo(a)：将新建标签（B）添加到当前标签（A）中     
  • A.after(B)：将新建标签（B）添加到当前标签（A）之后
  • B.insertAfter(A)：将新建标签（B）添加到当前标签（A）之后     
  • A.before(B)：将新建标签（B）添加到当前标签（A）之前
  • B.insertBefore(A)：将新建标签（B）添加到当前标签（A）之前

示例

//创建一个li元素标签

$('<li>jQuery中创建的元素标签<li/>');

//获取ul元素后将新创建的元素标签默认添加到末尾

 $('ul').append(liEle);

//将新创建的元素节点添加到ul元素中，默认添加到末尾

 liEle.appendTo($('ul'));

//获取ul元素标签后将新创建的元素添加到ul里所有标签之前

 $('ul').prepend(liEle);

//将新标签添加到ul元素标签下的所有标签之前

liEle.prependTo($('ul'));

//获取ul元素标签后将新创建的元素添加到ul标签之前

$('ul').before(pEle);

//将新标签添加到ul元素标签之前

pEle.insertBefore($('ul'));

//获取ul元素标签后将新创建的元素添加到ul标签之后

$('ul').after(pEle);

//将新标签添加到ul元素标签之后

pEle.insertAfter($('ul'));

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>节点操作</title>
		<script src="js/jQuery.js"></script>
	</head>
	<body>
		<ul>
			<li>我是已经写好的li标签</li>
			<li>我是已经写好的li标签</li>
		</ul>
		<script>
			$(function(){
				//创建一个li元素标签
				var liEle = $('<li>jQuery中创建的元素标签<li/>');
				
				//将li元素标签添加到ul元素标签中
				// $('ul').append(liEle);
				// liEle.appendTo($('ul'));
				
				//将li元素标签添加到所有li元素标签之前
				// $('ul').prepend(liEle);
				liEle.prependTo($('ul'));
				
				//创建一个p元素标签
				var pEle = $('<p>世界人口突破500亿<p/>');
				
				//将p元素标签添加到ul元素标签之前
				// $('ul').before(pEle);
				// pEle.insertBefore($('ul'));
				
				//将p元素表签添加到ul元素之后
				// $('ul').after(pEle);
				pEle.insertAfter($('ul'));
			});
		</script>
	</body>
</html>

删除节点(remove)

示例

$('h2').remove();//获取h2元素标标签收使用remove删除h2元素标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>删除节点</title>
		<script src="js/jQuery.js"></script>
	</head>
	<body>
		<h2>二级标题标签</h2>
		<ul>
			<li>列表项第1项</li>
			<li>列表项第2项</li>
			<li>列表项第3项</li>
		</ul>
	</body>
	<script>
		$(function(){
			//删除标题标签
			$('h2').remove();
			//删除列表第二项
			$('li:eq(1)').remove();
		})
	</script>
</html>

替换节点

  • A.replaceWith(B)：将当前标签（A）替换为新标签（B）
  • B.replaceAll(A)：将当前标签（A）替换为新标签（B）

示例

//获取li元素标签后使用replaceWith替换为新标签

$('li:eq(1)').replaceWith($liEle);

//新标签使用replaceAll与li元素标签进行替换
$liEle.replaceAll($('li:eq(1)'));

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>替换节点</title>
		<script src="js/jQuery.js"></script>
	</head>
	<body>
		<ul>
			<li>列表项第1项</li>
			<li>列表项第2项</li>
			<li>列表项第3项</li>
		</ul>
	</body>
	<script>
		$(function(){
			//创建一个li元素标签
			var $liEle = $('<li>我是jQuery创建的元素标签<li/>');
			//替换第二个li元素标签
			// $('li:eq(1)').replaceWith($liEle);
			$liEle.replaceAll($('li:eq(1)'));
		});
	</script>
</html>

克隆节点(clone)

clone()：如果括号里的值为false，克隆时不克隆元素标签中的事件，如果括号里的值为true，克隆时克隆元素标签中的事件。

示例

//克隆ul元素标签，包括ul元素标签中的事件

var result = $('ul').clone(true);

//只克隆ul元素标签，包括ul元素标签中的事件,括号中的默认值为false

var result = $('ul').clone();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>克隆节点</title>
		<script src="js/jQuery.js"></script>
	</head>
	<body>
		<div>
			<ul>
				<li>列表项第1项</li>
				<li>列表项第2项</li>
				<li>列表项第3项</li>
			</ul>
		</div>
	</body>
	<script>
		$(function(){
			$('ul').click(function(){
				$('ul').css('background-color','yellow');
			})
			
			//克隆ul元素标签
			var result = $('ul').clone(true);
			
			//将克隆的ul元素标签添加到div中
			$('div').append(result);
		})
	</script>
</html>

获取、设置、删除元素属性(attr、removeAttr)

  • attr()：获取和设置元素属性
  • removeAttr()：删除元素属性

示例

//获取img元素标签后使用attr得到width属性值

$('img').attr('width');

//获取img元素标签后使用attr设置width属性值为800像素

$('img').attr('width','800px');

//获取img元素标签后使用removeAttr删除width属性值

$('img').removeAttr('width');

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取、设置、删除元素属性</title>
		<script src="js/jQuery.js"></script>
	</head>
	<body>
		<img src="img/sec1-5.jpg" width="500px" title="饮料">
	</body>
	<script>
		$(function(){
			//获取属性值
			var result1 = $('img').attr('width');
			console.log(result1);
			var result2 = $('img').attr('src');
			console.log(result2);
			
			//设置属性值
			$('img').attr('width','800px');
			$('img').attr('title','好喝的饮料');
			
			//删除属性
			$('img').removeAttr('title');
			$('img').removeAttr('width');
		})
	</script>
</html>
luckyboy!
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
初识JQuery-DOM操作（Demo实战详解）
01-08
我是辰兮，很高兴你能来阅读，本章初识jQuery，用案例详细的讲解了jQuery的DOM操作，每一个操作都有详细的案例以及截图，希望对你有帮助，分享获取新知，大家一起进步。 下一篇请参考：JQuery-DOM进阶 文章目录一、...
JQuery-DOM操作进阶（Demo案例详解）
辰兮要努力
05-07 1543
文章目录一、 序言二、添加子节点三、 插入子节点（在容器的最前面添加子节点）四、插入节点五、移除节点 使用jQuery提供的函数完成节点的操作 一、 序言 给你我写这篇文章的调试代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></tit...
05-jQuery-DOM操作-内容操作html()、text()、val()
记录java学习日常~
05-24 544
jQuery 提供了三个用于内容操作的方法，分别是 html()、text() 和 val()，它们分别用来获取或设置指定元素的 HTML 内容、文本内容和值属性。下面分别进行详细介绍。
06-jQuery-DOM操作-属性操作-attr()\prop()\addClass()\toggleClass()等
记录java学习日常~
05-24 1167
对于 DOM 属性，prop() 方法不会修改原始 HTML 元素的属性值，它只会修改浏览器所跟踪的属性值，这种修改不会被序列化到 HTML 中。其中，$(selector) 是要设置属性值的元素的选择器，attributeName 是属性名，value 是属性值。其中，$(selector) 是要设置属性值的元素的选择器，propertyName 是属性名，value 是属性值。对于 HTML 属性，attr() 方法设置属性值时，属性值必须是字符串类型。
jQuery-DOM操作大总结
nxcjh321的专栏
04-23 240
jQuery基础--DOM操作
weixin_45753617的博客
08-20 514
jQuery基础--DOM操作
Jquery-Dom-Manipulation
07-23
Jquery Dom 操作 这个 webapp 是作为我本科课程的一部分创建的。 可以在查看实时应用程序。
02-jquery-and-the-dom
05-15
实验02：jQuery和DOM代码大战挑战完成并按照实验01的提交说明进行操作。实验02提交说明请遵循实验01的提交说明。资源配置您的存储库必须包括： 02-jquery-and-the-dom├── .eslintrc.json├── .gitignore├── ...
jQuery 中DOM 操作详解
10-24
主要介绍了jQuery 中DOM 操作详解,需要的朋友可以参考下
jQuery常见面试题之DOM操作详析
12-10
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
vue源码之mustache模板引擎1
qweasl_的博客
05-21 335
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
【Web】CISCN 2024初赛 题解(全)
uuzeray的博客
05-21 1155
这里注意细节，靶机发了两次请求，第一次我们就返回一个正常的图片，第二次请求就发一个302，php代码块要用html标签包裹。注意下面这段报错，因为加不了引号，开头是数字的话，就会将类型识别为数字，若后续出现了字符串就会报错。再打sqlite，指定tableName，加载写入的恶意so文件，反弹shell。最后注意要将获取的变量元组转字符串，再用逗号分隔，依次输出，从而绕过seed。考的python栈帧沙箱逃逸，获取到外部的栈帧，就可以用。因为ban了引号，考虑hex2bin，将数字转为字符串。
深入解析：Element Plus 与 Vite、Nuxt、Laravel 的结合使用
一个普通人
05-23 907
Element Plus 作为一个强大的 Vue.js 组件库，可以与 Vite、Nuxt 和 Laravel 等不同的工具和框架结合使用，为开发者提供灵活、高效的开发体验。根据项目需求选择合适的工具和框架，可以极大地提升开发效率和应用性能
【绿雪问茶】用前端三件套完成一个大项目（一）
大象不下象棋的博客
05-21 359
Green Snow Asks Tea
Web Speech API（2）—— SpeechSynthesis
LiangRZ
05-21 694
Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。语音合成 (也被称作是文本转为语音，英语简写是 tts) 包括接收 app 中需要语音合成的文本，再在设备麦克风播放出来这两个过程。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其他相关命令的信息。控制器，从而获取语音合成功能的入口。
axios如何传递数组作为参数，后端又如何接收呢？？？？
最新发布
qq_64847107的博客
05-25 101
前端的参数是一个数组。
前端-移动端布局
Kongfutu的博客
05-21 198
可以在浏览器里打开检查 点击一下移动端按钮 然后选择一下对应的手机型号可以切换到对应的手机端。进阶学习建议 Vue.js 和 微信小程序。如何在PC端模拟移动端设备。
前端开发攻略---用Vue实现无限滚动的几种方法
nibabaoo的博客
05-22 1092
用vue实现无限滚动
【JAVA WEB实用与优化技巧】如何自己封装一个自定义UI的Swagger组件，包含Swagger如何处理JWT无状态鉴权自动TOKEN获取
yh4494的博客
05-21 69
Swagger 原生UI存在的缺点 ① 不够方便直观 swagger ui 布局是上下瀑布式的，比如我访问完A接口，想访问B接口，访问完B接口想继续访问A接口就必须往上翻，接口少还好操作。接口多的话来回就很烦。 ② 请求的参数没有缓存 ③ 不够美观 ④ 如果是JWT 无状态登录，Swagger使用起来就没有那么丝滑了，因为JWT无状态登录这种需要每次在请求的Header中带上TOKEN，Swagger可没那么只能给你登录接口返回的token带过去，这样就导致无状态session的情况下Swagg...
jquery案列dom操作
03-13
jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画效果等任务。下面是一个使用jQuery进行DOM操作的示例： HTML代码： ```html <p>Hello, jQuery! ``` JavaScript代码： ```javascript // 通过...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值