有关jQuery的知识点

最新推荐文章于 2024-06-20 20:20:21 发布
最新推荐文章于 2024-06-20 20:20:21 发布
阅读量204 收藏 1
点赞数
分类专栏： js jQuery 文章标签： jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49171551/article/details/126544446
版权
js 同时被 2 个专栏收录
19 篇文章 0 订阅
订阅专栏
jQuery
1 篇文章 0 订阅
订阅专栏

1.jQuery入门

1.1jQuery介绍

jQuery是一个Javascript库，是对于ECMAScript、dom、bom的一个浅封装，让用户更方便操作。 jQuery功能： 使用CSS选择器进行元素查询

事件机制

Dom操作

属性操作

工具方法

Ajax

jQuery库包含以下功能：

  • HTML选取

  • HTML元素操作

  • CSS操作

  • HTML事件函数

  • JavaScript特效和函数

  • HTML DOM遍历和修改

  • AJAX

1.2jQuery安装

jQuery安装十分简单，只需要将jQuery的库导入到html中即可，我们可以下载下来也可以使用CDN资源。 一般我们在下载或者使用cdn资源的时候，都会让我们选择jquery.js 与 jquery.min.js版本，它们的区别在于jquery.min.js是经过压缩的，体积更小，适用于部署环境。而jquery适用于源码研究，我们对于jquery的学习，应该要上升到源码层次。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  • 网页中添加jQuery

    • 从jquery.com下载jQuery库

    • 从CDN中载入jQuery

  • 下载jQuery

有两个版本的jQuery可供下载：

  • Production version -用于实际的网站中，已被精简和压缩

  • Development version -用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以在jQuery官网下载

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-HelloWorld.html</title>
  <!-- 本地引入 将jQuery库中的代码放到一个本地文件中-->
  <script src="../../jquery-3.5.1/jquery-3.5.1.js"></script>
  <!-- 通过cdn引入 -->
  <!-- 
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   -->
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script>
		// console.log($,'jquery函数',typeof $);
		// console.log($(),'jquery对象',typeof $());
		// console.log($() instanceof Object);
		window.onload=function(){
			var div=document.getElementsByTagName('div')[0];
			console.log(div);
		}
		// 入口函数
		// 等待文档加载完毕再执行代码
		$(document).ready(function(){
			console.log($('div'));
		})
	</script>
</head>
<body>
	<div>我是一个div</div>
</body>
</html>

上面例子中的入口函数和原生JS中的onload这个函数的作用是一样的

2.jQuery函数

通过"jQuery"和"$"来调用jQuery函数

$(选择器) ：通过选择器选择到符合条件的Element元素，将其保存到jQuery对象

$(html片段) ：将html片段转换成Element元素，然后再封装成一个jQuery对象

$(Element元素)： 将Element元素转换成一个jQuery对象

$(匿名函数)： 匿名函数在文档加载完毕以后执行

2.1 jQuery与原生JS的比较

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!-- 本地引入 -->
	<script src="./1-jquery.js"></script>
	<script>
		// 原生js 给每一个标签添加不同的样式
		// window.onload=function(){
		// 	var div1=document.getElementsByTagName('div')[0];
		// 	var div2=document.getElementById('one');
		// 	var div3=document.getElementsByClassName('two')[0];
		// 	div1.style.backgroundColor='red';
		// 	div2.style.backgroundColor='yellow';
		// 	div3.style.backgroundColor='blue';
		// }
		// jquery
		$(document).ready(function(){
			var div1=$('div:first');
			var div2=$('#one');
			var div3=$('.two'); 
			console.log($().__proto__===jQuery.prototype);
			div1.css('backgroundColor','red');
			div2.css({
				backgroundColor:'blue',
				fontSize:'28px',
				fontFamily:"楷体"
			});
			div3.css({
				backgroundColor:"yellow"
			})

		})
	</script>
</head>
<body>
	<div>我是一个div</div>
	<div id="one">我是一个div</div>
	<div class="two">我是一个div</div>
</body>
</html>

与原生JS相比jQuery的操作更加简便

