JavaScript
文章平均质量分 75
愛 / 滥 / 時
宇宙的有趣不如跟我一起学习。
展开
-
【ES6】-- js类与类的继承
ES6 要求,子类的构造函数必须执行一次super函数。代表父类的构造函数。因此,当我们的的打印位置出现在super的先后次序不一样时会出现不一样的执行结果。作为函数时,super()只能用在子类的构造函数之中,用在其他地方就会报错。原创 2022-09-16 17:07:05 · 375 阅读 · 0 评论 -
【ES6】-- 对象、数组、字符串常用API
比较两个数是否相等 返回值:true/false。原创 2022-09-15 19:30:16 · 531 阅读 · 0 评论 -
【ES6】-- 解构赋值超详解
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构,解构的本质属于“模式匹配”,只要,左边的变量就会被赋予对应的值。如果解构不成功,变量的值就等于undefined。解构赋值等号右侧必须存在等号右侧不是数组或者对象时,会先转换成对象,再继续操作。如果是 null、 undefined则抛出错误。原创 2022-09-14 20:03:48 · 226 阅读 · 1 评论 -
猿创征文 |【JavaScript】-- js知识点大总结
1.组成:核心js dom(文档对象模型) bom(浏览器对象模型)2.环境:node 浏览器3.特点:1.弱类型语言2.解释性语言3.执行顺序按照解析顺序从上至下执行4.区分大小写4.注释5.标识符命名规则1.由字母数字下划线$组成2.不能由数字开头3.不能以关键字和保留字命名4.使用小驼峰命名6.变量特点:变量声明提前可以重复声明没有块级作用域7.数据类型。原创 2022-09-08 19:33:59 · 376 阅读 · 3 评论 -
【H5】-- 拖拽事件
dataTransfer是一个用来保存拖动及放置过程中的数据的对象,可以保存一项或者多项数据,可以是一种或者多种数据类型,用于拖动拖动元素与放置元素之间的数据传递。来获取到拖动元素中传出来的id,通过数据获取节点,放置节点。在拖动事件中设置 dataTransfer.setData(key,value) 将拖动元素的id传出去;案例中的console.log()都是为了测试的,实际应用时可以不需要将每一条过程都打印出啦。当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发。......原创 2022-08-31 20:28:22 · 878 阅读 · 2 评论 -
【H5】前端存储 -- cookie、sessionStorage、localStorage
前端存储分为cookie和webStorage,webStorage又分为sessionStorage(会话存储)和localStorage(本地存储)。原创 2022-08-31 19:32:07 · 1235 阅读 · 1 评论 -
经典算法题 -- 水仙花数
水仙花数是指一个 n 位数 ( n≥3 ),它的每个位上的数字的 n 次幂之和等于它本身。我们可以使用以下代码实现100-1000之间的水仙花数的输出。例如:1^3 + 5^3+ 3^3 = 153。原创 2022-08-31 09:03:22 · 2180 阅读 · 2 评论 -
【JavaScript】-- 数组去重的方法
思路:先定义一个新数组来接收去重后的新数组,使用forEach方法遍历原数组,若该元素在新数组中不存在,即indexOf 等于-1时,使用push方法将其添加入新数组中,最后返回这个新数组。思路:先定义一个新数组来接收去重后的新数组,遍历原数组,判断原数组的元素在新数组中是否存在,若为false,则将其使用push方法添加进新数组,并返回新数组。思路:先定义一个新数组来接收去重后的新数组,利用 filter 过滤并配合 indexOf 查找元素最后返回这个新数组。...原创 2022-08-30 21:24:50 · 341 阅读 · 2 评论 -
【canvas】-- H5新增标签canvas的简单用法
♡‧₊˚ 基本用法 ‧₊˚ ♡获取canvas对象--获取画布取得上下文(context)--获取画笔定义填充样式 / 定义轮廓样式绘制填充图形 / 绘制填充图形原创 2022-08-30 19:23:53 · 450 阅读 · 0 评论 -
【JavaScript】-- 利用JS实现全选/取消全选
实现要求:点击"全选"框,以下所有选项全部勾选。把"全选"框从选中状态勾选成未选中状态,其他复选框全部取消选中效果。当其他复选框全部选中,"全选框"为选中状态。当其他复选框有一个未选中,"全选框"取消选中状态。...原创 2022-08-30 18:30:28 · 3180 阅读 · 1 评论 -
【jQuery】-- 基本使用步骤
jQuery对象是类数组对象,jQuery的方法都是对类数组中的元素的批量操作注意:jQuery对象可以调用jQuery.prototype中声明的方法,普通的Element元素则不能调用。在使用jquery的时候,拿到一个对象务必要搞明白该对象是Element元素还是jQuery实例如下代码,this是Element元素,如果想调用jQuery方法,需要使用$()将其转换为jQuery实例...原创 2022-08-29 20:26:40 · 876 阅读 · 0 评论 -
【Ajax】-- 使用Ajax实现异步数据请求
Asynchronous Javascript And XML”(异步的JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用(HTTP请求),这样就可使网页从服务器请求少量的信息,而不是整个页面,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。......原创 2022-08-29 09:10:22 · 1938 阅读 · 0 评论 -
浅谈 -- ♡ ‧₊˚ JS 与JQ的区别 ‧₊˚ ♡
js是网页的脚本语言,js是语言.jQuery是用js语言写出来的一个框架.原创 2022-08-26 19:17:50 · 279 阅读 · 0 评论 -
【前端】-- 面试题大合集(持续更新)
当DOM的操作影响元素的几何信息(位置),那么浏览器就需要重新计算元素的几何属性,并将其重新安放在正确的位置,这个过程就叫做重排。事件委托也称为事件代理,就是利用事件冒泡的原理指定一个事件处理程序管理一类事件处理程序。)发生变化,但是没有改变布局,重新将外观绘制出来的过程就叫重绘。目的/优点:减少DOM操作与减少浏览器的重排与重绘,并且新添加的节点也能被添加事件。事件流的三个阶段:事件捕获 ----> 事件触发 --- > 事件冒泡。事件流就是事件执行的顺序,分为冒泡型事件流和捕获型事件流。........原创 2022-08-25 18:38:28 · 372 阅读 · 2 评论 -
【DOM】-- 事件机制
这个对象包含了一些基本信息,比如导致事件的元素、发生的事件类型,以及可能与特定事件相关的任何其他数据。例如,鼠标操作导致的事件会生成鼠标位置信息,而键盘操作导致的事件会生成与被按下的键有关的信息。事件处理程序的名字以"on"开头,因此 click 事件的处理程序叫作 onclick,而 load 事件的处理程序叫作 onload。简单来说,事件流就是时间执行的顺序。在阻止冒泡之前,我们要知道一个对象叫 event ,它代表事件的状态,比如事件在其中发生的元素,键盘状态,鼠标位置,鼠标按钮状态等……原创 2022-08-24 20:21:42 · 311 阅读 · 2 评论 -
【七夕特效】 -- 满屏爱心
是HTML5的一个新特性,canvas又叫做画板。我们可以在canvas上绘制我们需要的图形。anvas本身是一个HTML元素,需要HTML元素的配合高度和宽度属性而定义出的一块可绘制区域,定义区域之后使用JavaScript的脚本绘制图像的HTML元素。它可以基本的绘制图形,进一步的制作照片,绘制动画,更进一步可以处理和渲染视频。canvas有两个属性,一个是宽度(width),一个是高度(height)。注意低版本浏览器可能会不支持,且结尾的标签不可省略。...原创 2022-08-02 16:42:11 · 30659 阅读 · 31 评论 -
【七夕情人节特效】-- canvas实现满屏爱心
是HTML5的一个新特性,canvas又叫做画板。我们可以在canvas上绘制我们需要的图形。anvas本身是一个HTML元素,需要HTML元素的配合高度和宽度属性而定义出的一块可绘制区域,定义区域之后使用JavaScript的脚本绘制图像的HTML元素。画布它可以基本的绘制图形,进一步的制作照片,绘制动画,更进一步可以处理和渲染视频。canvas有两个属性,一个是宽度(width),一个是高度(height)。注意:低版本浏览器可能会不支持,且结尾的标签不可省略。...原创 2022-08-04 14:47:18 · 3195 阅读 · 3 评论 -
JS--正则表达式
在JavaScript中,正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线,昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等。 测试正则表达式 testtest()正则对象方法,用于检测字符串是否符合该规则,该对象会返回true或false,其参数是测试字符串。regex0bj.test(str) 可以在线测原创 2022-07-30 23:06:40 · 146 阅读 · 0 评论 -
HTML DOM 学习笔记【全】
HTML DOM 是:HTML 的标准对象模型HTML 的标准编程接口W3C 标准HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。DOM NodesDOM 节点根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:整个文档是一个文档节点每个 HTML 元素是元素节点HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点原创 2022-08-03 15:40:41 · 120 阅读 · 2 评论 -
重写数组方法 pop push shift… -- js随记
push这个方法是向数组的末尾添加一个或多个元素,并且返回数组新的长度(改变数组长度);pop这个方法不用添加参数,直接将数组最后一个参数弹出数组,并返回这个删除的元素。shift这个方法是把数组第一个元素删除,并返回第一个元素的值(改变数组长度)unshift这个方法可以向数组的开头添加一个或多个元素,并返回新的数组长度(改变数组长度)...原创 2022-08-23 09:45:00 · 260 阅读 · 2 评论 -
【JavaScript】-- 三种继承方式
构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型有一个属性指回构造函数,而实例有一个内部指针指向原型。如果原型是另一个类型的实例呢?那就意味着这个原型本身有一个内部指针指向另一个原型,相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。实现继承是 ECMAScript 唯一支持的继承方式,而这主要是通过原型链实现的。原创 2022-08-22 13:07:15 · 230 阅读 · 1 评论 -
indexOf()与incldes()的异同 -- js随记
indexOf()和includes() 都有两个参数,第一个参数时我们要查找的元素值,第二个是开始查找的位置索引值,即从哪个位置开始查找, 若不传递第二个参数则默认从0开始查找;indexOf()返回我们查找的这个元素在数组中第一次出现时所对应的索引值,若不存在则返回-1。includes(NaN) 可以查找到数组中的NaN元素,若数组中含有NaN 则会返回true。indexOf(NaN) 不可以查找到数组中的NaN元素,哪怕数组中含有NaN 也会返回-1。在进行匹配时,会自动进行一个。原创 2022-08-19 11:26:39 · 601 阅读 · 2 评论 -
【JavaScript】-- 工厂模式&构造函数模式&原型模式
前面的案例使用构造函数可以这样写// 自定义构造函数 function Person(name , age , gender) {// lisi在这个案例中,Person()构造函数代替了 createPerson()工厂函数。实际上,Person()内部的代码跟 createPerson()基本是一样的,只是有如下区别。没有显式地创建对象。属性和方法直接赋值给了 this。没有 return。另外,要注意函数名 Person 的首字母大写了。......原创 2022-08-18 20:28:47 · 298 阅读 · 0 评论 -
【JavaScript】-- 基本包装类型(含笔试题)
上述第二行代码给自动创建的String实例对象添加了一个pro属性,并且给这个实例的 pro 属性赋值为 hello,尽管在此刻代码执行时它是生效的,但这行代码执行完毕的那一刻便已经自动销毁了,String实例对象的pro属性也就不复存在了,当第三行代码开始执行时,又进入了读取模式,会重新创建一个新的String实例对象,显然在这个最新创建的String实例是没有pro属性的。每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型对象,从而可以调用一些方法操作这些数据。...原创 2022-08-17 20:17:23 · 260 阅读 · 0 评论 -
【JavaScript】-- 正则表达式(二)
查找字符串中是否有匹配正则表达式的字符串,有则返回字符串第一次出现时的位置,没有就返回null(无论是否在全局模式下都不影响返回结果)在此案例中匹配到 H 字符后不为 i 的 H 并将其通过replace替换成了T,而 H 侯紧跟 i 的则不受任何影响。取能够匹配到的数量尽可能多的为一组进行匹配,匹配剩余字符串时还会尝试新的匹配,直到匹配不到为止。查找字符串中是否有匹配正则表达式的字符串,有则返回一个数组,包括字符串内容、位置,\1引用了第一个被分组所捕获的串,换言之,表达式是动态决定的。...原创 2022-08-16 19:21:17 · 285 阅读 · 0 评论 -
【JavaScript】-- 正则表达式(一)
1)如果正则表达式中有修饰符"g",这时,在正则表达式的实例reg中会维护lastIndex属性,记录下一次开始的位置,当第二次执行exec的时候,从lastIndex开始检索。设置了全局匹配时,每执行一次exec/test来匹配,lastIndex就会移向匹配到的字符串的下一个位置,当指向的位置后没有可以再次匹配的字符串时,下一次执行exec返回。正则表达式中的所有字母和数字都是按照字面含义进行匹配的,Javascript正则表达式语法也支持非字母的字符匹配,这些字符需要通过反斜线\作为前缀进行转义。..原创 2022-08-15 20:21:56 · 172 阅读 · 0 评论 -
【JavaScript】-- 数组介绍(超详细)
JS中的数组就是一个有序列表的集合,用于存放多个值。原创 2022-08-14 21:53:30 · 805 阅读 · 0 评论 -
【JavaScript】--作用域 ^ 立即执行函数IIFE ^闭包
的变量,那么自由变量的值如何得到 —— 要到创建这个函数的那个父级作用域寻找,如果没有就一直向上级祖先元素寻找(这就是所谓的"静态作用域",静态作用域是指函数的作用域在函数定义时就已经确定。...原创 2022-08-13 21:01:58 · 325 阅读 · 2 评论 -
【JavaScript】-- 函数介绍
this是根随着执行环境变化而变化的,它的指向取决于上下文环境 被谁调用就指向谁 没有明确指出被谁调用就是指向全局global在方法中,this 表示该方法所属的对象。如果单独使用,this 表示全局对象。在函数中,this 表示全局对象。在事件中,this 表示接收事件的元素。在显式函数绑定时,我们可以自己决定this的指向...原创 2022-08-13 11:48:35 · 178 阅读 · 0 评论 -
【JavaScript】-- 对象
在JavaScript中,所有事物都是一个对象。每个对象都有自己的属性,其中包含的属性值也各不相同。每个对象都是一个变量,但是对象可以拥有多个值(多个变量),每个值以键值对的方式呈现。原创 2022-08-11 20:27:00 · 120 阅读 · 0 评论 -
【Javascript】-- 数据类型显式转换 & 属性检测
1.如果只重写了valueOf()或者toString()方法,则调用该方法,并将返回值用Number()转换。2.如果两个方法都重写了,则调用valueOf(),并将返回值用Number()转换。,当要将对象转换为String时,类似隐式转换中的PreferredType为String。,当要将对象转换为String时,类似隐式转换中的PreferredType为Number。3.如果两个方法都没有重写,则返回NaN。显示转换与隐式转换规则。显示转换与隐式转换规则。...原创 2022-08-10 20:00:41 · 172 阅读 · 0 评论 -
【JavaScript】-- 隐式数据类型转换
如果字符串加数字,数字就会转成字符串。而 数字加数字 或 字符串加字符串 则不需要进行转换直接进行运算或字符串拼接。数字减字符串,字符串转成数字。如果字符串不是纯数字就会转成NaN。字符串减数字也一样。两个字符串相减也先转成数字。...原创 2022-08-10 11:01:46 · 1726 阅读 · 0 评论 -
【JavaScript】数据类型简介
Q: 为什么typeof null返回object?A: 因为不同的对象在底层都表示为二进制,在 JavaScript 中二进制前三位都为 0 的话会被判断为 object 类型, null 的二进制表示是全 0,自然前三位也是 0,所以执行 typeof 时会返回“ object ”。数据类型在内存中的存储基本数据类型的变量和值都存储在栈区 引用数据类型的变量和引用地址存储在栈区,将值(内容)存在堆区...原创 2022-08-08 14:04:26 · 256 阅读 · 0 评论