JavaScript基础篇学习（一）

关键字：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with、

保留字：abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto、implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

二、JavaScript数据部分

（1）运算符

算数运算符：加、减、乘、除、取余

赋值运算符：等于、加等、减等、乘等、除等、余等

关系运算符：大于、小于、大于等于、小于等于、等于、不等于、绝对等于、绝对不等于

逻辑运算符：与、或、非

补充：自增、自减、NaN、isNaN

（2）数据类型

分类：数值类型（number）、字符串类型（String）、布尔类型（boolean）、对象（Object）、undefined、null

类型转换：隐式转换、显式转换

类型转换方法：number（）、String()、parseInt（数值，进制）、parseFloat()

数据类型判断：typeof 返回值是字符类型（Array.isArray(）弥补了typeof的不知足）

三、程序基本结构

程序组成：顺序结构、逻辑分支结构（选择结构/条件语句）、循环结构

（1）选择结构

if语句（if语句传入的值的结果只能是布尔类型）

if…else结构

if…else if…else..结构

switch（变量）{case 值：语句；break；case…;default：语句;}(注意switch后的变量必须是数值类型，case后面的值必须是常量，如果每条case语句没有break，语句会继续执行直到遇到break停止，此现象被称为穿透，常用来简化代码)

（2）循环结构介绍

概念：在程序中需要反复执行某个功能而设置的一种程序结构。优点是可以减少代码重复书写工作量

while循环：由循环条件和代码块组成。

do…while循环：与while循环唯一的区别在于先运行一次循环，然后判断条件（简单来说就是不管条件是否为真，都先运行一次代码块）

for循环：for（初始化表达式；条件；递增表达式）{语句}

break：跳出代码块或循环，一旦满足条件，语句就不再执行

continue：跳出循环，当满足特定条件时，跳出当前循环，开始下一轮循环

死循环：程序应该避免出现死循环（不知道循环次数时可以用死循环，在适当的时候要终止死循环）

四、函数

（1）函数

概念：一段可以反复调用的代码块。函数减少重复编写程序段的工作量、提高代码的复用性、可读性等

函数的声明：函数声明的关键字function，函数常见的方式有两种，一种是构造函数，一种是字面量方式（赋值）

函数的执行：调用函数，定义的函数才会被执行。

函数传参：函数分为实参与形参

函数返回值：return语句，非必需，如果没有函数没有返回值或为undefined

函数变量提升现象：在函数内部使用var命令声明的变量，不管在什么位置变量都会被提升到函数体的头部（只提升到当前脚本）,只提升变量名，不提升变量值

函数的参数列表（arguments），可以读取函数体内部的所有参数。注意该对象只能在函数体内部使用。参数是局部变量。

（2）函数的作用域

作用域：变量存在的范围

ie6以前作用域：（1）全局作用域：函数外部声明的变量（2）局部作用域：函数内部定义的变量，函数外部无法访问局部变量

函数内部定义的变量，会在该作用域内覆盖同名全局变量

（3）递归

概念：可理解为函数在执行的过程中可以调用自身。

递归处理的步骤：找到临界点（一眼便能看出的值）；找到本次和上一次的关系；假设当前函数可以使用了，调用自身计算上一次的运行结果，再写出本次运行的结果即可。

（3）编程语言

面向对象编程语言（高级语言）：前端（JavaScript），后台（Java、PHP、Python、C#，C++）

面向过程编程语言（低级语言）：C语言

面向对象编程：生成对象（一类实物的统称），对象根据模板生成

（4）构造函数

概念：JavaScript使用构造函数作为对象的模板。构造函数是一个专门用来生成实例对象的函数（一个可以生成多个具有相同结构的对象的模板），构造函数本身又有自己的特征和用法。

区别：为了与普通函数区别，构造函数的函数名第一个字母大写

特点：内部的this关键字代表了生成的实例对象、对象生成必须使用new命令（作用是执行构造函数返回一个实例对象）。

五、数组

（1）数据结构

计算机存储，组织数据方式、相互之间存在一种或多种特定关系的数据元素集合。

（2）数组

概念：有序的元素列表。

创建方式：构造函数方式（Array创建的数组可以包含任意数据类型，当Array生成数组是有一个参数n，表示生成长度为n的数组，当传入多于1的参数，参数作为数组的成员），字面量方式（赋值）

数组操作方法

数组的方法名称	描述	是否改变原函数	返回值
push（参数1，参数2…）	在数组的末端添加一个或多个元素	是	改变过后的新数组长度
pop（）	删除数组最后一个元素	是	当数组为空时返回值为undefined，不为空返回删除的元素
unshift（参数1，参数2…）	在数组的第一个位置添加一个或多个元素	是	新数组的长度
shift（）	删除数组的第一个元素	是	删除的元素，数组为空返回undefined
slice（tart，end）	提取数组中的元素，start开始位置（为负数是从末尾开始算起-1是第一个元素）、end结束位置不包括end本身（end没有设置表示取start开始所有元素）	否	返回由提取元素组成的新数组
splice（index，num，参数1，参数2…）	index必需添加或删除元素的开始位置（负数表示从末尾开始）。num必需（从开始位置删除的数量，0表示不删除）。参数可选（有参数表示在数组中添加元素）总参数只有一个表示分割数组	是	删除了元素：返回删除的数组。
concat（arr1,arr2…）	合并两个或多个数组	否	返回连接的新数组
arr.toString()	数组转成字符串	否	返回字符串
join（分隔符）	将数组转化为字符串（默认为逗号）	否	返回字符串
sort（function（a,b）{return a-b}）	将数组排序（参数必须是函数，在元素组上进行排序）	是	返回排序后的数组
reverse（）	将数组倒序排列（在原数组上倒序）	是	返回倒序排序的原数组

push与pop结合使用构成了后进先出的栈结构

push与shift结合使用构成了先进先出的队列结构

数据越界：数组下标超出了数组的正常范围的现象（undefined）

数组划分：整数数组、字符串数组、对象数组、二维数组

数组循环：for循环、for…in(in是属性名也是下标)，for…of

数组的值传递和引用传递（涉及到堆和栈）：引用传递由地址改变数值。栈内存存地址、堆内存存数值

Json：表示对象的方法。json对象定义书写要求严格，属性与属性值必须用引号，数值类型的属性值可以不带引号。

（3）数组排序

选择排序

思路：选择排序和冒泡排序类似，跟冒泡不同之处在于，它不是每比较一次就调换位置，而是一轮比较完毕，找到最大值（或者最小值）之后，将其放在正确的位置，其他数位置不变。

for(var i=0;i<array.length-1;i++){ var minIndex = i; var min = array[i]; for(var j=i+1;j<array.length;j++){ //当循环出来的元素比最小值小的时候，最小值发生变化，最小值索引也变化 if(min > array[j]){ min = array[j]; minIndex = j; } } //确定了最小值以后需要给 i位置上的元素进行交换 if(minIndex != i){ var tmp = array[i]; array[i] = array[minIndex]; array[minIndex] = tmp; } }

冒泡排序

思路：对当前未排好的序列，从前往后对相邻的两个数比较调整位置，较大的数往下沉，较小的往上冒

（4）ie5新增数组方法

方法类别	方法名称	描述	返回值	是否改变原数组
静态方法	Array.isArray(参数数组)	参数是否为数组类型	返回一个布尔值、弥补typeof的不足	否
遍历数组	array.map(function(function（ele，index，array）{})	数组的所有成员依次执行参数函数（函数参数ele数组的每一项，index当前项的索引，array当前数组）	返回执行过后的新数组	否
遍历数组	array.forEach(function(function（ele，index，array）{})	数组的所有成员依次执行参数函数（函数参数ele数组的每一项，index当前项的索引，array当前数组），该方法总会遍历完整个数组才会停止执行，使用时要适当的添加判断条件终止执行	无	否
过滤数组	array.filter(function(function（ele，index，array）{})	数组的所有成员依次执行参数函数（函数参数ele数组的每一项，index当前项的索引，array当前数组，数组成员满足某个条件放到一个新数组中	满足条件的数组成员组成一个新数组返回	否
判定数组	array.some(function(function（ele，index，array）{return 条件})	判断数组中的元素是否满足某一条件，有一个满足条件返回值为true	返回值类型布尔值	否
判定数组	array.every(function(function（ele，index，array）{return 条件})	判断数组中的每个元素是否满足某一条件，都满足函数返回值才会为true	返回值类型布尔值
累加器	array.reduce(function(newEle,indexEle){return…})	处理函数每个成员，累计成一个值。newEle是累计变量，indexEle当前变量	数值（常用与元素累加，累减）
查找元素	array.find(function(){return 条件})	返回数组中符合条件的第一个元素	符合条件的元素
查找元素	array.indexof(查找的元素)	查找元素在数组中第一次出现的位置	找到返回索引，找不到返回-1
查找元素	array.lastindexof(查找元素)	查找元素在数组中最后一次出现的位置	返回索引，找不到返回-1

六、es5严格模式

（1）简介

JavaScript运行模式：正常模式、严格模式。js代码在正常模式与严格模式中有不同的运行结果。使用严格的js语法。严格模式体现了 JavaScript 更合理、更安全、更严谨的发展方向

（2）设计目的

兼容以往的语法，加入新语法，是js语言更加合理，引导程序员使用新语法。

明确禁止一些不合理、不严谨的语法，减少 JavaScript 语言的一些怪异行为。

增加更多报错的场合，消除代码运行的一些不安全之处，保证代码运行的安全。

提高编译器效率，增加运行速度。

为未来新版本的 JavaScript 语法做好铺垫。

（3）严格模式作用范围

整个脚本、单个函数。整个脚本语句放在第一行才有效；单个函数语句也要放在函数的第一行才有效果。遇到严格模式文件与正常模式文件合并时，需要将严格模式放在一个立即执行的函数中确保合并之后不会出现错误。

（4）严格模式书写要求

变量必须用var声明

函数不能有重名的参数

函数的参数不能使用arguments读取，也就是说严格模式下arguments不在追踪参数的变化，函数内部arguments与参数的改变之间的联系被切断了。

禁止八进制的前缀0表示法，会报错

严格模式变量必须先声明再使用，否则会报错（严格模式没有变量提升现象）

禁止this关键字指向全局对象（this是undefined不会指向window）

严格模式下，with语句不能使用会报错

创设eval作用域（正常模式下有两种作用域全局与局部；在严格模式下在正常模式的基础上具有了第三种eval作用域，但是eval语句作用域内的变量只能在eval内使用。eval（语句）是一个独立的作用域，eval内部创建的变量不会泄露）。

七、字符串

（1）字符串

字符串创建方式：构造函数方式（变量是对象），字面量方式。

工具方法：String将任意类型的值转成字符串

（2）字符串方法

获取字符：charAt（索引）返回索引对应位置的字符，不改变原数组

截取子字符串并返回：slice（start，end）end不传截取范围为start索引到结束，子字符串不包括end索引对应的字符，不改变原数组

截取字符串：substring(start,end) 返回结果不包括end对应的字符，start与end顺序书写没有要求；substr（start，length）start可为负数表示从字符串末尾开始向前截取，不改变原数组

匹配字符串：indexof（子串）返回子串第一次在母串出现的位置索引，返回值为-1表示没有找到，不改变原数组

去除字符串两端空格：trim（）返回新字符串，不改变原数组

大小写转换：toLowerCase（）将字符串字符都转为小写，toUpperCase（）将字符串的字符都转为大写

替换字符串：replace（字母1，字母2）用字母2替换字母1（一般替换第一个匹配的字符，若全部替换需要加上正则）

转成数组：split（分隔符），将每个字符用分隔符分隔，分隔后的子串组成新的数组返回

（3）ASCII码和字符集

字符串常见API

字符串的子符的Unicode 码点：charCodeAt（索引），逆操作String.fromCharCode()

八、Math原生对象

（1）概念

为JavaScript提供了各种数学功能。该对象不是构造函数，不能生成实例，所有属性和方法必须在Math对象上调用。

（2）数学对象的属性

Math.E(常数e)、Math.PI(常数PI)

（3）数学对象的方法

绝对值：Math.abs(数值)

参数列表中的最大值：Math.max(参数1，参数2…)参数为空返回Infinity

参数列表中的最小值：Math.min(参数1，参数2…)参数为空返回-Infinity

数组最大值：Math.max.apply(null,array)可以得到数组中最大值是谁,null是对象

地板值：Math.floor(参数)小于参数的最大整数

天花板值：Math.ceil(参数)大于参数值的最小整数

四舍五入：Math.round(参数)

幂次方：Math.pow(参数1，参数2)得到参数1的参数2次方

平方根：Math.sqrt(参数)得到参数的平方根的值

正弦：Math.sin(参数)得到参数的正弦

余弦：Math.cos(参数)得到参数的余弦

正切：Math.tan(参数)得到参数的正切

随机数：Math.random()随机数范围0~1

随机对象：obj[Math.random()*(obj.length)]

任意随机数生成：Math.random()*(max-min+1)+min

保留小数点：Math.toFixed（n）保留n位小数

九、Date对象

（1）概念

date原生JavaScript时间库。

（2）实例对象的创建

let tody=new Date();参数为空表示当前的系统时间（参数类型年/月/日、年–月–日、月/日/年…）时间的年月日参数如果超出了正常范围会自动折算

（3）日期的获取

一月中某一天1~31：today.getDate()

一周中某一天0~6：today.getDay()

返回月份0~11：today.getMonth()

返回年份：today.getFullYear()

返回当前小时0~23：today.getHours()

返回当前分钟0~59：today.getMinutes()

返回当前毫秒0~999：today.getMillisenconds()

（4）时间的设置

获取1970年1月1日至今的毫秒数：today.getTime()

设置月中的某一天：today.setDate(参数)

设置月份：today.setMonth(参数)

设置年份：today.setFullYear()

设置小时：today.setHours()

设置分钟：today.setSeconds()

设置秒：today.setMinutes()

设置毫秒：today.setMillisenconds()

设置1970年1月1日至今的毫秒数：today.setTime()

（5）日期的运算

today1-today2：两者间隔的毫秒数

today1+today2：两个时间字符串的拼接

（6）静态方法

解析日期字符串:today.parse(日期)得到该时间零点的毫秒数

十、定时器与延时器

（1）定时器

概念：定时执行代码的功能。

书写格式：let timer=setInterval（函数，time）每隔time时间执行一次函数。

返回值：整型的标识

取消定时器：clearInterval(timer)

（2）延时器

概念：指定某个函数或某段代码在多少毫秒之后执行。只执行一次。

书写格式：let timer=setIntimeout(function(),time)

返回值：整型的标识

清除延时器：clearTimeout(timer)

十一、BOM

（1）概念

提供了独立于页面内容而与浏览器进行交互的对象，其核心对象是window。在浏览器中，window对象指的是当前浏览器窗口。他也是所有对象的顶层对象。

（2）顶层对象

指最高一层的对象，所有其他对象都是他的下属。JavaScript规定，浏览器环境的所有全局变量，都是window对象的属性。

（3）BOM结构

（4）浏览器类型判断

var t = navigator.userAgent; if(t.indexOf(\’Trident\’)!= -1){ console.log(\’ie内核\’) }else if(t.indexOf(\’Presto\’)!= -1){ console.log(\’欧朋\’) }else if(t.indexOf(\’Chrome\’)!= -1){ console.log(\’chrome \’) }else if(t.indexOf(\’Safari\’)!= -1){ console.log(\’Safari \’) }else{ console.log(\’其他\’) }

（5）判断移动端/PC端

方案一

var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf(\’mobi\’) !=-1) { // 手机浏览器 console.log(\’手机\’) } else { // 非手机浏览器 console.log(\’非手机\’) }

方案二

var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf(\’mobi\’) !=-1) { // 手机浏览器 console.log(\’手机\’) if(ua.indexOf(\’android\’) !=-1){ console.log(\’移动端安卓\’) }else if(ua.indexOf(\’ipod\’) !=-1 || ua.indexOf(\’iphone\’) !=-1 || ua.indexOf(\’ipad\’) !=-1) { console.log(\’移动端苹果手机\’) } } else { // 非手机浏览器 console.log(\’非手机\’) }

（6）location对象

概念

包含了当前有关URL的信息。window对象的一部分，可通过window.location属性来访问。

属性

href：设置或返回完整的URL（常用）

hash：设置或返回从#号开始的URL

search：设置或返回从问号开始的URL

host：设置或返回主机名和当前URL的端口号

hostname：设置或返回当前URL的主机名

pathname：设置或返回当前URL的路径部分

port：设置或返回当前URL的端口号

protocal：设置或返回当前URL的协议。

方法

assign（）加载新的文档

reload（）重新加载当前文档

replace（）用新的文档替换当前文档

（7）window方法

open（）打开新的浏览器窗口

close（）关闭浏览器窗口

alert（）弹出带有一段消息和确认按钮的警告框

prompt（arg1，arg2）显示带有一段消息以及确认按钮和取消按钮的对话框。

confirm（arg1）显示一段有消息以及确认按钮和取消按钮的对话框。

window.onload=function(){}发生在当浏览器窗口加载完毕时

window.onscroll=function(){}监听页面滚动

（8）history对象

1.概念history对象保存用户上网的历史纪录，从窗口被打开的那一刻算起。

2.方法

后退一页：history.go(-1)、history.back()

前进一页：history.go(1)、history.forward()

前进两页：history.go(2)

十二、DOM结构

（1）HTML DOM概念

HTML DOM定义了访问和操作HTML文档的标准方法，DOM将HTML文档表达为树结构。

节点树

（2）树状结构三大关系

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等属于用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）

每个节点都有父节点、除了根（它没有父节点）

一个节点可拥有任意数量的子

同胞是拥有相同父节点的节点

父级关系：只有一层上下级关系

子级关系：只有以下一层关系

兄弟关系：同一个父级（同一级）

父子节点：上下两层节点之间的关系。

祖先节点：当前节点上面的所有节点的统称。

子孙节点：当前节点下面的所有节点的统称。

（3）Doctype作用

<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

（4）文档滚动

document.scrollingElement属性返回文档的滚动元素。即文档滚动时，到底是哪个元素在滚动。

document.documentElement在标准模式下返回html元素；在兼容（quirk）模式下返回body元素，若该元素不存在返回null。

什么是兼容模式：为了正确呈现符合W3C标准的Web站点，每个浏览器全都支持一种名为Doctype切换的功能，引入 DOCTYPE 切换的目的是使浏览器能够正确地呈现符合标准的 Web 站点以及旧式 Web 站点。大多数 Web 站点被开发为呈现 HTML 页而不是 XHTML 页。浏览器通过判断是否存在 DOCTYPE 来确定何时应该使用标准来呈现页。quirk模式是浏览器支持的一种呈现模式。浏览器呈现模式有：标准模式、兼容模式和Almost Standards 模式。浏览器根据Doctype来决定采用哪种呈现模式。

页面滚动到浏览器顶部：document.scrollingElement.scrollTop=0//document.documentElement.scrollTop=0//document.body.scrollTop=0

获取可视区域距离页面顶部的距离 scrollTop = document.scrollingElement.scrollTop;// scrollTop=document.documentElement.scrollTop || document.body.scrollTop

（5）DOM概念

W3C标准。定义了访问HTML与XHTML文档的标准。他是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容、结构和样式。是JavaScript操作网页的接口。

DOM与js的关系：DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言

（6）DOM属性

innerHTML节点的文本值

outerHTML整个标签，不仅限于标签内部内容

innerText获取元素内的文本内容，html标签被忽略

parentNode节点的父节点

childNodes节点的子节点

children节点的属性子节点

attributes节点的属性节点

nodeName获取属性节点的标签名

nodeValue获取元素的标签名

className属性节点的类名

firstChild父元素下的第一个子节点（包括文本节点）

lastChild父元素下的最后一个子节点（包括文本节点）

nextSibling下一个子节点

previousSibling上一个子节点

firstElementChild父元素下的第一个元素节点

lastElementChild父元素下的最后一个元素节点

nextElementSibling下一个元素节点

previousElementSibling上一个元素节点

parentNode获取父节点

element.offsetHeight元素本身的高度（padding、margin、border、content）

element.offsetWidth元素本身的宽度（padding、margin、border、content）

element.offsetParent属性返回靠近当前元素的并且有定位属性部位static的父元素

offsetLeft获取当前元素左上角相对于Element.offsetParent节点的水平位移

offsetTop当前元素垂直方向相对于Element.offsetParent节点的垂直位移

（7）节点类型nodetype属性

元素节点：数字1

document：数字9

文本节点：数字3

注释节点：数字8

属性节点：数字2

（8）DOM节点

整个文档是一个文档节点

每个HTML元素是元素节点

HTML元素内的文本是文本节点

每个HTML属性是属性节点

注释是注释节点

（9）DOM对象方法

方法	描述
getElementById(id名)	返回带有指定 ID 的元素。
getElementsByTagName(标签名 )	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName(类名)	返回包含带有指定类名的所有元素的节点列表。
appendChild(子节点)	把新的子节点添加到指定节点。
removeChild(子节点)	删除子节点。
replaceChild(newNode,oldNode)	替换子节点。
insertBefore(newNode，oldNode)	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。
removeAttribute()	移除指定属性，该方法没有返回值
classList.add(“类名“)	添加类名
classList.remove(“类名“)	移除类名
classList.replace(“类名1″，”类名2“)	替换
classList.contains(“类名“)	判断类名存在

（10）元素节点的样式

设置节点行内样式：element.style.属性名=”属性值“//具有最高的优先级，改变行内样式，通常会立即反映出来

获取节点全部的样式：window.getComputedStyle(”element节点“，“属性名“)//浏览器计算后得到的最终规则，各种 CSS 规则叠加后的结果。只能获取不能设置

getConputedStyle存在兼容问题：低版本ie使用element.current()

十三、事件

（1）事件基础

概念：JavaScript事件是web用户引起的一系列操作。是基于事件和文档的对象

（2）事件处理函数

鼠标、键盘和HTML事件都由两部分组成on+事件名称

鼠标事件
onclick	鼠标单击
ondblclick	鼠标双击
onmousedown	鼠标按键按下
onmouseup	鼠标按键抬起
onmousemove	鼠标在元素上移动
onmouseout	鼠标移出
onmouseenter	鼠标移入
onmousemover	当鼠标移到某个元素上时触发
键盘事件
Onkeydown	键盘按键按下
Onkeyup	键盘按键抬起
onkeypress	键盘按键按住
ctrkey	ctr键，属性bool类型发生时true表示按下ctr键
altkey	alt键，属性bool类型发生时true表示按下alt键
shiftkey	shift键、属性bool类型发生时true表示按下shift键
keyCode/which兼容	键值用来判断键盘上哪个键
表单事件
Onblur	失去焦点
Onfocus	获取焦点
Onchange	内容修改（并且失去焦点触发）
HTML事件
onSelect	选中输入框中的一个或多个字符触发
onresize	监听窗口或框架大侠变化在window框架上触发
onload	当页面或资源完全加载后window上触发或当框架加载完毕在框架集上触发
onchange	当文本框内容改变且失去焦点后触发
onfocus	当页面或元素获得焦点时在window及相关元素上触发
onblur	当页面或元素失去焦点时在window及相关元素上触发
onscroll	当用户滚动带滚动条的元素时触发

（4）事件对象

概念：当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。

事件对象的产生：通过事件绑定执行函数可以得到一个隐藏的参数，这个参数是浏览器自动分配的，称作event对象

对象的获取方式：低版本ie在事件函数中使用window.event，为了解决兼容性事件e=参数||window.event

event事件对象的属性

button事件触发哪个鼠标按键被点击

clientX与clientY获取鼠标点击位置相对于可视区的位置

scrollX与scrollY获取鼠标相对于屏幕的位置

offsetX与offsetY鼠标相对于事件源的位置

pageX与pageY鼠标相对于文档的位置

event.target||event.srcElement获取事件源

关系：pageX/pageY=clientX/clientY+document.scrollingElement.scrollTop

键码：event.keyCode||event.which

效果图

（5）事件冒泡

概念：事件按照从最特定目标到最不特定的目标（document对象）的顺序触发。方向从内到外

阻止冒泡：event.stopPropagation() evt.cancelBubble=true(低版本ie)

浏览器默认行为：JavaScript事件本身所具有的属性

阻止默认行为：W3C—>event.preventDefault()；IE—> event.returnValue=false；事件函数—>return false；

自定义右键菜单：oncontextmenu

（6）DOM2级事件处理

事件捕获：方向是从外到内

事件监听

格式：element.addEventListener(事件名，事件处理函数即回调函数，true/false)，通过此方法添加的事件不会抵消

true代表监听事件捕获、false监听冒泡、默认是false

ie8事件监听：element.attachEvent(on+事件名，处理函数)

删除事件监听

element.removeEventListener(事件名，函数名)

ie8删除事件监听：element.detachEvent(事件名，处理函数)

事件委托

概念：把本应该添加给某元素上的事件委托给它的父级。

优点：效率高、可以给未来元素添加事件

拖拽效果

原理：三个事件：onmousedown、onmousemove、onmouseup

思路：第一步给目标元素添加onmousedown事件，拖拽的前提是在目标元素按下鼠标左键；第二步当onmousedown发生以后，此刻给document添加onmousemove事件，意味着此刻鼠标在网页的移动都将改变目标元素的位置；第三步在onmousemove事件中，设定目标元素的left和top，公式：目标元素的left = 鼠标的clientX – （鼠标和元素的横坐标差，即offsetX）；目标元素的top = 鼠标的clientY– （鼠标和元素的纵坐标差，即offsetY）；第四步当onmousedown发生以后，此刻给document添加onmouseup事件，意味着此刻鼠标在网页的任意位置松开鼠标，都会放弃拖拽的效果。第五步在onmouseup事件中，取消document的onmousemove事件即可。

十四、正则表达式

（1）概念

正则表达式是一个描述字符规则的对象。可以用来检查一个字符串是否含有某个子字符串，将匹配好的子字符串做替换或者从某个字符串中提取出符合某个条件的子串等。

（2）创建方式

构造函数方式：var reg=new RegExp（“字符串“,”ig”）

var reg = new RegExp(“study”，“ig”); // 第二个参数为修饰符

字面量方式：var reg=/字符串/ig

var reg = /study/ig;

i表示忽略大小写、g表示全局匹配

（3）正则对象方法

test（）方法

格式：reg.test(母串)

返回值布尔类型匹配返回true 不匹配返回false 若正则中带有g修饰符，test方法都从上一次结束的位置开始向后匹配

指定匹配的位置：其中可以通过reg.lastIndex=索引指定test开始匹配的位置

var r = /x/g; var s = \’_x_x\’; r.lastIndex // 0 r.test(s) // true r.lastIndex // 2 r.test(s) // true r.lastIndex // 4 r.test(s) // false

exec（）方法

格式：reg.exec(母串)

返回值：由每次匹配的结果的数组，未找到匹配返回null，需要便利每次的匹配结果的时候需要多次调用exec（）方法，因为他每次执行会改变lastindex的值，将每次匹配的结果放入数组中返回

var s = \’_x_x\’; var r1 = /x/; var r2 = /y/; r1.exec(s) // [“x”] r2.exec(s) // null

（4）字符串函数

replace函数

格式：str.replace(reg,replacement) 用repacement替换掉匹配的reg正则

返回值：返回替换成功的字符串

参数：两个参数，第一个是正则表达式，表示搜索模式，第二个是替换的内容。

\’aaa\’.replace(\’a\’, \’b\’) // “baa” \’aaa\’.replace(/a/, \’b\’) // “baa” \’aaa\’.replace(/a/g, \’b\’) // “bbb” //上面代码中，最后一个正则表达式使用了g修饰符，导致所有的b都被替换掉了。

match函数

格式：str.match（reg）

返回值：匹配成功返回由每次匹配成功的结果组成的数组，匹配失败返回null

var s = \’abba\’; var r = /a/g; s.match(r) // [“a”, “a”] r.exec(s) // [“a”]

search函数

格式：str.search(reg)

作用：检索与正则表达式reg匹配的值

返回值：返回与整个表达式第一个匹配的值起始位置下标，如果没有检索到匹配项，返回-1

\’_x_x\’.search(/x/)// 1 //上面代码中，第一个匹配结果出现在字符串的1号位置。

比较match与exec的区别：match返回的结果会一次性返回所有匹配成功的结果，exec是将每次匹配的结果返回一个结果

（5）正则表达式

构成：字面量字符和元字符组成

字面量字符：字符在正则表达式中就是字面的含义

元字符：字符在正则表达式中有特殊的含义，不代表字面的意思。

文字模式：正则表达式是由普通字符以及特殊字符（元字符）组成的文字模式。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配

元字符—-限定符

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

元字符—方括号

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red\|blue\|green)	查找任何指定的选项。

元字符—特殊字符

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NUL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

/[abc]/.test(\’hello world\’) // false /[abc]/.test(\’apple\’) // true //上面代码中，字符串hello world不包含a、b、c这三个字母中的任一个，所以返回false；字符串apple包含字母a，所以返回true /[^abc]/.test(\’hello world\’) // true /[^abc]/.test(\’bbc\’) // false //上面代码中，字符串hello world不包含字母a、b、c中的任一个，所以返回true；字符串bbc不包含a、b、c以外的字母，所以返回false。 /[a-z]/.test(\’b\’) // true

元字符—定位符

作用：将一个正则表达式固定在一行的开始或结束。也可以创建只在单词内或只在单词的开始或结尾处出现的正则表达式。

^：匹配输入字符串的开始位置。

$：匹配输入字符串的结束位置。

// test必须出现在开始位置/^test/.test(\’test123\’) // true // test必须出现在结束位置/test$/.test(\’new test\’) // true // 从开始位置到结束位置只有test/^test$/.test(\’test\’) // true /^test$/.test(\’test test\’) // false

元字符—转义符

理解：\字符用于匹配某些特殊字符

正则表达式中那些有特使含义的元字符，若要匹配自身，需要在它们前面加上反斜杠

/1+1/.test(\’1+1\’)// false /1\+1/.test(\’1+1\’)// true //上面代码中，第一个正则表达式之所以不匹配，因为加号是元字符，不代表自身。第二个正则表达式使用反斜杠对加号转义，就能匹配成功。

元字符—选择匹配符

|字符可以匹配多个规则竖线符号（|）在正则表达式中表示“或关系”（OR），即cat|dog表示匹配cat或dog

/11|22/.test(\’911\’) // true //上面代码中，正则表达式指定必须匹配11或22 // 匹配fred、barney、betty之中的一个 /fred|barney|betty/

（6）常用正则

邮政编码

/^\d{6}$/

文件格式监测

/^.+\.(jpeg|png|gif|jpg)$/

字符串首尾去空格

var str = \’ avaasdf \’; var reg = /^\s+|\s+$/g; console.log(str.replace(reg,\’\’))

邮件格式监测

/^\w+[-+.]*\w*@([a-z0-9A-Z\u2E80-\u9FFF]-?)+(\.\w{2,6})+/

手机号监测

/^(13[0-9]|14[0-9]|15[0-9]|18[0-9]|17[0-9])\d{8}$/

身份证监测

/(^\d{15}$|^\d{18}$)|^\d{17}X$/

中文监测—unicode编码中文监测

/^[\u2E80-\u9FFF]+$/

用户名监测（规则数字字母下划线–组成，3-16位）

/^[a-z0-9_-]{3,16}$/

（7）正则分组

分组实例展示

var reg = /(\d{2})/ reg.test(\’12\’); //true // 这里reg中的(/d{2})就表示一个分组，匹配两位数字 /* /hahaha/ /(ha){3}/ 这两个表达式是等效的，但有了分组之后可以更急简洁 */

捕获型分组（）

// 被正则表达式捕获(匹配)到的字符串会被暂存起来，其中，由分组捕获到的字符串会从1开始编号，于是我们可以引用这些字符串： var reg = /(\d{4})-(\d{2})-(\d{2})/; var dateStr = \’2018-04-18\’; reg.test(dateStr); //true //引用捕获到的内容使用 $1 代表第一个分组的捕获到的内容 RegExp.$1 //2018 RegExp.$2 //04 RegExp.$3 //18

非捕获型分组（？）

// 有的时候只是为了分组并不需要捕获的情况下就可以使用非捕获型分组 var reg = /(?:\d{4})-(\d{2})-(\d{2})/ var date = \’2012-12-21\’ reg.test(date) RegExp.$1 // 12 RegExp.$2 // 21

结合replace方法做字符串自定义替换

var dateStr = \’2018/04/18\’; var reg = /(\d{4})\/(\d{2})\/(\d{2})/; dateStr = dateStr.replace(reg, \’$1-$2-$3\’) //”2018-04-18″ //不过这里需要注意的是/是需要用\转义的

结合正则exec方法使用

//通俗来说，分组就是在正则表达式中用（）包起来的内容代表了一个分组 var s; var re = new RegExp(“d(b+)(d)”, “ig”); var str = “cdbBdbsbdbdz”; var arr = re.exec(str); console.log(arr) /* 0: “dbBd” 正则整体匹配到的字符 1: “bB” 第一个小括号(分组)匹配到的字符 2: “d” 第二个小括号（分组）匹配到的字符 */ // 第一个分组的结果也可以用 RegExp.$1 获取 s = “$1 contains: ” + RegExp.$1 + “\n”; s += “$2 contains: ” + RegExp.$2 + “\n”; console.log(s)

结合字符串match方法使用

var str = “http://www.taobao.com:80/cuxiao/hongbao.html”; var patt1 = /(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/; arr = str.match(patt1); console.log(arr); /* 0: “http://www.taobao.com:80/cuxiao/hongbao.html” 整个正则匹配到的字符串 1: “http” 第一个分组匹配到的字符串 2: “www.taobao.com” 第二个分组匹配到的字符串 3: “:80” 第三个分组匹配到的字符串 4: “/cuxiao/hongbao.html” 第四个分组匹配到的字符串 */ //第一个分组的结果也可以用 RegExp.$1 获取 console.log(RegExp.$1)//http

附上阿里面试题

//把url参数转对象 var parseQuery = function (query) { var reg = /([^=&\s]+)[=\s]*([^&\s]*)/g; var obj = {}; while (reg.exec(query)) { obj[RegExp.$1] = RegExp.$2; } console.log(obj) return obj; } parseQuery(“userID=JeoOrCXxyiOFxbYaGL40kw&userPwd=sdFo2ziUw8HyLRKd4i6GAQ&userName=aa”)

十五、补充

（1）console.log

参数可以接受任何字符串、数字和JavaScript对象。与alert()函数类似，console.log()也可以接受换行符\n以及制表符\t。

console.log()语句所打印的调试信息可以在浏览器的调试控制台中看到。

☐ （2）

本文链接：https://www.cnblogs.com/baitwoWN/p/11102051.html

JavaScript基础篇学习（一）

JavaScript基础篇学习（一）

JavaScript基础篇学习（一）的更多相关文章

随机推荐

热门专题

目录导航