jQuery DOM操作

最新推荐文章于 2024-07-05 14:21:58 发布
最新推荐文章于 2024-07-05 14:21:58 发布
阅读量212 收藏
点赞数
分类专栏： Java 文章标签： jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43715360/article/details/113762126
版权
1、属性操作

在这里插入图片描述

  • 示例代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--属性演示-->
	<body>
		<!--引入jQuery-->
		<script src="jquery-3.4.1.min.js"></script>
		
		<script type="text/javascript">
			$(function(){
				//元素按钮
				$("#btn").click(function(){
					//获取值
					var s1=$("#s1").text();
					var d1=$("#d1").html();
					var ip1=$("#ip1").val();
					alert(s1+" "+d1+" "+ip1);
					
					//设置值
					var s1=$("#s1").text("new span");
					var d1=$("#d1").html("new div");
					var ip1=$("#ip1").val("new input val");
					
				});
				
				//属性按钮
				$("#btn1").click(function(){
					//获取标签属性值
					var url=$("a").attr("href");
					window.location.href=url;
				});
				//更改按钮
				$("#btn2").click(function(){
					//更改属性值(属性名称，所要更改的值)
					$("a").attr("href","https://blog.csdn.net/weixin_43715360");
				});
				
			});
			
		</script>
		
		<!--获得元素的内容-->
		<span id="s1">span inner</span>
		<div id="d1">div inner</div>
		<input id="ip1" value="input val"/>
		
		<button id="btn">获得元素的内容</button>
		<hr />
		<a href="http://www.baidu.com">百度</a>
		<button id="btn1">跳转</button>
		<button id="btn2">更改地址</button>
	</body>
</html>
2、元素的增删
  • 添加元素
    在这里插入图片描述
    在这里插入图片描述
  • 删除元素
    在这里插入图片描述
  • 示例代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#append,#prepend,#after,#before{background-color: #ff0;}
		</style>
		
	</head>
	<!--添加和删除元素-->
	<body>
		<script src="jquery-3.4.1.min.js"></script>
		
		<script type="text/javascript">
			$(function(){
				//在标签内部后加
				$("#append").append("<p style='background-color: red;'>测试append</p>")
				
				//在标签内部前加
				$("#prepend").prepend("<p style='background-color: red;'>测试prepend</p>")
				
				//在标签外部后加
				$("#after").after("<p style='background-color: red;'>测试after</p>")
				
				//在标签外部前加
				$("#before").before("<p style='background-color: red;'>测试before</p>")
				
				//remove删除
				$("#btn").click(function(){
					$("p").remove("#append")
					
				})
				
				//empty删除
				$("#btn1").click(function(){
					$("#append").empty()
				})
			});
			
		</script>
		
		<p id="append">段落append</p>
		
		<p id="prepend">段落prepend</p>
		
		<p id="after">段落after</p>
		
		<p id="before">段落before</p>
		
		<hr />
		
		<button id="btn">删除remove</button>
		<button id="btn1">删除empty</button>
	</body>
</html>
3、操作css属性和class类属性
  • CSS类
    在这里插入图片描述
  • CSS方法
    在这里插入图片描述
  • 示例代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!--引入外部文件-->
		<link style="text/css" rel="stylesheet" href="bootstrap.min.css" />
		
	</head>
	<!--操作css属性和class类属性-->
	<body>
		<!--引入外部文件-->
		<script src="jquery-3.4.1.min.js"></script>
		<script src="bootstrap.min.js"></script>
		
		<script type="text/javascript">
			$(function(){
				
				$("#btn1").click(function(){
					//添加bookshop中的class类（样式）
					$("#res").addClass("btn btn-success");
				});
				
				$("#btn2").click(function(){
					$("#res").addClass("btn btn-danger")
				});
				
				$("#btn3").click(function(){
					$("#res").toggleClass("(btn btn-success")
				});
				
				$("#btn4").click(function(){
					$("#res").removeClass("btn btn-success")
				});
				
				//通过链式添加和css方法，设置css样式
				$("#div").css("border","solid 5px #f00")
				.css("width","300px")
				.css("height","100px");
				
				//取出css的某个样式属性
				alert($("#div").css("width"));
			});
			
		</script>
		
		<button id="btn1">成功</button>
		<button id="btn2">失败</button>
		<button id="btn3">成功/失败</button>
		<button id="btn4">删除</button>
		
		<hr />
		
		<button id="res">结果显示</button>
		
		<hr />
		
		<div id="div">样式添加结果！！</div>
		
	</body>
</html>
4、样式边距