2.2 JS和jQuery入口函数的区别

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>js和jquery入口函数的区别</title>
	<script src="./1-jquery.js"></script>
	<script>
		// 
		// window.onload=function(){
		// 	var img=document.getElementsByTagName('img')[0];
		// 	// js使用window方法获取标签的所有属性
		// 	console.log(window.getComputedStyle(img).width);
		// 	console.log(window.getComputedStyle(img).height);
		// }
		// 等文档加载完毕执行代码 等同window.onload
		// $(function(){
		// 	var img=$('img:first');
		// 	console.log(img.width());
		// 	console.log(img.height());
		// })
		// 原生js的入口函数  只会执行一个 后面的会覆盖掉前面的
		// window.onload=function(){
		// 	alert('我是入口函数1')
		// }
		// window.onload=function(){
		// 	alert('我是入口函数2')
		// }
			// jquery的入口函数 入口函数依次执行
			// $(function(){
			// 	alert('我是入口函数1')
			// });
			// $(function(){
			// 	alert('我是入口函数2')
			// });
		// 2.区别 jquery入口函数四种写法
		$(document).ready(function(){
			alert('我是入口函数1')
		});
		jQuery(document).ready(function(){
			alert('我是入口函数2')
		});
		$(function(){
			alert("我是入口函数3,推荐写法")
		})
		jQuery(function(){
			alert("我是入口函数4")
		})
	</script>
</head>
<body>
	<!-- 需求:要求获取网络图片的宽高 -->
	<!-- <img src="https://img1.baidu.com/it/u=3217543765,3223180824&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1661619600&t=f2c3b255ba98fd782956e21478644f26" alt=""> -->
</body>
</html>

2.3jQuery核心函数和核心对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!-- 
    1.jQuery核心函数作为一般函数调用的时候:$(param)
      1-参数为函数: 当DOM加载完成后，执行此回调函数
			$(function(){})
      2-参数为选择器字符串:查找所有匹配的标签，并将它们封装成jQuery对象
			$('div:last')
      3-参数为DOM对象:将DOM对象封装成jQuery对象
			$(this)
      4-参数为HTML标签字符串(很少用):创建标签对象并封装成jQuery对象
			$('<p>我是一个p标签</p>')
    2.jQuery静态方法，$作为对象使用:$.xxx()
			数组静态方法
			Array.isArray();
			from();
			Array.of();
      1-$.each() 隐式遍历数组
      2-$.trim 取出两端的空格 
      等等
   -->
	 <script src="./1-jquery.js"></script>
	 <script>
		$(function(){
			// var btn=$('button:first');
			// btn.click(function(){
			// 	console.log(this,$(this));
			// 	console.log(this.innerHTML);
			// 	console.log($(this).html());
			// 	$('<input type="text">').appendTo('body');
			// })
			var obj={
				name:"zhangsan",
				age:12
			}
			var arr=[1,2,3,4,5]
			// 参数：目标对象/数组 回调函数 
			$.each(arr,function(index,item){
				console.log(index,item);
			});
			var str='    hello world   ';
			console.log(str);
			console.log(str.trim());
			console.log($.trim(str));
		})
	 </script>
</head>
<body>
	<button>点击我</button>
	<input type="text">
	<input type="text">
</body>
</html>

2.4 jQuery的核心函数和核心对象

        核心函数

            简称:jQuery函数（$/jQuery）
            引入jQuery库以后，直接使用$/jQuery即可
            当函数用:$(params)
            当对象用的时候:$.each()  

        核心对象

            简称:jQuery对象 $()
            得到jQuery对象：执行jQuery函数返回的就是jQuery对象
            使用jQuery对象:$obj.xxx()     

核心函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	 <script src="./1-jquery.js"></script>
	 <script>
		$(function(){
			// var btn=$('button:first');
			// btn.click(function(){
			// 	console.log(this,$(this));
			// 	console.log(this.innerHTML);
			// 	console.log($(this).html());
			// 	$('<input type="text">').appendTo('body');
			// })
			var obj={
				name:"zhangsan",
				age:12
			}
			var arr=[1,2,3,4,5]
			// 参数：目标对象/数组 回调函数 
			$.each(arr,function(index,item){
				console.log(index,item);
			});
			var str='    hello world   ';
			console.log(str);
			console.log(str.trim());
			console.log($.trim(str));
		})
	 </script>
</head>
<body>
	<button>点击我</button>
	<input type="text">
	<input type="text">
</body>
</html>

 核心对象

