jQuery入门之DOM操作

最新推荐文章于 2024-07-30 23:43:41 发布
最新推荐文章于 2024-07-30 23:43:41 发布
阅读量80 收藏
点赞数
分类专栏： jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45949075/article/details/107440826
版权

属性操作

  1. attr(name | key,value)：设置或返回被选元素的属性值。
  2. removeAttr(name)：删除name属性。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script>
			//需要使用onload
			function t(){
				$("#bd").attr("href","http://www.baidu.com");
			}
			
			//不需要使用onload
			$(document).ready(function(){
				$("#bd").attr("href","http://www.baidu.com");
			});
			
			//上面的简写形式
			$(function(){
				$("#bd").attr("href","http://www.baidu.com");
			});
		</script>
	</head>
	<body>
		<div id="title">zzu</div>
		<a id="bd" href="http://www.baidu.com">百度</a>
		<script>
			var id = $("#title").attr("id");//获取标签的id属性值
			console.log(id);
			$("#bd").removeAttr("href");//移除标签某个属性
		</script>
	</body>
</html>

注：
在jQuery中，可以使用

$(document).ready(function(){
});

来取代onload操作，同时它也可以简写为：

$(function(){
});

class属性操作

  1. addClass(className)：为匹配元素设置class属性的属性值，多个属性值使用空格间隔。
  2. removeClass(className)：删除匹配元素class属性的属性值，多个属性值使用空格间隔。
  3. toggleClass(className)：切换样式——如果类名存在则删除它，如果类名不存在则添加它。
  4. hasClass()：判断元素中是否含有某个 class，如果有，则返回 true；否则返回 false。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<style>
		.zzu{
			background-color: red;
		}
	</style>
	<body>
		<div id="title">zzu</div>
		<script>
			$("#title").addClass("zzu");
			$("#title").removeClass("zzu");
			$("#title").css("font-size","30px")
			
			$("#title").toggleClass("zzu");
			console.log($("#title").hasClass("zzu"));
		</script>
	</body>
</html>

HTML代码/文本

  1. html([val])：传入val参数可以设置匹配元素的html内容；无参则获取匹配元素的html内容。（对应于JavaScript中的innerHTML）
  2. text([val])：传入val参数可以设置匹配元素的文本内容；无参则获取的结果是匹配元素包含的文本内容组合起来的文本。（对应于JavaScript中的innerText）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<span id="time"></span>
		<script>
			document.getElementById("time").innerHTML="<b>2020-7-19</b>";//设置HTML内容
			document.getElementById("time").innerText="<b>2020-7-19</b>";//设置文本内容
			
			$("#time").html("<b>2020-7-19</b>");//对应于innerHTML
			$("#time").text("<b>2020-7-19</b>");//对应于innerText
		</script>
	</body>
</html>

值

val([val])： 获取或设置匹配元素当前值；传入val参数用于选中单选、复选、下拉列表，注意：必须为JavaScript数组。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		//文本框
		<input type="text" name="user_name" value="admin" />
		//单选
		<input type="radio" name="sex" value="0" />男
		<input type="radio" name="sex" value="1" />女
		//多选
		<input type="checkbox" name="hobby" value="0" checked="checked"/>篮球
		<input type="checkbox" name="hobby" value="1" />羽毛球
		<input type="checkbox" name="hobby" value="2" checked="checked"/>乒乓球
		//下拉列表
		<select id="province" >
			<option value="">--请选择--</option>
			<option value="001">河南省</option>
			<option value="002">河北省</option>
			<option value="003">湖北省</option>
		</select>
		<script>
			//获取文本框值
			var value = $("[name='user_name']").val();
			console.log(value);
			
			//设置默认选择项
			//单选
			$("[name='sex']").val(["1"]);//默认选择value="1"的项
			//多选
			$("[name='hobby']").val(["0","2"]);//默认选择value="0"和value="2"的项
			//下拉列表
			$("#province").val(["001"]);//默认选择value="001"的项
		</script>
	</body>
</html>

CSS

css(name | name,value)：返回或设置元素样式。
name：获取css属性值。
在这里插入图片描述
name,value：设置css属性值。
在这里插入图片描述

位置

scrollTop(val)：返回或设置匹配元素相对滚动条顶部的偏移val个像素，常用来实现“返回顶端”。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body style="width: 10000px;height: 10000px;">
	
		<div onclick="goTop()" style="width: 100px;height: 100px;background-color: red;position: fixed;right: 0;bottom: 0;cursor: pointer;">
			回到顶部
		</div>
		
		<script>
			function goTop(){
				$(document).scrollTop(0);
			}
		</script>
	</body>
</html>

过滤DOM节点

  1. first() ：获取第一个元素；
  2. last() ：获取最后个元素；
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<span>郑州大学</span>
		<div>zzu</div>
		<div>河南</div>
		<div>郑州</div>
		<script>
			var first = $("div").first();//获取的是第一个jQuery对象
			console.log(first);
			
			var last = $("div").last();
			console.log(last[0]);//转换为JavaScript对象
		</script>
	</body>
