前端——jQuery（DOM对象与jQuery相互转换、六类选择器、$操作元素、validate表单验证）&& 练习

最新推荐文章于 2024-09-11 15:33:18 发布
最新推荐文章于 2024-09-11 15:33:18 发布
阅读量534 收藏
点赞数 1
分类专栏： HTML 文章标签： jquery js javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Today_He/article/details/108772926
版权

文章目录

jQuery

PS：
1）目录带了数字0，表示有需要注意的点
2）【】表示重要
3）删除线表示已经解决

Ⅰ、概述

一、JS与jQuery的区别与联系

1、js是一种脚本语言，常用于网页客户端编程，使网页在客户端浏览器中，实现更多地动态功能，表现出更加丰富的视觉效果。
2、jQuery 是一个简洁而快速的 JavaScript 库，可用于简化事件处理，HTML 文档遍历，Ajax 交互和动画，以便快速开发网站。jQuery 简化了 HTML 的客户端脚本，从而简化了 Web 2.0 应用程序的开发。

jQuery就是JS的框架（一个js文件，里面封装了很多方法）

二、准备工作

1、下载jQuery（https://jQuery.com/）
1）、压缩版（带min文字）
2）、未压缩版本
功能一样，未压缩版有大量注释，便于学习

2、将下载好的.js文件复制到JS文件夹即可，使用导入即可

3、就绪函数（$等价于jQuery）

<script type="text/javascript">
		/*第一种就绪函数*/
		jQuery(document).ready(function(){
			……
		});
		/*第二种就绪函数*/
		$(document).ready(function(){
			……
		});
		/*第三种就绪对象*/
		$(function(){
			……
		});
	</script>

4、jQuery的ready与window的onload的区别

三、DOM对象与jQuery对象相互转换

<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
	<script type="text/javascript">
		
		$(function(){
			var DOM_div = document.getElementById("div0");
			var jQuery_div = $("#div0");
			
			
			/*DOM转jQuery*/
			var DOM_$ = $(DOM_div);
			alert(DOM_$.text());
			
			
			/*jQuery转DOM*/
			var $_DOM1 = jQuery_div[0];
			alert($_DOM1.innerText);
			var $_DOM2 = jQuery_div.get(0);
			alert($_DOM2.innerText);	
		})
		
	</script>
</head>
<body>
	<div id="div0">are you ok?</div>
</body>

PS：
1）jQuery获取元素，类似css中的选择器
2）DOM对象转jQuery对象类似Java中的构造函数
3）jQuery转DOM对象，类似数组的使用

Ⅱ、六类选择器0

一、基本选择器

标签、ID、Class、全局（*）选择器

$("div")、$("#div")、$(".div0")、$("*")
✳号表示整个页面（html）

二、同级选择器（可以使用星号代替任意元素）

1）后代选择器——用空格隔开，它的孙子等都会被选中

$("div p")

2）子元素选择器——用大于符号隔开

$("div>p")

3）同级相邻元素选择器——用加号隔开

$("div+p")	只能找到它后面的紧挨着的元素

4）同级元素选择器——用波浪号隔开

$("div~p")	它后面的元素都能被找到

三、过滤选择器

针对一系列相同但是没有特征的标签（针对索引，除了not）

：first					第一个索引的元素
：last					最后一个索引的元素
：eq(index)				当前索引的元素
：gt(index)				大于index的索引的元素
：lt(index)				小于index的索引的元素
：odd					奇数（Odd number）索引的元素
：even					偶数（even numbers）索引的元素
：not(id或者class)		除了某某以外
	例如，$("div:not(#first)")——div中除了id=first的元素以外的其他元素

四、属性选择器

根据标签的属性及属性值来获取

