JQuery之DOM操作

最新推荐文章于 2024-09-05 11:00:53 发布
最新推荐文章于 2024-09-05 11:00:53 发布
阅读量140 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_65797079/article/details/126611606
版权

JQuery之DOM操作

获取、设置内容

方法(获取/设置)说明
text()/text(内容)设置或返回所选元素的文本内容
html()/html(内容)设置或返回所选元素的内容(包括HTML标签)
val()/val(内容)设置或返回表单字段的值
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id="p-gs-1"><span>床前明月光</span></p>
		<p id="p-gs-2"><span>疑是地上霜</span></p>
		<p>举头望明月</p>
		<p>低头思故乡</p>
		
		用户名<input id="inupt-1" value="admin"/>
		<button id="btn-1">获得html()</button>
		<button id="btn-2">获得text()</button>
		<button id="btn-3">获得val()</button>
		<hr>
		<button id="btn-4">设置html()</button>
		<button id="btn-5">设置text()</button>
		<button id="btn-6">设置val()</button>
		<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
		<script type="text/javascript">
			$("#btn-1").click(function(){
				// 获得开闭标签直接的所有内容,包括html标签
				console.log($("#p-gs-1").html())
			})
			$("#btn-2").click(function(){
				// 获得开闭标签直接的所有内容,只包括文本内容
				console.log($("#p-gs-2").text())
			})
			$("#btn-3").click(function(){
				// 获得开闭标签直接的所有内容,只包括文本内容
				console.log($("#inupt-1").val())
			})
			// ============================================
			$("#btn-4").click(function(){
				// 使用html()设置内容,如果有标签和属性,会当做html内容自动解析
				// $("#p-gs-1").html("白日依山尽")
				$("#p-gs-1").html("<span style='color:red'>白日依山尽</span>")
			})
			$("#btn-5").click(function(){
				// 使用text()设置内容,设所有内容,包括html标签及属性,全部都当做文本展现
				// $("#p-gs-2").text("黄河入海流")
				$("#p-gs-2").text("<span style='color:red'>黄河入海流</span>")
			})
			$("#btn-6").click(function(){
				$("#inupt-1").val("奥特曼")
			})
		</script>
	</body>
</html>

获取、设置属性

方法说明
attr(name)获取指定属性
attr(key,value)设置属性为指定属性值
attr({key:value,key:value,...})同时设置多组属性
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input id="input-1"  type="text"/>
		<button id="btn-1">获得属性</button>
		<button id="btn-2">设置属性</button>
		<button id="btn-3">设置多个属性</button>
		<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
		<script type="text/javascript">
			$("#btn-1").click(function(){
				// attribute属性
				// 获得指定属性名的属性值: attr(属性名)
				console.log($("#input-1").attr("type"))
			})
			
			$("#btn-2").click(function(){
				// attr(属性名,属性值),设置元素的属性为指定值
				$("#input-1").attr("type","radio")
			})
			
			$("#btn-3").click(function(){
				// 同时设置多个属性,传入的参数是json对象
				// {key:value,key:value,...}
				$("#input-1").attr({type:"password",value:"123456"})
			})
		</script>
	</body>
</html>

追加元素

方法说明
append()被选元素结尾追加，追加到在被选元素的内部，可称为被选元素的子元素
prepend()被选元素开头追加，追加到在被选元素的内部，可称为被选元素的子元素
before()被选元素后追加，追加到在被选元素的外部，可称为被选元素的兄弟元素
after()被选元素前追加，追加到在被选元素的外部，可称为被选元素的兄弟元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$(function(){
				var $append = $("#btn1")
				$append.click(function(){
					$("#div1").append('<div style="width: 100px;height: 100px;border: 2px solid green;">这是append()方法</div>')
				})
				
				var $prepend = $("#btn2")
				$prepend.click(function(){
					$("#div1").prepend('<div style="width: 100px;height: 100px;border: 2px solid black;">这是prepend()方法</div>')
				})
				
				var $before = $("#btn3")
				$before.click(function(){
					$("#div1").before('<div style="width: 100px;height: 100px;border: 2px solid blue;">这before()方法</div>')
				})
				
				var $after = $("#btn4")
				$after.click(function(){
					$("#div1").after('<div style="width: 100px;height: 100px;border: 2px solid yellow;">这after()方法</div>')
				})
			})
		</script>
	</head>
	<body>
		<button id="btn1">append追加元素</button>
		<button id="btn2">prepend追加元素</button>
		<button id="btn3">before追加元素</button>
		<button id="btn4">after追加元素</button>
		<div id="div1" style="width: 300px; height:300px; border:2px solid red"></div>
		
	</body>
</html>

删除元素