</html>

在这里插入图片描述

查找DOM节点

  1. find(val) ：搜索所有与指定表达式（val可以是选择器、jQuery对象或DOM元素）匹配的元素。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<span>郑州大学</span>
		<div>zzu</div>
		<div>河南</div>
		<div>郑州</div>
		<script>
			//在html中找到所有div标签
			$("html").find("div").each(function(){
				console.log(this);//JavaScript对象
			});
		</script>
	</body>
</html>

在这里插入图片描述

  1. parent() ：取得一个包含着所有匹配元素的唯一父元素的元素集合。
  2. parents() ：取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。
  3. children() ：获取匹配元素的所有子元素组成的集合；该方法只考虑子元素而不考虑任何后代元素。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<span>郑州大学</span>
		<div>zzu</div>
		<div>河南</div>
		<div>郑州</div>
		<script>
			
			var obj = $("title").parent();//返回父元素
			console.log(obj);//jQuery对象
			var obj = $("title").parents();//返回父元素和祖先元素
			console.log(obj);//jQuery对象
			
			$("body").children().each(function(){//返回所有的子元素
				console.log(this);//JavaScript对象
			});
		</script>
	</body>
</html>

在这里插入图片描述
4. next() ：取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
5. nextAll()：查找当前元素之后所有的同辈元素。
6. prev()：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
7. prevAll()：查找当前元素之前所有的同辈元素。
8. siblings()：取得匹配元素前后所有的同辈元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<span>郑州大学</span>
		<div>zzu</div>
		<div>河南</div>
		<div>郑州</div>
		<script>
			$("span").next().each(function(){
				console.log(this);
			});
			
			$("span").nextAll().each(function(){
				console.log(this);
			});
			
			$("script").prev().each(function(){
				console.log(this);
			});
			
			$("script").prevAll().each(function(){
				console.log(this);
			});
		</script>
	</body>
</html>

在这里插入图片描述

复制节点

clone([true | false]) ：clone方法传入false或不传入值，则不克隆该元素的事件；若传入true，则复制元素的同时也复制元素中的的事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<a href="http://www.baidu.com" target="_blank" >百度</a>
		
		<div style="border: 1px solid red;"></div>

		<script>
			$("a").bind("click",function(){
				console.log("hello");
			});
			
			var obj = $("a").clone();
			//var obj = $("a").clone(true);
			//clone()函数中若传入参数true，则会同时复制该元素中的事件，但如果元素事件是用onclick绑定的，则不传true也可以复制该事件
			console.log(obj);
			
			$("div").append(obj);//将复制后的节点插入到div中
		</script>
	</body>
</html>

替换节点

  1. replaceWith(content) ：将所有匹配的元素替换成指定的HTML或DOM元素（content）。
  2. replaceAll(selector)：用匹配的元素替换掉所有 selector匹配到的元素。

注意: 替换前, 已绑定事件的元素，替换后原先事件会与元素一起消失。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<span>zzu</span><span>郑州</span>
		<script>
			$("span").replaceWith("<i>河南省</i>");
		</script>
	</body>
</html>

删除DOM节点

  1. empty() ：删除匹配的元素集合中所有的子节点，不包括自身。
  2. remove() ：删除匹配元素，包括自身。
  3. detach() ：删除所有匹配的元素，与remove()不同，detach删除元素所绑定的事件、附加的数据等都会保留下来。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<a href="http://www.baidu.com" target="_blank" >百度</a>
		
		<div style="border: 1px solid red;"></div>
		
		<span>zzu</span><span>郑州</span>
		<script>		
			$("div").empty();//仅将元素内容清空
			$("div").remove();//直接将该元素删除
		</script>
	</body>
</html>

页面载入

ready(function)：HTML文档加载完成之后，浏览器执行function函数，可以简写为$()：
在这里插入图片描述
注意：
ready(function)方法等效于window.onload，但是后者没有简写并且一个HTML文件中不允许出现多次。