[attribute]含有某属性的标签
[attribute=""]某属性等于某值的标签
[attribute!=""]某属性不等于某值的标签
[attribute^=""]某属性的值以某内容开头的标签
[attribute$=""]某属性的值以某内容结尾的标签
[attribute*=""]某属性的值含有某内容的标签
例如，
	$("div[title^='test']"),解释：div标签中title属性的值以test开头的标签
	$("div[title$='test']"),解释：div标签中title属性的值以test结尾的标签
	$("[name='hobby']")，解释：name属性为hobby的全部标签

五、表单选择器
在这里插入图片描述
1、表单基本选择器

可以用属性选择器代替

2、表单过滤选择器
1）enabled（可以使用的）、disabled（不可用的)
2）selected被选取的元素
【注意】：针对下拉列表option，不是input

$("option :selected").val();			获取被选中的option的value

3）checked被选种的元素
【注意】：针对单选，或者多选。所以最好区分一下

$("[type=checkbox] :checked").val();			获取被选中的多选的value

六、this

this表示DOM对象（可以使用$()转为jQuery对象）

示例说明:
1、没有使用this

	<script type="text/javascript">
			$(function(){
				$("#input0").click(function(){
					alert($("#input0").val());
				});
			});
		</script>
	</head>
	<body>
		<input type="checkbox" id="input0" value="123" />
	</body>

2、使用this，并转为jQuery对象

	<script type="text/javascript">
			$(function(){
				$("#input0").click(function(){
					alert($(this).val());
				});
			});
		</script>
	</head>
	<body>
		<input type="checkbox" id="input0" value="123" />
	</body>

3、使用this，可以直接使用DOM对象

	<script type="text/javascript">
			$(function(){
				$("#input0").click(function(){
					alert(this.value);
				});
			});
		</script>
	</head>
	<body>
		<input type="checkbox" id="input0" value="123" />
	</body>

Ⅲ、使用到的一些常用方法