方法说明
remove()删除自己及其内部元素
remove(选择器)删除选择到的指定元素
empty()删除内部元素，保留自己
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$(function(){
				var $btn1 = $("#btn1")
				$btn1.click(function(){
					//删除被选元素本身和其内部元素
					$("#p2").remove()
				})
				
				var $btn2 = $("#btn2")
				$btn2.click(function(){
					//删除指定元素
					// $("li").remove("#li2")
					//删除被选元素的内部元素
					$("div").empty()
				})
			})
		</script>
	</head>
	<body>
		<p id="p1">这是一个段落1</p>
		<p id="p2"><span style="color: red;">这是要被删除段落2</span></p>
		<p id="p3">这是一个段落3</p>
		<div style="height: 300px; width:300px; border:2px solid blue">
			<ul>
				<li id="li1">子元素1</li>
				<li id="li2">子元素2</li>
				<li id="li3">子元素3</li>
			</ul>
		</div>
		
		
		<button id="btn1">删除一个元素及其子元素</button>
		<button id="btn2">删除一个元素的子元素</button>
	</body>
</html>

CSS操作

css类
方法说明
addClass()向被选元素添加一个或多个类
removeClass()从被选元素删除一个或多个类
toggleClass()对被选元素进行添加/删除类的切换操作
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div-border{
				border: 20px solid red;
			}
			
			.div-pos {
				margin: auto;
			}
			
		</style>
	</head>
	<body>
		<div id="div-1" style="width: 300px;height: 300px;background-color: aqua;"></div>
		<button id="btn-1">点击-添加css类</button>
		<button id="btn-2">点击-移除css类</button>
		<button id="btn-3">点击-切换css类</button>
		<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
		<script type="text/javascript">
			$("#btn-1").click(function(){
				// addClass(样式类名)
				// $("#div-1").addClass("div-border")
				// addClass("样式类名1 类名2")
				$("#div-1").addClass("div-border div-pos")
				
			})
			
			$("#btn-2").click(function() {
				// 移除指定样式类
				$("#div-1").removeClass("div-border")
			})
			
			$("#btn-3").click(function() {
				// 与指定样式类切换
				$("#div-1").toggleClass("div-border")
			})
			
		</script>
	</body>
</html>
css方法
设置或返回样式属性
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div-1" >块</div>
		<button id="btn-1">点击设置背景颜色</button>
		<button id="btn-2">点击设置高,宽,边框</button>
		<button id="btn-3">点击获得样式属性值</button>
		<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
		<script type="text/javascript">
			
			$("#btn-1").click(function(){
				// 设置样式属性和值
				$("#div-1").css("background-color","red")
			})
			
			$("#btn-2").click(function(){
				// 设置多个样式属性和值,
				// 使用的是对象形式
				$("#div-1").css({width:"300px",height:"300px",border:"2px solid black"})
			})
			
			$("#btn-3").click(function(){
				// 获得指定样式的值
				console.log($("#div-1").css("background-color"))
			})
			
		</script>
	</body>
</html>

JQuery遍历

祖先
方法说明
parent()返回直接父级
parents()返回所有父级，直到html
parentsUntil(“元素名”)返回所有父级，直到指定元素，不包含该元素
后代
方法说明
children()返回直接后代
find(“选择器”)返回所有层次的后代，会再次根据指定的选择器过滤
兄弟
方法说明
siblings()所有兄弟元素
next()下一个兄弟元素
prev()上一个兄弟元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$(function(){
				var $btn1 = $("#btn1")
				$btn1.click(function(){
					console.log($("#div-1-1").parent())
				})
				
				var $btn2 = $("#btn2")
				$btn2.click(function(){
					console.log($("#div-1-1").parents())
				})
				
				var $btn3 = $("#btn3")
				$btn3.click(function(){
					console.log($("#div-1-1").parentsUntil("body"))
				})
				
				var $btn4 = $("#btn4")
				$btn4.click(function(){
					console.log($("#div-1").children())
				})
				
				var $btn5 = $("#btn5")
				$btn5.click(function(){
					console.log($("#div").find("*"))
				})
				
				var $btn6 = $("#btn6")
				$btn6.click(function(){
					console.log($("#div-1-1").siblings())
				})
				
				var $btn7 = $("#btn7")
				$btn7.click(function(){
					console.log($("#div-1-2").next())
				})
				
				var $btn8 = $("#btn8")
				$btn8.click(function(){
					console.log($("#div-1-2").prev())
				})
			})
		</script>
	</head>
	<body>
		<button id="btn1">parent</button>
		<button id="btn2">parents</button>
		<button id="btn3">parentUntil</button><br />
		<button id="btn4">children</button>
		<button id="btn5">find</button><br />
		<button id="btn6">siblings</button>
		<button id="btn7">next</button>
		<button id="btn8">prev</button><br />
		
		<div id="div" style="width: 500px;height: 500px;border: 5px solid red;">
			<div id="div-1" style="width: 400px;height: 400px;border: 5px solid rosybrown;">
				<div id="div-1-1" style="width: 100px;height: 100px;border: 5px solid blueviolet;"></div>
				<div id="div-1-2" style="width: 100px;height: 100px;border: 5px solid burlywood;"></div>
				<div id="div-1-3" style="width: 100px;height: 100px;border: 5px solid cadetblue;"></div>
			</div>
		</div>
	</body>