jQuery对象是类数组对象，jQuery的方法都是对类数组中的元素的批量操作 注意：jQuery对象可以调用jQuery.prototype中声明的方法，普通的Element元素则不能调用。在使用jquery的时候，拿到一个对象务必要搞明白该对象是Element元素还是jQuery实例 如下代码，this是Element元素，如果想调用jQuery方法，需要使用$()将其转换为jQuery实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="./1-jquery.js"></script>
	<script>
		// window.onload=function(){
		// 	var button=document.getElementsByTagName("button")[0];
		// 	var username=document.getElementsByTagName('input')[0];
		// 	button.onclick=function(){
		// 		alert(username.value)
		// 	}
		// }
		// jquery实例 $() jQuery.prototype
		$(function(){
			var button=$('button:last');
			// jquery绑定事件 
			button.click(function(){
				alert($('input:first').val())
			})
		})
	</script>
</head>
<body>
	用户名: <input type="text">
	<button>确定(js)</button>
	<button>确定(jquery)</button>
</body>
</html>

2.5 jQuery选择器

jQuery的选择器与CSS3中的选择器几乎完全一致，这里就不再赘述。总体梳理：

  1. 基本选择器

  2. 层次选择器

  3. 伪类选择器

  4. 伪元素选择器器

  5. 属性选择器 具体用法如下：

$("form")
$("ul.nav > li")

jQuery中所有选择器都以美元符号开头：$()

例如：

元素选择器

在页面中选取所有<div>元素

$("div")
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="./1-jquery.js"></script>
	<script>
		$(function(){
			$('button:first').click(function(){
				// $('#one').hide();
				// $('.two').hide();
				$('#one,.two').hide();
				alert($('input[type="text"]').val())
			})
		})
	</script>
</head>
<body>
	<button>点击我</button>
	<input type="text" value="zhangsan">
	<input type="submit" value="">
	<input type="email" name="" id="">
	<div id="one">我是一个div</div>
	<div class="two">我是一个div</div>
	<div>我是一个div</div>
	<div>我是一个div</div>
</body>
</html>

2.6jQuery事件机制

jQuery的事件绑定与Element元素不同，不可以使用onxxx属性，也不能使用addEventListener，而是使用on()，可以理解为on是对于Element元素事件绑定的封装。 on()也支持事件代理。

  1. on(event,[selector],[data],fn)

  2. off(event,[selector],fn)

  3. one(event,[selector],fn)

  4. trigger(event,[data]) jQuery的事件绑定还支持快捷绑定

  5. click([data],fn) …

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="./1-jquery.js"></script>
	<script>
		$(function(){
			// var btn=$('button:first');
			// 绑定事件 on(事件类型,传参（可选）,事件处理程序)
			// btn.on('click',[1,2,3],function(event){
			// 	console.log(event,'事件对象');
			// 	console.log(event.data);
			// 	$(event.target).html('不想被点');
			// });
			// // 模拟点击事件
			// btn.trigger('click');
			// // 解绑事件
			// btn.off('click');
			// // 绑定事件方法 bind绑定 参数(事件类型,参数(可选),事件处理程序)
			// btn.bind('click',[1,2,3],function(e){
			// 	console.log(e,'事件对象');
			// });
			// btn.unbind();//无参代表全部解绑事件
			// // one 绑定事件
			// btn.one('click',function(e){
			// 	console.log('我被绑定了',e);
			// });
			// 事件代理 on(事件类型,代理对象,事件处理程序)
				// $('body').on('click','button',function(){
				// 	$('button').html('我被点击了')
				// })
			// 事件类型
			$('button').dblclick(function(){
				console.log('我被双击了');
			});
			$('button').mouseenter(function(){
				$(this).css({
					backgroundColor:'red'
				})
			});
			$('button').mouseleave(function(){
				$(this).css({
					backgroundColor:'blue'
				})
			})
			$('input[type="text"]').focus(function(){
				$(this).css({
					backgroundColor:'red'
				})
			})
			$('input[type="text"]').blur(function(){
				$(this).css({
					backgroundColor:'blue'
				})
			})
		})
	</script>
</head>
<body>
	<input type="text">
	<button>点击我</button>
	<button>点击我</button>
	<button>点击我</button>
	<button>点击我</button>
	<button>点击我</button>
	<button>点击我</button>
</body>
</html>

2.7jQueryDOM操作

jQuery中提供了一系列的操作DOM节点的api,用于解决DOM原生API无法进行批量操作并且功能性较差的弊端。 插入方法：append、appendTo、prepend、prependTo、after、before、insertBefore、insertAfter 包裹方法：wrap、unwrap、wrapAll、wrapInner、 替换方法：replaceWith、replaceAll 移除方法：empty、remove、detach 克隆方法：clone

通过 jQuery，可以很容易地添加新元素/内容。

