![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
duc_?
(☆_☆)
展开
-
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 · 142 阅读 · 0 评论 -
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 · 563 阅读 · 0 评论 -
js 本地存储 localStorage,序列化stringify,反序列化parse
本地存储:localStorage本地存储localStorage存储的数据保存在浏览器中,存储大小5MB,只要用户没有手动删除,即可永久保存输出查看本地存储localStorage的函数原型:console.log(localStorage); value= stringify(value); // 序列化字段信息 设置 / 修改本地存储字段信息:var local = local...原创 2019-08-09 08:55:39 · 1024 阅读 · 2 评论 -
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 · 91 阅读 · 0 评论 -
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 · 728 阅读 · 0 评论 -
js DOM : 鼠标事件
任何事件都有有一个事件对象,该对象作为事件函数的第一个参数鼠标进入事件:onmouseover 、onmouseenter鼠标移出事件 :onmouseout 、onmouseleave鼠标移动事件 :onmousemove事件绑定var layer = document.getElementById('layer');// 鼠标坐标是相对于layer元素的//...原创 2019-07-28 11:21:29 · 1766 阅读 · 0 评论 -
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 · 270 阅读 · 0 评论 -
js window窗口事件(浏览器可视宽高、设备适配尺寸、)
窗口缩放事件:onresize浏览器页面可视宽高:innerWidth innerHeight设备屏幕适配尺寸 :超大pc >=1200、pc >= 992 、平板 >= 768 、手机端 >= 320设备分辨率宽高:screen.width screen.heightwindow.onresize = function () { ...原创 2019-08-10 16:40:08 · 921 阅读 · 0 评论 -
js 移动端触摸事件
手机触摸事件手指开始触摸事件 ontouchstart手指移动触点事件 ontouchmove手指离开屏幕事件 ontouchend手指触点被取消时事件 ontouchcancel, 比如来电显示会中断我们对于屏幕的控制var box = document.querySelect('.box');box.ontouchstart = function (e) { /...原创 2019-08-09 19:12:45 · 311 阅读 · 0 评论 -
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 · 715 阅读 · 0 评论 -
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 · 92 阅读 · 0 评论 -
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 · 185 阅读 · 0 评论 -
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 · 97 阅读 · 0 评论 -
js 高阶函数
满足以下条件之一即为高阶函数1、函数可以作为函数参数传递eaching([], function(){});2、函数可以作为函数返回值function g() { 函数内部执行语句…… // 函数作为函数返回值 return fucntion () {console.log(this);}}类似bind函数的使用PS:闭包一定是...原创 2020-07-03 17:34:32 · 158 阅读 · 0 评论 -
js 闭包
闭包:有权访问函数内部局部变量的函数创建闭包:外层函数创建一个受保护的局部变量 内层函数操作受保护的局部变量 外层函数将内层函数返回到外部 内层函数在外部反复调用使用闭包的原因: 创建闭包最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用域链,并将函数内部的变量和方法传递到外部闭包的特性:函数内再嵌套函数...原创 2019-10-14 09:43:01 · 133 阅读 · 0 评论 -
js l临时文档片段
创建临时文档片段document.createDocumentFragment(); 以减少真实DOM操作次数,避免影响用户体验;使用场景例如,遍历数据生成DOM元素添加显示到页面// 创建临时文档片段存储li元素,避免进行多次DOM操作var fragment = document.createDocumentFragement();for (var i = 0; i < ...原创 2019-08-09 19:33:23 · 439 阅读 · 0 评论 -
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 · 446 阅读 · 0 评论 -
js 面向对象编程oop, 构造函数
对象:一组无序属性的集合对象成员:属性和方法面向对象:将需求抽象成一个对象,然后对其成员进行分析面向对象三大特性:封装:函数封装 继承:js通过原型链继承 多态:函数根据参数个数不同返回结果不同OOP:面向对象编程(Object-Oriented Programming),本质上就是创建对象构造函数:就是一个普通函数,只不过可以用来创建对象而已;使用new操作符创建对...原创 2019-08-09 00:42:22 · 258 阅读 · 0 评论 -
js 字符串
字符串:一对引号(单引号或者双引号)包括的普通文本包装类型对象:Number,Boolean,String : 利用构造函数形式的声明方式输出的返回值类型均为object如:Number: var num1 = new Number(2); var num2 = 2; num1与num2之间值相等,类型不同可以进行数值、字符串、对象三者数据类型的相互转换,如:var num = ...原创 2019-07-22 12:00:37 · 67 阅读 · 0 评论 -
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 · 696 阅读 · 0 评论 -
js 数组(1) (数组相关API)
数组:一组变量的集合。数组/声明数组字面量方式:var person = [2]; 构造函数方式:var arr = new Array(); // 若括号内只有一个数值参数,改参数表示数组有几个空元素;若包含几个参数,这些参数即为数组元素 获取数组长度:arr.length 指定修改第5个元素的值:arr[4] = ' 啥?'; 越界获取数组元素,即获取当前数组中不存在的元素:返...原创 2019-07-18 19:15:57 · 135 阅读 · 0 评论 -
js 数值
数值最大值:var max = Number_MAX_VALUE数值最小值:var min = Number_MIN_VALUE( 1/min) 返回结果为 Infiniti (无穷大),属于无效值;判断一个数据是否有效,使用函数 isFinite():var isFin = isFinite( data); 有效输出true,无效输出false;NaN:不是数字的数...原创 2019-07-16 14:02:57 · 472 阅读 · 0 评论 -
js 常量、变量比较
js 变量命名规范:字母、数字、下划线 _ 、美元符号$(不能以数字作开头)变量:可重新声明; 可重新赋值; 具备变量名提前 可只声明,无赋值,返回值为undefined; 无声明,直接赋值使用的为全局变量; 无声明且未赋值直接使用的会报错; 变量可同时多声明;常量:一旦声明则无法改变的量;声明必须赋值;不可重新赋值;不可重新声明;习惯使用大写标识;...原创 2019-07-16 13:24:42 · 883 阅读 · 0 评论 -
js 数据类型
原始数据类型:number(数值)、boolean(布尔:判断真假)、string(字符串)、undefined(声明未赋值)、null(声明赋值为空,类型无法确定,在接下来的使用中进行确定)、symbol(唯一标志符)引用数据类型:function(函数)、array(数组)、object(对象)两种数据类型变量的存储方式的不同,在变量赋值发生变化时出现的不同情况1、原...原创 2019-07-16 13:04:07 · 66 阅读 · 0 评论 -
js 函数 function
函数:一段可以重复调用的代码块(一等公民 ^ _ ^)函数声明方式:使用关键字function + 函数名:function fnName () { } 具备整体声明提前与变量名声明提前类似,但变量只是将变量名声明提前,变量值留在本地;函数的声明提前则是整体性的; 函数表达式(又称为匿名函数):var fn = function (){ }; 构造函数:var fn = new Fu...原创 2019-07-18 14:03:20 · 288 阅读 · 0 评论 -
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 · 70 阅读 · 0 评论 -
js+正则:判断是否包含特定字符串
String对象的方法方法一: indexOf() (推荐)var str = "123";console.log(str.indexOf("3") != -1 ); // trueindexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。 方法二: search() var str = "123...转载 2018-12-02 15:13:38 · 21747 阅读 · 0 评论 -
ES6 箭头函数 =>
定义一个嵌套的箭头函数tmp1let address = [ {first: '健康',last:'生活'}];const tmpl = addrs => ` <table> ${addrs.map(addr => ` <tr><td>${addr.first}</td></tr> ...原创 2018-10-20 15:20:37 · 165 阅读 · 0 评论 -
正则表达式
正则表达式(一种验证规则,以对象的形式存在): 描述或者匹配一系列符合某个语法的一种独立的字符串的语言体系,可以在很多文本编辑工具中使用,无论是js、C语言、java还是其他文本编辑语言,在这些当中使用的语法都是一模一样的,可以应用的场景有:数据验证、文本替换、内容检索、过滤内容(即执行字符串函数无法完成的特殊的匹配(模糊匹配)、拆分和替换功能)。 // html部分...原创 2018-10-17 01:02:11 · 187 阅读 · 0 评论 -
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 · 144 阅读 · 0 评论 -
js 定时器方法
一次性定时器 setTimeout(function () {}, time),time的单位为毫秒,意为几毫秒执行一次,最小时间为4ms;定时器都是异步执行的,一步程序不会阻塞后续代码执行;一步程序必须等阿迪所有同步程序全部执行完成才能执行;var timer1 = setTimeout(function () { console.log('setTimeout执行了');...原创 2019-07-23 19:43:10 · 320 阅读 · 0 评论 -
js 焦点事件 、键盘按键事件
获取焦点:onfoucs失去焦点:onblur鼠标双击: 每次单机时间不能超过350ms ondbclick键盘按键事件按键按下事件:onkeydown、onkeypress(onkeypress不支持ctrl、shift、alt等键)按键松开事件:onkeyup获取键码:document.onkeydown = function (e) { v...原创 2019-07-31 08:58:26 · 743 阅读 · 2 评论 -
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 · 493 阅读 · 0 评论 -
js 事件监听(兼容浏览器执行环境)、冒泡、捕获
事件触发阶段:捕获阶段、冒泡阶段 (先捕获后冒泡)捕获阶段:从根元素开始捕获,到目标元素结束(从外到内捕获)冒泡阶段:从目标元素开始冒泡,到根元素结束(从内到外冒泡)被点击元素称为目标元素事件要么在捕获触发,要么在冒泡触发,事件只能触发一次添加事件监听 元素.addEventListener(事件类型, 事件回调函数, 是否捕获触发) , 默认冒泡触发fals...原创 2019-07-29 20:59:17 · 557 阅读 · 0 评论 -
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 · 111 阅读 · 0 评论 -
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 · 152 阅读 · 0 评论 -
js this用法
// this:值随时执当前使用对象声明全局变量,相当于给window对象添加属性凡是某个属性或者某个方法在被调用时没有调用者,就属于window的属性和方法全局变量 var a = 1; console.log(a); =相当于=> window.a =相当于=> this.a;每一个函数都有一个独立的this调用某一个函数,this指向当前调用该函数的对...原创 2019-07-22 09:07:15 · 98 阅读 · 0 评论 -
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 阅读 · 0 评论 -
js 对象(object)
对象声明 1)字面量对象 var obj1 = {}; 2) 构造函数 var obj2 = new Object();ps: obj1 ==obj2; // false ,存储的引用地址不同 [ ] ==[ ] ; // false ,存储的引用地址不同实例:var person = { ...原创 2019-07-19 15:23:25 · 145 阅读 · 0 评论 -
js 数组(2)(哈希数组,又名关联数组)
哈希(hash)数组(关联数组): ==> 哈希数组内元素无序,普通数组的数组长度length对哈希数组无效实例:[ name:'小明', id:'openDoor' ] // 以[键名:键值]即[key:value] 键值对的形式出现声明数组:var hash = [ name: '小茗同学', id: ‘4405***680’, sex:'男' ];哈希数组的存储内容以...原创 2019-07-19 13:23:30 · 1443 阅读 · 1 评论