</html>
过滤
方法说明
first()第一个元素
last()最后一个元素
eq(index)index从0开始获得指定下标元素
filter(“选择器”)根据选择器过滤
not(“选择器”)not() 方法返回不匹配标准的所有元素。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn-1").click(function() {
					$("p").first().css("color", "red")
				})
	
				$("#btn-2").click(function() {
					$("p").last().css("color", "green")
				})
	
				$("#btn-3").click(function() {
					$("p").eq(2).css("color", "blue")
				})
	
				$("#btn-4").click(function() {
					$("p").filter(".su").css("color", "pink")
				})
	
				$("#btn-5").click(function() {
					// not(".su")删除指定选择器选中的元素,将剩下的返回.
					// 特别注意: 并没有直接从文档流中删除这些元素,只是在返回值里面剔除了这些元素
					// console.log($("p").not(".su"))
					
					// $("#div-1").html($("p").not(".su"))
					
					$("p").not(".su").css("color", "red")
				})
			})
		</script>
	</head>
	<body>
		<div id="div-1">
			<p>韩愈</p>
			<p>柳宗元</p>
			<p class="su">苏洵</p>
			<p class="su">苏轼</p>
			<p class="su">苏辙</p>
			<p>欧阳修</p>
			<p>王安石</p>
			<p>曾巩</p>
		</div>
		<button id="btn-1">first</button>
		<button id="btn-2">last</button>
		<button id="btn-3">eq-2</button>
		<button id="btn-4">filter-su</button>
		<button id="btn-5">not</button>
	</body>
</html>
上班哪有不发疯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery的DOM操作
onepunchmen00的博客
01-08 3969
创建HTML DOM对象和jquery对象的区别 DOM对象是浏览器渲染出来的元素   jquery对象是对0、1个或者多个DOM对象的包装    例如 最后一个返回jquery版本号         创建HTML   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta c...
jQuery操作DOM
weixin_52841956的博客
02-23 617
我们先来看一下JavaScript怎么操作DOM元素 1.根据元素的id document.getElementById("id值"); 2.根据元素的类名className document.getElementsByClassName(className); 3.标签名 tagName document.getElementsByTagName(tagName); 4.获取dom元素属性、样式... dom元
jquery之Dom操作
m0_72694993的博客
11-04 1026
().toggleClass("类名");语法格式：$().each(function(index,element){});jQuery对象.attr("属性名", "属性值");$("div").empty()清空div下的内容和元素。$("div").remove()删除所有div元素。$().css("属性名", "属性值");$().removeClass("类名");$().addClass("类名");$().css("属性名");$().html("内容");$().text("内容");
jquery之DOM操作（一）
The_upside_of_down的博客
10-11 1758
一般来说，DOM操作分为：DOM core（核心）、HTML-DOM和CSS-DOM。 1、DOM Core DOM Core并不专属于javascript，任何一种支持dom操作的程序都可以使用它。 利用DOM Core来获取表单对象的方法： document.getElementsByTagName("form"); 2、HTML-DOM 它主要是提供一些更简明的符号来描述各种ht...
jQuery常见面试题之DOM操作详析
12-10
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
jQuery中DOM树操作之复制元素的方法
01-21
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下： 复制元素 前面提到的操作包括：插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置，以及通过新元素来包装已有...
jquery对dom的操作常用方法整理
12-13
Jquery对dom的操作也是很总要的。 1.三个简单实用的用于 DOM 操作的 jQuery 方法： · text() – 设置或返回所选元素的文本内容 · html() – 设置或返回所选元素的内容（包括 HTML 标记） · val() – 设置或返回...
jQuery操作DOM之获取表单控件的值
10-24
总结来说，jQuery的`.val()`方法是处理表单控件值的最佳选择，它简化了DOM操作，确保了在获取和设置值时的准确性和实时性。熟练掌握这一方法，将极大地提高jQuery编程的效率和代码的可读性。在开发过程中，结合使用`...
jQuery中DOM常见操作实例小结
01-21
本文实例讲述了jQuery中DOM常见操作。分享给大家供大家参考，具体如下： DOM属性操作 属性列表 属性 版本 说明 attr() 1.0 设置或返回文档节点的属性。 removeAttr() 1.0 移除文档节点的属性。 prop() 1.6 ...
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
stay hungry, stay foolish
09-02 1454
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
Vue双向绑定
m0_56131422的博客
09-01 755
简单来说，双向绑定就是数据改变影响视图，视图改变也会影响数据。Vue 的双向绑定主要通过v-model。
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 480
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
JS都有哪些操作数组的方法
ggq53219的博客
09-04 447
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2595
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 817
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
vue3使用-watch监听总结
weixin_44072254的博客
09-01 527
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1298
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
最新发布
央顺科技官方博客
09-05 417
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
jQuery DOM操作详解：属性与方法
"jQuery使用手册之二 DOM操作" jQuery是一个强大的JavaScript库，主要目的是简化HTML文档遍历、事件处理、动画制作以及Ajax交互。本部分主要关注DOM（Document Object Model）操作，即如何通过jQuery对HTML元素进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值