- 博客(61)
- 收藏
- 关注
RSS订阅原创 js 高阶函数
满足以下条件之一即为高阶函数1、函数可以作为函数参数传递eaching([], function(){});2、函数可以作为函数返回值function g() { 函数内部执行语句…… // 函数作为函数返回值 return fucntion () {console.log(this);}}类似bind函数的使用PS：闭包一定是...
2020-07-03 17:34:32
153
原创 js 闭包
闭包：有权访问函数内部局部变量的函数创建闭包：外层函数创建一个受保护的局部变量 内层函数操作受保护的局部变量 外层函数将内层函数返回到外部 内层函数在外部反复调用使用闭包的原因： 创建闭包最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量，利用闭包可以突破作用域链，并将函数内部的变量和方法传递到外部闭包的特性：函数内再嵌套函数...
2019-10-14 09:43:01
129
原创 js 对象详解
构造函数function Person (name, hobby) { this.name = name; this.hobby = hobby;}实例化对象var person = new Person('chen', 'basketball');删除对象属性delete person.name;自定义对象属性Object.definePropert...
2019-10-14 09:39:00
140
原创 js 元素获取的比较 ： 元素.clientWidth, 元素.offsetWidth, getComputedStyle(元素).width
<style> .box{ width: 100px; height: 100px; border:3px solid #000; }</style><div class = "box">盒子</div><script> var box = document.querySelector('.box'); ...
2019-10-14 09:38:15
553
原创 js 数组 判断数组的六大方法
var arr = [];1、 直接判断数据arr的数据类型Array.isArray(arr);2、 判断构造函数Array的原型是否是arr的原型对象Array.prototype.isPrototypeOf(arr);3、 数组arr的构造函数属性（原型构造器）是否等于构造函数本身arr.constructor === Array;4、 判断arr是否是由构造函数...
2019-10-14 09:22:15
416
原创 js window窗口事件（浏览器可视宽高、设备适配尺寸、）
窗口缩放事件：onresize浏览器页面可视宽高：innerWidth innerHeight设备屏幕适配尺寸 ：超大pc >=1200、pc >= 992 、平板 >= 768 、手机端 >= 320设备分辨率宽高：screen.width screen.heightwindow.onresize = function () { ...
2019-08-10 16:40:08
908
原创 js l临时文档片段
创建临时文档片段document.createDocumentFragment(); 以减少真实DOM操作次数，避免影响用户体验；使用场景例如，遍历数据生成DOM元素添加显示到页面// 创建临时文档片段存储li元素，避免进行多次DOM操作var fragment = document.createDocumentFragement();for (var i = 0; i < ...
2019-08-09 19:33:23
422
原创 js 移动端触摸事件
手机触摸事件手指开始触摸事件 ontouchstart手指移动触点事件 ontouchmove手指离开屏幕事件 ontouchend手指触点被取消时事件 ontouchcancel， 比如来电显示会中断我们对于屏幕的控制var box = document.querySelect('.box');box.ontouchstart = function (e) { /...
2019-08-09 19:12:45
297
原创 js 本地存储 localStorage，序列化stringify，反序列化parse
本地存储：localStorage本地存储localStorage存储的数据保存在浏览器中，存储大小5MB，只要用户没有手动删除，即可永久保存输出查看本地存储localStorage的函数原型：console.log(localStorage); value= stringify(value); // 序列化字段信息 设置 / 修改本地存储字段信息：var local = local...
2019-08-09 08:55:39
1011
2
原创 js 面向对象编程oop, 构造函数
对象：一组无序属性的集合对象成员：属性和方法面向对象：将需求抽象成一个对象，然后对其成员进行分析面向对象三大特性：封装：函数封装 继承：js通过原型链继承 多态：函数根据参数个数不同返回结果不同OOP：面向对象编程（Object-Oriented Programming），本质上就是创建对象构造函数：就是一个普通函数，只不过可以用来创建对象而已；使用new操作符创建对...
2019-08-09 00:42:22
256
原创 js 焦点事件 、键盘按键事件
获取焦点：onfoucs失去焦点：onblur鼠标双击： 每次单机时间不能超过350ms ondbclick键盘按键事件按键按下事件：onkeydown、onkeypress（onkeypress不支持ctrl、shift、alt等键）按键松开事件：onkeyup获取键码：document.onkeydown = function (e) { v...
2019-07-31 08:58:26
735
2
原创 js 事件监听（兼容浏览器执行环境）、冒泡、捕获
事件触发阶段：捕获阶段、冒泡阶段 （先捕获后冒泡）捕获阶段：从根元素开始捕获，到目标元素结束（从外到内捕获）冒泡阶段：从目标元素开始冒泡，到根元素结束（从内到外冒泡）被点击元素称为目标元素事件要么在捕获触发，要么在冒泡触发，事件只能触发一次添加事件监听 元素.addEventListener(事件类型, 事件回调函数, 是否捕获触发) ， 默认冒泡触发fals...
2019-07-29 20:59:17
530
原创 js DOM : 属性操作
<div id = "na" class = "c"></div><script> var box = document.querySelector('.c');</script>设置属性 setAttribute(属性名称， 属性值)box.setAttribute('name', 'joe');获取属性 getAtt...
2019-07-29 16:08:13
108
原创 js 快速排序
// 快速排序 var arr3 = [35, 5, 34, 4, 12, 3, 44, 2, 43, 6, 8, 0]; console.log(arr3); function quickSort(arr) { // arr 进行排序的数组 if (arr.length <= 1) { return arr;...
2019-07-28 18:14:26
93
原创 js 选择排序
// 选择排序 var arr2 = [35, 5, 34, 4, 12, 3, 44, 2, 43, 6, 8, 0, 122]; console.log(arr2); function selectSort(arr) { // arr 进行排序的数组 for (var i = 0; i < arr.length; i+...
2019-07-28 17:46:37
184
原创 js 冒泡排序
// 冒泡排序 var arr1 = [23, 35, 5, 34, 4, 12, 7, 0, 78, 19]; function bubbleSort(arr, isAsc) { // arr 进行排序的数组 // isAsc 是否升序排序，默认升序true isAsc = isAsc == undefined ? true :...
2019-07-28 17:19:32
88
原创 js DOM ： DOM节点关系（父子节点、同胞节点）
<div> <span>21312</> <button id = 'user'>按钮</button> <p>获取我呀</p></div><script> var btn = document.getElementById('btn'); va...
2019-07-28 16:06:23
682
原创 js DOM : 样式操作
设置类名 classNamevar btn.className = 'cancel';设置样式（凡是在脚本中修改的样式，都是内联样式）btn.style.display = 'block';btn.width = '100px';btn..backgroundColor = '#000';btn['background-color'] = '#000';获取设置p元素...
2019-07-28 13:50:32
723
原创 js DOM ：节点操作（增删改查）
<style>.box{ width:600px; border:1px solid #e4393c; }.box>div{ float:left; width:180px; height:200px; margin: 0 10px; background:#eee; }</style><div class="box"> <p>...
2019-07-28 13:31:17
712
原创 js DOM : 鼠标事件
任何事件都有有一个事件对象，该对象作为事件函数的第一个参数鼠标进入事件：onmouseover 、onmouseenter鼠标移出事件 ：onmouseout 、onmouseleave鼠标移动事件 ：onmousemove事件绑定var layer = document.getElementById('layer');// 鼠标坐标是相对于layer元素的//...
2019-07-28 11:21:29
1751
原创 js DOM ( 文档对象模型 ) ： 获取节点、节点只读属性
DOM：Document Object model 文档对象模型html元素标签六大公共属性：class、id、title、name、style、data-*获取节点（元素）: 通过 id 获取：var user= document.getElementById('user'); //若获取得到返回一个原生DOM元素，找不到则返回null 通过class 类名获取： ...
2019-07-25 14:17:21
484
原创 js 正则(2) ：量词、组、正则特殊模式、支持正则的字符串API
验证文本：var text = 'apple';量词：控制匹配模式出现的次数和位置? ：修饰问号前的一个字符，该字符最多出现一次，可以没有，但是有就只能出现一次，等价于{0,,1} var reg = /apb?c/; ==>var reg = /apb{0,1}c/; 输出结果console.log(reg); ==> true 字符b可以出现也可以不出现...
2019-07-24 19:42:31
145
原创 js 正则(1) ：声明方式、验证、修饰符、只读属性、预定义模式
正则表达式：一种文本匹配模式声明方式字面量（固定正则）： /匹配模式/ // var reg = /a/; 构造函数（动态正则）：new RegExp('匹配模式') // var r = new RegExp(a); 或者var r = new RegExp('mark');正则验证文本 var word = '来，吧'; var reg = /来/;正则验证...
2019-07-24 12:17:36
218
原创 js 定时器方法
一次性定时器 setTimeout(function () {}, time)，time的单位为毫秒，意为几毫秒执行一次，最小时间为4ms；定时器都是异步执行的，一步程序不会阻塞后续代码执行；一步程序必须等阿迪所有同步程序全部执行完成才能执行；var timer1 = setTimeout(function () { console.log('setTimeout执行了');...
2019-07-23 19:43:10
314
原创 js Date时间对象
Date时间对象var today = new Date(); // 获取当前日期时间，返回一个日期对象 var birth = new Date('1995-12-03 23:18:34'); // 出生日期 var time = today.getTime(); // 获取today变量时间的毫秒数；getTime()时间戳，用于唯一标志 today.getYear(); /...
2019-07-23 19:24:25
127
原创 js Math相关API
数学 Math ：所有属性和方法都是静态的，所以不能使用new关键字如：new关键字创建实例：var arr = []; <==> new Array ；new Math()则是错误的，Math不属于构造器，无法构造静态方法和属性：String.fromCharCodeMath相关APIMath.random()：随机数，范围 0 < x < 1之...
2019-07-23 15:08:05
260
原创 html、xml、xhtml、html5
html使用版本：HTML —— XML —— HTML —— XHTML —— HTML4.0.1 —— HTML5html：超级文本标记语言； xml：可扩展的标记语言，标签可自定义 xhtml：严格的html语言，标签必须小写 html5：html4.0.1的升级版...
2019-07-22 12:22:54
89
原创 table表格（实例）：跨行跨列布局
表格 table表头 thead表体 tbody表尾 tfoot行 tr列 td列 th表格属性cellspacing: 单元格与单元格之间的间距cellpadding: 单元格的内边距border: 1 表格边框大小width: 表格宽度单元格属性colspan: 单元格跨列rowspan: 单元格跨行如图： <!--...
2019-07-22 12:11:56
2908
原创 文本样式
文本样式text-align: left | right | center | justify;//文字位置设置text-transform: uppercase | lowercase | capitalize;//文字元素转换white-space: nowrap | wrap;//文字换行设置line-height: 30px;//行高letter-spacing: 30px;//...
2019-07-22 12:06:18
70
原创 js 运算符
加号运算符 ‘+’：数值相加：var n = 1 + 1 ==> 2; //n的类型输出为number字符串拼接：var m = 1+ '0'==> 10；// m的类型输出为string，也可与空字符串进行拼接显示类型转换为number：var k = + '1' + 2 ==> 3; // m的输出类型为number，字符串‘1’前的 ‘+’ 号将字符串‘...
2019-07-22 12:04:12
87
原创 js 字符串
字符串：一对引号（单引号或者双引号）包括的普通文本包装类型对象：Number，Boolean，String : 利用构造函数形式的声明方式输出的返回值类型均为object如：Number: var num1 = new Number(2); var num2 = 2; num1与num2之间值相等，类型不同可以进行数值、字符串、对象三者数据类型的相互转换，如：var num = ...
2019-07-22 12:00:37
64
原创 js this用法
// this：值随时执当前使用对象声明全局变量，相当于给window对象添加属性凡是某个属性或者某个方法在被调用时没有调用者，就属于window的属性和方法全局变量 var a = 1; console.log(a); =相当于=> window.a =相当于=> this.a;每一个函数都有一个独立的this调用某一个函数，this指向当前调用该函数的对...
2019-07-22 09:07:15
94
转载 npm（工具管理包）
网上的 npm 教程主要都在讲怎么安装、配置和使用 npm，却不告诉新人「为什么要使用 npm」。今天我就来讲讲这个话题。本文目标读者是「不太了解 npm 的新人」，大神您别看了，不然又说我啰嗦了 ��社区程序员自古以来就有社区文化：社区的意思是：拥有共同职业或兴趣的人们，自发组织在一起，通过分享信息和资源进行合作。虚拟社区的参与者经常会在线讨论相关话题，或访问某些网站。前端程...
2019-07-20 22:52:22
253
原创 优先级问题(权重)
css引入方式内联样式 <div style="css样式"></div> 内部样式 <style> css样式 </style> 外部样式 <link rel="stylesheet" href="样式表链接" />在选择器精度一致时内联样式 > 内部样式 > 浏览器缺省(默认)样式 内联样式 > 外部...
2019-07-20 22:48:31
657
原创 js 流程控制
if 判断： if(){}; if(){} else{}while 循环：while(){} do{}while()switch判断：switch(){ case: }错误捕获：try{} catch (error){} finally{} //finally 可有可无,try,catch则必须要有try {有可能错误的代码}catch (err) {如...
2019-07-20 22:00:11
68
原创 js 对象（object）
对象声明 1)字面量对象 var obj1 = {}; 2) 构造函数 var obj2 = new Object();ps： obj1 ==obj2; // false ,存储的引用地址不同 [ ] ==[ ] ; // false ,存储的引用地址不同实例：var person = { ...
2019-07-19 15:23:25
142
原创 js 数组(2)（哈希数组，又名关联数组）
哈希（hash）数组（关联数组）： ==> 哈希数组内元素无序，普通数组的数组长度length对哈希数组无效实例：[ name:'小明', id:'openDoor' ] // 以[键名:键值]即[key:value] 键值对的形式出现声明数组：var hash = [ name: '小茗同学', id: ‘4405***680’, sex:'男' ];哈希数组的存储内容以...
2019-07-19 13:23:30
1417
1
原创 js 数组(1) （数组相关API）
数组：一组变量的集合。数组/声明数组字面量方式：var person = [2]; 构造函数方式：var arr = new Array(); // 若括号内只有一个数值参数，改参数表示数组有几个空元素；若包含几个参数，这些参数即为数组元素 获取数组长度：arr.length 指定修改第5个元素的值：arr[4] = ' 啥？'; 越界获取数组元素，即获取当前数组中不存在的元素：返...
2019-07-18 19:15:57
127
原创 js 函数 function
函数：一段可以重复调用的代码块（一等公民 ^ _ ^）函数声明方式：使用关键字function + 函数名：function fnName () { } 具备整体声明提前与变量名声明提前类似，但变量只是将变量名声明提前，变量值留在本地；函数的声明提前则是整体性的； 函数表达式（又称为匿名函数）：var fn = function (){ }; 构造函数：var fn = new Fu...
2019-07-18 14:03:20
282
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人