这个名字真难起
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery入门—访问DOM对象方法
10-27
本文着重介绍：JavaScript访问DOM对象方法/JQuery访问DOM对象方法,通过JQuery库中的方法访问或控制页面中的元素，比使用JavaScript代码要简洁得多，而且兼容各浏览器，感兴趣的朋友可以了解下
jQuery入门介绍之基础知识
10-24
4. **jQuery 选择器**：选择器是jQuery的核心功能之一，它们允许开发者根据元素ID、类名、标签名等属性来选取DOM元素。jQuery支持多种选择器，包括基本选择器（ID选择器、类选择器和标签选择器）、层次选择器（后代...
jQuery入门DOM操作
weixin_45539338的博客
06-18 179
jQuery入门DOM操作
jQuery入门 (三) jQuery DOM操作
kong7906928的博客
07-30 710
jQuery DOM操作，jQuery 操作对象，jQuery操作样式，jQuery操作属性
jQuery：简化DOM操作的利器
你若盛开，清风自来
07-17 900
本文将介绍jQuery库的概念、作用及其在实际项目中的应用，帮助读者更好地理解jQuery的重要性，提高前端开发的效率。jQuery是一个跨平台的JavaScript库，它提供了一套简洁的API，用于简化DOM操作、事件处理和动画效果等。简洁的语法：jQuery使用链式语法和选择器，使得代码更加简洁和易于阅读。强大的插件系统：jQuery拥有丰富的插件和社区支持，可以扩展其功能。兼容性：jQuery支持多种浏览器，包括旧版浏览器。
jQuery操作DOM
m0_68284186的博客
04-22 1068
jQuery操作DOM，jQuery入门
jQuery入门与DOM对象
qq_42219004的博客
04-06 115
jQuery jquery： javascript库 下载的版本： jquery-3.3.1.min.js ：压缩版，发布版84.8KB jquery-3.3.1.js ：常规版，开发版265KB html中 如果出错，不提示！ 如果调试工具（F12）没有错误提示，但显示效果不一致，考虑html错误。 常见错误： 引入js库时 必须是 <script type="text/javascrip...
【jQuery入门】DOM对象和jQuery对象，以及互相转换，选择器
m0_62599305的博客
01-19 1146
jQuery是一款流行的JavaScript库，它在前端开发中简化了DOM操作。本文将介绍jQuery中的两个重要概念：DOM对象和jQuery对象，以及它们之间的互相转换。理解这些概念对于有效利用jQuery的功能至关重要。在jQuery的学习过程中，我们探讨了DOM对象和jQuery对象的概念，以及它们之间的相互转换。DOM对象代表文档中的原生HTML元素，而jQuery对象则是由jQuery库包装的一组元素。
2021/10/28 前端开发之JavaScript+jQuery入门 第十一章jQuery操作DOM
Abcdzzr的博客
10-29 948
1.DOM操作分为三类 DOM Core(核心)：任何一种支持DOM的编程语言都可以使用它，getElementById(“title”) HTML-DOM：用于处理HTML文档，如document.getElementById(“title”).innerHTML CSS-DOM：用于操作CSS，如document.getElementById(“title”).style.color="green" jQuery继承并发扬了JavaScript对DOM对象的操作特性，使开发者可以方便地操作DOM对
小白必看jquery入门dom操作篇
qq_41976359的博客
08-10 571
jquery小白必看 dom操作 末尾添加 $('.box').append($('<h1>hello world</h1>') 开头添加 $('.box').prepend($('<h1>hello world</h1>') 之前添加 $('.box').before($('<h1>hello world</h1>') 之后插入` $('.box').after($('<h1>hello world</h1&g
jquery入门和dom入门
qq_43937786的博客
11-13 58
1.引入jquery 2.使用jquery jquery的加载函数 ${document}.ready(function(){ alert(""1111); }) 还可以 ${function(){ alert(“1111”) }} οnlοad=init() function init(){ alert(‘1111’)} 两者的不同 onload加载页面所有元素 reday只是加载大致骨架 dom中的结点,都叫js对象 元素节点 属性节点 文本节点 js只能操作js对象 document.getele
1.jquery入门（DOM 对象和 jQuery 对象）
weixin_59334478的博客
06-15 497
2.1.6 DOM 对象和 jQuery 对象2.转换 DOM 对象 2. jQuery 对象转为 DOM 对象 2. jQuery 对象.get(0) 或 jQuery 对象[0] 均可完成 jQuery 对象转 DOM 对象
jQuery 操作XML入门
10-30
jQuery作为一款流行的JavaScript库，提供了丰富的API来简化DOM操作，包括对XML文档的操作。本文将详细介绍如何使用jQuery进行基本的XML解析与操作。 #### 二、XML文档结构 首先，我们来看一下提供的XML示例文件`XML...
财务报表，项目费用支出明细.xlsx
08-09
工资表，财务报表，对账表，付款申请，财务报告，费用支出表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
ppap-第四版.pdf
08-09
ppap-第四版
铁路转辙机 ZD6 使用说明书
08-09
铁路转辙机 ZD6 使用说明书
黑马商城docker镜像elasticsearch资源
08-09
黑马商城docker镜像elasticsearch资源
Matlab课设 - 基于图像特征的遥感图像相似匹配+源代码+文档说明
最新发布
08-09
<项目介绍> - 基于图像特征的遥感图像相似匹配 - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
JQuery入门教程：事件与DOM操作
JQuery是由John Resig在2006年创建的一个JavaScript库，它的主要目标是简化JavaScript编程，特别是在处理DOM操作、事件、动画和Ajax交互等方面。JQuery的设计原则是简洁和一致性，它借用了HTML和CSS的一些概念，使得...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值