- 博客(62)
- 收藏
- 关注
原创 3.04.26async 和 await
3.04.26async 和 await1.async 和 awaitasync函数是使用async关键字声明的函数。 async函数是AsyncFunction构造函数的实例, 并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise。看例子:<script> function resolveAfter2Seconds() { return new Promise(
2022-06-15 00:35:00
172
1
原创 3.04.25Promise对象
3.04.24Promise对象1.使用Promise对象Promise对象是一个对象,也是一个构造函数该对象用于解决异步编程同步的代码执行:一种按照从上往下执行顺序的编码,可知js是一种同步编程,当代码在执行一件事情时,你不能进行别的操作,比如:你有一个复杂的函数需要运行一段时间,那么这时候页面有输入框的情况,你不能进行输入的操作。异步的代码执行:异步的代码执行就是用于解决同步带来的问题的。异步编程一般是这样的,从上往下执行顺序的过程中遇到需要等待的事件,就给其一个等待的状态A,然后去执行后面
2022-06-15 00:34:44
161
原创 3.04.22class 与 extends关键字
3.04.22 class 与 extends关键字1.Object.defineProperty方法1.Object.definePropertyObject.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。vue2的底层使用该方法封装数据的双向绑定在ES6中,由于 Symbol类型的特殊性,用Symbol类型的值来做对象的key与常规的定义或修改不同,而Object.defineProperty 是定义key为Symbol的属
2022-06-15 00:34:23
215
原创 3.04.21ES6内容2
3.04.21 ES6内容21.箭头函数的this没有单独的this,箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this function Person(){ this.age = 0; setInterval(() => { this.age++; // |this| 正确地指向 p 实例 }, 1000); } var p = new Person();2.箭头函数的作用域 // 常规写
2022-06-15 00:33:59
121
原创 3.04.20ES6
3.04.20 ES61.ES6概念ES6 是JavaScript的第六个版本,ES是ECMA Script的缩写,是2015年发布的。ES6另外一个名称 ECMAScript2015,也包括ES7/8/9的内容。javascript可以做前端的工作,也可以做后端的工作(Nodejs)。javascript是弱类型的编程语言,随着脚本语言技术不断发展,市场需求增加,在开发环境中需要的语法要求越来越严格。目前在web开发环境中,出现了typescript。可以弥补一些JS的不足。ES5的语法比较自
2022-06-15 00:33:36
119
原创 2.03.25jquery拓展API
2.03.25 jquery拓展API1.jQuery遍历标签数组jq对象.each() <style> .btn { display: inline-block; padding: 15px 25px; border: 1px solid #ccc; background-color: #fff; cursor: pointer;
2022-05-13 20:18:11
176
原创 2.03.24_2jQuery的动画函数
2.03.24 jQuery的动画函数1.jQuery的动画函数jq对象.show()jq对象.hide()jq对象.toggle()改变宽高透明度语法: <style> button { padding: 5px 20px; } .box { width: 150px; height: 110px; background-c
2022-05-13 20:17:32
234
原创 2.03.24_1jQuery的事件处理
2.03.24jQuery的事件处理1.事件类型jq常见的事件类型:clickmouseentermouseleavekeydownkeyupkeypressfocusblurchangejq封装的事件是个函数,调用时事件函数通过传参的方式给予到jq对象比如: //jq: $(".box").click(function(){ }) //js: dom.onclick = function(){ }2.事件绑定click事件
2022-05-13 20:16:59
158
原创 2.03.23jQuery
2.03.23 jQuery1.概念是一个js封装的一个函数,jq里面有许多js封装的方法jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使 HTML 文档遍历和操作、事件处理、动画和 Ajax 之类的事情变得更加简单,它具有易于使用的 API,可在多种浏览器中使用。jQuery 结合了多功能性和可扩展性,改变了数百万人编写 JavaScript 的方式。jQuery是个函数,符号是jQuery的别名,jQuery===符号是jQuery的别名, jQuery===符号是j
2022-05-13 20:16:28
226
原创 2.03.22一个防抖函数的拓展的案例
2.03.22防抖函数的拓展根据触发函数后是否马上执行的需求设计以下防抖函数:js // 防抖函数 // 首次触发事件,不需要延迟函数,就直接执行callback // 在指定的时间(time)内,允许触发事件,事件频繁触发的情况,那就会重新计算时间(time) // 以后调用这个防抖函数时: // 分两种情况:1,首次触发事件,不需要延迟函数 (isFisrt == true) 2,首次触发事件,需要延迟函数(isFisrt == false)
2022-04-19 17:06:20
72
原创 2.03.20函数的防抖节流
函数的防抖节流1.函数的防抖介绍:函数防抖中的抖动就是执行的意思,而一般的抖动都是持续的、多次的、频繁的执行某一段代码。函数防抖就是某函数持续多次执行,我们希望让它冷静下来再执行。也就是当持续触发事件的时候,函数是完全不执行的,等最后一次触发结束的一段时间之后,再去执行。为了解决这些问题,一般有两种解决方案:函数的防抖(debounce)与函数的节流(throttle)。概念:函数防抖和节流,都是控制事件触发频率的方法。其中防抖的原理就是:事件尽管触发,但是在事件触发 n 秒后才执行,如果你在
2022-04-19 17:05:47
95
原创 2.03.18正则表达式
2.03.18 正则表达式1.概念概念:正则表示规则,条件。表达式表示返回结果的计算式。正则表达式(regular expression):指定规则或条件的一行JS代码,作用是:针对字符串文本进行字符串的匹配和校验。官文介绍:正则表达式(regular expression)是一个描述字符模式的对象,是一种表达文本模式(即字符串结构)的方法,有点像字符串的模板,常常用来按照“给定模式”匹配文本。正则表达式能够进行强大的’模式匹配’和’文本检索与替换’功能,前端往往有大量的表单数据校检的工作,采用
2022-04-19 17:05:03
90
原创 2.03.17BOM的一些对象
2.03.17 BOM的一些对象1.BOM的一些对象location对象介绍:window.location 是一个只读属性,返回一个 Location 对象,其中包含有关文档当前位置的信息。<!DOCTYPE html><html lang="zh_cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
2022-04-19 17:04:22
67
原创 2.03.16cookie 三个(offset、client、scroll)
2.03.16 cookie,三大家族(offset、client、scroll)1.offset和client和scroll三大家族属性主要作用:获取标签对象的尺寸和位置1.offsetHTMLElement.offsetLeft 是一个只读属性,返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。HTMLElement.offsetWidth 是一个只读属性,返回一个元素的布局宽度。一个典型的(译者注:各浏览器的offsetWidth可
2022-04-19 17:03:58
123
原创 2.03.12BOM对象与window对象
2.03.11 BOM对象 与 Window对象1.BOM介绍:BOM是browser object model的缩写,简称浏览器对象模型 ,提供了独立于内容而与浏览器窗口进行交互的对象;使用浏览器对象模型可以实现与HTML的交互。它的作用是将相关的元素组织包装起来。提供给程序设计人员使用,从而降低开发人员的劳动量,提高设计Web页面的能力。BOM是一个分层结构:提供对浏览器进行操作的一些API(对浏览器进行操作的一套标准)BOM结构下的成员对象window对象 ,是JS的最顶层对
2022-04-19 17:02:16
183
原创 2.03.11event对象,事件冒泡与捕获
2.03.11event对象 事件冒泡与捕获1.Event对象概念事件对象记录了数据出触发时产生的数据集合记录了事件的信息(状态、信息、事件类型)有时候在事件处理函数内部,您可能会看到一个固定指定名称的参数,例如event,evt或简单的e。 这被称为事件对象,它被自动传递给事件处理函数,以提供额外的功能和信息。简单的说Event对象是事件执行过程中的状态,用来保存当前事件的信息对象比如,你点击鼠标事件触发点击事件,事件对象会记录你,是否按着alt键点击鼠标,是否按着shift键点击鼠标等
2022-04-19 17:00:30
107
原创 2.03.10事件 事件绑定 事件类型
2.03.10事件1.事件的概念介绍:事件是在编程时系统内发生的动作或者发生的事情,系统会在事件出现时产生或触发某种信号,并且会提供一个自动加载某种动作(列如:运行一段代码)的机制。例如:如果用户在网页上单击一个购买按钮,会显示一个购买确认信息框来响应这个动作。概念:每个可用的事件都会有一个事件处理器,也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候,我们说我们注册了一个事件处理器。注意事件处理器有时候被叫做事件监听器——从我们的用意来看这两个名字是相同的,监听器留意
2022-04-19 16:59:00
105
原创 2.03.09节点相关属性与操作方法
2.03.09 节点相关属性与操作方法1.节点的文本操作nodeValue仅在文本节点操作时该属性可以用来更新文本节点用法: <p id="demo">修改我的内容</p><script> var x=document.getElementById("demo"); // 获取文本节点并修改 x.childNodes[0].nodeValue = "change";</script>innerHTML属
2022-04-19 16:58:08
75
原创 2.03.08DOM基础
2.03.08 DOM基础1.DOM概念DOM的概念DOM: document object model 文档对象模型是指对页面元素控制的一套标准,叫做DOM,控制页面元素的API有了DOM这个API使得页面的标签变成了对象,一个个标签(即一个个页面元素)变成了一个个对象,这个标签的属性变成了这个标签对象的属性(这个属性也可能是个对象)有了DOM,父标签与子标签的关系就变成了父对象与子对象的关系查看DOM对象可以使用:console.dir(dom对象);注意:DOM既不是HTML的
2022-04-19 16:57:16
99
原创 2.03.07继承
2.03.07 继承1.简单了解 封装性、继承性、多态性面向对象有这三个性质:封装:把客观存在的数据添加到对象中,即,把构造函数的属性和方法添加到实例对象中继承:B对象可以拥有A对象的属性和方法,在js中就叫做B对象继承A对象多态:同一构造函数再不同的场景下,可以有不同的表现形式,即,同一构造函数传进的参数不一样,构造出来不同的对象2.对象之间"继承"的几种方法1.构造函数绑定使用call,apply,bind方法,将父对象的构造函数绑定在子对象上 function An
2022-04-06 08:51:38
30
原创 2.03.05 原型与原型链
2.03.05 原型 与 原型链1.构造函数的弊端介绍:构造函数方法很好用,但是存在一个浪费内存的问题。我们以Dog对象为例: function Dog(name, breed, weight) { this.name = name; this.breed = breed; this.weight = weight; this.bark = function() { if (this.weight >
2022-04-06 08:51:06
101
原创 2.03.04 面向对象编程 构造函数
2.03.04 面向对象编程 构造函数1.面向对象 与 面向过程 的 理解我们可以将面向过程与面向对象看做手工烤面包和使用烤箱烤面包的差别:手工烤面包时,需要制作加热线圈,将线圈连接到电源并通电,手持面包放在离线圈很近的地方烤,然后耐心等待,等烤熟后再将线圈断电;使用烤箱时,只需将面包放入烤箱再按下按钮即可。面向过程:第一种方式是过程型的。我们烤面包需要制作线圈,电源等零件,并把这些零件零零散散地放在环境中面向对象:而第二种方式是面向对象的。你有一个烤箱对象,让你能够轻松地放入并烤好面包
2022-04-06 08:49:00
65
原创 2.03.03延迟函数,闭包编程,this
2.03.03 延迟函数 闭包 this1.延迟函数延迟函数是在window对象下的函数用法:setTimeout 延迟函数调用者:window参数:a.匿名函数 b.毫秒返回值: 数字 1功能:仅仅执行一次匿名函数//1.延迟函数 仅仅在设置的时间后执行一次就不会执行了 var count = 2; var d = window.setTimeout(function(){ count ++ ; console. log("
2022-04-06 08:48:19
104
原创 0302补充
2.03.02数字的进制与数字的一些方法1.数字的进制概念:在JavaScript中,Number数据类型可以使用四种数字进制:十进制,二进制,八进制和十六进制。十进制数字注意:十进制可以以0开头,后面接其他十进制数字,但是假如下一个接的十进制数字小于8,那么该数字将会被当做八进制处理。一般不以0开头的数字都当做是十进制。var a=0777;console.log(" a*1 => " + a*1); //a*1 => 511a=0888;console.log
2022-04-01 22:24:53
43
原创 2.03.02 Math对象,Date对象与定时函数
2.03.02 Math对象,Date对象与定时函数1.数学操作API1.认识Math概念:Math 是一个JavaScript的内置对象,它拥有一些数学常数属性和数学函数方法。与其他全局对象不同的是,Math 不是一个构造器。Math 的所有属性与方法都是静态的。2.常用的Math属性Math.PI获取数学对象的 π 3.1415926535…一般用于计算弧度: 弧度=角度 * Math.PI / 180比如:console.log(Math.PI) // 3.1415926
2022-04-01 22:24:23
55
原创 2.03.01字符串API
2.03.01 字符串API1.简单了解_proto_属性简单了解__proto__属性:使用console.log(obj . __proto__)可以查看能被obj使用的属性和方法,只有构造函数构造出来的对象才能使用console.log(obj . __proto__)查看能被obj使用的属性和方法2.手写快速排序思想:把数组拆成三部分,一部分为变量middle,一部分为left数组,一部分为right数组,middle随便存一个数组中的一个数,我们这里存数组中的中间位置的元素
2022-04-01 22:23:53
72
原创 2.02.28数据类型的转换
2.02.28数据类型的转换1.数据类型的转换1.布尔对象介绍:与基本数据类型布尔值不同,Boolean对象是一个布尔值的对象包装器。语法:接受作为第一个参数传递的值将转换为布尔值。如果省略或值0,-0,null,false,NaN,undefined,或空字符串(""),该对象具有的初始值false。所有其他值,包括任何对象,空数组([])或字符串"false",都会创建一个初始值为true的对象。注意1:不要将基本类型中的布尔值字面量 true 和 false 与值为 true 和
2022-04-01 22:22:45
77
原创 2.02.25对象及引用类型数据的深拷贝
2.02.25 对象及引用类型数据的深拷贝1.对象1.概念JavaScript的基本数据类型包括数字、字符串、布尔值、null、和undefined值。其他所有的值都是对象(Object)。比如数组数据类型他就是一个对象。JavaScript中的对象是一个可变的键控集合。在JavaScript中数组是对象,函数是对象、正则表达式是对象,当然,对象自然也是对象。对象是无序的数据的集合对象是属性的容器,其中每个属性都拥有名字和值。对象适合用于汇集和管理数据。对象可以包含其他对象,所有可以容易的表示成
2022-03-29 16:54:58
857
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人