![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 81
仲崇峰
这个作者很懒,什么都没留下…
展开
-
JavaScript-快速入门(一)
原文出处 :https://www.liaoxuefeng.com/快速入门:JavaScript代码可以直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到<head>中:<html><head> <script> alert('Hello, world'); </script></head&g...转载 2018-03-22 23:23:13 · 172 阅读 · 0 评论 -
JavaScript-面向对象编程
原文出处 :https://www.liaoxuefeng.com/面向对象编程JavaScript的所有数据都可以看成对象,那是不是我们已经在使用面向对象编程了呢?当然不是。如果我们只使用Number、Array、string以及基本的{...}定义的对象,还无法发挥出面向对象编程的威力。JavaScript的面向对象编程和大多数其他语言如Java、C#的面向对象编程都不太一样。如果你熟悉Jav...转载 2018-04-03 21:51:09 · 170 阅读 · 0 评论 -
JavaScript-浏览器(一)浏览器对象
原文出处 :https://www.liaoxuefeng.com/浏览器由于JavaScript的出现就是为了能在浏览器中运行,所以,浏览器自然是JavaScript开发者必须要关注的。目前主流的浏览器分这么几种:IE 6~11:国内用得最多的IE浏览器,历来对W3C标准支持差。从IE10开始支持ES6标准;Chrome:Google出品的基于Webkit内核浏览器,内置了非常强悍的JavaSc...转载 2018-04-03 22:16:16 · 916 阅读 · 0 评论 -
JavaScript-浏览器(二)操作DOM
原文出处 :https://www.liaoxuefeng.com/操作DOM由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作:更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容;遍历:遍历该DOM节点下的子节点,以便进行进一步操作;添加:...转载 2018-04-03 23:19:21 · 501 阅读 · 0 评论 -
JavaScript-浏览器(三)操作表单
原文出处 :https://www.liaoxuefeng.com/操作表单用JavaScript操作表单和操作DOM是类似的,因为表单本身也是DOM树。不过表单的输入框、下拉框等可以接收用户输入,所以用JavaScript来操作表单,可以获得用户输入的内容,或者对一个输入框设置新的内容。HTML表单的输入控件主要有以下几种:文本框,对应的<input type="text">,用于输...转载 2018-04-03 23:32:34 · 274 阅读 · 0 评论 -
JavaScript-浏览器(四)操作文件
原文出处 :https://www.liaoxuefeng.com/操作文件在HTML表单中,可以上传文件的唯一控件就是<input type="file">。注意:当一个表单包含<input type="file">时,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才能正确编码并以multipart/form-...转载 2018-04-03 23:42:20 · 881 阅读 · 0 评论 -
JavaScript-浏览器(五)AJAX
原文出处 :https://www.liaoxuefeng.com/AJAXAJAX不是JavaScript的规范,它只是一个哥们“发明”的缩写:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求。如果仔细观察一个Form的提交,你就会发现,一旦用户点击“Submit”按钮,表单开始提交,浏览器就会刷新页面,然后在新页面里告诉你操作是成功...转载 2018-04-04 00:01:39 · 173 阅读 · 0 评论 -
JavaScript-浏览器(六)Promise
原文出处 :https://www.liaoxuefeng.com/Promise在JavaScript的世界中,所有代码都是单线程执行的。由于这个“缺陷”,导致JavaScript的所有网络操作,浏览器事件,都必须是异步执行。异步执行可以用回调函数实现:function callback() { console.log('Done');}console.log('before set...转载 2018-04-04 00:22:34 · 295 阅读 · 0 评论 -
JavaScript-浏览器(七)Canvas
原文出处 :https://www.liaoxuefeng.com/CanvasCanvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表、动画等。没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互。有了Canvas,我们就再也不需要Flash了,直接使用JavaScript完成绘制。一个Canvas定...转载 2018-04-04 00:31:00 · 706 阅读 · 0 评论 -
JavaScript-jQuery
原文出处 :https://www.liaoxuefeng.com/jQuery你可能听说过jQuery,它名字起得很土,但却是JavaScript世界中使用最广泛的一个库。江湖传言,全世界大约有80~90%的网站直接或间接地使用了jQuery。鉴于它如此流行,又如此好用,所以每一个入门JavaScript的前端工程师都应该了解和学习它。jQuery这么流行,肯定是因为它解决了一些很重要的问题。实...转载 2018-04-04 13:52:40 · 164 阅读 · 0 评论 -
JavaScript-jQuery(一)选择器
原文出处 :https://www.liaoxuefeng.com/选择器选择器是jQuery的核心。一个选择器写出来类似$('#dom-id')。为什么jQuery要发明选择器?回顾一下DOM操作中我们经常使用的代码:// 按ID查找:var a = document.getElementById('dom-id');// 按tag查找:var divs = document.getEl...转载 2018-04-04 21:31:31 · 363 阅读 · 0 评论 -
JavaScript-jQuery(二)操作DOM
原文出处 :https://www.liaoxuefeng.com/操作DOMjQuery的选择器很强大,用起来又简单又灵活,但是搞了这么久,我拿到了jQuery对象,到底要干什么?答案当然是操作对应的DOM节点啦!回顾一下修改DOM的CSS、文本、设置HTML有多么麻烦,而且有的浏览器只有innerHTML,有的浏览器支持innerText,有了jQuery对象,不需要考虑浏览器差异了,全部统一...转载 2018-04-04 22:31:22 · 334 阅读 · 0 评论 -
JavaScript-jQuery(三)事件
原文出处 :https://www.liaoxuefeng.com/事件因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码。浏览器在接收到用户的鼠标或键盘输入后,会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数,该函数就会自动调用。由于不...转载 2018-04-06 21:17:18 · 287 阅读 · 0 评论 -
JavaScript-jQuery(四)动画
原文出处 :https://www.liaoxuefeng.com/动画用JavaScript实现动画,原理非常简单:我们只需要以固定的时间间隔(例如,0.1秒),每次把DOM元素的CSS样式修改一点(例如,高宽各增加10%),看起来就像动画了。但是要用JavaScript手动实现动画效果,需要编写非常复杂的代码。如果想要把动画效果用函数封装起来便于复用,那考虑的事情就更多了。使用jQuery实现...转载 2018-04-06 22:05:20 · 226 阅读 · 0 评论 -
JavaScript-jQuery(五)AJAX
原文出处 :https://www.liaoxuefeng.com/AJAX用JavaScript写AJAX前面已经介绍过了,主要问题就是不同浏览器需要写不同代码,并且状态和错误处理写起来很麻烦。用jQuery的相关对象来处理AJAX,不但不需要考虑浏览器问题,代码也能大大简化。ajaxjQuery在全局对象jQuery(也就是$)绑定了ajax()函数,可以处理AJAX请求。ajax(url, ...转载 2018-04-06 22:19:50 · 156 阅读 · 0 评论 -
JavaScript-jQuery(六)扩展
原文出处 :https://www.liaoxuefeng.com/扩展当我们使用jQuery对象的方法时,由于jQuery对象可以操作一组DOM,而且支持链式操作,所以用起来非常方便。但是jQuery内置的方法永远不可能满足所有的需求。比如,我们想要高亮显示某些DOM元素,用jQuery可以这么实现:$('span.hl').css('backgroundColor', '#fffceb').c...转载 2018-04-06 23:09:28 · 178 阅读 · 0 评论 -
JavaScript-错误处理
错误处理在执行JavaScript代码的时候,有些情况下会发生错误。错误分两种,一种是程序写的逻辑不对,导致代码执行异常。例如:var s = null;var len = s.length; // TypeError:null变量没有length属性对于这种错误,要修复程序。一种是执行过程中,程序可能遇到无法预测的异常情况而报错,例如,网络连接中断,读取不存在的文件,没有操作权限等。对于这种...转载 2018-04-06 23:36:46 · 337 阅读 · 0 评论 -
JavaScript-标准对象
原文出处 :https://www.liaoxuefeng.com/标准对象在JavaScript的世界里,一切都是对象。但是某些对象还是和其他对象不太一样。为了区分对象的类型,我们用typeof操作符获取对象的类型,它总是返回一个字符串:typeof 123; // 'number'typeof NaN; // 'number'typeof 'str'; // 'string'typeof...转载 2018-04-03 01:39:01 · 491 阅读 · 0 评论 -
JavaScript-函数(七)generator
原文出处 :https://www.liaoxuefeng.com/generatorgenerator(生成器)是ES6标准引入的新的数据类型。一个generator看上去像一个函数,但可以返回多次。ES6定义generator标准的哥们借鉴了Python的generator的概念和语法,如果你对Python的generator很熟悉,那么ES6的generator就是小菜一碟了。如果你对Pyt...转载 2018-04-03 00:05:55 · 265 阅读 · 0 评论 -
JavaScript-快速入门(二)基本语法
原文出处 :https://www.liaoxuefeng.com/语法JavaScript的语法和Java语言类似,每个语句以;结束,语句块用{...}。但是,JavaScript并不强制要求在每个语句的结尾加;,浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;。 让JavaScript引擎自动加分号在某些情况下会改变程序的语义,导致运行结果与期望不一致。在本教程中,我...转载 2018-03-22 23:24:55 · 154 阅读 · 0 评论 -
JavaScript-快速入门(三)数据类型和变量
原文出处 :https://www.liaoxuefeng.com/数据类型计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值。但是,计算机能处理的远不止数值,还可以处理文本、图形、音频、视频、网页等各种各样的数据,不同的数据,需要定义不同的数据类型。在JavaScript中定义了以下几种数据类型:NumberJavaScript不区分整数和浮点数,统一用Numbe...转载 2018-03-22 23:27:56 · 136 阅读 · 0 评论 -
JavaScript-快速入门(四)字符串
原文出处 :https://www.liaoxuefeng.com/JavaScript的字符串就是用''或""括起来的字符表示。如果'本身也是一个字符,那就可以用""括起来,比如"I'm OK"包含的字符是I,',m,空格,O,K这6个字符。如果字符串内部既包含'又包含"怎么办?可以用转义字符\来标识,比如:'I\'m \"OK\"!';表示的字符串内容是:I'm "OK"!转义字符\可以转义.转载 2018-03-22 23:31:24 · 130 阅读 · 0 评论 -
JavaScript-快速入门(五)数组
原文出处 :https://www.liaoxuefeng.com/JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素。要取得Array的长度,直接访问length属性:var arr = [1, 2, 3.14, 'Hello', null, true];arr.length; // 6请注意,直接给Array的length赋一个新的值会导致Array大小的变化:...转载 2018-03-22 23:33:14 · 144 阅读 · 0 评论 -
JavaScript-快速入门(六)对象
原文出处 :https://www.liaoxuefeng.com/JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成。JavaScript的对象用于描述现实世界中的某个对象。例如,为了描述“小明”这个淘气的小朋友,我们可以用若干键值对来描述他:var xiaoming = { name: '小明', birth: 1990, school: 'No.1...转载 2018-03-22 23:47:52 · 129 阅读 · 0 评论 -
JavaScript-快速入门(七)条件判断
原文出处 :https://www.liaoxuefeng.com/JavaScript使用if () { ... } else { ... }来进行条件判断。例如,根据年龄显示不同内容,可以用if语句实现如下:var age = 20;if (age >= 18) { // 如果age >= 18为true,则执行if语句块 alert('adult');} else {...转载 2018-03-22 23:52:14 · 130 阅读 · 0 评论 -
JavaScript-快速入门(八)循环
原文出处 :https://www.liaoxuefeng.com/循环要计算1+2+3,我们可以直接写表达式:1 + 2 + 3; // 6要计算1+2+3+...+10,勉强也能写出来。但是,要计算1+2+3+...+10000,直接写表达式就不可能了。为了让计算机能计算成千上万次的重复运算,我们就需要循环语句。JavaScript的循环有两种,一种是for循环,通过初始条件、结束条件和递增...转载 2018-03-22 23:59:29 · 181 阅读 · 0 评论 -
JavaScript-快速入门(九)Map和Set
原文出处 :https://www.liaoxuefeng.com/JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构,即一组键值对。但是JavaScript的对象有个小问题,就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。为了解决这个问题,最新的ES6规范引入了新的数据类型Map。要测试你的浏览器是否支持ES6规范,...转载 2018-03-23 00:08:26 · 125 阅读 · 0 评论 -
JavaScript-快速入门(十)iterable
原文出处 :https://www.liaoxuefeng.com/遍历Array可以采用下标循环,遍历Map和Set就无法使用下标。为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型。具有iterable类型的集合可以通过新的for ... of循环来遍历。for ... of循环是ES6引入的新的语法,请测试你的浏览器是否支持:用f...转载 2018-03-23 00:14:59 · 145 阅读 · 0 评论 -
JavaScript-函数
原文出处 :https://www.liaoxuefeng.com/我们知道圆的面积计算公式为:S = πr2当我们知道半径r的值时,就可以根据公式计算出面积。假设我们需要计算3个不同大小的圆的面积:var r1 = 12.34;var r2 = 9.08;var r3 = 73.1;var s1 = 3.14 * r1 * r1;var s2 = 3.14 * r2 * r2;var ...转载 2018-03-23 21:03:36 · 129 阅读 · 0 评论 -
JavaScript-函数(一)函数定义和调用
原文出处 :https://www.liaoxuefeng.com/定义函数在JavaScript中,定义函数的方式如下:function abs(x) { if (x >= 0) { return x; } else { return -x; }}上述abs()函数的定义如下:function指出这是一个函数定义;abs是函数的名...转载 2018-03-23 21:43:09 · 236 阅读 · 0 评论 -
JavaScript-函数(二)变量作用域与解析赋值
原文出处 :https://www.liaoxuefeng.com/在JavaScript中,用var申明的变量实际上是有作用域的。如果一个变量在函数体内部申明,则该变量的作用域为整个函数体,在函数体外不可引用该变量:'use strict';function foo() { var x = 1; x = x + 1;}x = x + 2; // ReferenceErr...转载 2018-03-23 22:29:24 · 243 阅读 · 0 评论 -
JavaScript-函数(三)方法
原文出处 :https://www.liaoxuefeng.com/在一个对象中绑定函数,称为这个对象的方法。在JavaScript中,对象的定义是这样的:var xiaoming = { name: '小明', birth: 1990};但是,如果我们给xiaoming绑定一个函数,就可以做更多的事情。比如,写个age()方法,返回xiaoming的年龄:var xiaomi...转载 2018-03-23 22:49:29 · 185 阅读 · 0 评论 -
JavaScript-函数(四)高阶函数
原文出处 :https://www.liaoxuefeng.com/高阶函数英文叫Higher-order function。那么什么是高阶函数?JavaScript的函数其实都指向某个变量。既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数。一个最简单的高阶函数:function add(x, y, f) { return f(...转载 2018-03-24 00:00:05 · 212 阅读 · 0 评论 -
JavaScript-函数(五)闭包
函数作为返回值高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回。我们来实现一个对Array的求和。通常情况下,求和的函数是这样定义的:function sum(arr) { return arr.reduce(function (x, y) { return x + y; });}sum([1, 2, 3, 4, 5]); // 15但是,如果...转载 2018-04-02 13:15:44 · 178 阅读 · 0 评论 -
JavaScript-函数(六)箭头函数
原文出处 :https://www.liaoxuefeng.com/箭头函数ES6标准新增了一种新的函数:Arrow Function(箭头函数)。为什么叫Arrow Function?因为它的定义用的就是一个箭头:x => x * x上面的箭头函数相当于:function (x) { return x * x;}在继续学习箭头函数之前,请测试你的浏览器是否支持ES6的Arro...转载 2018-04-02 13:53:50 · 482 阅读 · 2 评论 -
JavaScript-underscore
underscore前面我们已经讲过了,JavaScript是函数式编程语言,支持高阶函数和闭包。函数式编程非常强大,可以写出非常简洁的代码。例如Array的map()和filter()方法:'use strict';var a1 = [1, 4, 9, 16];var a2 = a1.map(Math.sqrt); // [1, 2, 3, 4]var a3 = a2.filter((x)...转载 2018-04-07 00:12:03 · 833 阅读 · 0 评论