我们将学习用于添加新内容的四个 jQuery 方法：

  • append() - 在被选元素的结尾插入内容（仍然在该元素的内部）

  • prepend() - 在被选元素的开头插入内容

  • after() - 在被选元素之后插入内容

  • before() - 在被选元素之前插入内容

  • 等等

复制节点:

原生DOM有 cloneNode(true/false) 浅复制false 深复制true。是否复制内部内容，并不涉及事件的复制。默认浅复制

jQuery对象有 clone(true/false) 浅复制false 深复制true。会复制内容，是否复制事件。默认浅复制

属性操作 在dom中，我们通过setAttribute/getAttribute/style来操作元素属性，jQuery中提供了更加便捷的方法 属性：attr、removeAttr、prop、removeProp css：addClass、removeClass、toggleClass、wrapInner、 内容：html、text、val

jQuery 拥有可操作 HTML 元素和属性的强大方法

三个简单实用的用于 DOM 操作的 jQuery 方法：

  • text() - 设置或返回所选元素的文本内容

  • html() - 设置或返回所选元素的内容（包括 HTML 标记）

  • val() - 设置或返回表单字段的值

  • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="./1-jquery.js"></script>
	<style>
		.active{
			background-color: red;
		}
		.two{
			font-size: 28px;
		}
	</style>
	<script>
		$(function(){
			// append插入内容到元素尾部
			$('div:first').append('<p>我是一个p标签</p>');
			// 创建一个div添加到body尾部
			$('<div>我是块级元素</div>').appendTo('body');
			// 克隆节点 针对事件 浅克隆不克隆事件 深克隆克隆事件
			$('button:first').click(function(){
				console.log('我被点击了');
			})
			// clone方法无参 浅克隆 有参true 深克隆
			$('button:first').clone(true).appendTo('body');
			// 获取div的id属性值
			// attr:参数1 获取该属性名对应的属性值
			// 参数:2 给当前dom元素设置/修改属性
			console.log($('div:first').attr('id','newId'));
			// removeAttr 删除属性
			$('div:first').removeAttr('title');

			// 添加类名
			$('div:first').addClass('active');
			// 删除类名 删除对应的样式
			$('div:first').removeClass('two');
			// 切换类名 --对应的是删除或者是添加类名 
			$('div:first').click(function(){
				$(this).toggleClass('active')
			});


			// 获取body标签内部的内容
			console.log($('body').html());//innerHTML 识别代码片段
			console.log($('body').text());//innerText
		})
	</script>
</head>
<body>
	<button>确定</button>
	<div id="one" class="two" title="我是一个div">我是一个div</div>
</body>
</html>

    2.8jQuery静态方法

  • <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="./1-jquery.js"></script>
	<script>
		$(function(){
			var obj={
				name:'zhangsan',
				age:12
			}
			$.each(obj,function(key,value){
				console.log(key,value);
			});
			var arr=[1,2,3];
			$.each(arr,function(index,item){
				console.log(index,item);
			});
			// map 映射 参数:要操作的数组 回调函数
			var res=$.map(arr,function(item,index){
				return item+4
			});
			console.log(res);
			// toArray 将类数组转成数组--实例方法
			console.log($('div').toArray());
			// 合并数组 merge 
			console.log($.merge([1,2,3],[4,5,6]));
			// 将对象转换成查询字符串
			var obj={
				page:1,
				pageSize:10
			}
			console.log($.param(obj));
			var obj1='{"name":"zhangsan","age":12}';
			console.log($.parseJSON(obj1));
		})
	</script>
</head>
<body>
	<div>我是一个div</div>
	<div>我是一个div</div>
	<div>我是一个div</div>
</body>
</html>

