JavaScript
文章平均质量分 95
JavaScript
yingjieweb
踏踏实实学点前端
展开
-
JavaScript 的诞生及浏览器革命
1、JavaScript 的历史以铜为镜,可以正衣冠,以史为镜,可以知兴替,以人为镜,可以明得失,王朝兴替、个人得失都在历史当中。要搞好一门学问,就要先了解它的历史,下面我们来看一下 JavaScript 的历史。1994 年,网景公司(Netscape)发布了 Navigator 浏览器 0.9 版。这是历史上第一个比较成熟的网络浏览器,轰动一时。但是,这个版本的浏览器只能用来浏览,不具...原创 2020-03-04 22:01:41 · 294 阅读 · 0 评论 -
JavaScript 原型与原型链 ★
目录1、原型对象2、__proto__3、__proto__ 和 prototypeJavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链 (prototype chain)...原创 2019-12-19 16:58:14 · 133 阅读 · 0 评论 -
JavaScript 的 7 种数据类型(4基 2空 1对象)
JavaScript是弱类型语言,对于数据类型的规范比较松散。具体表现有:(1)分类简单,且不明确细分、(2)声明变量时,不用指定数据类型、(3)使用不严格,可根据需要自动转换数据类型、(4)数据类型检查比较简单,也比较混乱。原创 2019-11-03 11:02:57 · 8619 阅读 · 5 评论 -
JavaScript 数据类型之间的转换
目录1、转换为字符串2、转换数字模式3、设置数字显示的小数位数4、转换为数字5、转换为布尔值6、转换为对象7、把对象转换为值8、强制转换1、转换为字符串其它类型值转换为字符串是编程中常见行为。当值与空字符串相加时,JavaScript 会自动把值转换为字符串。1.1 使用加号运算符(1)把数字转换为字符串。var a = 123456;a =...原创 2019-11-04 19:50:53 · 457 阅读 · 0 评论 -
JavaScript 检测数据类型的方法
JavaScript 是弱类型语言,对类型没有严格限制,但是在程序中经常需要对类型进行检测和转换,下面介绍一些类型转换和检测的技巧。1、使用 typeof 检测类型typeof 运算符专门用来检测值的类型,特别对于原始值有效,而对于对象类型的数据,如数组、对象等,返回的值都是字符串 "object"。一下代码显示使用 typeof 检测数据类型的方法。alert(typeof 1);...原创 2019-11-04 15:52:43 · 250 阅读 · 0 评论 -
JavaScript 对象 Object 数据类型
对象是JavaScript的核心概念之一,也是最常用的数据类型,即引用型数据。对象可以包含多个属性。属性以名值对的形式存在,名称是字符串,值可以是任意类型的数据。字符串到值的映射,构成一个无序集合。除了字符串、数字、true、false、null和undefined之外,JavaScript中的值都是对象。创建对象有 3 中方法,具体介绍如下。1、使用构造函数创建对象使用 new 运算符调...原创 2019-11-12 09:22:00 · 2124 阅读 · 0 评论 -
JavaScript 对象 Object 属性的增删改查
属性包括名和值。属性名可以是包含空字符串在内的任意字符串,但对象中不能存在两个同名的属性。值可以是任意JavaScript 值。除了名和值之外,每个属性还有一些相关的值,称为属性特性:可写(writable attribute):表明是否可以设置该属性的值。可枚举(enumerable attribute):表明是否可以通过for/in循环返回该属性。可配置(configurable a...原创 2019-11-12 19:41:35 · 1526 阅读 · 0 评论 -
JavaScript 数组 Array 的基本使用
目录1、定义数组2、存取数组元素3、数组长度4、对象和数组5、定义多维数组数组(Array)是一种有序数据集合,数组中每个值被称为数组的一个元素(Element),每个元素的编码被称为数望下标(Index)。JavaScript 是弱类型语言,数组结构表现和语法约定都比较松散,每个元素的值可以为任意类型,同一数组的不同元素可以保存不同类型数据,数组长度不是固定的,可以任意地...原创 2019-11-06 10:12:11 · 511 阅读 · 0 评论 -
JavaScript 操作 Array 数组对象
目录1、检索数组2、操作数组3、操作子数组4、数组排序5、使用排序函数6、数组和字符串的转换1、检索数组检索数组一般可使用for/in循环实现,也可以使用 for 循环,结合数组的 length 属性和数组的下标来实现。检索数组中包含字符串类型的元素可以这样设计var a = [1,2,true,"a","b"]; //定义数组for(var i ...原创 2019-11-06 16:34:21 · 209 阅读 · 0 评论 -
JavaScript 数组元素 定位+迭代+汇总 ★
目录1、数组元素定位2、数组迭代3、汇总1、数组元素定位indexOf() 和 lastlndexOf() 它们用来检索数组元素,返回指定元素的索引位置。1.1 indexOf() 方法:返回某个元素值在数组中的第一个匹配项的索引,如果没有找到指定的值,则返回 -1。用法如下:array.indexOf(searchElement[,fromIndex]);//参...原创 2019-11-06 20:28:16 · 748 阅读 · 0 评论 -
JavaScript 扩展数组方法 - prototype
Array 内置了很多方法,但是它无法满足所有用户的需求,这时可以为 Array 对象扩展方法,提高代码重用率。扩展数组的方法一般通过为 Array 对象定义原型方法来实现,这些原型方法能够被所有数组对象继承。Array.prototype.hello = function(){ //定义Array对象的原型方法 alert("Hello world");}//上面3行代...原创 2019-11-07 15:18:21 · 722 阅读 · 0 评论 -
JavaScript 函数 Function 的基本使用
在 JavaScript 中定义函数的方法有 3 种:使用 function 语句、使用 Function() 构造函数和定义函数直接量。不管使用哪种方法定义函数,它们都是 Function 类型的实例,并将继承 Function 原型对象的方法和属性。1、声明函数在 Javascript 中,可以使用 function 语句来声明函数。具体用法如下:function funName...原创 2019-11-07 16:22:26 · 6959 阅读 · 0 评论 -
JavaScript this的用法
在 JavaScript 中,this 表示当前调用对象,用在函数体内。1、this 用法this 是函数体内自带的一个对象指针,它始终指向调用对象。当函数被调用时,使用 this 可以访问调用对象。this 关键字的使用范围局限于函数体内或者调用范围内。具体用法如下:this[.属性]如果 this 未包含属性,则传递的是当前对象。this 用法比较灵活,它可以存在于任何位...原创 2019-11-08 17:01:57 · 296 阅读 · 0 评论 -
JavaScript 应用 this
(1)只使用函数名调用方法时,函数中定义的 this 指向 window 对象function fun(){ this.x = function(x){ //使用 this 关键字为函数定义一个方法 x() return x; }}fun(); //函数调用alert(fun.x(4)); //使用函数名 fun 调用方法 x(),则返...原创 2019-11-11 18:58:32 · 113 阅读 · 0 评论 -
JavaScript 几种元素选择器
目录1、getElementById() 方法2、getElementByTagName() 方法3、getElementsByClassName()方法4、querySelector() 和 querySelectorAll() 方法1、getElementById() 方法使用 getElementById() 方法可以准确获取文档中指定元素。以下脚本能够获取对<...原创 2019-11-23 14:44:33 · 3239 阅读 · 0 评论 -
一只 div 对象的完整原型链
JavaScript 中的继承是基于原型链机制来实现的,只要是对象就会有原型( 对象原型的 __proto__ 为 null ),那我们通过元素选择器获取的 div 对象,它也是一个对象,它有原型吗?搞一下不就知道了:let div = document.getElementById('div');console.log(div); //打印一个div标签,不要相信,它在骗傻子呢c...原创 2020-03-16 21:31:32 · 611 阅读 · 0 评论 -
JavaScript dom 节点的增删改查
目录1、DOM 节点简介2、创建一个dom节点(增)3、克隆一个dom节点(增)4、删除一个dom节点(删)5、修改一个dom节点(改)1、DOM 节点简介DOM 1 级定义了 Node 接口,该接口为 DOM 的所有节点类型定义了原始类型。JavaScript 实现了这个接口,定义所有节点类型必须继承 Node 类型。作为 Node 的子类或孙类,都拥有 Node 的...原创 2020-03-17 21:57:53 · 418 阅读 · 0 评论 -
JavaScript dom 的跨线程操作
目录1、浏览器的功能划分2、跨线程 dom 操作3、插入新标签的完整过程1、浏览器的功能划分浏览器有两个重要功能,一个是渲染引擎,专门用来渲染 HTML 和 CSS 的,另一个是 JS 引擎,专门用来解析执行 JavaScript 的。上述的两个引擎是在不同的线程中的,这两个引擎是互不相干的,如果需要通过 JavaScript 来操作 dom,就会涉及到两个线程之间的通信,这就...原创 2020-03-18 12:52:01 · 188 阅读 · 0 评论 -
async vs defer 的区别
两者都会并行下载,不会影响页面的解析。defer 会按照顺序在 DOMContentLoaded 前按照页面出现顺序依次执行。async 则是下载完立即执行。原创 2020-08-23 09:25:39 · 518 阅读 · 0 评论 -
JavaScript DOM 事件委托 ★
目录1、事件委托的比喻2、事件委托的背景3、事件委托的相关概念3.1、事件冒泡3.2、事件模型3.3、阻止事件冒泡3.4、阻止默认行为4、事件委托的优点4.1、减少内存消耗4.2、动态绑定事件5、jQuery 中的事件委托6、事件委托的基本实现7、事件委托的局限性1、事件委托的比喻在网上看到一个例子,比如一个宿舍的同学同时快递到了,一种方...原创 2020-04-01 16:47:22 · 1064 阅读 · 0 评论 -
JavaScript 正则表达式基本语法
正则表达式(Regular Expression)是一个描述字符模式的对象,字符模式就是由一系列字符构成的特殊格式的字符串,它由普通字符(A~Z、a~z、0~9)和元字符组成。正则表达式的语法主要就是对各种字符的功能进行描述。1、字符描述根据正则表达式的语法规则,大部分字符仅能够描述自身,这些字符被称为普通字符,如所有的字母、数字等。元字符就是拥有特殊意义的字符,一般需要加反斜杠进行表...原创 2019-11-30 19:44:59 · 211 阅读 · 0 评论 -
JavaScript 正则表达式操作基础
正则表达式是对字符串执行模式匹配的强大工具,在Web应用中占据重要位置。1、定义正则表达式定义正则表达式的方法包括:构造法、直接量1.1、构造正则表达式RegExp 构造函数可以定义正则表达式对象,用法如下:new RegExp(pattern,attributes)//参数pattern是一个字符串,指定了正则表达式的模式或者其他正则表达式//参数attributes是...原创 2019-11-30 15:41:50 · 140 阅读 · 0 评论 -
JavaScript 添加事件绑定的三种方法
1、使用html进行事件绑定1.1、直接在 html 标签上写入事件类型和事件处理方法。<button onclick = "alert('hello world')">click me!</button>1.2、在 html 标签上写入事件类型,在 js 上写事件处理方法。html部分<button onclick = "sayHello()">click me!</button>js部分function sayHello(原创 2020-08-13 09:08:03 · 1120 阅读 · 0 评论 -
JavaScript BOM操作 使用location对象 → 查询字符串参数/位置操作
localtion 对象存储当前页面与位置(URL)相关信息,表示当前显示文档的 Web 地址。使用 window 对象的 location 属性可以访问。事实上,localtion对象是很特别的一个对象,因为它既是 window 对象的属性,也是 document 对象的属性;换句话说,window.location 和 document.localtion引用的是同一个对象。但是wi...原创 2019-11-19 14:40:54 · 368 阅读 · 0 评论 -
JavaScript BOM操作 使用window对象 → 使用定时器:setInterval() / setTimeout() 方法
window 对象包含 4 个定时器专用方法,使用它们可以实现代码定时运行,避免连续执行,这样一来,就可以设计动画。window对象定时器方法 方法 说明 setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式 setTimeout() 在指定的毫秒数后调用函数或计算表达式 clearInterval() 取消由setInterval...原创 2019-11-18 20:21:08 · 614 阅读 · 0 评论 -
JavaScript BOM操作 使用window对象 → 打开和关闭窗口:open() / close() 方法
1、open() 方法使用 window 对象的 open() 方法,可以打开一个新窗口,该方法的返回值为新建的 window 对象,使用这个 window 对象可以引用新建的窗口。用法如下:window.open(URL,name,features,replace);//参数说明如下://URL:可选字符串,声明在新窗口中显示文档的URL。如果忽略,或者为空,则新窗口就不会显示任何...原创 2019-11-18 10:55:27 · 2032 阅读 · 0 评论 -
JavaScript BOM操作 使用window对象 → 全局作用域
作用域是指变量的作用范围,在 JavaScript 中有两种作用域,一种是全局作用域,一种是函数作用域。先看个例子:function first(){ var a = 1; };function second(){ console.log(a); };first(); //调用函数 firstsecond(); //调用函数 second,报错:a is not define...原创 2019-11-15 17:03:30 · 559 阅读 · 0 评论 -
JavaScript 结构跳转 label/break/continue
结构跳转语句主要包括:label标签、break、continue,它们常与条件语句、循环语句配合使用,来控制条件和循环流程,以提升代码运行效率。1、标签语句 label在 JavaScript 种,任何语句都可以添加一个标签,以便在复杂结构种设置程序跳转路径。定义标签语句的语法格式如下:label:statementslabel 为任意合法的标识符,但不能使用保留字。由于标签名...原创 2019-11-05 16:39:56 · 412 阅读 · 0 评论 -
JavaScript 循环结构 for/in
程序开发中,存在大量的重复性操作或计算,这些动作必须依靠循环结构来完成。JavaScript 定义了 while、for 和 do/while 3 种类型循环语句。这几种循环都很常见了,这里说一种 for 循环的特殊形式 for/in。for-in 语句是一种精准的迭代语句,可以用来枚举对象的属性。以下是 for-in 语句的语法:for ([var] variable in <o...原创 2019-11-05 16:01:53 · 299 阅读 · 0 评论 -
JavaScript 严格模式 "use strict"
目录1、启用严格模式2、严格模式的执行限制ECMAscript5新增严格运行模式,顾名思义,严格模式就是使 Javascript 在更严格的条件下运行。包括 IE10 在内的主流浏览器都已经支持它,许多大项目已经开始全面拥抱它。定义严格模式的目的:消除 Javascript 语法的一些不合理、不严谨之处,减少一些怪异行为。消除代码运行的一些不安全之处,保证代码运行的安全。提...原创 2019-11-03 18:49:54 · 363 阅读 · 0 评论 -
JavaScript 使用变量
变量与值是两个不同的概念:变量相当于容器,值相当于内容。为容器贴个标签,就是变量名。程序根据标签找到内容所在的位置,然后可以对值进行操作。1、声明变量在 JavaScript 中,声明变量使用 var 语句:var a; //声明一个变量var a,b,c;//声明多个变量时,应使用逗号运算符分隔变量名可以在声明中为变量进行赋值。未赋值的变量,则初始化值为 undefin...原创 2019-11-02 17:26:30 · 383 阅读 · 0 评论 -
JavaScript 的错误处理
错误处理的核心首先要知道代码里会发生什么错误。由于 JavaScript 是松散类型的,不会验证函数的参数,因此错误只会在代码运行期间出现,一般来说,需要关注三种错误:类型转换错误,数据类型错误,通信错误。任何错误处理策略中终点就是确定错误是否致命。对于非致命错误可以根据下列条件确定:不影响用户的主要任务、只影响页面的一部分、可以恢复、重复相同操作可以消除错误。本质上非致命错误可以不关注,没有...原创 2019-11-02 16:17:03 · 315 阅读 · 0 评论 -
在 HTML 中使用 JavaScript
1、网页中嵌入JavaScript脚本JavaScript 被定义为嵌入式 Web 脚本语言。在 HTML 页面中嵌入 JavaScript 脚本,需要用 <srcipt> 标签。用户可以在 <script> 标签总直接编写 JavaScript 代码,或者单独编写 JavaScript 文件,让后通过 <script> 标签导入。1、编写脚本使用 ...原创 2019-11-01 11:04:11 · 974 阅读 · 0 评论 -
JavaScript 相关概念
1、JavaScript 简要概述JavaScript 的原名为 LiveScript,它是1995年 Netscape 公司发布 Netscape Navigator 2 浏览器时开发的一种脚本语言。当年为了搭上媒体热炒 Java 的顺风车,临时将LiveScript 改名为JavaScript,这也就是最初的 JavaScript 1.0。1997年,欧洲计算机制造商协会(ECMA...原创 2019-11-01 10:35:02 · 351 阅读 · 0 评论