![](https://img-blog.csdnimg.cn/20200406105507414.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript学习笔记
文章平均质量分 75
个人学习笔记
程序员的脱发之路
在脱发的路上越走越远
展开
-
js执行字符串代码
这种方式就不用但是上下文命名冲突的问题,因为代码是在函数中执行的,因此我们不需要在自调用函数中运行 new Function()。注:当前的a打印的是1,也就是Function 构造函数创建的函数仅在全局作用域中执行。注:需要注意的是,eval是在当前上下文执行的代码,如果字符串中的变量与当前上下文的变量命名冲突,就会导致报错。我们很难去避免字符串中的变量和当前上下文的变量重复,所以我们可以在自调用函数中执行eval来解决这个问题。这样就没问题了,注:这里的a打印的是2,也就是我们自调用函数作用域的a。原创 2024-01-25 10:34:04 · 952 阅读 · 0 评论 -
js获取元素内的文本(不包含子元素文本)
获取一个元素内的第一层文本,比如将一个div标签作为输入框时,我们可能会在里面插入一些元素,但这些元素只是作为标注使用,并不会作为用户输入的内容,这时候我们就不能获取标注元素内部的内容。成功的获取到了内容,因为是我们手动写的html标签,并不是用户输入的内容,默认会带上空格和换行,如果想要去除需要单独处理(如果是用户输入的内容,不建议对换行和空格进行单独处理)遍历所有的子节点,判断如果是text节点,就获取节点中的内容,将所有text节点内容拼接就得到了我们要的结果。// 获取所有text节点的内容。原创 2024-01-24 16:27:32 · 640 阅读 · 0 评论 -
原生js监听当前元素之外的点击事件
实现思路:监听整个dom的点击事件,判断当前元素是否包含点击事件的触发元素即可。当我们需要实现点击其他位置关闭弹窗的时候,就需要监听当前元素之外的点击事件。即使点击子元素,也能被我们判断到。原创 2024-01-16 17:22:59 · 888 阅读 · 0 评论 -
for循环命名
使用for循环命名跳出多重循环原创 2023-09-05 11:32:05 · 448 阅读 · 0 评论 -
前端文件的分片和组合
现在大文件上传或下载时,大概率要使用分片上传或下载,来达到断点续传的效果。不然一旦网络中断,之前已经上传或下载的一部分就丢失了,需要全部重新上传或下载。原创 2023-08-24 17:36:09 · 365 阅读 · 0 评论 -
获取图片主题色
当我们遇到根据背景图片来修改页面样式的时候,可能就需要去实现获取图片主题色的功能。这里的数据我们可以自己做聚合、分析等等处理方式进行操作,最后得到我们自己想要的值。有兴趣可以自行去了解,我这里就使用了一个现成的库。首先引入quantize.js(模块化的项目中可以使用import或者require,这里只是方便演示)最后可以选择对前五的颜色进行加权处理,也可以直接取排第一的颜色(根据业务要求自行判断)0 是透明的,255 是完全可见的)所以我们要对数据进行处理,得到每个像素点的数据。原创 2023-07-13 10:38:49 · 450 阅读 · 0 评论 -
前端获取用户粘贴的字符串
如果我们需要获取到用户粘贴的字符串并进行相应的处理时。例如根据用户复制的多行字符串生成多行数据。原创 2023-02-15 16:40:37 · 304 阅读 · 1 评论 -
js实现复制功能
js实现复制功能一、具体场景二、实现方式1. document.execCommand(1)具体实现(2)方法特点2.navigator.clipboard.writeText(1)具体实现(2)方法特点一、具体场景前端有时需要实现点击按钮复制的功能,这个时候就不能让用户去手动选择内容右键复制了。二、实现方式1. document.execCommand(1)具体实现复制时,先选中文本,然后调用document.execCommand(‘copy’),选中的文本就会进入剪贴板。这就需要借助输入框原创 2022-04-12 15:50:21 · 14890 阅读 · 0 评论 -
H5鼠标拖动事件(drag)
H5鼠标拖动事件一、元素拖动二、相关事件1.拖拽元素(1)dargstart(2)drag(3)dragend2.目标元素(1)drop(2)dragover(3)dragenter(3)dragleave一、元素拖动HTML5已经完全支持鼠标拖动元素,其中图片和链接默认就支持拖拽,而其他的元素需要设置属性draggable=“true” 就可支持拖拽。其中在拖拽的过程中会默认触发一系列事件。二、相关事件1.拖拽元素被拖拽的元素自身<div id="box" draggable="原创 2021-11-15 10:46:31 · 2107 阅读 · 0 评论 -
前端自定义事件的触发与监听
前端自定义事件的触发与监听一、基本概念1.Event2.CustomEvent3.addEventLister4.addEventLister二、代码实现1.触发原生事件(1)不传递参数(2)传递参数2.触发自定义事件一、基本概念实现前端自定义事件的触发与监听主要有四个东西,他们分别是Event、CustomEvent、addEventLister、dispatchEvent1.Eventevent = new Event(eventNameStr, options);eventNameStr:原创 2021-09-18 11:02:22 · 2754 阅读 · 2 评论 -
按钮focus解决方法
按钮focus(点击按钮后,键盘的空格键和enter键会再次触发按钮点击事件)一、问题描述二、解决方式1.替换标签2.阻止键盘的默认事件一、问题描述当我们在浏览器点击按钮之后,再次按键盘的空格键或者enter键均会再次触发此按钮的点击事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head&原创 2021-09-01 15:18:38 · 2114 阅读 · 1 评论 -
JS的异步是怎么实现的
JS的异步是怎么实现的一、浏览器的渲染进程1.GUI渲染线程2.JS引擎线程3.事件触发线程4.定时器出发线程5.异步HTTP请求线程二、总结一、浏览器的渲染进程页面的渲染,JS的执行,事件的循环,都在这个进程内进行。1.GUI渲染线程当浏览器收到响应的html后,该线程开始解析HTML文档构建DOM树,解析CSS文件构建CSSOM,合并构成渲染树,并计算布局样式,绘制在页面上。当界面样式被修改的时候可能会触发reflow和repaint,该线程就会重新计算,重新绘制,是前端开发需要着重优化的点。原创 2021-08-16 10:56:55 · 1117 阅读 · 1 评论 -
JavaScript中的typeof和instanceof
typeof和instanceof一、typeof1. 基本介绍2. 具体使用3. 缺点二、instanceof1. 基本介绍2. 具体使用3. 缺点一、typeof1. 基本介绍描述:typeof用于判断一个变量的类型,返回值主要有:“number”、 “string”、“boolean”、“object”、“function”、“undefined”、“symbol”语法:typeof operandoperand:要被判断类型的变量返回值:operand的类型2. 具体使用 cons原创 2021-06-07 14:34:16 · 208 阅读 · 2 评论 -
Math对象
Math对象一、Math对象简介二、Math对象属性三、Math对象方法一、Math对象简介Math 对象用于执行数学任务。Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。二、Math对象属性三、Math对象方法...原创 2021-05-24 16:31:09 · 151 阅读 · 1 评论 -
JavaScript改变this指向-apply、call、bind
apply、call、bind1、apply2、call3、bind4、区别这三个方法按照正式的说,就是这些方法能劫持另外一个对象的方法,继承另外一个对象的属性。通俗的说就是可以改变this的指向。1、apply语法:apply(T,A)T:改变后this的指向A:传递的参数,数组类型具体演示: window.name = 'window' let parent1 = { name: 'parent' } function child1() { console.原创 2021-04-20 14:21:56 · 213 阅读 · 0 评论 -
JavaScript闭包
闭包一、变量作用域二、闭包的作用1. 闭包的概念2. 读取函数内部变量3. 让变量的值保持在内存三、闭包的缺点一、变量作用域了解闭包之前,我们先简单了解一下JavaScript变量作用域。首先函数内部可以访问全局变量: let a = 1000 function f1() { console.log(a); } f1() // 1000函数外部自然无法访问函数内部变量: function f2() { let b = 1000 } f2() c原创 2021-04-15 11:06:05 · 89 阅读 · 0 评论 -
前端文件下载
前端文件下载a标签下载接口下载a标签下载a标签下载是最简单好用的方法<a href="./demo.txt" download>下载</a>通过download还可以修改文件下载后的名字和类型:<a href="./demo.txt" download="text">下载</a>注意:当资源不是同源的,下载txt、图片文件文件download属性是无效的,加与不加一个样,还是会直接打开,但是其他类型文件是可以的,例如:docx文件、pdf文原创 2021-04-14 17:17:26 · 147 阅读 · 0 评论 -
构造函数之new运算符解析
new运算符解析一、简介二、构造函数三、new操作符1. 创建新对象2. 继承原对象的原型3. 改变this指向并赋值4.最终结果四、手动实现new运算符一、简介我们在开发过程中经常会使用new运算符实例化对象。比如:let date = new Date();实际上就是 new 构造函数() 来实例化一个对象。任何的函数都可以作为构造函数存在。之所以有构造函数与普通函数之分,主要从功能上进行区别的,构造函数的主要功能是初始化对象,特点是和new 一起使用。new就是在创建对象,从无到有,构造函数就原创 2021-04-07 11:37:33 · 1633 阅读 · 0 评论 -
Date对象
Date对象一、Date对象简介1.Date对象的创建二、Date对象方法1. get方法(1)getMilliseconds()(2)getSeconds()(3)getMinutes()(4)getHours()(5)getDate()(6)getDay()(7)getMonth()(8)getFullYear()(9)getTime()(10)getTimezoneOffset()2. set方法(1)setMilliseconds()(2)setseconds()(3)setMinutes()(4)原创 2021-04-06 18:08:23 · 1464 阅读 · 0 评论 -
Boolean对象
Boolean对象一、Boolean对象简介1.Boolean对象的创建二、Boolean对象方法1. toString()2. valueOf()三、Boolean对象描述一、Boolean对象简介Boolean 对象表示两个值:“true” 或 “false”。1.Boolean对象的创建 let a = Boolean(1) // 返回值 let b = new Boolean(0) // 返回对象 console.log(a); console.log(b);二、Bool原创 2021-04-06 10:15:15 · 223 阅读 · 0 评论 -
本地图片转为file类型
本地图片转为file类型一、场景描述二、解决思路三、具体实现1.相对路径转base642.base64转blob一、场景描述类似我们页面中有一些图片,当用户点击页面上对应图片时,我们需要将图片上传到后台服务器(以file类型的形式)二、解决思路因为图片时放在项目中,所以我们前端只有图片的相对路径。所以我们需要先从相对路径中获取到当前图片的base64编码(通过canvas实现),之后再将其转换为blob格式(file其实是blob数据类型的延伸),最后将blob转换为file类型即可三、具体实现原创 2021-03-18 16:27:54 · 3202 阅读 · 0 评论 -
Javascript对象-Arrary对象
Arrary对象一、Arrary对象简介1.Arrary对象创建二、Arrary对象属性1. length(1)属性描述(2)具体演示三、Arrary对象方法1. push()、pop()2.unshift()、shift()3. toString()、join()4. concat()、splice()5. reverse()、sort()6.slice()一、Arrary对象简介Array 对象用于在单个的变量中存储多个值。1.Arrary对象创建new Array():新建一个数组对象,数组里原创 2021-02-25 15:23:53 · 387 阅读 · 1 评论 -
Web前端-Javascript对象
Javascript对象一、简介二、主要对象1. Arrary2. Boolean3. Date4. Math5. Number6. String7. RegExp8. Functions9. Events10. 自定义对象一、简介JavaScript 中的所有事物都是对象:字符串、数值、数组、函数…此外,JavaScript 允许自定义对象。二、主要对象Javascript现有对象主要有九个,当然我们也可以自定义对象1. ArraryArray 对象用于在单个的变量中存储多个值。2. Bo原创 2021-02-24 10:34:11 · 78 阅读 · 0 评论 -
Web前端-BOM之Location对象
Location对象一、Location对象简介二、Location对象属性1. hash(1)属性介绍(2)具体演示2. host、hostname、port(1)属性介绍(2)具体演示3. href(1)属性介绍(2)具体演示4. protocol、pathname、search(1)属性介绍(2)具体演示三、Location对象方法1. assign()2. reload()3. replace()四、Location对象描述一、Location对象简介Location 对象包含有关当前 URL原创 2021-02-23 17:30:38 · 529 阅读 · 0 评论 -
Web前端-BOM之History对象
History对象一、History对象简介二、History对象属性1. length(1)属性介绍(2)具体演示三、History对象方法1. back()(1)方法介绍(2)具体演示2. forward()(1)方法介绍(2)具体演示3. go()(1)方法介绍(2)具体演示三、History对象描述一、History对象简介History 对象包含用户(在浏览器窗口中)访问过的 URL。History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。原创 2021-02-23 15:24:41 · 221 阅读 · 0 评论 -
Web前端-BOM之Navigator对象
Navigator对象一、Navigator对象简介二、Navigator对象集合三、Navigator对象属性1. appCodeName、appName、appVersion(1)属性介绍(2)具体演示2. cookieEnabled、onLine(1)属性介绍(2)具体演示3. platform、userAgent(1)属性介绍(2)具体演示四、Navigator对象方法1. javaEnabled()五、Navigator对象描述一、Navigator对象简介Navigator 对象包含有关浏览原创 2021-02-23 14:01:40 · 880 阅读 · 0 评论 -
JSON数据格式
JSON数据格式一、JSON基础1.简介2.JSON实例3.JSON语法4.JSON的值二、JSON在JavaScript中的使用1.创建2.值的读取3.值的修改4.字符串转JSON(1)将数据转换为 JavaScript 对象。(2)第二个参数 fun的使用5.JSON转字符串一、JSON基础1.简介JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)JSON 是轻量级的文本数据交换格式JSON 独立于语言:JSON 使用 Javascrip原创 2021-02-19 10:33:35 · 206 阅读 · 0 评论 -
Local Storage学习笔记
Local Storage学习笔记一、什么是Local Storage二、Local Storage的优势与局限1.优势2.局限三、Local Storage的使用1.Local Storage的浏览器支持情况2.Local Storage的写入3.Local Storage的读取4.Local Storage的修改5.Local Storage的删除(1)删除键值对(2)清除所有内容6.Local Storage键的获取一、什么是Local Storage在HTML5中,新加入了一个Local Sto原创 2021-02-07 10:06:54 · 1289 阅读 · 0 评论 -
Moment.js学习笔记
Moment.js学习笔记一、简介二、获取时间1.获取当前时间2.获取开始时间(1)获取今天0时0分0秒(2)获取本周第一天(周日)0时0分0秒(3)获取本周周一0时0分0秒(4)获取当前月第一天0时0分0秒3.获取结束时间(1)获取今天23时59分59秒(2)获取本周最后一天(周六)23时59分59秒(3)获取本周周日23时59分59秒(4)获取当前月最后一天23时59分59秒4.获取当前月的总天数5.get Time分别获取当前年月时分三、日期时间格式化1.格式化日期2.格式化时间一、简介Momen原创 2021-02-06 15:42:16 · 344 阅读 · 0 评论 -
Web前端-BOM之Screen对象
Screen对象Screen对象简介Screen对象属性1.width、height(1)属性介绍:(2)具体演示:2.availWidth、availHeight(1)属性介绍:(2)具体演示:3.colorDepth(1)属性介绍:(2)具体演示:4.pixelDepth(1)属性介绍:(2)具体演示:5.orientation(1)属性介绍:(2)具体演示:Screen对象描述Screen对象简介Screen 对象包含有关客户端显示屏幕的信息。详细文档请见:w3school之Screen对象Sc原创 2021-02-03 15:49:13 · 365 阅读 · 0 评论 -
Web前端-BOM之Window对象(二)
Window对象(二)-对象方法及对象描述一、对象方法1.提示框 alert()、confirm()、prompt()2.定时器 setTimeout()、setInterval()、clearTimeout()、clearInterval()3.窗口操作 open()、close()4.滚动操作 scrollBy()、scrollTo()二、对象描述一、对象方法1.提示框 alert()、confirm()、prompt()alert():alert(message)方法显示带有一段消息和一个确认原创 2021-01-28 16:31:32 · 177 阅读 · 0 评论 -
Web前端-BOM之Window对象(一)
Window对象(一)一、Window 对象简介二、Window 对象集合三、Window 对象属性1.closed(1)属性介绍:(2)具体演示:2.defaultStatus(1)属性介绍:(2)具体演示:3.document对象(1)属性介绍:(2)具体演示:4.history对象(1)属性介绍:(2)具体演示:5.innerheight、innerwidth(1)属性介绍:(2)具体演示:6.location对象(1)属性介绍:(2)具体演示:7.name(1)属性介绍:(2)具体演示:8.Navi原创 2021-01-27 15:24:26 · 402 阅读 · 1 评论 -
Web前端-BOM
BOM一、简介二、对象三、window对象一、简介所谓 BOM 指的就是浏览器对象模型 Browser Object Model,它的核心就是浏览器。它使JavaScript可以和浏览器进行交互。二、对象BOM的核心对象是window对象,它表示浏览器的一个实例。它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,因此网页中所有全局作用域中声明的变量、函数都会变成window对象的属性和方法。三、window对象window对象下面包含几个重要原创 2021-01-27 10:36:13 · 318 阅读 · 0 评论 -
js获取元素样式-行内样式、内部样式、外部样式
js获取元素样式一、行内样式具体实现二、获取所有样式具体实现一、行内样式具体实现在js获取到dom元素之后,使用其style属性即可获取到其所有的行内样式<div id="div1" style="width: 100px; height: 200px"></div>const div1 = document.getElementById('div1');console.log(div1.style);console.log('height:' + div1.st原创 2020-12-12 13:30:36 · 2605 阅读 · 0 评论 -
js阻止函数连续执行
js阻止函数连续执行一、问题描述二、实现思路三、代码实现1.不需要传递参数2.传递参数一、问题描述当一些情况下时,我们不希望我们的js方法被连续的执行,比如说登录按钮的点击事件,我们不希望用户恶意的点击出现一些意外情况。还有一些vue中的自定义事件传值函数,我们希望其不被连续触发,而是接收其最后一次触发的值二、实现思路我们可以在每次事件触发时将我们的方法增加一个定时器,当然增加之前要进行一个判断,如果已有定时器说明已经处在执行队列中,清除其定时器,让其继续等待执行。当定时器结束时在执行需要触发的方法原创 2020-12-01 17:54:38 · 1697 阅读 · 0 评论 -
前端存储-cookie
前端存储-cookie一、cookie是什么cookie机制cookie属性项ExpiresCookie的域名Cookie的路径Cookie的前端设置、获取与删除一、cookie是什么HTTP协议本身是无状态的,即服务器无法判断用户身份。Cookie实际上是一小段的文本信息(key-value格式)。客户端向服务器发起请求,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,浏览器把请求的网址连同该Cook转载 2020-10-26 15:59:37 · 4178 阅读 · 0 评论 -
js数组和字符串相互转换
数组和字符串相互转换一、数组转字符串1.toString()(1)一维数组(2)多维数组2.toLocalString()3.join()二、字符串转数组1.split()一、数组转字符串1.toString()将数组直接转换成一个字符串(1)一维数组即:[1,2,3,4] => ‘1,2,3,4’数组中 toString() 方法能够把每个元素转换为字符串,然后以逗号连接输出显示。let arr = [1,2,3,4,5] console.log(arr.toString())原创 2020-10-12 11:09:44 · 404 阅读 · 0 评论 -
页面窗口位置-scrollLeft和scrollTop
页面窗口位置之scrollLeft和scrollTop使用场景适用情况使用场景具体演示查看设置使用场景适用情况这两个属性只能用于元素设置了overflow的css样式中。否者这两个属性没有任何意义。且overflow的值不能为visible,但可以为hidden,auto,scroll的之中,但是hidden最常见。使用场景当你的子盒子宽度或者高度大于父盒子,且父盒子设置了overflow属性时,就可以使用js操作scrollLeft和scrollTop这里拿overflow=auto举例&原创 2020-10-12 10:03:18 · 4889 阅读 · 0 评论 -
JS小案例-天猫导航栏
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0;原创 2018-12-24 21:30:14 · 425 阅读 · 0 评论