什么意思哦呢嗯
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery知识点总结
05-18
以下是对jQuery知识点的详细总结： ### 一、获取元素 #### 1. 选择器 - **基本选择器**：`$("#id")`, `$(".class")`, `$("tag")`, `$("selector1, selector2")` 用于根据ID、类名、标签名或多个选择器组合选取元素...
前端——JavaScript（ECMAScript、DOM、BOM）和jQuery
Today_He的博客
09-23 348
文章目录JavaScriptJS概述JS语法变量数据类型数组0循环0JS函数0JS中DOM事件及其绑定0JS示例——全选反选、隔行换色 JavaScript JS概述 一、简述 1、简称js 2、高级编程的脚本语言（脚本：不能脱离载体html） 3、因为和sun公司有合作，所以叫javascript 二、JavaScript的作用 通过DOM获取html的元素（标签）内容。可以提交数据（登陆验证等），可以给页面加上动态效果（轮播图等） 三、组成 ECMAScript、DOM、BOM 下面引用一段： 1.BO
jQuery知识点整理
10-24
主要介绍了jQuery知识点整理的相关资料,需要的朋友可以参考下
jQuery知识点.docx
07-07
在本篇笔记中，我们将深入探讨 jQuery 的一些核心知识点。 首先，我们关注初始化过程。`$(document).ready()` 与 `window.onload` 都用于在页面加载完成后执行代码，但它们有区别。`$(document).ready()` 在 DOM ...
js+jquery常用知识点汇总
10-24
本文主要介绍了jquery源码中常见的知识点以及javascript中原型链常见的知识点，非常的全面，这里推荐给小伙伴们。
jquery相关知识点
04-07
jquery相关知识
Day43
最新发布
m0_67496588的博客
06-20 518
JSON，Ajax
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1483
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
工具链--nuxt框架 简介（一）
qq_35876316的博客
06-16 343
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 890
Vue在表单校验中trigger属性指定何时触发校验规则
VUE el-select Select 选择器 选项是对象，显示是一个值name ，但是绑定的对象值是id方案
mqiqe的专栏
06-14 330
在 Vue 中使用 Element UI 的 el-select 组件时，如果希望显示对象的某个属性（如 name），但实际绑定的是对象的另一个属性（如 id），需要使用 value-key 和 label 属性来分别指定这两个属性。在这个示例中，v-model=“selectedId” 用于绑定选择的值，该值将是选中项的 id。当用户选择一个选项时，selectedId 将被更新为选中项的 id，而 el-select 下拉列表中显示的是每个选项的 name 属性。
Vue3：解决在main.ts 中调用自定义的js文件会报错的问题
SUMMERENT的博客
06-14 172
案例：Vue3 ，使用的是main.ts ，在main.ts 中调用自定义的ruoComment.js文件会报错，解决报错：找到tsconfig.json文件。//1.将输出结构重定向到目录。,//2.编译时允许有js }加上如下代码：即可解决问题。,//3.添加路径支持js。
vue格网图
南北粉面馆
06-16 309
【代码】vue格网图。
vue3 防止按钮的连续点击（连点）
MtangEr的博客
06-13 368
vue3防止按钮连续点击，可注册自定义指令 v-prevent-reclick实现
uniapp 仿写弹窗
weixin_45881304的博客
06-13 615
【代码】uniapp 仿写弹窗。
？和？？的用法 ---Javascript
weixin_45705239的博客
06-13 230
当你在JavaScript中看到问号（?）和双问号（??）时，它们通常是用于条件处理和空值合并的操作符。
07_第七章 前端工程化
weixin_65644655的博客
06-13 818
第七章 前端工程化 一、前端工程化开篇 1.1 什么是前端工程化 前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题,其主要目的为了提高效率和降低成本。 1.2 前端工程化实现技术栈 前端工程化实现的技术栈有很多,我们采用ES6+nodejs+npm+Vite+VUE3+router+pinia+axios+Element-plus组合来实现 ECMAScript6 VUE3中大量使用ES6语法 Nodejs 前端
TS:元组
fury的博客
06-15 482
元组（Tuple）是一种数据结构，类似于数组，但与数组不同的是，元组中的元素类型可以各不相同，且元组的长度是固定的。- **固定类型**：元组中每个位置的元素类型在定义时确定，之后不能改变。3. **多维坐标**：例如表示三维空间的坐标 `[x, y, z]`。3. **顺序相关**：元组中的元素是有序的，可以通过索引访问。1. **类型安全**：元素类型固定，能提供更好的类型检查。- **固定长度**：元组的长度在定义时确定，之后不能改变。2. **多种类型**：元组中的每个元素可以是不同的类型。
使用 Vue 和 Ant Design 实现抽屉效果的模块折叠功能
ping
06-13 343
有两个模块，点击上面模块的收起按钮时，上面的模块可以折叠，下面的模块随之扩展。接下来，在模板中使用。
使用JQuery实现横向导航菜单效果中用到的知识点
05-18
使用JQuery实现横向导航菜单效果可以用到以下知识点： 1. 选择器：JQuery的选择器可以用来选择HTML元素，比如class、id、标签名等。横向导航菜单的选项卡通常使用class选择器来选择。 2. 事件处理器：使用JQuery的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值