JavaScript
文章平均质量分 72
本专栏围绕前端的JavaScript进行讲解,主要解决JavaScript一些常见问题和常用技巧
爱吃巧克li
热爱技术,热爱生活,Never Give up!
展开
-
JSONP解决跨域问题
全称为Cross-Origin Resource Sharing,简单来说请求的客户端和服务端的端口、域名、协议中的任意一个有不一样的地方在URL的展示中,那么就会出现这个跨域问题。它产生的原因是因为浏览器实现了一种同源策略,同源策略是为了保护信息安全而设立的安全机制,它限制了一个源从另一个源获取或发送数据资源进行交互操作,为了防止恶意网站窃取用户信息。原创 2023-11-25 22:02:45 · 800 阅读 · 0 评论 -
原生JS实现计算器(内含源码)
这里最大的亮点就在于,我在JS中只用了一个键盘事件和一个鼠标事件,就绑定了计算器的数字和符号,那么好文本正式开始。原创 2023-11-25 21:37:27 · 523 阅读 · 0 评论 -
JS事件代理(事件委托)
本文详细讲解JavaScript中关于事件代理技术相关的内容以及源码实例的讲解。那么好,本文正式开始事件代理作为JavaScript中一种常用的技术,它主要价值是在于允许将子元素的事件处理程序绑定在父元素中,比如表格中的每一条数据对应表格就是子对父,而当我们想通过一个事件来绑定旗下所有条数据时,我们就可以通过调用table表格来实现这个功能,从而简化代码并且提高性能。原创 2023-11-25 20:37:39 · 916 阅读 · 0 评论 -
详解Js数据类型种类以及判断数据类型的四种方法
包装对象是指针对原始值创建的临时对象,在进行操作时会自动转换为对应的原始值。例如,通过包装对象可以访问原始值的属性和方法。如:Number、String、Boolean都是包装对象。原创 2023-11-25 15:31:22 · 1025 阅读 · 0 评论 -
深拷贝与浅拷贝(原理+手撕的几种方法)
在处理循环引用,需要有处理无限递归的逻辑,否则会报错。对象中的所有属性必须是可以序列化的,如正则表达式、函数、是指复制对象的引用,本质上它俩共享了同一个内存空间,是完全复刻了原对象的引用内容,并且新开辟了。序列化是指将一个对象转换成字符串或字节流。第三方库也可以解决。多层就是{a:{b:1}}。,用于存储这些引用。原创 2023-11-25 15:24:57 · 429 阅读 · 0 评论 -
JS手写instanceof(内含源码与详解)
本文主要讲解JavaScript如何手写一个简易的instanceof,从而实现数据类型判断原创 2023-11-25 14:11:07 · 644 阅读 · 0 评论 -
项目启动出现白屏问题需要刷新后才能显示解决方案
为什么页面会出现加载过慢问题?可能原因有以下两种: 1. js脚本加载时间过长 2. 资源过多加载延迟,在初次渲染时无法加载成功原创 2023-11-25 13:47:13 · 964 阅读 · 0 评论 -
ES6新特性
本文主要讲解ES6到底有哪些新特性,那么好,本文正式开始。原创 2023-11-24 15:51:09 · 919 阅读 · 3 评论 -
JavaScript实现动态背景颜色
本文主要讲解JavaScript如何实现动态背景颜色,可以根据颜色选择器选择的颜色而实时更新到背景中原创 2023-11-24 15:00:38 · 913 阅读 · 2 评论 -
力扣:判断回文串(JavaScript)
用四种解法:包括for、while、push和递归四种解法判断字符串是否为回文串原创 2023-11-24 14:17:24 · 514 阅读 · 0 评论 -
仿ChatGPT对话前端页面(内含源码)
本文主要讲解如何做出类似ChatGPT的前端页面。具体我们的效果图是长这样,其中除了时间是动态的之外,其他都是假数据。接下来让我们从布局和样式的角度分析,如何做出来这样的页面,同时文末有全部源码,需要自取。原创 2023-11-23 17:48:02 · 3538 阅读 · 3 评论 -
如何加速JavaScript 代码运行速度
本文主要通过五个方面来讲解如何使Js代码得到性能优化,从而实现加快Js代码运行速度的作用。那么好,本文正式开始。原创 2023-11-22 17:44:01 · 213 阅读 · 3 评论 -
JS计算代码执行时间三大方法
如果你想看到自己写的某段Js代码到底执行了多久,想要判断或者获取它们的执行时间,那么可以通过以下三种方法进行获取zhixing和调用,那么好,本文正式开始。原创 2023-11-22 08:16:08 · 2129 阅读 · 4 评论 -
HTML5生成二维码
本文主要讲解如何通过原生HTML、CSS、Js中的qrcodejs二维码生成库,实现一个输入URL按下回车后输出URL。文章底部有全部源码,需要可以自取。原创 2023-11-21 11:24:34 · 5372 阅读 · 26 评论 -
详解JS遍历对象的五种方法
本文主要讲解Js遍历Object对象的五种方法:for in、keys+for of、values+for of、entries+for of、getOwnPropertyNames+for of原创 2023-11-21 08:15:41 · 2168 阅读 · 0 评论 -
详解JavaScript中的作用域种类、作用与作用域链
本文主要讲解JavaScript中作用域包括:什么是作用域,作用域种类、作用域作用以及作用域链的代码文字讲解。原创 2023-11-21 09:53:34 · 42 阅读 · 2 评论 -
详解JS遍历数组的十八种方法
for循环可以遍历数组,它一共有三个参数,第一个参数可以当成数组索引值,想要遍历时候可以设置初始值为0,然后以数组长度为判断依据,如果不大于该数组长度,则调用该函数体,然后+1.原创 2023-11-20 18:21:27 · 221 阅读 · 0 评论 -
Js之‘This value was evaluated upon first expanding.It may have changed since then‘
This value was evaluated upon first expanding.It may have changed since then解析原创 2023-11-20 15:33:09 · 757 阅读 · 0 评论 -
JavaScript闭包
本文主要讲解JavaScript中的闭包,闭包是什么?闭包(closure)是一个函数以及其捆绑的周边环境状态(lexicalenvironment,词法环境)的引用的组合。换而言之,闭包让开发者可以从内部函数访问外部函数的作用域。在 JavaScript中,闭包会随着函数的创建而被同时创建。原创 2023-11-20 11:48:16 · 62 阅读 · 3 评论 -
JS实现拖拽效果(内含源码)
本文主要讲解Js如何实现拖拽效果。把一个方块利用鼠标移动到屏幕内任意位置。原创 2023-11-20 09:23:15 · 562 阅读 · 5 评论 -
Js中clientX/Y、offsetX/Y和screenX/Y之间区别
本文主要通过讲解JavaScript中clientX、clientY、offsetX、offsetY、screenX、screenY之间的区别。原创 2023-11-19 21:45:31 · 450 阅读 · 8 评论 -
JavaScript实现飞机发射子弹详解(内含源码)
文本主要讲解如何利用JavaScript实现飞机发射子弹,实现过程以及源码讲解。原创 2023-11-19 12:35:35 · 601 阅读 · 12 评论 -
Js键盘事件实现元素上下左右动态移动(内含源码)
本文主要讲解如何利用JavaScript控制键盘的上下左右键同时利用监听键盘事件来实现对一个元素的控制。键盘控制,本质上是监听到用户对键盘使用,并在监听后实现一些方法使得元素可以跟随键盘进行移动。原创 2023-11-18 23:34:40 · 1284 阅读 · 0 评论 -
JavaScript管理HTMLDOM元素(增删改查)
本文主要讲解JavaScript如何通过管理HTML上的DOM元素,其中包括如何查询、创建、修改以及删除具体功能和源码讲解。原创 2023-11-18 21:32:35 · 869 阅读 · 1 评论 -
队列与堆栈:原理、区别、算法效率和应用场景的探究
正常情况下都是常用时间复杂度也就是O(1),队列的查找操作的时间复杂度为O(n),而堆栈没有查找操作。原创 2023-11-14 09:51:33 · 333 阅读 · 0 评论 -
解析浏览器的事件循环机制:理解JavaScript运行时的执行顺序
如何才能确保JS稳定有序的执行呢,这里就要讲到JS的运行机制:事件循环。原创 2023-11-13 17:42:30 · 105 阅读 · 0 评论 -
了解防抖和节流:提升前端交互体验的实用策略
本文将重点介绍前端性能优化方法之一的防抖和节流。首先解释了它们的概念和原理,然后探讨了它们在前端开发中的应用场景,如输入框搜索、滚动事件等。最后,通过简单的代码示例展示了如何实现防抖和节流函数。通过学习和应用这两种技术,我们可以有效地减少不必要的函数执行次数,提高页面响应速度,从而改善用户体验。定义:延迟一段时间再触发,如果再延迟时间内又触发,则清除上一个定时,再开始新的定时。应用场景:搜索框联想、屏幕伸缩。定义:在一段时间间隔内,稀释事件的触发频率,不论事件被触发几次,只执行一次。原创 2023-11-13 14:29:21 · 1173 阅读 · 0 评论 -
解密 JavaScript 中的 this:作用、行为和陷阱
JavaScript的this关键字是JavaScript中比较重要的概念之一,本文主要讲解this的作用、行为以及使用它会遇到的陷阱。原创 2023-11-10 17:51:28 · 156 阅读 · 0 评论 -
原生JavaScript之函数特殊对象arguments
访问函数参数:你可以使用arguments对象来访问在函数调用时传递的参数,即使你没有在函数定义中明确声明这些参数。通过索引访问arguments对象中的元素,例如 arguments[0] 可以获取第一个参数,arguments[1] 可以获取第二个参数,依此类推。处理可变数量的参数:有时候你可能需要编写接受不定数量参数的函数。通过使用arguments对象,你可以处理任意数量的参数,而无需提前定义形式参数的个数和名称。原创 2023-11-07 11:43:52 · 92 阅读 · 0 评论 -
JavaScript红宝书第6章:集合引用类型
林林总总写了一星期,map和set那里写的很少,只讲了基本用法。那么好,本期内容到此结束。原创 2023-11-06 17:35:54 · 140 阅读 · 0 评论 -
JavaScript红宝书第5章:基本引用类型
那么好,在基本数据类型中,有这三种数据类型,可以被new出来,那new出来的数据类型,就变成了包装对象类型,它们也可以调用对应的方法进行使用。同时通过new出来的这三个属性可以被添加新的属性和方法,这也被称为特殊引用类型。在上述代码中可以发现,没有new出来的原始值是无法进行添加属性方法的操作的,new出来的就可以实现,new出来的就变成了包装对象类型也叫特殊引用类型。UTC和parse返回的参数相同,但是UTC中输入的参数只有年和月是必需的,剩余的可以加也可以不加,月如果是0的话,默认为1。原创 2023-10-06 15:46:11 · 133 阅读 · 0 评论 -
JavaScript红宝书第4章:变量、作用域与内存
1、typeof检测返回的是对应类型名称常用于检测基本数据类型,检测null和引用数据类型总是返回Object;2、instanceof检测,返回的是布尔值,基本数据类型和引用数据类型分别是false和true,前提是不要使用new的方式创建基本数据类型.3、constructor 返回的是构造函数,但是不可以检测null和undefined因为它俩没原型,且当调用对象原型被修改时,则只能返回默认的Object类型,慎用.4、Object.getPrototypeof() 返回的是原型5、原创 2023-09-28 10:06:37 · 145 阅读 · 0 评论 -
JavaScript红宝书第3章:数据类型详解
/script>当我们定义了一个变量但没有给它赋初始值,没初始值也就不知道它的数据类型是什么,那它的数据类型就是undefinted,那么它被打印出来也是undefined,同时我们也可以定义一个变量的值为undefined,那么它的数据类型也是undefined。原创 2023-09-22 17:13:55 · 220 阅读 · 0 评论 -
JavaScript红宝书第3章:var let以及const的区别和作用
ES5:var。ES6:let、const原创 2023-09-21 09:06:01 · 117 阅读 · 0 评论 -
JavaScript红宝书第1.2章:script基本属性
async:异步执行脚本defer:延迟脚本下载src:要执行的代码外部文件地址noscript:表示浏览器不支持或拒绝支持script脚本时出现的内容。原创 2023-09-20 20:16:43 · 84 阅读 · 0 评论 -
原生JavaScript之dom如何进行事件监听(事件捕获/冒泡)
那么好,这次主要讲解的就是dom是如何进行事件监听和事件取消监听的,我们知道vue中主要用watch来进行监听.原创 2023-09-07 13:48:39 · 687 阅读 · 0 评论 -
原生JavaScript之dom表单改变和鼠标常用事件
那么好,本次我们聊聊表单改变时如何利用onchange方法来触发input改变事件以及鼠标常用的滑入滑出,点击down和点击up事件.原创 2023-09-07 12:58:25 · 507 阅读 · 0 评论 -
原生JavaScript之dom与setInterval/settimeout结合实现动画
那么好,这次我们要讲解的就是利用dom事件和定时方法来实现一个简单的动画效果.实现这个效果,一共分为三个步骤:1.实现效果2.实现点击切换位置3.实现动画效果。原创 2023-09-07 11:26:28 · 110 阅读 · 0 评论 -
原生JavaScript之dom添加表单验证
第一种,在form表单中加入onsubmit事件,进入事件后,可以通过dom.forms[父formname][子formname].value,然后测试这个别名是否为空,在这个判断语句中即可放入想要的表单验证。第二种,在input中加入required,这个是浏览器默认的校验,如果说input中加入required,则默认它生效.原创 2023-09-07 10:56:51 · 120 阅读 · 0 评论 -
js实现定时器
Document的方法 getElementById()返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的,这个方法自然而然地成为了一个高效查找特定元素的方法。用原生js实现一个倒计时效果.最下面有全部源码,需要自取。():可以根据Id来移除该元素.():js中增加HTML元素.原创 2023-08-23 14:53:59 · 146 阅读 · 0 评论