JavaScript
文章平均质量分 83
JavaScript基础到提高的学习之路
梦起孟心
这个作者很懒,什么都没留下…
展开
-
JavaScript基础学习——基础(一)
一、什么是JavaScriptJS是运行在客户端的一种解释型编程语言,它是一种弱类型的语言。作用是用来完成前后端交互、增加用户体验的一些逻辑实现。一个网页是三部分组成:结构(HTML/HTML5)、表现(CSS/CSS3)和形为(JavaScript),而前端开发的核心是:JavaScript。二、JavaScript的组成(1)ECMAScript(标准:ECMA-262):基础语言部分(基础、面向对象等)(2)DOM(标准:W3C):节点操作(3)BOM(无标准):浏览器操作三、JS的特点原创 2020-09-05 15:43:53 · 270 阅读 · 0 评论 -
JavaScript基础学习——基础(二)
一、函数函数就是将具有一定功能的一段JS代码的封装,可以在程序的多个地方被反复调用。(1)定义函数格式一:function 函数名([形参列表]){函数体;[return [<表达式>];]}格式二:var 变量名 = function([形参列表]){函数体;[return [<表达式>];]}格式三:(function([形参列表]){函数体;[return [<表达式>];]})([实参列表]);上面的函数叫立即执行函数表达式(I原创 2020-09-05 16:59:48 · 196 阅读 · 0 评论 -
JavaScript基础学习——基础(三)
一、global对象在JS中没有global对象,Web浏览器将Global作为window对象的一部分加以实现。其实也可以理解为全局变量,不过要和局部变量加以区别例如var x=123function fn1{ var y=234}此处的x为全局变量,在整段代码中都可以调用,y为局部变量,只在fn函数体内生效方法:a.encodeURIComponent():对unicode进行编码处理b.decodeURIComponent():对unicode编码进行解码处理c.eval(’原创 2020-09-05 19:43:35 · 161 阅读 · 0 评论 -
JavaScript基础学习——DOM操作
一、DOM是HTML和XML文档的编程接口,定义了访问和操作HTML和XML文档的标准方法。DOM以树型目录结构表达HTML和XML文档的,每一个节点就是一个DOM元素。二、DOM节点(一)节点层次节点层次分为父子节点和同胞节点两种。在节点树中,顶端节点被称为根(root),每个节点都有父节点、除了根(它没有父节点),一个节点可拥有任意数量的子节点,同胞节点是拥有相同父节点的节点,也叫兄弟节点(二)元素节点:标签1、属性节点:标签的属性2、文本节点:标签后的换行符3、文档节点:docume原创 2020-09-08 19:11:16 · 467 阅读 · 0 评论 -
JavaScript基础学习——JQuery和DOM
一、认识jQuery1、JQ是JS库,是对JavaScript的一个封装,也即是说JQ提供了大量的API,在开发时,以最少代码实现最多的功能。于2006年开源,现在已经发展成为集JS、CSS、DOM、Ajax于一体的强大的框架体系。宗旨:write less,do more!(写的少,做得多)2.学习文档中文文档:https://www.jquery123.com/API学习或查询:https://jquery.cuishifeng.cn/3.JQ功能(1)控制页面样式(2)访问和操作DOM原创 2020-09-10 16:29:26 · 358 阅读 · 0 评论 -
JavaScript基础学习——Bootstrap框架
一、认识Bootstrap(BS)1、官网:https://www.bootcss.com/ (https://v3.bootcss.com)2、BS是一个入门级UI框架,汇集了HTML、CSS(less)(布局)和JavaScript(插件)的一个框架。3、BS不是所有项目都适合使用BS实现布局,如果UI工程师没有按照BS的栅格系统理念去设计UI图,因为BS不适合做固定宽高的网页。BS一般用于开发没有UI图的项目,且为响应式的项目。4、BS3和BS4的区别:BS3有4种栅格,而BS4有5种栅原创 2020-09-17 20:50:48 · 2582 阅读 · 1 评论 -
JavaScript基础学习——事件以及Event对象(原生态)
目录1、事件2、EventTarget接收事件接口2.1、addEventListener():绑定事件监听函数,实现监听2.2、removeEventListener():移除事件监听2.3、dispatchEvent():自动触发用户自定义事件3、JS常用事件3.1、UI事件3.1.1、onload:页面所有DOM元素加载完成后自动触发 (掌握)3.1.2、onunload:当页面关闭或被切换到其它时触发,一般用于做一些善后处理3.1.3、onabort:忽略错误原创 2021-03-01 20:07:42 · 1592 阅读 · 0 评论 -
JavaScript基础学习——事件的冒泡、捕获、委托
1、事件流事件流指的是从页面中接收事件的顺序。分为冒泡流和捕获流。DOM二级事件规定事件流包括三个阶段:1、事件捕获阶段2、处于目标阶段3、事件冒泡阶段DOM在触发事件后,会经历事件捕获和事件冒泡两个最重要阶段。2、事件冒泡由最里层向最外层触发事件的过程,叫事件冒泡。例1:事件冒泡测试<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <原创 2021-03-01 20:17:43 · 146 阅读 · 0 评论 -
JavaScript基础学习——面向对象编程
一、全局作用域在函数外部定义的变量或函数,叫全局变量或全局函数。它们可以在当前程序的任意位置使用。在全局中定义变量可以用var,也可以直接添加window的属性。生命周期:它们会一直占用内存,只能在当前文件中使用。如果想在多个文件中使用变量,需要用到cookie或本地存储。例1 测试全局作用域<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta原创 2021-03-03 21:06:55 · 2498 阅读 · 2 评论 -
JavaScript基础学习——面向对象编程应用
一、对象常用属性(掌握)1、prototype:用来设置或获取(__proto__)对象的原型属性。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl原创 2021-03-03 21:25:58 · 144 阅读 · 2 评论 -
JavaScript基础学习——BOM操作
一、认识BOMJS是由ECMAScript(ECMA)、DOM(W3C)和BOM(无规范)。BOM(Browser Object Model:浏览器对象模型),提供了独立于内容而与浏览器进行交互的对象,用它来实现窗口与窗口之间的通信。BOM的核心对象是window。1、BOM组成window- frames history location navigator screen2、BOM与DOM的区别(1)DOM通过脚本动态地访问和更新文档内容、结构和样式的接口。(2)BOM通过脚本操作.原创 2021-03-14 21:49:00 · 327 阅读 · 0 评论 -
JavaScript基础学习——jQuery插件开发
一、什么是jQuery插件jQuery插件是对jQuery框架利用原型的一个扩展。插件通常是一个完备功能的封装,它是JQ功能的一个补充或扩展。注意:开发JQ插件,该插件是依赖于JQ,所以必须先引入JQ,再引入插件。二、jQuery的插件主要分3种类型:1、封装对象方法的插件(原型扩展)(主要的开发方式):这种是大多数采用的方法。操作原型,对jQuery框架侵入性较小。2、封装全局函数的插件(静态扩展):装方法或插件直接挂到类上。3、选择器插件:对JQ选择DOM的补充或扩展。三..原创 2021-03-14 22:00:29 · 414 阅读 · 0 评论 -
JavaScript基础学习——HTML5 API
一、媒体操作1、audio(音频)支持的音频格式:.mp3/.ogg/.webm标签常用属性:autoplay autoplay 自动播放(IE9以下不支持,IE可以支持自动播放,谷歌有些版本不支持自动播放)controls controls 控制条loop loop 循环preload preload 预加载(设置autoplay时,preload失效)src url ...原创 2021-03-15 16:51:30 · 319 阅读 · 0 评论 -
JavaScript基础学习——HTML5 Canvas
一、认识canvascanvas是H5新增的一个标签。它的作用是在浏览器上创建一个画布,用来绘画。二、使用场景(1)简单游戏的开发;(2)简单图像;(3)验证码;(4)绘制图表;(5)绘制地图;(6)制作马赛克效果;(7)模拟帧动画等。三、基本用法<canvas id="canvas"></canvas>var canvas = document.querySelector('#canvas');// 渲染上下文var ctx = canvas.原创 2021-03-15 17:01:56 · 211 阅读 · 0 评论 -
JavaScript基础学习——CSS预处理Less
一、CSS预处理目前CSS预处理语言主要有:Less,SASS,Stylus等。浏览器不能编译.less/.scss/.sass/.styl等文件,在html文件引入前面这些样式文件,必须先编译成.css文件。二、在VSCode中编译less1、安装插件:按Ctrl + Shift + x,打开扩展面板,安装Easy LESS。2、修改设置文件(settings.json),在settings.json中添加如下代码: "[less]":{ "editor.sugge...原创 2021-03-15 19:29:40 · 341 阅读 · 0 评论 -
JavaScript基础学习——ES6基础指令
一、认识ES6ES6(ECMAScript 6/ECMAScript 2015)是2015年6月发布的。ES6是对ES5的一个扩展(就是在ES5的基础上添加了一些内容),最典型的内容:Class(类)、Promise(异步)、Symbol(数据类型)等。学习参考网站:https://es6.ruanyifeng.com/。二、ECMAScript与JavaScript的区别前者是后者的规格,后者是前者的一种实现。JavaScript = ECMAScript + DOM + BOM三、l原创 2021-03-16 21:51:30 · 163 阅读 · 0 评论 -
JavaScript基础学习——ES6基础-数组、函数和对象扩展
一、数组的扩展1、扩展运算符(...),它可以把一个数组转化为用逗号分隔的参数序列。var arr=[1,2,3,3,4]console.log(...arr);//1,2,3,4,5console.log(2,...[4,6,8],10);//2,4,6,8,102、替代数组的 apply 方法var arr=[1,3,2,4,2,4,5,3,4]console.log(Math.max(...arr));//5// 等同于console.log(Math.max(1,原创 2021-03-16 22:01:40 · 159 阅读 · 0 评论 -
JavaScript基础学习——ES6基础-类和模块
一、类1、认识类(class)类是对象的一个抽象,是对象的一个模板。对象是类的实例化。 定义: class 类名 { contructor(paramsList){ // 创建构造器 this.x = x ... } // handle }注意:(1)类名一般首字母大写,用来跟普通函数进行区别。(2)类不能直接调用,必须进行实例化处理。(3)类的类型是function。...原创 2021-03-16 22:12:25 · 266 阅读 · 0 评论 -
JavaScript基础学习——ES6基础-Promise对象
一、认识Promise 用于处理异步操作,成功了就执行成功的操作,失败了就捕获错误或者停止后续操作。二、基本语法 new Promise(function(resolve,reject){ if(success){ resolve(); // 成功将调用resolve()方法 }else{ reject(); // 成功将调用reject()方法 } })有三种状态:pending:初始状态,也称为未定状态,就是初始化Promise时,...原创 2021-03-16 22:18:21 · 244 阅读 · 0 评论 -
js数组方法总结
数组方法目录数组方法1、push() 尾插(1)只插入一个元素<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">const</span> <span style="color:#0000ff">arr</span> <span style="color:#981a1a"&原创 2021-09-06 13:41:36 · 607 阅读 · 0 评论 -
js字符串方法
目录1、charAt():返回指定位置的字符2、charCodeAt():返回指定位置字符的Unicode编码3、concat():连接字符串4、 indexOf(): 检索字符串5、match():匹配值或正则6、replace():替换匹配的字符串7、search():检索与字符串匹配的子串8、slice():提取字符串片段9、split():把字符分割成数组10、toUpperCase(),toLocaleUpperCase():将字符串转换成大写11、原创 2021-09-09 09:13:39 · 593 阅读 · 0 评论