css(“属性”，“值”)——修改css样式；只写属性值可以返回value（获取长宽返回值自带px）
val(）——获取value值
click() ——等同于点击时间onclick
new Date().getMonth()——获取的时间是从0开始的，需要手动加一
new Date().getDate()——获取天数
new Date().getDay()——获取星期几（星期天为0，需要手动转换）
html()——同DOM中的innerHtml，无参获取当前对象的所有内容；有参，参数设置空，可以达到清除的效果
text()——同DOM中的innerText，无参获取当前对象的文字内容；有参，参数设置空，可以达到清除的效果

一、jQuery特效

用于处理元素显示和隐藏的函数

1、显示与隐藏
show(speed,callback)		显示元素
hide(speed,callback)		隐藏元素
toggle(speed,callback)		显示与隐藏之间切换

参数说明：
	可以不写参数
	speed：规定隐藏、显示的速度。取值：slow、fast、millisecond（毫秒）
	callback：隐藏和显示完成后执行的回调函数的名称。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery的特效之显示和隐藏</title>
		<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
		<script type="text/javascript">
			$(function(){
				$("#show").click(function(){
					$("img").show();
				});
				$("#hide").click(function(){
					$("img").hide(1000,alert("我被隐藏了"));
				});
				$("#taggle").click(function(){
					$("img").toggle();
				});
			});
		</script>
	</head>
	<body>
		<input type="button" id = "show" value="显示"/>
		<input type="button" id="hide" value="隐藏" />
		<input type="button" id="taggle" value="切换" /><br/>
		<img src="img/征集令背景主图.jpg" style="" />
	</body>
</html>
2、淡入淡出
fadwIn(speed,callback)		淡入已隐藏的元素
fadeOut(speed,callback)		淡出可见的元素
fadeToggle(speed,callback)		淡入淡出之间相互转换

参数说明：
	可以不写参数
	speed：规定隐藏、显示的速度。取值：slow、fast、millisecond（毫秒）
	callback：隐藏和显示完成后执行的回调函数的名称。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery的特效之淡入和淡出</title>
		<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
		<script type="text/javascript">
			$(function(){
				$("#fadein").click(function(){
					$("img").fadeIn();
				});
				$("#fadeout").click(function(){
					$("img").fadeOut(1000,alert("我要淡出了"));
				});
				$("#toggle").click(function(){
					$("img").fadeToggle(1000);
				});
			});
		</script>
	</head>
	<body>
		<input type="button" id = "fadein" value="淡入"/>
		<input type="button" id="fadeout" value="淡出" />
		<input type="button" id="toggle" value="切换" /><br/>
		<img src="img/征集令背景主图.jpg" style="" />
	</body>
</html>
3、滑动
slideDown(speed,callback)		向下滑动元素，用于显示
slideUp(speed,callback)		向上滑动元素，用于隐藏
slideToggle(speed,callback)		切换

参数说明：
	可以不写参数
	speed：规定隐藏、显示的速度。取值：slow、fast、millisecond（毫秒）
	callback：隐藏和显示完成后执行的回调函数的名称。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery的特效之淡入和淡出</title>
		<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
		<script type="text/javascript">
			$(function(){
				$("#slideDown").click(function(){
					$("img").slideDown();
				});
				$("#slideUp").click(function(){
					$("img").slideUp(2000,up);
				});
				$("#toggle").click(function(){
					$("img").slideToggle(2000);
				});
				
				function up(){
					alert("我向上滑出了")
				}
			});
		</script>
	</head>
	<body>
		<input type="button" id = "slideDown" value="滑入"/>
		<input type="button" id="slideUp" value="滑出" />
		<input type="button" id="toggle" value="切换" /><br/>
		<img src="img/征集令背景主图.jpg" style="" />
	</body>
</html>
示例——牛皮癣广告

button按钮加淡入、淡出没有效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery的特效之淡入和淡出</title>
		<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
		<script type="text/javascript">
			$(function(){
				window.setTimeout(function(){
					$("img").slideDown();
				},2000);
				
				$("#slideUp").click(function(){
					$("img").slideUp(2000);
				});
			});
		</script>
	</head>
	<body>
		<input type="button" id="slideUp" value="×" style="position: fixed; bottom: 330px;right: 6px;"/>
		<img src="img/牛皮癣.jpg" style="position: fixed;bottom: 10px; right: 5px;display: none;" />
	</body>
</html>

二、jQuery操作元素CSS

1、css(…）

css("属性")、css("属性"，"值")、css({"属性1":"值","属性2":"值",……})

2、addClass(“class值”)给标签加class
3、removeClass(“class值”)移除class
4、toggleClass()在addClass和removeClass上切换

注意：需要先有改class的样式，并且没有什么太多的变化时一般不使用addClass()和removeClass()，直接在css层叠表设置即可上设置即可

示例——隔行换色，加高亮
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
		<script type="text/javascript">
			$(function(){
				/*给第一行加颜色*/
				$("tr:first").css({"background-color":"black","color":"white"});
				/*给偶数行加class = gray*/
				$("tr:even").addClass("gray");
				/*给tr加高亮（移动鼠标到tr上，给该tr加颜色。移开鼠标，变回原本的样式）*/
				$("tr").mouseover(function(){
					$(this).removeClass();//先把偶数行的class删除（应该不用手动去除。不过我这重新赋值不会被替换）
					$(this).addClass("mouse")
				}).mouseleave(function(){
					$(this).removeClass("mouse");
					$("tr:even").addClass("gray");
				});
			});
		</script>
		<style>
			.mouse{
				background-color: bisque;
			}
			.gray{
				background-color: darkgray;
			}
		</style>
	</head>
	<body>
		<table border="1px" cellpadding="5px" cellspacing="5px" >
			<thead>
				<th>姓名</th>
				<th>年龄</th>
			</thead>
			<tr>
				<td>何某某</td>
				<td>18</td>
			</tr>
			<tr>
				<td>徐某某</td>
				<td>18</td>
			</tr>
			<tr>
				<td>韩某某</td>
				<td>17</td>
			</tr>
			<tr>
				<td>某某</td>
				<td>17</td>
			</tr>
		</table>
	</body>
</html>

三、jQuery操作元素属性 0

1、attr()，同下，略

2、*prop()，推荐使用

对象.prop("属性名")				获取属性值
对象.prop("属性名"，"值")		设置属性值

区别：
1）attr先面世
2）自定义属性需要使用attr()获取、设置
3）attr() jQuery1.5之后不再维护，容易出问题。推荐使用prop

示例——全选、反选
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选、反选</title>
		<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
		<script type="text/javascript">
			$(function(){
				
				
				//全选的点击事件
				$("#allcheck").click(function(){
					//属性选择器（不用循环赋值，jQuery的强大之处）
					//让每个name叫elemcheck的多选项的状态与全选选项的状态相同
					$("[name='elemcheck']").prop("checked",$(this).prop("checked"));
				});
				
				//反选的点击事件（点击反选，每个多选项状态就取反）
				$("#backcheck").click(function(){
					var flage = true;
					$("[name='elemcheck']").each(function(index,state){
						//循环获取自己的当前状态（是否被选中）；自个的状态取反
						$(state).prop("checked",!$(state).prop("checked"));
						//判断多选项是否都被选中
						flage &= $(state).prop("checked");
					});
					//反选时，全选不能被选中
					if($(this).prop("checked")){
						$("#allcheck").prop("checked",false);
					}
					//当多选项全部被选中时，全选也应该被选中
					if(flage){
						$("#allcheck").prop("checked",true);
					}
				});
				
				//多选项全被被手动选中时，全选选项应该也被选中
				
			});
		</script>
	</head>
	<body>
		全选<input type="checkbox" id="allcheck" /><br />
		反选<input type="checkbox" id="backcheck" /><br />
		第一<input type="checkbox" name="elemcheck" /><br />
		第二<input type="checkbox" name="elemcheck" /><br />
		第三<input type="checkbox" name="elemcheck" />
	</body>
</html>

四、jQuery操作DOM（元素）0

对元素的操作不外乎：增、删、改、查。前面已经阐述过改、查了。这里讲解增、删

一、添加

1、*append()		在被选中的元素内部的结尾插入内容（添加到内部，内部的末尾位置）
2、prepend()		在被选中的元素内部的开始插入内容（添加到内部，内部的开始位置）
3、after()			在被选中的元素之后插入内容（添加到外面，当前元素之后）
4、before()			在被选中的元素之前插入内容（添加到外面，当前元素之前）

二、删除

5、remove()			删除被选中的元素及其子元素

三、补充
创建节点元素

var newNode=$("<li></li>");                			 //创建空的li
var newNode1=$("<li>123</li>");   					 //创建含文本的li
var newNode2=$("<li title='last'>123</li>");  		 //创建含属性的li
示例——省市联动

👉点击查看代码👈

Ⅳ、validate表单验证

校验类型

取值

描述

required

true|false

必填字段

email

“@”或者”email”

邮件地址

url

 

路径

date

数字

日期

dateISO

字符串

日期（YYYY-MM-dd）

number

 

数字（负数，小数）

digits

 

整数

minlength

数字

最小长度

maxlength

数字

最大长度

rangelength

[minL,maxL]

长度范围

min

 

最小值

max

 

最大值

range

[min,max]

值范围

equalTo

jQuery表达式

两个值相同

remote

url路径

ajax校验

一、步骤

1、下载工具
2、导入jquery.validate.js文件及其localization中的messages_zh.js文件

注意：这是依赖于jQuery的，所以需要先导入jQuery。一定要注意这个

3、绑定

//绑定验证方法
$("#test").validate();

4、指名验证规则

二、初始代码

<tr>
	<td>用户名：</td>
	<td>
		<input type="text" name="username" required="true" rangelength="[3,10]"/>
	</td>
</tr>

这样式的标签式的用法

三、初步优化代码

标签式的写法的弊端：
1、代码可读性差
2、提示语句不贴切

练习——validate表单验证之自定义提示语句

👉点击查看代码👈

四、validate如何与数据库交互？

使用remote属性

<script type="text/javascript">
	$(function(){
		$("#form").validate({
			rules:{
				"name":{//账号
					required:true,
					rangelength:[6,12],
					remote:{//与数据库交互
						url:"user",//提交给那个servlet
						type:"post",//提交方式
						dataType:"json",//提交的数据类型
						data:{//提交的数据
							"method":"checkName",//这里的method指数据提交给servlet的那个方法（这里设置了BaseServelt用来匹配传进来的参数与方法）
							"unumber":function(){//提交name属性为name的数据（就是提交账号）
								return $("[name='name']").val();
							}
						}
					}
				},
				"password":{//密码
					required:true,
					rangelength:[8,14]
				},
				"password2":{//确认密码
					required:true,
					equalTo:"#password"
				},
				"username":{//用户名（网名）
					required:true,
				},
				"email":{//电子邮箱
					required:true,
					email:"email",
					remote:{
						url:"user",
						type:"post",
						dataType:"json",
						data:{
							"method":"checkEmail",
							"uemail":function(){
								return $("[name='email']").val();
							}
						}
					}
				}
			},
			messages:{
				"name":{
					required:"账号不能为空",
					rangelength:"账号是6-12位字符",
					remote:"账号被占用"
				},
				"password":{
					required:"账号不能为空",
					rangelength:"密码是8-14位字符"
				},
				"password2":{
					required:"确认密码不能为空",
					equalTo:"两次密码不一致"
				},
				"username":{
					required:"用户名不能为空",
				},
				"email":{
					required:"邮箱不能为空",
					email:"邮箱格式不正确",
					remote:"邮箱被占用"
				}
			},
			/* 表单数据验证成功自动执行的方法 */
			submitHandler:function(){
				//序列化
				var date = $("#form").serialize();
				$.post("user",date,function(obj){
					if(obj){
						alert("注册成功，即将跳转自登录页面");
						window.location.href = "login.jsp";//window可以省略
					}else{
						alert("注册失败，请重新注册");
					}
				},"json");
				
			}
		});
	});
</script>
陈年_H
关注
专栏目录
jQuery.validate.js表单验证插件的使用代码详解
10-17
jQuery.validate.js 是一款广泛使用的前端表单验证jQuery插件。它通过简单的配置，就能够为HTML表单提供多样化的验证功能。使用jQuery.validate.js，开发者可以省去编写大量表单验证逻辑的代码，提高了开发效率并...
JQuery动态创建DOM对象、表单元素
ZHANGHUI3239619的专栏
12-07 419
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/h
6-2、选择器
鸵鸟
09-06 928
选择器
jQuery 的Dom 操作，validate插件完成自定义表单验证，以及jquery 完成省市联动
Syntacticsugar's blog
09-25 514
 jQuery对DOM节点操作： 添加 ； 删除 ； 替换 ； 遍历； &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script
jquery用户输入表单验证.rar_fsv_jquery用户输入表单验证_nodxf
09-23
jQuery通过选择器选取DOM元素，然后对这些元素执行各种操作。例如，`$("#myForm")`会选择ID为`myForm`的表单元素。表单验证通常在用户尝试提交表单时触发，这可以通过监听`submit`事件来实现： ```javascript $("#...
jQuery表单验证
10-29
jQuery，一个轻量级的JavaScript库，提供了强大的功能来简化DOM操作，包括表单验证。本文将深入探讨如何使用jQuery进行表单验证，以及相关的技术和实践策略。 一、jQuery基础 在开始讨论jQuery表单验证之前，我们...
jQuery企业开户表单验证代码
04-07
jQuery可以轻松操作DOM元素，将错误信息插入到相应位置，或者改变输入框的样式以突出错误。 6. **表单提交**：在所有验证都通过后，表单数据会被收集并发送到服务器。这通常通过AJAX实现，使用jQuery的`$.ajax()`或...
jquery表单注册验证框架.zip
11-19
同时，jQuery提供了一系列事件，如`submit`（表单提交）、`focus`（元素获取焦点）和`change`（元素值改变），这些事件可以结合选择器用于监听和响应用户操作。 三、表单验证基础 1. 验证函数：在jQuery中，可以...
jQuery使用之（四）处理页面的表单元素
weixin_33940102的博客
01-19 90
表单是一个特殊的页面元素，value的值是最受关注的，jQuery提供了强大的val()方法来处理相关的操作。 1.获取表单元素的值。 直接调用val()方法时可以获取选择器的 中的第一个元素的value值。例如： $("[name=radioGroup]:checked").val; 以上代码直接获取属性为radioGroup的表单元素中被选中的value值，十分便捷。对于某些...
前端jquery 根据excel表达式自动计算结果
IT诗人
04-22 783
最近接到一个开发任务，大致需求如图： 刚看到这个任务时，我头都大了，不敢下手去做，但是晚上总是梦到表达式(╥╯^╰╥) 各种解决办法也是酝酿了好几天才有了头绪，下手一写倒觉得没那么难了。 代码主要考虑了4种情况， 1、固定数值 2、基础的数值运算 3、单层IF条件 4、嵌套IF条件 这里所有的表单字段都是动态从数据库取的，由用户自定义，所以逻辑上更复杂一点，通过stan...
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
TimeFriends
05-14 1557
jQuery 大纲: jQuery-Dom操作 jQuery效果 jQuery遍历 jQuery的事件总结 常见事件 事件和事件源的绑定 事件切换 jQuery插件 插件机制 validate插件 jQuery效果 基本:高和宽都变化 hide([毫秒值]):隐藏(几毫秒后完成隐藏) show([毫秒值]):展示(几毫秒后完成展示) toggle([毫秒值]):切换(几毫秒后完成切换) 滑入滑出:高变化 slideUp([毫秒值]):滑出 slideDown
jQuery通过选择器来选择一个元素的，然后操作元素做些改变（给按钮做弹回效果）
qq_37499398的博客
05-22 1230
Target HTML Elements with Selectors Using jQuery现在我们已经知道 document ready function的用法了.现在让我们开始写第一个jQuery语句，所有jQuery方法都是由$开始的，通常称作为 美元符号，或者简称为bling。jQuery通过选择器来选择一个元素的，然后操作元素做些改变。举个例子，要让所有的按钮做弹回效果，只要把这段代...
jquery validate使用Demo实例说明
mingtianhaiyouwo的博客
02-19 2461
//validate 选项***********************************************************           $("form").validate({                  debug:true  //进行调试模式（表单不提交）               rules:{                   name:"
认真学习数据结构之堆
小小默：进无止境
10-10 2367
# 【1】什么是堆？ 堆（heap）是计算机科学中一类特殊的数据结构的统称。堆通常是一个可以被看做一棵树的数组对象。堆总是满足下列性质： * 堆中某个结点的值总是不大于(大顶堆)或不小于其父结点的值(小顶堆)； * 堆总是一棵完全二叉树。 将根结点最大的堆叫做最大堆或大根堆，根结点最小的堆叫做最小堆或小根堆。常见的堆有二叉堆、斐波那契堆等。 堆是非线性数据结构，相当于一维数组，有两个直接后继。 堆的定义如下：n个元素的序列{k1,k2,ki,…,kn}当且仅当满足下关系时，称之为堆。 ![在这里插入图片
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2817
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 853
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

陈年_H

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

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

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

打赏作者

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

抵扣说明：

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

余额充值