![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
jiaojsun
做一只快乐的小码龙
展开
-
简单明了区分escape、encodeURI和encodeURIComponent
一、前言讲这3个方法区别的文章太多了,但是大部分写的都很绕。本文试图从实践角度去讲这3个方法。二、escape和它们不是同一类简单来说,escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读。编码之后的效果是%XX或者%uXXXX这种形式。其中ASCII字母、数字、@*/+,这几个字符不会被编码,其余的都会。最关键的是,当你需要对URL编码时,请忘记这个方法,这个方法是针对字符串使用的,不适用于URL。事实上,这个方法我还没有在实际...转载 2020-05-14 16:17:28 · 186 阅读 · 0 评论 -
事件流中的事件捕获
Ie下是没有的捕获事件的,在绑定事件中,标准下是有的首先来回顾一下事件冒泡<body> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div></body>window.onload = function() { var oDiv1 = d原创 2017-08-27 23:41:20 · 345 阅读 · 0 评论 -
事件的取消
1. 第一种事件绑定形式的取消obj.onclick=fn;这种形式的取消。function fn1() { alert(1);}function fn2() { alert(2);}document.onclick = fn1;document.onclick = null;//取消2. 第二种事件绑定形式的取消ie : obj.detachEvent(事件名称,事件函数)原创 2017-08-27 23:58:31 · 206 阅读 · 0 评论 -
关于json
1. json数据格式及json语法基本格式var json = { name : 'leo', age : 32 };alert( json.name );下面两种写法都可以,第二种安全。var json2 = { name : 'miaov' };var json2 = { 'name' : 'miaov' };// alert( json2.name );// alert( json2[原创 2017-08-23 22:40:36 · 194 阅读 · 0 评论 -
事件默认行为_默认事件(未完)
onkeydown : 当键盘按键按下的时候触发 onkeyup : 当键盘按键抬起的时候触发 /*event.keyCode : 数字类型 键盘按键的值 键值 ctrlKey,shiftKey,altKey 布尔值 当一个事件发生的时候,如果ctrl || shift || alt 是按下的状态,返回true,否则返回false */document.onkeydown原创 2017-08-29 22:05:58 · 345 阅读 · 0 评论 -
关于数组(一)
1. 数组定义及清空数组效率问题两种定义方式,第一种更好 var arr = [ 1,2,3 ]; var arr = new Array(1,2,3);注意:下面第一种写法表示创建一个长度为3的数组,下面表示创建【3】这样的数组。var arr = new Array(3);var arr = new Array('3');数组中的length是一个可读可写的属性var arr = [ 'aa原创 2017-08-26 14:59:56 · 224 阅读 · 0 评论 -
关于数组(二)
4. sort排序无序变有序<script>var arr = [ 'c', 'd', 'a', 'e' ];arr.sort();alert( arr );//acde 按照字符的编码值排序var arr2 = [ 4,3,5,5,76,2,0,8 ];arr2.sort();alert( arr2 );//0,2,3,4,5,5,76,8 按照字符串方式排序arr2.sort(func原创 2017-08-31 23:27:36 · 176 阅读 · 0 评论 -
什么是面向对象
1. 系统对象用对象的思想去写代码,就是面向对象编程。 我们把系统自带的对象,叫做系统对象,比如var arr = new Array();var date = new Date();但是系统自带的对象远远不能满足我们的需求,所以需要我们自己封装对象。2. 面向对象编程的特点抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 多态:多对象的不同形态3. 面向原创 2017-10-08 15:20:31 · 231 阅读 · 0 评论 -
js 数组赋值问题 :值传递还是引用?
JavaScript有许多批量创建数组的方法,为了衡量它们的性能,我分别使用不同的方法创建一个长度为100000的数组,且键和值相等。同时,我定义了下面这个函数用来测量创建数组所耗费的时间: 以下为常用的几个创建数组的方法以及它们所耗费的时间: 这里用到了一个{ length: 100000 }伪数组,NodeList和arguments都是伪数组(array-like object),转载 2017-11-21 16:54:14 · 5886 阅读 · 0 评论 -
面向对象(理解对象)--属性类型01
1.了解对象 对象:无序属性的集合,其属性可以包含基本值、对象或者函数。通俗讲就是可以把对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数 早期创建对象的写法现在使用对象字面量的方法 2.属性类型 ECMAScript 中有两种属性:数据属性和访问器属性1)数据属性数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有 4 个描述其行...原创 2018-09-29 10:57:00 · 885 阅读 · 0 评论 -
面向对象(理解对象)--定义属性02
1.定义多个属性Object.defineProperties()方法。利用这个方法可以通过描述符一次定义多个属性。这个方法接收两个对象参数:第一个对象是要添加和修改其属性的对象,第二个对象的属性与第一个对象中要添加或修改的属性一一对应。例如:var book = {};Object.defineProperties(book, { _year: { value...原创 2018-09-29 11:24:09 · 221 阅读 · 0 评论 -
面向对象(创建对象)--工厂模式01
考虑到在 ECMAScript 中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的细节,如下面的例子所示function createPerson(name, age, job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName =...原创 2018-09-29 11:31:43 · 189 阅读 · 0 评论 -
面向对象(创建对象)--构造函数模式02
上一篇工厂模式中有一个例子现在创建自定义的构造函数,从而定义自定义对象类型的属性和方法。例如,可以使用构造函数模式将上面的例子重写如下 function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function (...原创 2018-09-29 17:15:04 · 236 阅读 · 0 评论 -
JS基本概念--数据类型
1.ECMAScript有六种数据类型:五种简单数据类型:Numeber,String,Boolean,Null,Undefined一种复杂数据类型:Object2.typeof 操作符可以返回六种类型:'number','string','boolean','undefined','object','function''undefined':该值未定义'string':该...原创 2018-10-09 15:04:02 · 117 阅读 · 0 评论 -
JavaScript系列—性能优化之《网站性能优化实战——从12.67s到1.06s的故事》
本篇博文来源于网络226 人赞同了该文章原文作者:IMWeb jerryOnlyZRJ原文链接:网站性能优化实战--从12.67s到1.06s的故事 - 腾讯Web前端 IMWeb 团队社区史上最全面、最完整的网站性能监测与优化策略0.引言作为互联网项目,最重要的便是用户体验。在举国“互联网+”的热潮中,用户至上也已经被大多数企业所接收,特别是在如今移动端快速发展...转载 2019-07-13 15:28:21 · 386 阅读 · 1 评论 -
JavaScript系列—Js的内存模型
原文地址(https://zhuanlan.zhihu.com/p/62449359)摘要:从内存角度理解 let 和 const 的意义。原文:JavaScript 是如何工作的:JavaScript 的内存模型 作者:前端小智// 声明一些变量并初始化它们var a = 5;let b = "xy";const c = true;// 分配新值a = 6;b = ...转载 2019-07-15 11:37:39 · 762 阅读 · 0 评论 -
JavaScript 开发者应懂的 33 个概念
JavaScript开发者应懂的33个概念Fundebug一行代码搞定BUG监控:www.fundebug.com关注她356 人赞同了该文章摘要:基础很重要啊!原文:33 concepts every JavaScript developer should know 译文:每个 JavaScript 工程师都应懂的33个概念 作者:stephentianFu...转载 2019-07-17 17:33:55 · 672 阅读 · 0 评论 -
事件绑定的第二种形式
1. 事件绑定的第一种方式给一个对象绑定一个事件处理函数的第一种形式在上一节提过,obj.onclick = fn;如下所示function fn1() { alert(this);}document.onclick = fn1;这种方式会存在一个问题,即后面的事件会覆盖前面绑定的事件,如下所示,只会弹出2.function fn1() { alert(this);}func原创 2017-08-27 21:46:11 · 194 阅读 · 0 评论 -
事件流中的事件冒泡
1. 事件冒泡的概念事件函数绑定: 给**加事件,给元素加事件处理函数。举个栗子。//oDiv1.onclick = fn1; 事件函数绑定。告诉div1,如果他接收到了一个点击事件,那么他就去执行fn1 //我在马路边捡到一分钱,把他交个警察叔叔 我.on马路边捡到一分钱 = function() { 把他交个警察叔叔 }事件冒泡 : 当一个元素接收到事件的时原创 2017-08-27 20:31:59 · 250 阅读 · 0 评论 -
JS作用域和预解析机制
1. 作用域域:空间、范围、区域。。。 作用:读、写alert(a);var a=1;结果为undefinedalert(a);var a=1;直接报错(因为没有找到var) 浏览器:JS解析器。 1)找一些东西:var function 参数 ① 找到a=未定义(undefined), 所有的变量,在正式运行代码之前,都提前赋原创 2017-08-08 22:53:03 · 507 阅读 · 0 评论 -
this指向及this应用
1. 初识thisthis:指的是调用当前方法(函数)的那个对象 alert(this);//object window 代码1:注意,此时弹出window,但是如果fn1();变成oBtn.onclick=fn1;则弹出oBtn。 代码2:此时this指的是input;<input id="btn2" type="button" onclick="alert(this);" value="按原创 2017-08-19 14:14:56 · 248 阅读 · 0 评论 -
函数传参、重用、价格计算
1. 函数传参、参数类型1)什么叫函数传递参数,如下所述 参数=JS的数据类型 数字、字符串、布尔、函数、对象、未定义fn1(100);function fn1(a){ alert(a);//100}函数作为参数的时候fn3(function(){alert(1);});function fn3(fn){ fn();}弹出1fn3(function(a){alert(a);}原创 2017-08-19 14:56:06 · 250 阅读 · 0 评论 -
JS数据类型、类型转换
1. JS数据类型及相关操作ECMAScript:标准、核心 HTML标签类型:block,inline,inline-block,table… JS中的数据类型:数字number,字符串string,布尔值boolean,函数function,对象(obj/[]/{}/null) typeof判断数据类型2. 数据类型转换-NumberNumber():可以将类似于数字的字符串转换成数字va原创 2017-08-19 22:11:06 · 366 阅读 · 1 评论 -
函数返回值-return详解及应用
1. returnreturn 返回值 数字、字符串、布尔、函数、对象(元素/[]/{}/null).未定义fn1();//100function fn1(){ return 100;}alert(fn2());//弹出function (){ // alert(1); //};function fn2(){ return funct原创 2017-08-20 11:55:07 · 4364 阅读 · 1 评论 -
arguments实参集合与局部变量、参数关系
1. argumentsvar a=1;function fn2(a){ arguments[0]=3; alert(a);//3 var a=2; alert(arguments[0]);//2}fn2(a);alert(a);//1其中 参数a, arguments[0]=3;var a=2;指的是同一个东西,所以fn2里面的alert(a)为3,原创 2017-08-20 21:58:47 · 260 阅读 · 0 评论 -
Js中的this
1.全局的this全局作用域上的this等于window2. 一般函数的this以下是一般模式和严格模式的区别。注意:global object针对的是nodejs。3. 对位对象方法的函数的this(常用)左边:函数作为对象的属性,this指向对象o,console.log实际上指的o.prop,所以输出37。右边:在function inde原创 2017-08-06 15:33:33 · 230 阅读 · 0 评论 -
函数属性 arguments
1. 函数属性& arguments区分严格模式和一般格式的不同 2. apply/call方法(浏览器)在一般模式下 call第一个参数应该为对象,但是100不是对象。所以会被转成Number(100)这个对象 第二个类似 当为null/undefined时,会指向全局对象window 在严格模式下 当为null/undefined时,this的输出会使本身,即null/undefin原创 2017-08-06 16:54:29 · 303 阅读 · 0 评论 -
js中的闭包
1. 什么是闭包 闭包:弹出5 下面这种情况会被垃圾回收机制回收 2. 闭包的好处1)希望一个变量长期驻扎在内存中 2)避免全局变量的污染 alert(a),会弹出1,但是尽量不要全局变量,所以这种写法不好。 将a变成局部变量,但是因为垃圾回收机制,所以不累加,每次弹出来都是a。 要想实现既要把a变为局部变量,又要累加,可以使用闭包,如下所示。 alert(a)会报错。 3原创 2017-08-06 21:51:28 · 181 阅读 · 0 评论 -
事件委托
1. 概念事件委托:利用冒泡的原理,把事件加到父级上,触发执行效果,如下所示:window.onload=function(){ var oUl=document.getElementById('ul1'); var aLi=document.getElementsByTagName('li'); oUl.onclick=function(){ alert(123); }}<ul原创 2017-08-21 23:11:50 · 173 阅读 · 0 评论 -
对象引用
1. 比较赋值和引用赋值 引用(对象和函数都是引用的关系) 如下是因为a,b共用一个地址 如下b=[1,2,3,4],相当于给b新建了一个地址,a和b的地址不一样 2. 浅拷贝和深拷贝拷贝一个对象如下 从上面可以看出来obj的a值也被改变了,为了避免这个问题(浅拷贝)var obj={a:10};function copy(obj){ var newObj={}; for原创 2017-08-22 18:43:45 · 193 阅读 · 0 评论 -
字符串详解
1. 字符串获取类、封装检测数字的方法var str = '妙味课堂';alert( str.length );//6//charAt() 找到字符串中的某一个,不写默认第0个alert( str.charAt(1) );//味//charCodeAt() 找到相应的编码值alert( str.charCodeAt() ); // 22937alert( str.charCodeAt(1)原创 2017-08-26 23:33:10 · 434 阅读 · 0 评论 -
BOM相关方法和属性
1. BOM1)打开,关闭窗口open()方法,打开窗口open(页面的地址url,打开的方式) 方法 打开一个新的窗口(页面) 如果 url 为空,则默认打开一个空白页面 如果打开方式为空,默认为新窗口方式打开 返回值:返回新打开的窗口的 window 对象close()方法 关闭窗口window.close(); 1. ff : 无法关闭原创 2017-08-27 00:48:17 · 707 阅读 · 0 评论 -
JavaScript优化-DOM
JavaScript优化-DOM1. 什么是DOM用于操作XML和HTML文档的应用程序 DOM节点(ul,li)DOM树(DOM节点的整体)DOM API getElementByIdchildNodesappendChildinnerHTML2. Dom与JavaScript1)概念 - 浏览器会把dom与js独立实现 - 像两个独立的小岛 -原创 2017-08-23 16:41:33 · 209 阅读 · 0 评论 -
焦点事件
焦点 : 使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入。 我们可以通过一些方式给元素设置焦点 1).点击 2).tab 3).js不是所有元素都能够接收焦点的.能够响应用户操作的元素才有焦点onfocus : 当元素获取到焦点的时候触发 onblur : 当元素失去焦点的时候触发 var oText = document原创 2017-08-27 17:31:53 · 239 阅读 · 0 评论 -
函数声明和函数表达式
1. 函数声明和函数表达式函数声明的写法有一种,函数表达式有四种 2. 函数声明和函数表达式的区别函数声明会被前置 函数表达式也会被提前,但是提前的是var add(即undefined)所以函数声明可以在前面使用函数表达式不可以在前面使用再举一个栗子 <script type="text/javascript"> fn1();//不会报错,因为"原创 2017-08-01 17:27:06 · 468 阅读 · 0 评论