js底层基础系列
文章平均质量分 72
菠萝油姐姐
这个作者很懒,什么都没留下…
展开
-
原生js底层基础(二十二)鼠标事件、键盘事件
1.鼠标事件、键盘事件 事件源的属性button能判断是左键、右键、还是滚轮 0 左键 1 滚动 2 右键 onclick事件只能监听左键 只有onmousedown 和onmouseup可以监听别的 document.onmousedown = function(e){ var dir = e.button; if(e.button == 0){ console.log("le...原创 2019-11-10 17:38:21 · 558 阅读 · 0 评论 -
原生js底层基础(二十一) 事件委托
事件委托 利用事件冒泡,和事件源对象进行处理 优点: 1.性能好,不需要循环所有的元素一个个绑定事件 2.灵活,当有新的子元素不需要重新绑定事件 面试题 有1个ul,里面有十个li,要求点击每个li输出对应的顺序 解法1:遍历子元素 1.var ulList = document.getElementsByTagName(“ul”)[0]; 2. var liList = document....原创 2019-11-10 17:29:08 · 140 阅读 · 0 评论 -
原生js底层基础(二十)事件冒泡、事件捕获及取消默认事件方法
1.事件冒泡、捕获 事件冒泡: 结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。(自底向上) 事件捕获: 结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自父元素捕获至子元素(事件源元素)。(自顶向下) 触发顺序:先捕获,后冒泡。 focus,blur,change,submit,reset,select等事件不冒泡 2.取消冒泡事件 ...原创 2019-11-10 16:58:36 · 888 阅读 · 0 评论 -
原生js底层基础(十九)事件
javaScript里面的事件触发写法很多,但是考虑到每个人使用的环境的异同,我们需要了解每个写法的兼容等。 1.elem.on事件类型 = 功能函数 事件名可以是click,blur,change,input,keydown,mouseenter,mouseleave等,以下不再赘述。 兼容性很好,但是一个元素的同一个事件只能绑定一次 基本等于写在HTML行间上,例如以下两片代码相同 <...原创 2019-11-08 13:17:52 · 222 阅读 · 0 评论 -
原生js底层基础(十九)JavaScript 脚本化CSS
脚本化CSS分为两种,一种为可读可写,一种只读 1.可读可写 element.style.prop 即元素.style.属性名, 间接改变css样式(实际上改变的是元素的style属性,css能够被行间样式影响,所以是间接改变) var div = document.createElement('div') document.body.appendChild(div) div.style.hei...原创 2019-11-01 15:30:59 · 116 阅读 · 0 评论 -
原生js底层基础(十八)JavaScript 滚动条距离、可视区域宽高、元素尺寸、让滚动条移动
1.获取滚动条距离 window.pageXOffset ( pageYOffset )(IE8及IE8以下不兼容) IE8及IE8以下能兼容的方法 1.document.body.scrollLeft ( scrollTop ) 2.document.documentElement.scrollLeft (scrollTop ) 两个方法的兼容性比较混乱,但是他们两个互斥,不会两个同时兼...原创 2019-11-01 14:24:54 · 1302 阅读 · 0 评论 -
原生js底层基础(十七)DOM
aaa原创 2019-11-01 11:21:43 · 215 阅读 · 0 评论 -
原生js底层基础(十六)es5.0严格模式
es5严格模式 不再兼容es3的一些不规则语法,使用全新的es5规范 1.用法(两种): (1)全局严格模式 (2)局部严格模式(推荐) 2. es5.0严格模式启动 “use strict” 就是一行字符串,不会对不兼容严格模式的浏览器产生影响 (1)全局 写在页面逻辑最顶端: "use strict" function test(){ //代码块 } test(); (2)局部 写在...原创 2019-11-01 10:36:00 · 168 阅读 · 0 评论 -
原生js底层基础(十五)JavaScript 数组、类数组详解
1.数组定义 创建数组的两种方式: ( 1)字面量(推荐) ( 2)new 两种方式的区别 var arr = new Array(10) //创建一个长度为10的数组,只能写整数 var arr2 = [10] //创建了数组,里面只有一个数10 var arr3 = [1,2,3,4,5]; //创建了数组,里面有五个数 var arr4 = new Array[1,2,3,4,5 ]...原创 2019-10-31 20:40:42 · 474 阅读 · 0 评论 -
原生js底层基础(十四)JavaScript 深浅克隆
本文中提到的克隆,即封装一个方法,将一个原有的对象克隆出一个新的对象,具有和原对象一样的内容。分为浅层克隆和深层克隆,这也是经常出现在笔试题中的一个知识点。 1.浅层克隆 即原始值的属性值各自更改互不影响,引用类型值更改互相影响 function clone(origin,target){ var target = target || {}; for(var prop in origin){ ...原创 2019-10-31 16:09:52 · 185 阅读 · 0 评论 -
原生js底层基础(十三)JavaScript auguments.callee、caller
1.arguments.callee arguments.callee 代表的是函数自身的引用,在哪个函数里调用就是哪个函数的引用 使用场景:有的时候使用匿名函数,没有办法使用函数名调用,可以选择arguments.callee 例如,在写求阶乘函数(递归)时: var num = (function(n){ if(n <= 1){ return 1; } return n * ...原创 2019-10-31 12:34:18 · 217 阅读 · 0 评论 -
原生js底层基础(十二)JavaScript this的指向详解及面试题
this什么时候指向谁,刚学习的时候很容易蒙圈,总结记录一下,希望对大家有所帮助,有写的不对的地方也欢迎指正。 1.函数预编译过程 this 指向 window 2.全局作用域里 this 指向 window 2.call / apply 可以改变函数运行时 this 指向 4.obj.func(); func()里面的 this 指向obj 5.new func() , func()里面的thi...原创 2019-10-31 10:26:23 · 642 阅读 · 0 评论 -
原生js底层基础(十一)JavaScript 继承的几种方式
继承的三种模式 1.借用构造函数(call和apply) 作用:改变this指向,利用别人的函数,实现了自己的功能 (1)call 栗子1: function Car (color,width,height){ this.color = color; //调用call之前这个this是window, //将引用传给obj后,这个this指向的是obj this.width = width; t...原创 2019-10-30 16:36:42 · 197 阅读 · 0 评论 -
原生js底层基础(十)JavaScript 枚举for in、hasOwnProperty()、in操作符、instanceof
1.for in for…in 语句用于对数组或者对象的属性进行循环操作。 语法: for (变量 in 对象) { //do it } “变量”用来指定变量,指定的变量可以是数组元素,也可以是对象的属性。 (1)遍历对象的属性名与属性值 遍历对象时for参数列表的变量为属性名,值通过 对象名[属性名] 方式获取 var obj = { name:'ly', age:11 } f...原创 2019-10-30 15:43:39 · 418 阅读 · 0 评论 -
原生js底层基础(九)JavaScript 模块化开发的应用
1.闭包的应用 使用闭包使变量私有化,不容易和全局重名 栗子: var name="bcd"; var init=(function(){ var name ="abc"; function call(){ console.log(name); } return function (){call();} }()) init(); //返回abc",不会返回“bcd” 2.连续...原创 2019-10-30 10:52:19 · 565 阅读 · 0 评论 -
原生js底层基础(二)条件语句和循环语句及经典面试题
本节主要记录一些关于语句的面试题,概念从简 1.条件语句 多个if和if else对 很多人会搞不清或者没思考过什么时候用多个if、 if else 前者会把所有的if都去判断一遍,后者只会匹配一种,匹配到合适的就不会再往下匹配了,代码应该是互斥的 2.循环语句 for 和while,可以说While是for的简化版(实际开发中Do while用得少) ...原创 2019-09-13 15:19:33 · 177 阅读 · 0 评论 -
原生js底层基础(三)基本类型的显示转换和隐式转换、typeof可能返回的值
1.显示类型转化 1) Number() 例子: var num = Number("12"); 列举一些特殊的转换 Number(null) -->0 Number("") -->0 Number("abc123") (字符串内包含中文或英文字母转数字) -->NaN Number(undefined) -->NaN 2)String() 转成字符串 v...原创 2019-09-13 18:49:21 · 231 阅读 · 0 评论 -
原生js底层基础(四)函数、arguments
写这个系列为了全面积累巩固自己的js基础,包括一些基础的和稍微冷门、深入的,还有一些面试题,如果你也认为基础知识很重要,快来一起交流学习啦~ ^ - ^ 1.函数表达式 1)命名函数表达式 var test = function abc(){ } 执行函数时,test()才有效, abc()无效,因此这个function右边的abc没有什么实际意义 2)匿名函数表达式(常用、推荐) var...原创 2019-09-13 20:00:49 · 193 阅读 · 0 评论 -
原生js底层基础(五)预编译、递归
写这个系列为了全面积累巩固自己的js基础,包括一些基础的和稍微冷门、深入的,还有一些面试题,如果你也认为基础知识很重要,快来一起交流学习啦~ ^ - ^ 1.预编译 理解预编译以后对找bug很有用!!! 函数体里面的预编译—发生在函数执行的前一刻 1) 暗示全局对象 :变量未经声明就赋值,此变量就为全局对象(即window对象)所有 a =10 console.log(a) //10 conso...原创 2019-09-13 22:04:21 · 209 阅读 · 0 评论 -
原生js底层基础(七)JavaScript 中的作用域scope和闭包
1)[[scope]](作用域) : JavaScript函数是一个特殊对象,对象中有些属性我们可以访问,但是有些不可以,这些属性仅供JavaScript引擎存取,[[scope]]就是其中一个。[[scope]]指的就是我们说的作用域,其中存储了运行期上下文的集合。 2)作用域链: [[scope]]中所存储的执行期上下文对象的集合,这个集合呈链式链接,这个链式链接就是作用域链。 3)运行期上下...原创 2019-09-14 15:48:36 · 285 阅读 · 0 评论 -
原生js底层基础(六)JavaScript 立即执行函数
1)定义: 此类函数没有声明,在依次执行过后即释放。适合做初始化工作。 2)特点: 执行完后就销毁(除了这一点其他的跟普通函数一样) 针对于初始化功能的函数 3)写法: //第一种(W3C推荐) ( function (){ //代码体 } ()) //第二种 (function(){})() 例如 (function(a,b,c){ console.log(a+b+c); }(1...原创 2019-09-14 16:38:04 · 485 阅读 · 0 评论 -
原生js底层基础(八)JavaScript 原型(prototype)、原型链、构造器
1.原型(prototype) 原型是function对象的一个属性,它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象,可以继承该原型的属性和方法。 原型也是对象 1) 对象查看原型和构造器 function Person( ){ } var p = new Person( ); var p = new Person( );这句当运行到的时候会在Person里隐式写上va...原创 2019-09-14 20:12:48 · 263 阅读 · 0 评论 -
原生js底层基础(一)对象、运算符
写这个系列为了全面积累巩固自己的js基础,包括一些基础的和稍微冷门、深入的,还有一些面试题,如果你也认为基础知识很重要,快来一起交流学习啦~ ^ - ^ 一、对象 1.概念 对象也是变量。但是对象包含很多值。 2.格式 值以名称:值对的方式来书写(名称和值由冒号分隔)。 例如 var person = { name:'lucy', age:18 } 3.对象属性 对象的名称和值就是对象属...原创 2019-09-13 14:44:46 · 347 阅读 · 0 评论