![](https://img-blog.csdnimg.cn/20190927110335592.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
ES5
文章平均质量分 94
@红@旗下的小兵
求知若渴 虚心若愚
展开
-
srcollTop、clientHeight、scrollHeight详解
原生js:scrollTop —— 滚动条滚动的距离(注意:不是滚动条距顶端的距离)scrollHeight —— 文档内容的实际高度,包含超出视图溢出的部分 clientHeight —— 窗口可视范围的高度当clientHeight + scrollTop >= scrollHeight时,表示已经抵达内容的底部了,可以加载更多内容。scrollTop:可以通过 window.pageYOffset 或 document.documentElement.scro...原创 2020-10-16 21:55:13 · 788 阅读 · 0 评论 -
load事件
javaScript中最常用到的一个事件就是load。当页面完全加载后(包括所有图像、javaScript文件、css文件等外部资源),就会触发window上边的load事件。window:window.addEventListener('load', function(e) { console.log('页面完全加载完毕!')}, false)img图像:图像上也可以触发load事件。我们可以在图片加载完毕后做一些事情:<img src="./1.jp.原创 2020-09-02 20:52:44 · 4288 阅读 · 0 评论 -
js闭包、作用域
以下均出自《javaScript忍者秘籍》理解闭包:闭包允许函数访问并操作函数外部的变量。只要变量或函数存在于声明函数时的作用域内,闭包即可使函数能够访问这些变量或函数。分析一个例子:是什么魔法使得在内部函数的作用域消失之后再执行内部函数时,其内部变量仍然存在呢?当在外部函数中声明内部函数时,不仅定义了函数的声明,而且还创建了一个闭包。该闭包不仅包含了函数的声明,还包含了在函数声明时该作用域中的所有变量。当最终执行内部函数时,尽管声明时的作用域已经消失了,但是通过闭包,仍然能够访问到原始作原创 2020-06-30 09:02:27 · 310 阅读 · 0 评论 -
函数进阶之arguments、this
以下都出自《javaScript忍者秘籍第二版》在函数定义中显式声明的参数之外,函数调用时还会传递两个隐式的参数:arguments和 this。这些隐式参数在函数声明中没有明确定义,但会默认传递给函数并且可以在函数内正常访问。在函数内可以像其他明确定义的参数一样引用它们。接下来依次介绍这些隐式参数。arguments 参数是传递给函数的所有参数集合。无论是否有明确定义对应的形参,通过它我们都可以访问到函数的所有参数。length 属性:length - 实参的确切个数。可通过数组索.原创 2020-06-23 18:16:54 · 321 阅读 · 0 评论 -
js数组方法监控
vue2.0数组监控方法:思路:拦截数组方法,原型链指向自己定义的原型,内部实际还是调用的原生方法。。。下边switch判断是定义响应式let obj= { test:[1,2,3]}let old = Array.prototypelet o = Object.create(old)const methods = [ 'unshift', 'pop', 'sort', 'reverse', 'splice', 'push'原创 2020-06-17 10:39:50 · 325 阅读 · 0 评论 -
浏览器如何开启消息通知
以下是:谷歌/火狐/搜狗/UC/QQ 如何开启消息通知介绍。chrome 谷歌浏览器右上角 ——> 设置 ——> 找到 "网站设置" ——> "通知" ——> "添加" 把需要显示消息通知的网址添加进去即可。Firefox 浏览器右上角 "隐私保护"(ctrl+shift+s) ——> 点击保护等级——> 找到 "权限"——> 通知 ——> 点击设置 ——> 添加提示通知的网址 保存即可。搜狗浏览器..原创 2020-05-31 08:52:42 · 11377 阅读 · 0 评论 -
Notification API(全面)
定义:浏览器提供的一个桌面通知的接口使用:let notification = new Notification(title, options)原创 2020-05-30 17:50:20 · 1555 阅读 · 0 评论 -
encodeURIComponent 和 decodeURIComponent
encodeURIComponent(URI)MDN解释:encodeURIComponent(URI)都是对统一资源标识符(URI)的组成部分进行编码的方法。返回值:返回URIstring的副本,其中的某些字符将被十六进制的转义序列进行替换。说明:(1)该方法不会对ASCLL、字母、数字进行编码,也不会对ASCLL标点符号进行编码:如:- .! ~ * ' ( )(2)其他字符(比如:; / ? : @ & = + $ , # 这些用于分割URI组件的标点...原创 2020-05-25 10:30:47 · 2502 阅读 · 0 评论 -
字符串常用方法
字符串:索引1、存在索引,从0开始 :第一个字符索引 0 ,第二个字符索引 1 ··· ···2、指定索引不存在,结果 undefinedlet str = 'a'str[1000] -> undefinedlength1、获取字符串长度let len = 'lxc'.length // 3// 获取最后一个字符let last = 'lxc,hello'last[last.length - 1] // 'o'常用方法:1、str.ch...原创 2020-05-17 19:50:45 · 877 阅读 · 0 评论 -
Math 数学函数
数学函数: Math是对象数据类型 ,里边提供了许多数学函数方法常用方法:1、Math.abs 取绝对值 (正数)Math.abs(12) -> 12Math.abs(-12) -> 122、Math.ceil 向上取整Math.ceil(12) -> 12Math.ceil(12.1) -> 13Math.ceil(12.9) -> 133、Math.floor 向下取整Math.floor(12) -> 12Math..原创 2020-05-17 15:31:34 · 4001 阅读 · 0 评论 -
事件冒泡、事件捕获、取消冒泡、取消默认事件
事件冒泡:只要结构上,非视觉上嵌套关系的元素,或存在事件冒泡的功能,即同一事件,自子元素冒泡到父元素。如:当点击子元素content时,会向上依次执行(自底向上冒泡):<div class="wrapper"> <div class="box"> <div class="content"></div> </div></div><script>let wra = doc...原创 2020-05-11 22:09:03 · 715 阅读 · 0 评论 -
脚本化css
1、dom.stylecss样式声明 - 它是一个类数组dom.style 即可赋值 又可以取值tips:1、赋值时,后边必须为字符串。且 带px。2、组合单词必须为小驼峰式写法3、取值时,dom.style 取的是行间样式,在style标签中声明的 css样式 ,使用dom.style 取值不起作用。<div style="border: 1px solid #000; height: 200px; width: 200px;"></div&g...原创 2020-05-10 19:25:07 · 195 阅读 · 0 评论 -
获取窗口属性
常识:屏幕滚动的高度为:滚动条滚动距离 + 首屏高度滚动条滚动距离:scrollTop以下2个都是求滚动条滚动距离,在IE浏览器中,由于兼容性问题,一个如果有值,那么另一个一定为0,所以兼容写法:document.body.scrollTop +document.documentElement.scrollTop1、document.body.scrollTop2、document.documentElement.scrollTop可视区窗口的宽度1、...原创 2020-05-10 15:05:50 · 278 阅读 · 0 评论 -
setInterval、setTimeout
下边例子得出结论:不管是setInterval、setTimeout 返回的标识是同步的,而执行是异步的,会先输出标识,紧接着被清除了,所以定时器里边的打印没有输出!let n = setTimeout(() => { console.log('0')}, 1000)console.log(n)clearTimeout(n)...原创 2020-05-08 20:32:13 · 137 阅读 · 0 评论 -
js date 时间
getTime(fmt = 'yyyy-MM-dd', tiemStamp=null) { tiemStamp = new Date().getTime() const date = new Date(tiemStamp) console.log(date) var o = { "y+" : date.getFullYear(), ...原创 2020-05-08 18:23:56 · 240 阅读 · 0 评论 -
location对象
location对象包含了有关当前URL的相关信息(它是window对象的一个属性):window.location.href === location.hrefhash// 以下边路径为例// https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#3location.has...原创 2020-05-07 09:18:09 · 431 阅读 · 0 评论 -
js dom - 基本操作(增删改查)
以下展示了原型链的继承关系:如: 在Node中定义的方法,它下边的所有文档 及文档元素都可以调用1、document.getElementByTagName()方法及定义在Document.prototype 上和Elment.prototype上所以,下边选择元素可以这样写:<div id="box"> <div class="...原创 2020-05-06 22:23:20 · 527 阅读 · 0 评论 -
js dom - 元素选择、节点树、元素节点树、节点属性
1、documentdocument 整个文档(document节点)html标签是 document的根标签2、元素选择(1)根据id选择:let dom = document.getElementById('id') // 根据id选择元素 - 一个(2)根据标签名选择元素 - 选出是一组元素 (类数组 )无兼容问题let dom =...原创 2020-05-05 21:59:18 · 486 阅读 · 0 评论 -
js 杂七杂八小知识(三 - 数组篇)
数组的长度1、数组的长度n如果小于当前数组元素的个数,当前索引大于或等于n的元素将会被删除var arr = [1,2,3,4]arr.length = 2console.log(arr) //[1, 2]数组元素的删除1、使用delete删除数组中的某个元素,不会改变数组的长度,它会把数组变为稀疏数组。var arr = [1,2,3,4]delete arr[0]...原创 2020-04-16 17:57:33 · 147 阅读 · 0 评论 -
英文字母的组合排序
做通讯录时,每一条数据通常会带有姓名首字母,前台渲染时需要把相同首字母的数据组合到一起,例如,把姓名首字母是A的数据组合到一起,首字母为B的组合到一起 :const arr = [ {name: '吕xx', i: 'L'}, {name: '李xx', i: 'L'}, {name: '刘xx', i: 'L'}, {name: '宫xx', i: 'G'}...原创 2020-04-02 22:00:34 · 560 阅读 · 0 评论 -
防抖、节流
防抖 - debounce<template> <div @mousemove="move"> {{text}} </div></template><script>export default { data() { return {timer: null} },...原创 2020-03-07 07:33:55 · 106 阅读 · 0 评论 -
js 正则
基础:待完善!小案例:1、去掉中横线const time = '2020-03-03'const r = /[-\s]*/glet res = time.replace(r, '') // '20200303'2、匹配 汉字const text = '吕星辰'const r = /[\u4e00-\u9fa5]+/g // [] 某个范围内的字符 +匹配至少一个前...原创 2020-03-03 12:49:16 · 539 阅读 · 0 评论 -
属性描述符
属性描述符: 用来描述一个对象属性。Object.getOwnPropertyDescriptor(obj, 'property') 查看一个对象某个属性的描述:const obj = { name: 'lxc'}console.log(Object.getOwnPropertyDescriptor(obj, 'name'))/** * value: 属性值 ...原创 2020-02-05 19:59:46 · 136 阅读 · 0 评论 -
JavaScript对象继承 - ES5构造函数
Prototype:js继承机制的设计思想就是,原型对象的所有属性和方法,都能被实例对象共享,不仅节省了内存,还体现了实例对象之间的联系。JS中规定,每一个函数都有一个prototype属性,指向一个对象。我们来看下下边代码:function test(){}console.log(test.prototype) //{constructor: ƒ}打印结果:上边的代码...原创 2019-07-12 09:45:52 · 341 阅读 · 0 评论 -
webstorm中js文件被识别成txt类型
问题描述:webstorm中index.js文件被识别成txt格式,如下图。原因:webstorm中js文件被识别成txt文件,原因在于txt类型识别了以当前js文件名命名的模式。解决办法:File—Editor—FileTypes找到Text类型,将其中的index.js格式从中取消,apply—ok拓展:同理其他被识别成txt(或其他格式)的js文件...原创 2020-01-28 09:05:02 · 927 阅读 · 0 评论 -
js递归的应用
求n的阶乘已知1的阶乘为1。步骤分析:递归 - 找规律、找出口,出口找到,依次往前推即可。// 求阶乘的函数function mul(n) { if(n === 1) { return 1 } return n * mul(n-1)}var res = mul(10)console.log(res) // 3628800 /* * mul(...原创 2019-12-17 18:53:21 · 203 阅读 · 0 评论 -
js中根据0或1输出true或false的两种方法
最近项目中,发现一个很有意思的操作,前提使用vue-element-admin,如果你想根据0 或者 1,输出true或false,通常会这么写:let result = status === 1 ? true : false但是在webstorm中会标红,过不去ESlint这一关,后来换了一种方式可以了:let status = 0let result = status ===...原创 2019-12-12 18:44:24 · 4311 阅读 · 0 评论 -
js时间与时间戳的转换
最近在做公司项目时,遇到时间与时间戳的相互转换,这篇文章记录下。效果如下:需求是:添加套餐的一个页面,上边有套餐的起始时间 和 截止时间 ,用的是element 日期选择组件,选择完之后,会把起始时间和截止时间 转化为时间戳发给后端,html代码如下:<!-- value-format="timestamp" 把当前时间转化为时间戳 --><!-- 此组...原创 2019-12-12 18:27:42 · 2855 阅读 · 0 评论 -
js 杂七杂八小知识(二 - 对象篇)
object权威指南:属性名可以包含空字符串在内的任意字符串,但是对象不能存在2个相同的属性。创建对象的三种方式:1、对象直接量var obj = {};2、关键字newvar obj = new Object()3、Object.create( ) 函数来创建使用Object.create( ) 来创建对象,第一个参数是创建出对象的原型,所以参数一必须要传递!...原创 2019-10-31 09:08:23 · 208 阅读 · 0 评论 -
js 杂七杂八小知识(一)
声明一个变量的语法:var 或者 let 关键字之后 加上 这个变量的名字,可以理解声明一个变量相当于 一个装东西的容器。1、一个变量存在但是未赋值和一个变量并不存在,他们完全是两回事儿;变量未赋值:已经声明变量了(变量已经存在,也就是说容器已经存在了,但是里边没东西),还没有赋值,输出的是 undefined变量不存在:容器还不存在,打印报错!undefined 与 nu...原创 2019-10-29 19:41:29 · 168 阅读 · 0 评论 -
js call和apply详解
call:改变调用者的this指向,this指向参数一eg:b.call( a, param1,param2,param3··· ···) //即a对象调用b对象的方法。apply:定义同上eg:b.apply( a, [ param1,param2,param3··· ··· ]) //即a对象调用b对象的方法。apply后边的参数是数组。它们的共同点:都可以用来代替...原创 2019-06-30 20:56:39 · 243 阅读 · 0 评论 -
ES5 数据劫持—Object.defineProperty(干货)
本篇文章,着重来说下ES5中的Object.defineProperty两个非常重要的方法:getter方法和setter方法,别的属性百度一下一大堆,且讲的很详细。在vue2.0中数据的双向绑定底层原理就是用的Object.defineProperty,当然马上要出的vue3.0用的是ES6的proxy(代理)实现双向绑定,具体区别以及proxy的用法我会在下一篇文章详细介绍。。。Obj...原创 2019-07-10 18:04:31 · 454 阅读 · 0 评论