js
卓曉晖
这个作者很懒,什么都没留下…
展开
-
保安日记番外篇:JS中的 void 0
众所周知,Undefined是JS语言中的7大基本类型之一,表示未定义,它的值只有一个,就是undefined。任何变量在赋值前都是undefined。而在一些框架源码中,会出现一些这样的表达式:if (context === void 0) return func; function foo() { var a = arguments[0] !== (void 0 ) ? arguments[0] : 2; return a; } if (array == null) re原创 2021-01-08 16:40:30 · 260 阅读 · 1 评论 -
保安日记:JavaScript学习第二十二篇之ES6的内置对象扩展
ES6的内置对象扩展Array 的扩展方法扩展运算符(展开语法) …扩展运算符可以将数组或者对象转为用逗号分隔的参数序列<body> <div>1</div> <div>4</div> <div>3</div> <div>6</div> <div>2</div> <script type="text/javascript">// 扩展运算符可以原创 2020-11-01 18:55:13 · 126 阅读 · 0 评论 -
保安日记:JavaScript学习第二十一篇之ES6新增语法let、const....
ES6新增语法let----ES6中新增的用于声明变量的关键字let声明的变量只在所处于的块级作用域有效(防止内层变量覆盖外层变量)不存在变量提升,必须声明暂时性死区<script type="text/javascript">/* -------在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的--------- */ if (true) { let num = 100; var abc = 200; }原创 2020-11-01 15:45:31 · 97 阅读 · 0 评论 -
保安日记:JavaScript学习第二十篇之javascript正则表达式
正则表达式(Regular Expression)正则表达式是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式(规则)的文本,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等。创建正则表达式----正则表达式里面不需要加引号,不论数字型还是字符串型<script> // 1. 利用 RegExp对象来创建 正则表达式 var regexp =原创 2020-10-31 23:52:35 · 134 阅读 · 0 评论 -
保安日记:JavaScript学习第十九篇之闭包、递归
高阶函数高阶函数是对其他函数进行操作的函数,它接收函数作为参数或将函数作为返回值输出闭包(closure)----有权访问另一个函数作用域中变量的函数 <script> // 闭包: 我们fun 这个函数作用域 访问了另外一个函数 fn 里面的局部变量 num function fn() { var num = 10; function fun() { console.log原创 2020-10-31 16:51:17 · 138 阅读 · 0 评论 -
保安日记:JavaScript学习第十八篇之Javascrip函数进阶
函数进阶定义方式1.自定义函数 function fn() {};2.函数表达式(匿名函数) var fun = function() {};3.利用 new Function(‘参数1’,‘参数2’,‘函数体’);----所有函数都是 Function 的实例(对象)var fun = new Function('a','b','console.log(a + b)');fun(1,2);调用方式1. 普通函数 function fn() {原创 2020-10-31 14:23:40 · 128 阅读 · 0 评论 -
保安日记:JavaScript学习第十七篇之ES5中的新增方法
ES5中的新增方法数组方法forEach 遍历数组 <script> var arr = [1, 2, 3]; arr.forEach(function (value, index, array) { console.log("每个数组元素" + value); console.log("每个数组元素的索引号" + index); console.log("数组本身" + array); }); &原创 2020-10-31 10:49:30 · 159 阅读 · 0 评论 -
保安日记:JavaScript学习第十六篇之Javascrip 面向对象--原型
原型对象给对象加方法,可以理解为css中的class–给元素加样式Array.prototype.sum = function () {// 可以给系统的类添加原型方法}通常都是用构造函数加属性,用原型加方法<script> //----构造函数 function CreatePerson(name, qq) { this.name = name; this.qq = qq; } //----原型 C原创 2020-10-30 21:46:08 · 115 阅读 · 0 评论 -
保安日记:JavaScript学习第十五篇之Javascrip 面向对象
Javascrip 面向对象面向过程编程POP(Process-oriented programming)面向过程,就是按照我们分析好了的步骤,按照步骤解决问题。面向对象编程OOP(Object Oriented Programming)面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作。ES6 中的类和对象对象是由属性和方法组成的∶属性∶事物的特征 (常用名词)方法∶事物的行为 (常用动词)类与对象的关系类—模子对象—成品var arr = new Array(1,原创 2020-10-29 19:59:27 · 167 阅读 · 0 评论 -
保安日记:JavaScript学习第十四篇之移动端特效触屏事件
触屏事件移动端浏览器兼容性较好,我们不需要考虑以前S的兼容性问题,可以放心的使用原生JS书写效果,但是移动端也有自己独特的地方。比如触屏事件touch(也称触摸事件),Android和IOS都有。==touch对象代表一个触摸点。==触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。常见的触屏事件如下:触摸事件对象(TouchEvent )TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触原创 2020-10-21 22:37:31 · 241 阅读 · 1 评论 -
保安日记:JavaScript学习第十三篇之动画函数封装
动画函数封装动画实现原理:核心原理:通过定时器setInterval() 不断移动盒子位置实现步骤:获得盒子当前位置让盒子在当前位置加上一个移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位,才能使用element.style.left动画函数简单封装注意函数需要传递2个参数,动画对象、移动到的距离 // 简单动画函数封装obj目标对象 target 目标位置 function animate(obj, target) {原创 2020-10-20 22:03:09 · 119 阅读 · 0 评论 -
保安日记:JavaScript学习第十二篇之PC端网页特效offset、client、scroll系列
PC端网页特效元素偏移量offset系列offset翻译过来就是偏移量获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度)注意:返回的数值都不带单位常用属性<body> <div class="father"> <div class="son"></div> </div> <div class="w"></div> <script>原创 2020-10-20 20:12:30 · 132 阅读 · 0 评论 -
保安日记:JavaScript学习第十一篇之BOM
BOM什么是 BOMBOM ( Browser Object Model))即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。BOM的构成BOM比DOM更大window对象是浏览器的顶级对象,它具有双重角色。它是JS访问浏览器窗口的一个接口。原创 2020-10-20 13:49:50 · 288 阅读 · 1 评论 -
保安日记:JavaScript学习第十篇之事件高级
事件高级注册事件传统注册方式 (利用on开头的事件):同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式(w3c标准推荐方式):同一个元素同一个事件可以注册多个监听器按注册顺序依次执行addEventListener()是一个方法,有兼容性问题,IE9之前可使用attachEvent()或传统注册方式代替addEventListener()eventTarget.addEventListener(type,listener[,原创 2020-10-19 14:28:59 · 393 阅读 · 0 评论 -
保安日记:JavaScript学习第九篇之DOM基础之节点操作
节点操作节点概述一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。在实际开发中,节点操作主要操作的是元素节点元素节点nodeType为 1属性节点nodeType为 2文本节点nodeType为 3(文本节点包含文字、空格、换行等)节点层级利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄层级关系1.父级节点node.parentNodeparentNode属性可返回某节点的父节点,注意是最近的一原创 2020-10-18 19:03:21 · 284 阅读 · 0 评论 -
保安日记:JavaScript学习第八篇之DOM基础案例练习
以下都是案例百度换肤案例(点击哪种图片更换此背景) <style> li { list-style: none; } li img { float: left; width: 100px; margin-left: 3px; margin-top: 5px; margin-bottom: 5px; } .box { mar原创 2020-10-17 23:42:11 · 223 阅读 · 1 评论 -
保安日记:JavaScript学习第七篇之DOM基础
API和WebAPIAPI是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能。Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)。DOM文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。DOM树DOM在开发中主要用来操作元素获取元素方法根据ID获取var elem原创 2020-10-17 23:41:27 · 278 阅读 · 1 评论 -
保安日记:JavaScript学习第六篇之对象、内置函数
JavaScript 函数作用域es6之前:全局作用域 - 全局变量 (如果在函数内部没有声明的变量 也是全局变量)局部作用域 -局部变量(函数的形参也是局部变量)function fn() { var num1 = 1; // 局部变量 函数内部使用 num2 = 2; //全局变量 全局可使用}es6新增块级作用域:{},if{}、for{} 大括号里面的变量外部不能使用区别:全局变量全局使用,只有在浏览器关闭才会被销毁,比较占内存局部变量只有所在的代码被执行才会被原创 2020-10-16 16:04:47 · 182 阅读 · 0 评论 -
保安日记:JavaScript学习第五篇之数组、函数
JavaScript 数组创建数组 <script> var 数组名 = new Array(); var 数组名 = []; //[] 为数组字面量 </script>新增数组元素修改数组索引追加到新数组newArr[newArr.length] = arr[i]; <script> var arr = [2, 3, 6, 1, 7]; for (i = 0; i <= arr.l原创 2020-10-15 12:15:29 · 157 阅读 · 0 评论 -
保安日记:JavaScript学习第四篇之流程控制
JavaScript 流程控制三元表达式语法结构//条件表达式?表达式1 :表达式2var num = 10;var result = num > 5 ? '是的' : '不是的';//我们知道表达式是有返回值的//如果条件表达式结果为真则返回表达式1的值如果条件表达式结果为假则返回表达式2的值switch: 针对变量设置一系列的特定值的选项,变量与case里的值要全等switch语句与 if else if语句区别:switch通常处理 比较确定值, if常用于判断范围sw原创 2020-10-14 16:48:21 · 168 阅读 · 0 评论 -
保安日记:JavaScript学习第三篇之运算符
JavaScript 运算符运算符( operator )也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。算数运算符:用于执行两个变量或值的算术运算 + - * / %console.log(0.1 + 0.2); // 0.30000000000004注意:浮点数 算术运算会有问题,因为本身小数已经很小 还要把小数转换成二进制再进行算术运算 后面有其他方法解决 因此也不能直接拿浮点数进行比较是否相等前置递增运算符(++i)先加 1,再返回值后置递增运算符(原创 2020-10-13 15:01:12 · 335 阅读 · 0 评论 -
保安日记:JavaScript学习第二篇之变量、数据类型
JavaScript基础JS变量变量是用于存放数据的容器。我们通过变量名获取数据,甚至数据可以修改本质:变量是程序在内存中申请的一块用来存放数据的空间使用:声明变量 var name; (variable)赋值 name = nike;初始化:声明一个变量并赋值 <script> var name = 'nike' ; console.log(name); </script>变量的语法扩展1.更新变量一个变量被重新复赋原创 2020-10-12 22:31:04 · 166 阅读 · 0 评论 -
保安日记:JavaScript学习第一篇之初识JS
JavaScript篇初识 JavaScriptJavaScript是一种运行在客户端的脚本语言脚本语言:不需要编译,运行过程中由js解释器逐行来进行解释并执行JavaScript作用:表单动态校验(密码强度检测)( JS产生最初的目的)网页特效服务端开发(Node.js)桌面程序(Electron)App(Cordova)控制硬件-物联网(Ruff)游戏开发(cocos2d-js)HTML/CSS/JavaScript关系标记语言HTML决定网页的结构和内容CSS决定原创 2020-10-12 11:56:09 · 138 阅读 · 0 评论