在这里插入图片描述

  • 示例代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--样式-->
		<style type="text/css">
			#d1{width: 200px;height: 200px;border: solid 10px #f00;
			padding-left: 100px; padding-top: 100px; 
			margin-left: 100px;margin-top: 100px;}
			
			#d2{width: 100px;height: 100px;background-color: #f00;}
			
		</style>
	</head>
	<!--尺寸方法-->
	<body>
		<!--引入jQuery-->
		<script src="jquery-3.4.1.min.js"></script>
		
		<script type="text/javascript">
			$(function(){
				//width innerWidth outerWidth
				var w= $("#d1").width();
				var iw=$("#d1").innerWidth();
				var ow=$("#d1").outerWidth();
				var ow2=$("#d1").outerWidth(true);
				$("#res").html("width:"+w+" innerWidth"+iw+" outerWidth"+ow+" outerWidth(true)"+ow2)
			})
		</script>
		
		<div id="d1">
			
			<div id="d2"></div>
			
		</div>
		<div id="res"></div>
		
	</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操作
m0_52660785的博客
07-28 1967
jQuery中的DOM操作
jQuery 学习笔记 (jQuery DOM的操作)
07-13 271
DOM操作的分类 DOM Core 并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。 它的用途并非仅限与处理网页，也可以用来处理任何一种使用标记语言编写出来的文档。例如XML javascript中的getElementById(),getElemen
jquery--DOM操作
最新发布
m0_74194490的博客
07-05 1071
在javaScript的基础上创建的属于js的框架，是继Prototype之后又一个优秀的javaScript代码库（javaScript框架）有一些人嫌弃js用着不好，把 很多具有特殊功能的代码的集合，写在一个js文件中，名为jquery.js。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jqueryDOM操作
UNDEFINED_AUBE的博客
12-22 685
一、 1、class属性：.addClass()、.hasClass()、.removeClass()、.toggleClass()   2、DOM插入并包裹现有内容 （1）.wrap(wrappingElement这个参数就是一个元素>)：在每个匹配的元素外层包上一个html元素 （2）.unwrap()：将匹配元素集合的紧挨着的父级元素删除（再上一级就删不了了），保留自身（和兄弟元素
jquery DOM操作
赫子子的博客
03-17 389
jquery里面的DOM操作之访问节点1.父级访问：parent()，parents()，parentUntil()，closest()1.parent()：获得当前匹配元素集合中每个元素的父元素&lt;body&gt;  &lt;div&gt;&lt;p&gt;Hello&lt;/p&gt;&lt;/div&gt;  &lt;div class="selected"&gt;&lt;p
jQuery DOM操作小结与实例
10-29
在jQuery中，DOM操作包括创建新元素、复制现有元素、重新组织文档结构以及修改元素的样式和属性。 1. **DOM Core**： - DOM Core是DOM的基础部分，它定义了一套通用的标准，用于处理任何基于标记语言的文档，如XML...
jQuery常见面试题之DOM操作详析
12-10
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
jQuery DOM操作实例
01-19
更重要的是它还兼容基本上所有的浏览器，网页开发最头疼的就是这个了，所以jQuery也因此深受码农的喜爱，不过首先你得要记住它才能更好的使用它不是吗，过久了没用的属性方法也会淡忘的，下面是jQuery的DOM操作方法...
jQuery DOM操作 基于命令改变页面
10-29
jQuery 是一个非常流行的 JavaScript 库，它极大地简化了 JavaScript 编程，特别是对文档对象模型（DOM）的操作。DOM 操作是 JavaScript 中一项基本而重要的技能，通过它可以实现对网页内容、结构和样式的动态控制。...
JQuery操作DOM元素
08-01
该文档包含了样式操作，内容及Value属性值操作，节点操作，节点属性操作，节点遍历操作的基础知识，也许不够详细，但内容也应该足够平时操作了，希望能帮到大家
jQuery操作DOM
m0_68284186的博客
04-22 1081
jQuery操作DOM，jQuery入门
jQuery中的DOM操作（一）
liujing_555的博客
02-02 614
1、插入节点的方法： append() : 向每个匹配的元素内部追加内容; appendTo() : 将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中; prepend() : 向每个匹配的元素内部前置内容; prependTo() : 将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规
JQuery的dom操作
只是个人笔记，请见谅
03-28 1865
jquery的dom操作查找节点，修改属性创建节点-内部插入法创建节点-外部插入法删除节点复制节点替换节点属性操作样式操作获取html文本和值常用遍历节点方法css-dom操作多选框应用页面加载完毕触发方法作业     创建节点 创建节点：使用jQuery 的工厂函数$(): $(html标签);会根据传入的 html标记字符串创建一个jQuery对象,并返回 动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中; 当创建单个元素时,需注意闭合标签和使用标准的XHTML格式。例
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、付费专栏及课程。

余额充值