![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 57
object not found
一位业余前端,汇集前端杂七杂八的知识
展开
-
index.js:273 Uncaught TypeError: navLink.forEach(...) is not a function
原因:首先我们可以明显的看到获取的DOM元素明显的是一个数组,原型上也有forEach()方法,看上去是不是很合理,但是有趣就有趣在这个获取到的DOM元素数组经过typeof检测其实是一个对象,正是这一点导致数组forEach()方法报错。今天遇到个有点意思的问题,使用forEach()遍历document.querySelectorAll获取的DOM节点时出现的报错,虽然不影响正常使用,但有强迫整的我看不得一点报错。使用for()循环代替forEach()或者使用遍历对象的方法遍历即可。原创 2023-12-08 02:57:01 · 521 阅读 · 0 评论 -
前端实现主题(深色模式)切换的几种方案
实现思路:首先定义几个我们需要的全局样式变量,之后定义几个集合属性(不同的主题样式),然后将其放在html根元素标签里,再动过js动态的切换这个集合属性就可以实现主题的切换,具体看以下代码;原创 2023-12-06 16:00:20 · 3904 阅读 · 1 评论 -
Object.assign()用法和特性
假如源对象的属性值是一个对象的引用,那么它也只指向那个引用;简单来说,就是Object.assign()是对象的静态方法,可以用来复制对象的可枚举属性到目标对象,利用这个特性可以实现对象属性的合并。1.当目标对象和源对象中有重名属性时后面的属性值会覆盖前面的属性值,也就是说拷贝的源对象里的属性值会将目标对象里的重名的属性值覆盖掉;2.拷贝多个源对象时,没重复的属性会按序拷贝到目标对象,同理后面的重复属性也会覆盖前面的属性;简单来说Object.assign()就是一个对象的拷贝方法。以下是vue中的用法。原创 2022-12-15 21:52:55 · 613 阅读 · 0 评论 -
正则表达式
正则表达式是用来处理字符串的,它可以让你节省很多很多的代码,例如:如果一个输入框不让提交,这个过程就是表单验证的过程。如果我们输入的不是手机号,就不让提交如果我们输入的不是邮箱地址,就不让提交如果我们输入的不是身份证号,不然提交上面这些操作都是表单验证的场景,而这些都需要用到正则表达式。原创 2022-09-28 09:12:42 · 784 阅读 · 0 评论 -
BOM对象常用方法总结
首先BOM全称为浏览器对象模型(BOM)。是用来获取浏览器相关信息的对象,并且可以操纵浏览器,hash 表示url中”#“后跟着的的内容 hash内容不管怎么改变,访问的网页是不变host 域名 和 hostname 一致hostnamehref 当前网页的urlorigin 只包含协议和域名pathname 路径port 端口protocol 协议search?后面的参数。原创 2022-09-22 20:41:53 · 5475 阅读 · 0 评论 -
ES6解构赋值与扩展运算符
扩展运算的作用可以简单理解为:把数组的中括号,和对象的{}直接去掉。直接去除后,里面的数据格式,我是无法在JS的环境的中独立存在。扩展运算符的操作需要被放置在合适的位置上。解构赋值很容易遇到一种情况,我们要使用的名字和已有变量名冲突(重复)了。在我们使用map操作时,可以保留原有数据的基础上,添加新的属性。解构赋值,可以实现直接从数组或者对象中取值赋值给变量。原创 2022-09-21 10:08:07 · 6686 阅读 · 0 评论 -
ES6中的常用数组方法总结
数组方法:forEach map filter find findIndex some every reduce reduceRight。原创 2022-09-21 10:00:04 · 6843 阅读 · 0 评论 -
客户端存储localStorage和sessionStorage以及Cookie
正常情况下,我们前端写的静态页面,只要刷新,就重置了,无法保留任何信息。为解决这一弊端我们可以利用js中的客户端数据存储。在JS中存储在客户端数据有很多方式:Storage有两个对象:localStorage (本地存储)和sessionStorage(临时存储),Cookie,indexedDB(一般用于游戏开发存储体积较大)原创 2022-09-19 19:27:09 · 7595 阅读 · 0 评论 -
浅析Promise
承诺,在声明函数时承诺好,如果成功就执行resolve,如果失败就执行reject。定义resolve和reject函数的人,是使用这个Promise对象的人。原创 2022-09-19 09:08:45 · 7503 阅读 · 0 评论 -
聊天室案例实现保姆级教学
先来看效果图, 基于axios,js实现,// 首先创建一个自执行函数(function () { // 获取元素 let header = document.querySelector('.header') let ipt = document.querySelector('.ipt') let send = document.querySelector('.send') // 注册事件 send.addEventListener('click', sen原创 2022-09-16 11:37:51 · 7537 阅读 · 0 评论 -
前端常用请求方法总结
这是一个别人封装好的http请求库,使用时需要我们引入才能够使用。因为个人比较喜欢用这种方法请求数据所以放到第一位。ES6中出现的替代xhr对象进行异步请求的一个对象。它默认是基于promise解决异步操作。fetch的用法很简单。我们获取到的response是一个JSON字符串,使用时需要将其转换为JSON对象。要发起ajax请求有很多方法,原生xhr或者fetch都可以,我们先了解xhr。以上两种为常用方法,剩下的很少用到所以这里我就不多巴巴了,详情参考官方文档。原创 2022-09-14 19:35:33 · 9866 阅读 · 0 评论 -
前后端交互之网络服务的基本概念
在我们进行前后端数据交互时,一般使用ajax或者axios,在我们进行请求时,需要请求网络上的url。这里有几个概念,我们通过传递不同的参数,获得到不同的资源。具体参数的作用是什么,则需要和后台沟通。以上的三个东西,都是由后台提供好的文档,我们只需要在ajax特定的地方填入特定的内容即可。原创 2022-09-13 12:14:37 · 10725 阅读 · 1 评论 -
数据可视化之大屏模板和自适应放大缩小方法
废话不多说直接上根据屏幕视口大小自动缩放的实现方法,和模板代码原创 2022-09-08 09:54:45 · 15195 阅读 · 4 评论 -
js读取文件的内置方法之 FileReader
基于该对象,我们可以实现对选中的读取操作fileReader读取的文件需要从input中获取给fileReader绑定onload事件。原创 2022-09-05 11:20:54 · 17068 阅读 · 0 评论 -
5分钟学会canvas的使用
在HTML5新增新的标签,名为画布,可以使用JS在上面完成对应的画的操作。正常情况我们可以把它当成一个img看待。原创 2022-09-05 11:14:47 · 16055 阅读 · 0 评论 -
一分钟学会使用js读取上传图片文件
显示一个图片,除了直接放文件路径,还可以放Base64当我们用file选择一个文件时,我们希望能够读取到文件路径,然后显示到一个img上或许你会想利用value值显示,input:file上确实有value但是这个value不能用fileReader,尽量先监听,然后再读取,好了不废话了直接看代码吧。原创 2022-09-05 10:39:21 · 15891 阅读 · 0 评论 -
call apply bind的用法和区别
bind一般用在事件绑定时使用,因为事件绑定时,函数内部的this指向绑定的元素,如果函数中不需要用到这个this,但是要用到其他this,我们就可以进行绑定时修改。有n个参数,第一个参数是this指向,设置后,函数内部的this就会指向对应的我们设置的值。有两个参数,第一个参数是this指向,设置后,函数内部的this就会指向对应的我们设置的值。在声明函数时使用,该方法调用后,会得到一个新的函数,这个函数中的this指向被改变。他会返回一个绑定死的指定上下文的函数,他不会调用函数,从IE9开始兼容。原创 2022-09-02 15:17:34 · 16602 阅读 · 0 评论 -
如何借助this指向实现精确判断类型和将类数组对象转数组
数组调用toString时调用自己的toString,没办法调用到Object的toString方法,所以我们如果想要让其他类型调用Object.prototype.toString方法。因为Object.prototype.toString这个方法中的this 在 通过obj.toString调用时指向obj,所以我们得到[object Object]csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。...原创 2022-09-01 12:06:13 · 18013 阅读 · 0 评论 -
js修改函数this指向的三种常用方法总结
函数在调用时this指向可以随意的进行修改。通过使用call apply bind可以修改对应的this指向。原创 2022-09-01 12:02:36 · 18234 阅读 · 0 评论 -
js防抖和节流
防抖,即指定时间内只执行最后一次节流,指定时间内执行规定的次数一般常用于输入框搜索时向后台请求数据,点击和滑动等场景。原创 2022-08-31 19:17:17 · 18287 阅读 · 0 评论 -
浅谈js中的深拷贝和浅拷贝
3.遍历它,然后通过hasOwnProperty判断是不是他自己的属性,是就将其赋值给要return的数组;3.遍历它,然后通过hasOwnProperty判断是不是他自己的属性,是就将其赋值给要return的数组;浅拷贝的堆内存地址指的是同一个,即只拷贝第一层,深层的引用值只拷贝地址,2.生成新的变量,新变量是数组还是对象取决于传的参数是数组还是对象;2.生成新的变量,新变量是数组还是对象取决于传的参数是数组还是对象;csdn文章推荐受影响解决办法10个字10行。.........原创 2022-08-31 18:57:07 · 17325 阅读 · 0 评论 -
js面向对象之封装,继承,多态,类的详解
创建一个子对象继承Parent,以下方法是我比较常用的一个继承方法,当然还有一些象寄生组合式继承,对象冒充继承等,个人感觉花里胡哨除了减少内存的使用没有太大的作用,绕来绕去还是离不开原型链。JS官方的继承:把要继承的对象放在子对象的原型链上。ES6中新增的写法,是构造函数写法的语法糖,只是为了填补js中类的缺失,在ES6中就有了这种写法,更简单,更好用。构造函数的原型对象中的方法里的this也指向实例对象。同一个方法,在不同的对象中,有不同的表现,就是多态。彩色打印机的打印是彩色的,普通打印机是黑白的。..原创 2022-08-31 11:35:58 · 19638 阅读 · 0 评论 -
js之面向对象的概念
JS是一个基于对象的语言。既能面向过程又能面向对象。封装继承多态。不管是什么对象,这个对象下一定有一个属性叫__proto__现在大部分浏览器显示的都是[[Prototype]]但是这个属性不能用,还是得用__proto__..............原创 2022-08-30 17:38:50 · 19516 阅读 · 0 评论 -
使用js实现响应式瀑布流布局(附带动画效果)
4.进行判断如果i小于列数则将第一列的图片高度添加进数组然后设置style的top,left值控制其位置。5.如果i大于列数就说明是第二行,则找到上一行数组中高度最小的元素,根据其设置top,left值;1.获取图片容器的宽度,根据宽度的大小去控制列数的生成;2.定义间距变量,图片数组和计算出每列宽度;3.遍历图片元素数组,为每一项加上宽度;6.最后根据根据索引将每一项添加到数组。......原创 2022-08-30 16:10:33 · 19677 阅读 · 0 评论 -
使用js实现返回顶部的缓速动画效果
匀速效果在滚动条的滚动效果上交互不好看,我们可以使用缓动动画,可以利用定时器实现原创 2022-08-29 12:22:21 · 20601 阅读 · 0 评论 -
js楼层导航点击跳转偶尔不生效bug
可以通过将元素距离顶部的距离的数组加1,让其肯定大于,从而解决偶尔不触发的问题。根据元素距离顶部距离的数组进行判断要跳转的位置,有时候会出现跳转不生效的原因。具体原因是这一行代码判断问题。......原创 2022-08-29 11:41:28 · 19738 阅读 · 0 评论 -
浅谈js中的事件对象及常用方法
默认情况下,和clientX一样,如果元素中有定位属性,则基于该元素offsetParent的距离,如果元素自身有定位属性,则距离自身左侧/顶部的距离。a标签跳转,在网页中,有很多时候,我们需要借助a标签的特性,但是又不想发生任何跳转,我们就需要取消浏览器默认行为。事件对象是在所有的事件中都会自动生成的一个对象。诸如a标签跳转,表单提交,鼠标右键打开菜单,这些操作都是浏览器的默认行为。鼠标点击的位置,距离浏览器窗口左侧/顶部的距离。鼠标点击的位置距离屏幕左侧/顶部的距离。IE8的时候,是不能用这个e的。原创 2022-08-24 12:12:21 · 21487 阅读 · 0 评论 -
使用js实现动态小球气泡背景
动态气泡背景原创 2022-08-24 12:00:37 · 21412 阅读 · 0 评论 -
常用DOM节点常用操作追加删除方法总结
在获取元素的节点后,还可以利用DOM提供的方法实现节点的添加,如创建一个li元素节点,为li元素节点创建一个文本节点等。方法说明创建元素节点创建文本节点创建属性节点在指定元素的子节点列表的末尾添加一个节点为当前节点增加一个子节点(插入到指定子节点之前)返回指定名称的属性节点设置或者改变指定名称的属性节点create系列的方法是由document对象提供的,与Node对象无关。...原创 2022-08-23 17:18:42 · 22574 阅读 · 0 评论 -
js中的DOM事件之冒泡和捕获事件详解
DOM中的事件是一个很中要的东西,它可以让用户和浏览器之间进行交互,以此来实现人机交互效果。原创 2022-08-22 14:03:42 · 23359 阅读 · 1 评论 -
原生js获取验证码功能组件(简易版)
7.设置一个定时器并判断时间是否为1,是就将按钮状态重新设置成可点击并插入文本,然后将定时器清除。5.点击后将按钮设置为不可点击状态sendBtn.disabled = true,同时发起请求。3.判断input框的值是否为正确的手机号,是则进入下一步,不是则进行提醒。2.为按钮绑定点击事件,点击后声明一个60秒的时间变量。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。csdn文章推荐受影响解决办法10个字10行。原创 2022-08-19 15:44:34 · 18362 阅读 · 0 评论 -
js中的作用域
什么是作用域,通俗讲,作用域内部的变量无法被外部获取。用来产生一个封闭的空间,防止外部的变量污染内部的变量。作用域中的变量名允许和外部或者其他作用域中的变量重名,不会受到任何影响。比如,一个班级有两个叫张三的,是会影响到提问问题的。但是两个张三如果分散在不同的组里,就不会影响了。原创 2022-08-19 14:14:04 · 17884 阅读 · 0 评论 -
js中setTimeout()和setInterval()定时器的使用方法及区别
通常在网页上我们有相关需求在我们使用定时器时,我们想要带代码去执行,需要放在一个函数中。js执行代码,优先执行同步代码,然后才执行异步代码。延迟时间单位为毫秒。1000 是 1s。原创 2022-08-19 12:09:43 · 17911 阅读 · 0 评论 -
通过js获取元素各种尺寸宽高方法总结
我们在网页上通常要获取到元素的尺寸,可以从样式入手,用getComputedStyle获取。但是因为带的有单位,并且获取时不方便。所以我们可以使用其他操作。原创 2022-08-19 12:05:03 · 18789 阅读 · 0 评论 -
js中this指向是什么以及指向谁
我们声明的变量,最后都会变成window对象的属性。我们声明的函数,最后都会变成window对象的方法。事件函数,this指向调用了这个函数的DOM对象。全局环境中的this指向window对象。对象中的方法 this指向调用该方法的对象。普通函数,调用时this指向window。...原创 2022-08-18 19:31:24 · 18677 阅读 · 0 评论 -
如何使用或者操作DOM
首先要想使用DOM里的元素我们就得先获取到它,那么问题来了该怎么获取DOM。看完这篇文章就可以轻松理解DOM,还不赶紧打开瞧瞧。原创 2022-08-18 16:58:59 · 19184 阅读 · 0 评论 -
js字符串常用方法总结
和数组的includes方法类似,用来判断字符串中是否有指定的字符串,有则返回true,无返回false。查看所有的字符串方法,但是问题来了,这么多方法用的完吗记的完吗?会得到对应的字符的ASCII码,如果有多个值,则得到字符串中第一个值的ascii码。可以获取到对应的值在字符串中的下标,不支持正则表达式,和数组类似。我们也可以单独清楚前和后的空格,可以利用下面的方法。将一个字符串中指定的字符进行替换,替换成新的字符。我们填入对应的ascii,就会得到对应的字符。把英文变成纯小写或者纯大写。...原创 2022-08-17 16:29:21 · 19476 阅读 · 0 评论 -
js中常用的数组方法总结
js中的数组常用方法,保姆级教学!纯干货建议收藏!!!需要使用三个参数,第一个参数为下标,表示插入到这个下标的前面,第二个参数为固定的0,后面的参数为要插入的值。map的返回值是一个和原数组长度一致的数组,通过改变map内部的函数的返回值,可以得到不同的数组。想要把两个数组拼接成一个数组时,可以使用concat,它的返回值是拼接后的数组,原数组不变。会改变原数组,将原数组中的值进行修改,有三个功能:插入,删除,修改......原创 2022-08-17 10:59:11 · 19295 阅读 · 0 评论 -
浅谈回调地狱
当我们在执行DOM事件操作时,浏览器会悄悄向服务端发送很多的没有必要的http请求,携带后台可识别的参数,等待服务器响应返回数据,这个过程是异步回调的,当许多功能需要连续调用,环环相扣依赖时,它就像多层蛋糕一样。首先我们可以在编写自己的代码的过程中可以优化自己的代码,比如说简单的命名函数这一块,我们不能杂乱无章的写一堆出来,可以对函数命名,简单明了。函数作为参数层层嵌套看起来很好理解,实际上就是我们在做原生JS的时候产生的回调函数,因为函数闭包特性,所以产生层级嵌套,,我们先来看看官方的说法。...原创 2022-08-16 12:06:33 · 19245 阅读 · 0 评论 -
详谈javascript中对象的本质
为什么数字字符串布尔值不是对象,却可以调用一些方法,使用一些属性呢?如下因为我们JS中提供很多对象。就像数组,我们可以直接通过[]声明数组,也可以通过我们的字符串数字布尔值等,他们再调用方法时,js会帮助我们。通过new Number new String new Boolean来把对应的原始值,转换为对象,然后再调用相关的属性或方法。......原创 2022-08-16 09:35:22 · 19202 阅读 · 0 评论