javascript基础

最新推荐文章于 2024-10-28 09:46:47 发布
原创 最新推荐文章于 2024-10-28 09:46:47 发布 · 861 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

javascript基础

js基础

特点：

  • 镶嵌在html中。
  • 环境支持。
  • 弱语言类型。
  • 基于对象。
  • 事件驱动。
  • 跨平台。
  • 解释执行。
javascript的组成:
  1. ECMAscript javascript语法
  2. DOM 页面文档对象
  3. BOM 浏览器对象

1 书写位置

内嵌式： javascript代码可以写在<script>标签中

行内式：javascript代码可以写在标签中的onclick属性中：

外部式：javascript代码可以写在外部的js文件中，通过<script>标签引入。可以在不同的页面中使用，可以利用到浏览器额缓存机制，推荐使用。一旦引入外部js文件，则当前标签内部代码会被浏览器忽略。规范：不在外部引用的script标签中书写代码。

新建js文件 > 书写javascript代码 > 在html的<script>标签中引入js文件路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript命令测试窗口</title>
    <script type="text/javascript">
       可以书写javascript语句
    </script>
</head>
<body>
    <!--<button>标签中的onclick属性中书写javascript语句，注意双引号单引号的转换-->
    <button onclick="alert('弹出警告中的内容')">xxx</button>
    
    
     <!--<a>标签中的href属性中书写javascript:再加javascript语句，注意双引号单引号的转换-->
    <a href="javascript:alert('弹出警告中的内容')"></a>
    打开中……
</body>
</html>

外部引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript命令测试窗口</title>
    
    <!--通过\<script>标签引入-->
    <script type="text/javascriipt" src="外部javascript文件的路径">
       不要书写javascript语句
    </script>
</head>
<body>
    打开中……
</body>
</html>

2 基础语法：

1.//为单行注释， /* */为多行注释

2.js严格区分大小写。

3.js语句末尾必须添加 ; 分号，如果不添加浏览器会自动添加，但是会浪费资源甚至添加错误。

4.js会忽略空格，换行和缩进，可以通过空格换行和缩进来控制格式。

3 基础输出语句：

所有javascript代码写在<script>标签中

alert("弹出警告中的内容")
document.write("打印在页面上的内容")
console.log("打印在控制台上的内容")
console.time("计时器名");   //开启计时器
console.timeEnd("计时器名");  //关闭计时器，计时器的时间会显示在控制台
console.dir(对象名)； //可以打印返回的元素，更好的查看里面的属性

基础输入语句

var print = prompt('输入内容')  //弹出一个输入框

4 字面量与变量

字面量：都是一些不可改变的值，可以直接使用：

1 111 222 333

变量：变量就是内存中申请的空间。变量可以保存字面量，变量可以任意改变存储的值，还可以通过变量名对字面量进行描述，使用变量之前必须定义：

var 变量名；使用var 声明的变量会在所有语句执行之前率先声明。

变量分为全局变量和局部变量。

变量的特殊情况：

情况说明结果
var age; console.log(age)只声明不赋值undefined
console.log(age)不声明，不赋值直接使用报错
age = 10; console.log(age)不声明，只赋值10
//字面量举例：
console.log(123);

//变量举例：
var a =123;
console.log(a);

5 标识符

-在js中所有的可以由我们自主命名的都可以称为标识符：变量名，函数名，属性名

-标识符可以含有：字母，_ 下划线，$，数字，不能以数字开头。

-不能是ES中的关键字和保留字。（尽量不使用name）

-一般遵循驼峰命名法。

-底层遵循Unicode编码。

6 数据类型

JS中的数据类型一共有6种：

基础数据类型：

​ String 字符串

​ Number 数值

​ Boolean 布尔值

​ Null 空值

​ Undefind 未定义

引用数据类型：Object 对象

可以使用typeof函数检查对应数据的数据类型：

console.log(typeof 变量名） 将会在控制台打印响应数据的类型。

console.log(typeof 变量名）
String

可以使用加号连接。

<script type="text/javascript">
	<!--JS中字符串用单引号或者双引号引起来-->
	var str="字符串"
    var str1='字符串'
</script>
字符串.length
字符串.length;    用于得到字符串的长度

可以通过转义字符进行特殊字符的输出：

字符转义字符备注
\’’
\""
\\\
\n换行
\t水平tap
\r回车
\v垂直tap
Number

Number 表示数字和浮点数字。

Number的最大值：

Number.MAX_VALUE约是:1.79 *e+308

Number.MIN_VALUE约是：5e-324

如果使用number表示的数字大于最大值则会返回一个

​ Infinity 表示正无穷；

​ -Infinity 表示负无穷；

使用typeof函数检查Infinity会返回Number类型

NAN是一个特殊的数字，表示NOt a Number,使用typeof检查NaN也会返回Number类型。

如果使用js进行浮点数运算可能会得到一个不精确的数值。

isNaN()

isNaN()用于判断一个数值是不是数字类型

console.log( isNaN(判断类型) )
boolean

布尔值只有两种：falst 表示假

​ true 表示真

使用typeof检查返回一个小写的boolear

<script type="text/javascript">
var bool = true; //定义boolear类型的变量
</script>
Null

null(空值)类型的值只有一个：null ，是赋给变量以空值，并不是未赋值。

使用typeof检测null类型不会返回null，会返回object类型，null就是定义了一个空的object类。

<script type="text/javascript">
var n = null;  //定义一个null类型的变量

</script>
Undefined

undefined(未赋值)类型：当声明一个变量却未赋值时，这个变量的数据类型就是undefined.

用typeof检测类型时，返回undefined类型。

<script type="text/javascript">
var un ;  //已经定义变量名，却未赋值！！！
</script>
强制类型转换

其他数据类型转换为Number String类型

其他类型 --> String

方式一： toString()

		- 调用被转换数据类型的toString()方法。
		- 该方法不会影响到原变量，它会将转换的结果返回。
		- null和undefined这两个值没有toString方法，如果调用他们的方法会报错。

方式二( String() 变量 )：

  • 对于Number和Boolean实际上就是调用toString()方法。
  • 对于null和undefined就是将类型名转换为字符串。

方式三： + 拼接字符串 （隐式转换）

其他类型数据  + ''；
其他类型 --> Number
方式说明案例
parseInt(字符串)将string类型转成整数类型parsInt(“56”)
parseFloat(字符串)将string类型转成浮点数类型parseFloat(“56”)
Number()强制转换函数将string类型转成数值类型Number(‘12’)
js隐式转换(- * /)利用算数运算隐式转换为数值型‘12’ - 0

方法一 使用Number()函数：

  • 字符串 --> 数字

    1.如果是纯数字字符串，则直接转换成数字。

    2.如果字符串中有非数字的内容，则转换成NaN。

    3.如果字符串是一个空串或者是一个全是空格的字符串。 0

  • 布尔 --> 数字

    true 转换成 1

    false 转换成 0

  • null --> 数字 0

  • undefined --> 数字 NaN

方法二：

​ parseInt(字符串)可以将一个字符串中的有效的整数内容拿出来，然后转换成Number。

​ parseFloat(字符串)可以将一个字符串中的有效的有效小数内容拿出来，然后转换成Number。

其他类型 --> boolean

使用Boolean()函数：

数字 --> boolean

除了0和NaN，其余的都是true。

字符串 --> boolea

​ 除了空串，其余的都是true。

null和undefined都会转换为false

对象也会转换为true。

6.1 简单数据类型和复杂数据类型

简单数据类型又被叫做基本数据类型或者值类型,复杂数据类型又叫做引用数据类型.

  • 值类型:简单数据类型/基本数据类型,在存储变量中存储的是值本身,因此又被叫做值类型. (string number boolean undefined null)
  • 引用类型:发复杂数据类型,在存储时变量存储的仅仅是地址(引用)因此被叫做引用数据类型,通过new关键字创建的对象(系统对象,自定义对象),如 Object,Array,Date等.
  • 简单数据类型存放到栈中,由系统自动分配释放存放函数的参数值,局部变量的值等,其操作方式类似于数据结构中的栈.
  • 复杂数据类型存储到堆中,一般由认为分配释放,或者由垃圾回收机制回收.首先在栈中存放地址,十六进制表示,这个地址指向堆中的数据.
6.2 简单数据类型和复杂数据类型传参
  1. 简单数据类型向函数中的形参传递参数时,其实是把在栈空间里的值复制了一份给形参,在方法中对形参做任何修改,都不会影响到外部变量.
  2. 引用数据类型向函数中的形参传递参数是,其实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同一个对象.

7 运算符

运算符又叫操作符。

通过运算符可以对一个或者多个值进行运算，获取运算结果。

7.1算数运算符
运算符描述备注
+加
-减
*乘
/除
%取模

+

​ 1.可以对两个值进行加法运算，并将结果返回。如果对两个字符串进行加法运算，则会返回拼串。将两个字符串拼为一个字符串并返回。

​ 2.任何值和字符串做加法运算，都会先转换为字符串，然后再和字符串左拼串的操作。

- * /

​ 可以对两个值进行相关的运算，返回相应的值。和非数字类型运算时，会将非数字类型转换为数字类型再进行运算。

大于号，小于号，大于等于，小于等于：

判断符号左侧的值是否大于，小于，大于等于，小于等于右侧的，成立返回true，不成立返回false。

非数值情况

对于数值的比较会将非数值的字符转换为数值再进行比较。

非纯数字字符值转换为数字是NaN，任何数字和NaN比较都是false。

如果比较两边都是字符，则不会转换为数字，直接依次比较编码。

7.2 一元运算符

只需要一个操作数

+ 正号

​ 正号不会对数字产生影响。

- 负号

​ 负号可以对数字取反。

​ 对于非数字类型会先转换为数字类型，再进行取反。

7.3 自增自减

++ 自增

​ 1.通过自增可以使变量在自身基础上增加一

​ 2.对于一个变量自增以后，原变量的值会立刻增加一

  3.自增分为两种：后++    (a++)  前++   (a++)无论是哪一种自增后的值都相同，但是a++返回自增前的值，++a是返回自增后的值。

– 自减

​ 1.通过自减可以使变量在自身基础上减少一

​ 2.对于一个变量自减以后，原变量的值会立刻减少一

  3.自减分为两种：后减 (a--)  前减 (--a) 无论是哪一种自减少的值都相同，但是  a-- 是自减少前的值，--a 是自减少后的值。
7.4 逻辑运算符

！ 非

  1. 可以用来对一个值进行非运算，所谓非运算就是对一个布尔值进行取反操作。
  2. 如果对于一个值进行两次取反，这个值不会变化。
  3. 如果对于非布尔值进行取反，则会先将非布尔值转化为布尔值再进行取反操作。(原理和Boolean()函数一样)

&& 与

  1. 可以对符号两侧的值进行与运算并返回结果。

  2. 运算规则：

    两个值只要有一个是false就返回false，只有两个值都是true时才返回true。

    属于短路与，只要第一个判断出false就不会运行第二个判断表达式。

    • 可以在逻辑与两边放置表达式

    • console.log(123 && 456);    //如果表达式1为真返回第二个表达式的值,如果有多个值返回第一个假或者最后一个值
返回： 123
console.log(0 && 456);		//如果表达式1为假真返回第一个表达式的值
返回：  456

  3. 非布尔值进行运算，会先转换为布尔值，再进行运算。

|| 或

  1. 可以对符号两侧的值进行或运算并返回结果。

  2. 运算规则：

    两个值只要有一个是true就返回true，只有两个值都是false时才返回false。

    属于短路或，只要第一个判断出true就不会运行第二个判断表达式。

      • 可以在逻辑与两边放置表达式

      • console.log(123 || 456);    //如果表达式1为真返回第一个个表达式的值
返回： 123
console.log(0 || 456);		//如果表达式1为假真返回第二个个表达式的值如果有多个值返回第一个真或者最后一个值
返回：  456

  3. 非布尔值进行运算，会先转换为布尔值，再进行运算。

7.5 赋值运算符

=

可以将符号右侧的值赋值给符号左侧的变量

+= -= *= /=

a+=x 等同于 a = a+x

7.6 关系运算符

通过关系成立它立刻会返回true，如果关系不成立则立刻返回false

> 大于

​ 比较左侧是否大于右侧，关系成立它立刻会返回true，如果关系不成立则立刻返回false

< 小于

​ 比较左侧是否小于右侧，关系成立它立刻会返回true，如果关系不成立则立刻返回false

<= 小于等于

​ 比较左侧是否小于等于右侧，关系成立它立刻会返回true，如果关系不成立则立刻返回false

>= 大于等于

比较左侧是否大于等于右侧，关系成立它立刻会返回true，如果关系不成立则立刻返回false

== 等于

​ 比较左侧是否等于右侧，关系成立它立刻会返回true，如果关系不成立则立刻返回false。

如果左右表达式类型不相同，会转换为相同的格式再比较。

​ NaN不和任何值相等包括它本身。

​ 可以通过 isNaN()函数来检查是否是NaN。

!= 不等

​ 比较左侧是否不等右侧，关系成立它立刻会返回true，如果关系不成立则立刻返回false。

=== 全等于

​ 不会做类型转换，必须类型也相同。如果类型不同，直接返回false。

!== 不全等

​ 不会做类型转换，必须类型也相同。如果类型不同，直接返回true。

布尔值比较时：

​ 先将其他类型转换为布尔类型，在进行比较。

7.7 条件运算符

三元运算符

语法：

判断语句？语句一：语句二

条件运算符在执行的时候，首先对条件表达式进行求值，如果值为true就执行表达式一，如果为false就执行表达式二。

7.8 运算符优先级
  • . [] new
  • ()
  • ++ –
  • ! ~ +(单目) -(单目) typeof delete
  • % * /
  • +(双目) -(双目)
  • << >> >>>
  • < <= > >=
  • == !== ===
  • &
  • ^
  • |
  • && （短路）
  • ||
  • ?:
  • = += -= /= %= <<= >>= >>>= &= ^= |=
  • ,

8 代码块

js中使用一对大括号来给一系列代码语句分组。

一个代码块中的语句要么都执行，要么都不执行，代码块只具有分组功能，不具备区分变量适用范围的作用。

9 条件判断语句

是流程控制语句的一种，可以通过判断一个表达式的对错来控制流程。

if语句：

if(条件表达式){ //先判断if表达式后的条件表达式，如果为true即执行if

​ 语句； } 后的代码块。如果为false即向下判断。

else if(条件表达式){ //先判断if表达式后的条件表达式，如果为true即执行if

​ 语句；} else后的代码块。如果为false即向下执行。

else { //如果以上全部未判断成功即执行else中的代码块。

​ 语句；}

if(条件表达式){                    
   alert("");}						
else if(条件表达式){		
   alert("");}							
else {								
   alert("");}
switch语句:

switch 匹配需要类型和值必须一样

switch(变量名){ //先在switch后输入一个需要判断的变量名或者值

​ case 值1: //case后给出判断的值如果成功就会执行后面的语句，(全等比较！)

​ 判断成功的语句1； //直到碰到break；语句，如果不碰到将会一直执行。

​ break； //如果只想执行一句case语句，必须加break，否则将会继续执行后方的语句。

case 值2:

​ 判断成功的语句2；

​ break；

default:

​ 只要判断不成功就执行；

…………}

switch(变量名){                   
	case 值1: 										
		alert();
		break；							
case 值2:									
        alert();
        break；
default:
        alert();
…………}

10 循环语句

通过循环语句可以实现对一部分语句的循环实现。

while循环

while(判断语句){ //进入循环之前先判断，如果为true即执行循环体，执行完循环体再进行

​ 循环体语句； //判断语句的判断，如果成功，再进行循环体的执行，如果失败退出循环

}

while(Var==100){  //如果判断语句中写 true 即这个循环会一直。可以使用break来推出循环。
    循环体语句;
}
for循环

for(初始化语句 ; 条件判断语句 ; 更新表达式){

​ 循环体语句l;

}

for(i in 数组名或者属性){ //用来遍历用户定义的属性或者数组。

​ 循环体语句l;

}

for(var i=0;i<100;i++){
    循环体语句；
}
do while循环

do{ //先执行一遍循环体再进行条件的判断。

​ 循环体语句；

}while(条件判断语句)；

break和continue

break可以用来退出循环语句和switch语句。

循环嵌套的时候，break只会影响最近的循环，不会影响其他循环。

continue可以结束当前循环，开始下一次的循环。

break：

//可以为循环语句创建标签名，使内层break可以作用于外层循环。
labelName:
for(){
    if(){
        break labelName;   //break 标签名；的形式可以结束指定循环语句。
    }
}

continue:



for(){
    if(){
        continue;   //用于结束当次循环，跳过当次循环，之后继续进行
    }
}

return：

直接跳出函数，无视下面代码。

10* 数组

数组： 就是一组数据的集合，存储在单个变量下的优雅方式。

数组中的元素没有类型限制，可以存储多个类型的数据。

10.1 数组定义：
  1. 利用new创建数组
var arr = new Array();
  1. 利用字面量创建数组

var arr = [1,2,3];

10.2 数组的访问

通过索引来访问，设置，修改对应的元素。

数组名[索引],数组的索引以0为开始。

arr[0] = 1;

如果访问数组下标超出返回undefined。

遍历：

for(var i = 0 ; i < arr.length;i++){
  	arr[i];
}
10.3 数组的扩容

数组可以使用.length属性类实现访问，修改数组的长度

  • 数组长度 length属性会自动检测数组的长度。

修改数组的长度时，如果增加了数组的长度，未赋值的数组元素为undefined

不能直接给数组名赋值，否则会覆盖所有的数组元素。

arr.length；   //得到数组的长度
arr.length = 10；  //修改数组的长度

修改索引号将把指定数组的长度也修改。如果是扩容，为赋值的数组将为undefined。

也可以直接使用数组名[扩充索引]格式直接对扩充索引赋值。

arr[0,1,2];
arr[3] = 3;   //直接使用扩充索引修改数组长度。

11 对象(自定义)

对象是一个具体的实物。在js中对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如 字符串，数值，数组，函数。

对象由属性和方法组成的：

属性：事物的特征，在对象中使用属性来表示。

方法： 事物的行为，在对象中使用方法来表示。

內建对象：

  • 在es标准中定义的对象，在任何es实现中都可以使用；比如Math，Number，Boolean，Function，Object

宿主对象；

  • 由JS的运行环境中提供的对象，主要指浏览器提供的对象。比如BOM DOM。

自定义对象：

  • 由开发人员自己定义的对象。
创建对象：

使用new关键字调用的函数，是构造函数，构造函数是专门用于创建对象的函数。

使用typeof函数检查一个对象时，返回值为object。

还可以通过字面量的形式新建对象。

在js中由三种方式可以创建对象。

  • 利用字面量创建对象。
  • 利用new Object创建对象。
  • 利用构造函数创建对象。
使用字面量创建对象

对象的字面量是 {} 花括号

  1. 类中属性或者方法使用键值对的形式： 属性名 ： 属性值，
  2. 多个属性或者方法之间使用逗号隔开。
var obj = {
  uname: 'name',
  age: '22';
  sayHi: function(){
  	console.log('打印输出');
}
使用new Object创建对象

使用 var 对象名 = new Object();来创建对象。

var obj = new Object();   //创建了一个空对象
obj.name = 'objname';    //向空对象中追加属性
obj.age = 18;
obj.fun = function() {
  方法体；
}
使用构造方法创建对象

如果要创建多个对象，且这些对象中有很多属性和方法相同，可以利用函数的方法，将重复的代码封装到函数中，这个函数被称为构造函数。

构造函数就是把对象中的一些相同的属性和代码抽象出来封装到函数中。

使用构造函数属性和方法前必须添加this

使用构造函数创建对象的过程称为对象的实例化。

//构造函数规范：
function 构造函数名(形参){
  this.属性名 = 形参；
  this.方法 = function(){}
}
//调用构造函数
var 对象名 = new 构造函数名(){}

new 关键字执行过程：

  1. new 构造函数再内存中创建一个空的对象，
  2. this 就会执行创建的对象。
  3. 执行构造函数里的代码，为空对象添加属性和方法。
  4. 返回这个对象。
使用对象

调用对象的属性采取 对象名.属性名，属性名不能单独调用，只能通过对象调用。

调用对象属性还可以采取 对象名[‘属性名’]

var obj = {
  uname: 'name',
  age: '22';
  sayHi: function(){
  	console.log('打印输出');
}

console.log(obj.age);
console.log(obj['age']);

调用对象的方法： 对象名.方法名();只能通过对象调用。不能单独调用。

var obj = {
  uname: 'name',
  age: '22';
  sayHi: function(){
  	console.log('打印输出');
}
obj.seyHi();
添加属性

在对象中保存的值称为属性。

对象的属性名不强制遵守变量名的命名规范。但是有特殊的存取格式：对象名[“属性名”] = 属性值； //该方式可以使用变量值

向对象中添加属性语法：对象名.属性名 = 属性值;

对象名.属性名 = 函数名 ； //此时调用函数名和调用对象名.属性名是等价的。

读取对象

读取对象中的属性语法：对象名.属性名； 对象名[属性名]; //可以将变量填入，会转换成字符串。

如果读取对象中没有的属性不会报错，会返回一个undefined.

修改对象的属性

修改对象的属性值：对象名.属性名 = 新值；

删除对象的属性

删除对象的指定属性：delete 对象名.属性名；

方法

在对象中定义的函数叫做对象的方法，调用方式： 对象名.方法名()

for in 循环

for in 循环可以对对象和数组进行遍历操作。

使用for in循环语句，对象中有几个属性，循环体就会执行几次，for in 循环可以遍历方法。

var obj = {a : "a",b : "b",c : "c"}

for(var i in obj){
    console.log(i);     //输出对象中的所有属性名
    console.log(obj[i]);     //输出对象中的所有属性值
}
构造函数

创建一个构造函数，专门用于创建对象

构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的只是调用时要加 new 并且首字母大写。

使用同一个构造函数创建的对象称为一类构造对象。

function Dog() {
    
}
var dog = new Dog();  //构造的是Dog类型的对象
对象中方法的两种定义方式

1.直接在构造函数中定义方法，每次执行构造函数都会执行其中的构造函数。

this.fun = function(){ 函数体 }

2.在构造函数中只定义this.s = fun，然后在构造函数外定义函数。

function fun(){ 函数体 } //在全局命名空间中定义，不安全。会污染命名空间。

instanceof 运算符

对象名 instanceof 类名 可以检查一个对象是否是一个类的实例。

原型对象 prototype

我们创建的每一个函数都有一个prototype属性，对应着一个对象，就是原型对象。

普通函数的原型对象没有任何用处，构造函数的原型对象相当于创造了一个类共有的空间。

原型对象相当于一个公共的区域，所有同一个类的实例都可以访问这个原型对象，可以将所有对象中的共有内容设置到原型对象中。

当访问对象中的属性或者方法时，会现在对象自身中寻找，如果找到就会直接使用。如果找不到就会去类的原型对象中寻找，找到后直接使用。

function Cql() {
            this.name = "这是属性";
            this.old = "这是属性";
            Cql.prototype.s = "这是原型对象中的值"
            Cql.prototype.a = function () {
                alert("原型对象中的函数");
            }
        }
var cql = new Cql();
cql.a();     //调用原型对象中的函数。
in

通过in可以判断对象中是否含有相应的属性值，也会查找原型对象中有无相应的属性名。

hasOwnProperty方法

通过 对象名.hasOwnProperty(“属性名”) 方法可以检查这个对象中是否含有对应的属性，但是不会检查原型对象中。

toString方法

每个对象中都有tostring()方法，tostring()方法的返回值就是输出对象名时输出的内容。

toString()方法是在_proto_的_proto_中，只要在类的prototype中重写tostring()方法，就可以使这个类型的每一个对象都使用此toString()方法，只在一个对象中重写tostring()方法，只是在此对象中可以使用。

12 函数

可以将要封装的代码以字符串的形式传递给构造函数

构造函数语法：var 函数名 = new Function(“函数代码”);

函数定义之前加 var 可以在任意位置调用。

//创建函数
var 函数名 = Function(){"console.log("输出语句")"}

funtion 函数名(形参){
    console.log("输出语句");
}
//调用函数,如果有形参，可以指定对应的实参。
函数名();
12.1 函数参数

声明函数语法：Function 函数名(形参，形参){ 函数代码 }

但是函数不会检查实参的类型，可能会收到不合法的数据。(最好进行参数的检查）

函数也不会检查参数的数量，多余的参数将不会赋值。

封装的函数不会立刻执行。需要调用 函数名() 之后才会执行。

形参可以是变量，也可以是对象(函数也是对象).

函数可以嵌套使用。

//创建函数
var 函数名 = Function(实参);

funtion 函数名(形参){
    console.log("输出语句");
}
//调用函数,如果有形参，可以指定对应的实参。
函数名();
***************************************
    函数名(函数名)；     //调用函数，并且传入一个对象，这个对象也是个函数

	函数名(函数名())		//调用函数，并且将另一个函数的返回值作为实参。
12.2 函数返回

在函数的最后使用return来返回一个值，在调用函数时用一个变量接受。

函数中，在return 后的代码都不会执行。

funtion 函数名(形参){
    return 返回值;
}

var 变量名 = 函数名(参数)；
12.3 匿名函数

函数调用方式： 函数名()

匿名函数调用方法： ( function(){函数体} ) () //定义完立即调用

匿名函数调用方法： ( function(){函数体} () ) //定义完立即调用


var 变量名 = (funtion (形参){                //定义完立即调用    
    return 返回值; 
})(参数)；
12.4 this 语句

函数会传一个隐含的参数this，this指向一个对象。

这个对象被称为函数执行的上下文对象。

根据函数的调用方式的不同，this会指向不同的对象。

  1. 以函数的形式调用时，this永远都是window
  2. 以方法的形式调用时，this就是调用方法的那个对象。

this广义：

  • 在全局作用域或者普通函数中的this指向全局对象window。(定时器中的this指向window)
  • 方法调用中谁调用this指向谁。
  • 构造函数中this指向构造函数的实例。

13作用域

指定变量再指定范围内可以使用，为了提高程序的可靠性和减少命名冲突。

  • 全局作用域： 整个script标签或者一个单独的js文件。
  • 局部作用域：在函数的内部。
局部变量和全局变量

全局变量： 在全局作用域下声明的变量。在函数内部没有声明直接赋值的变量也是全局变量。

​ * 全局变量在代码的任何位置都可以使用。

局部变量： 在局部作用域下的变量。函数的形参也可以看作局部变量。

​ * 局部变量只能在该函数内部使用。

执行效率：

  • 全局变量在任何地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占用内存。
  • 局部变量只能在函数内部使用，当其所在的代码块被执行时，会被初始化，当代码运行结束后，会被销毁，因此更节省内存空间。
块级作用域

js中es6才开始使用块级作用域。

块级作用域就是{}包含的作用域。

作用域链

根据内部函数可以访问外部函数变量这种机制，用链式查找哪些数据能被内部函数

访问，就称作作用域链。

作用域链的访问规律：就近原则。

13.5 变量提升

js引擎运行js分为两步： 变量提升 代码执行

变量提升js引擎会把js里面所有的var和function提升到当前域最前面。

代码执行按照diamagnetic书写的顺序从上往下执行。

浏览器预解析 包含变量提升

1.变量提升

变量提升分为变量提升(变量提升) 和 函数提升(函数提升)

  1. 变量提升就是把所有变量声明提升到当前作用域的最前面，不提升赋值操作。
  2. 函数提升就是把所有的函数声明提升到当前作用域的最前面，不调用函数。
var fun = function(){
  console.log();
}
fun();    //函数表达式调用必须写在函数表达式的下面，因为只提升变量声明，未提升函数声明。
var a = b = c = 9;   //相当于： var a = 9; b = 9; c = 9;
var a=9,b=9,c=9;   //相当于：  var a=9； var b=9 ; var c=9;
					// var 表示定义局部变量，不带var表示定义全局变量

13* 垃圾回收

在js中无法被再次使用的内存空间就是垃圾，无法主动处理垃圾，只能由浏览器自己处理垃圾，垃圾积攒过多会导致程序运行过慢，消耗内存空间。

使用完变量后，如果想利用垃圾处理系统处理掉此变量，就给相应的变量或者对象名赋值为NULL 浏览器中的垃圾处理系统就会自动处理。

14 对象(內建)

內建对象就是浏览器自带的对象，不是用户定义的。提供了一些常用或者简单的功能。

对象是一个具体的实物。在js中对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如 字符串，数值，数组，函数。

对象由属性和方法组成的：

属性：事物的特征，在对象中使用属性来表示。

方法： 事物的行为，在对象中使用方法来表示。

14.1 数组

数组也是一个对象，与其他普通的对象功能类似，也是用来储存一些值的。

数组对象不同于普通对象使用字符串作为属性名，数组使用索引操作元素。

数组的存储性能比普通对象好，常使用数组来存储一些数据。

var arr1 = new Array();  //创建了一个空数组
var arr2 = new Array(2);  //创建了一个长度为2的空数组
var arr3 = new Array(2,3); //等价于[2,3]创建了一个长度为2的数组，其中元素为 2和3。
14.1.1数组的属性

  • 数组定义语法：

    ​var 数组名 = new Array();

​ var 数组名 = [ , , ,]

  • 向数组中传入元素：

    数组名[下标] = 值；

1. length
  • 查询数组中有多少元素(也可以设置数组中有多少元素)：

​ alert( 数组名.length); //数组对象中length属性中存储这顺序数组中的元素个数

​ 数组名.length = 数值 //设置数组中长度为多少，如果超出，超出的元素将会被删除。

  • 向顺序数组最后一个元素赋值

    数组名[数组名.length] = 值； //length是数组最后一个元素的下标加1

//定义数组对象
								//创建一个10个元素的数组
var arrayName = new Array();        ||  var arrayName = new Array(10); 
								//创建一个数组,其中有一个元素是10
var arrayName = [];				|| var arrayName = [10];

//向数组中传入元素：
arrayName[0] = 1;
arrayName[1] = 1;
arrayName[2] = 1;
//可以不按顺序赋值，中间的值会被留空，如果输出未赋值的数组元素，不会报错，会输出undfined
arrayName[10] = 1;

//向顺序数组最后一个元素赋值

arrayName[arrayName.length] = 1；
14.1.2 数组的方法
instanceof && isArray()

检测变量是为数组

var arr = [];
console.log(arr instanceof Array);
Array.isArray(arr);
方法名说明返回值
push(参数，参数)末尾添加一个或者多个元素返回新的长度
pop()删除数组最后一个元素，把数组长度减一，无参数，修改原数组返回新的长度
unshift()像数组的开头添加一个或者更多元素，修改原数组返回新的长度
shift()删除数组的第一个元素，数组长度减一，无参数，修改原数组返回第一个元素的值
push()

该方法可以向数组的末尾添加一个或者多个元素，并返回数组新的长度。

可以将要插入的元素作为方法的参数传递，这些元素将会自动的添加到数组的末尾。

该方法会将数组新的长度作为返回值返回。

var arrayName = new Array();
//push()将会将参数添加到数组的末尾，并且返回数组中有多少个值。
var len = arrayName.push("这是第一个元素","这是第二个元素","这是第三个元素");
pop()

该方法会删除数组最后一个元素，并且将最后一个元素作为返回值返回。

var arrayName = ["这是第一个元素","这是第二个元素","这是第三个元素"];
//pop()方法会返回数组最后一个元素的值并删除最后一个值。
var i = arrayName.pop();
unshift()

unshift()方法用于在数组的前方插入一个或者多个值，值用参数接受并传递。

并且插入之后还会返回数组元素的个数。

var arrayName = ["这是第一个元素","这是第二个元素","这是第三个元素"];
//unshift()在数组的前方添加值，返回数组元素的个数。
var i = arrayName.unshift("这是第一个元素","这是第二个元素");
shift()

shift()方法用于在数组前方删除第一个元素，并将被删除的元素作为返回值返回。

var arrayName = ["这是第一个元素","这是第二个元素","这是第三个元素"];
//shift()在数组的前方删除值，返回数组元素的个数。
var i = arrayName.shift();
forEach()

forEach()需要传入一个回调函数作为参数，在forEach()中，数组有几个元素就会调用回调函数几次，每次执行，浏览器会将遍历到的元素以实参的形式传入到回调函数，可以在回调函数中定义形参来接受函数传入的值。

forEach()会传入三个值：

  • 当前元素的值
  • 当前元素的索引
  • 当前数组
 arr.forEach(function(value,index,array){
            console.log(value);  //输出传入元素的值
     		console.log(index);  //输出传入元素的下标
    	    console.log(array);  //输出传入数组
        })
indexOf()

返回数组只当元素的索引号

只返回第一个满足条件的索引号

如果没有找到返回-1

var arrayName = ["这是第一个元素","这是第二个元素","这是第三个元素"];
console.log(arrayName.indexOf("这是第二个元素"));   //1
lastIndexOf()

返回数组只当元素的索引号

只返回最后一个满足条件的索引号

如果没有找到返回-1

var arrayName = ["这是第一个元素","这是第二个元素","这是第三个元素"];
console.log(arrayName.lastIndexOf("这是第二个元素"));   //1
slice()

slice()可以用来从数组中提取元素并返回。

该方法不会影响原数组，而是将截取到的元素封装到一个新的数组中并返回。

可以传递两个参数：

  • 第一个参数：截取的开始位置，包含开始索引。

  • 第二个参数：截取的结束位置，不包含结束索引。----可以省略不写，会截取开始索引以后的所有元素。

    可以传递负值，传递负值会从后往前计算。

var arrayName = ["这是第一个元素","这是第二个元素","这是第三个元素"];
//从第一个元素开始，到第二个元素结束。包含1不包含2，不会改变原数组。
var arrayName2 = arrayName.slice(1,2);
splice()

会弹出数组中的指定值。

会影响到原数组，会将指定的元素从原数组中删除。并将删除的元素作为返回值。

可以传递多个参数：

  • 第一个参数：表示开始的位置的索引。
  • 第二个参数：表示删除的数量。
  • 其他参数：传递一些新的元素，这些元素将会自动的插入到开始索引的前边。

如果第二个参数是零，就是单纯的在第一个参数的索引前添加相应的元素。

var arrayName = ["这是第一个元素","这是第二个元素","这是第三个元素"];
//从第一个元素开始，删除两个元素，然后再将所指定的元素添加到索引为1的前边。
var arrayName2 = arrayName.splice(1,2,"添加的元素","添加的元素");   
//单纯的再索引为1前添加指定的元素。
var arrayName2 = arrayName.splice(1,0,"添加的元素","添加的元素");
concat()

用于链接两个或者多个数组，并返回新的数组。

该方法不会对原来的数组产生影响。

语法：

  • var 新数组名 = 数组1.concat(数组2)
  • var 新数组名 = 数组1.concat(数组2，数组3)
  • var 新数组名 = 数组1.concat(数组2，数组3，“元素”)
//将连接的数组返回，不会改变原来的各个数组 。
var NewArrayName = ArrayName.concat(ArrayName1,ArrayName2);
toString()

toString()把数组换成字符串，逗号分隔每一项

var arr = ['d','b','c'];
        var str = arr.toString();
        alert(str);
join()

该方法可以将一个数组转换为一个字符串

该方法不会对数组产生影响。而是将转换后的字符串作为结果返回。

可以在join()中指定一个字符串作为参数，这个字符串会成为数组元素连接的中间字符。

如果不指定连接的字符，将会默认使用逗号作为连接符。

语法：

  • var 新数组名 = 数组名.join(“字符”)；
var NewArrayName = ArrayName.join("&");
reverse()

给方法用来反转数组。

该方法会直接修改原数组。

语法：

  • 数组名.reverse();
ArrayName.reverse();
sort()

可以用来对数组的元素进行排序。

也会影响原数组，默认使用的是Unicode编码排序。

语法：

  • 数组名.sort();

即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序，有时对数字进行排序时，会得到错误的结果。

可以在sort中指定回调函数，传入两个实参，根据函数的返回值判断是否会交换顺序，返回正数时会交换顺序，返回0时默认相等，不会交换顺序，返回负值时不会交换顺序。

语法：

  • 数组名.sort(function (a,b){

    ​ return: a-b;

    });

ArrayName.sort();

ArrayName.sort(function(a,b){
    return a-b;
});
14.2 函数

函数也是对象，也拥有属性和方法。

函数就是封装了一段可以被重复使用的代码块，可以通过此代码块实现大量代码的重复使用。

函数需要在定义之后调用才会执行。

函数声明方式

利用函数关键字自定义函数(命名函数).

function 函数名(){
  
}

函数表达式。

  • 函数表达式声明方式和声明变量差不多，只不过变量里存储的是值，而 函数表达式中存储的是函数。
  • 可以通过 变量名() 方式调用函数。
var 变量名 = function(){
  
}
形参和实参

声明函数时，可以在函数名称后的小括号中添加一些参数，这些参数被称为形参，而在调用该参数时，同样也需要传递相应的参数，这些参数被称为实参。

  • 形参：形式上的参数，函数定义的时候传递的参数，当前并不知道具体的值。
  • 实参：实际上的参数，函数调用用的时候传递的参数，实参时传递给形参的。

实参和形参不匹配：

  • 如果实参的个数和形参的个数一致，则正常输出结果。
  • 如果实参的个数多于形参的个数，会取到形参的个数。
  • 如果实参的个数小于形参的个数，未被传递实参的形参会附上默认值: undefined。
函数的返回值：

函数的返回值使用return语句返回指定数据。

只要函数遇到return就会将后面的结果返回到函数的调用者。

function 函数名(){
  return 返回值；
}
  • return只能返回一个值，返回的是最后一个值。
  • 需要使用return返回多个值时可以封装成数组。
  • 所有函数都有返回值，如果未指定return则返回undefined。
函数的属性
arguments

arguments存储这传递过来的实参。

arguments是一个伪数组。伪数组可以使用length和按照索引的方式进行存储但是不能使用真正数组中的一些方法。

只有函数才有arguments对象。

在调用函数时，浏览器每次都会传递两个隐含的参数，

  1. 函数的上下文对象 this

  2. 封装实参的对象 arguments

    ​ -arguments是一个类数组对象，他也可以通过索引来操作数据，也可以获取长度。

    - 在调用函数时，传递的实参都会在arguments中保存。arguments是一个类数组对象。
    • 即使不定义形参，也可以通过arguments来使用实参，只不过比较麻烦。
      - arguments[0] 表示第一个实参。
      - arguments[1] 表示第二个实参。
    • arguments.callee 属性：
      • 是当前正在运行的函数对象。
function fun(){
    alert(arguments[0];)
}

fun("第一个形参","第二个形参")
------------------------------------------------
function fun(){
    alert(arguments.callee);  //这条语句会输出当前这个函数所有的语句,包括注释
}
函数的方法
call() 和 apply()

这两个函数都是函数对象的方法，需要通过函数的对象来调用。

当对函数调用call()和apply()都会调用函数执行。

在调用call()和apply()可以将一个对象指定为第一个参数。

​ 此时这个对象将会成为这个函数执行时的this。

call()方法可以将实参在对象之后依次传递，

apply()方法需要将实参封装到数组中在对象之后统一传递。

语法：

function 函数名 ( ){

​ 函数执行语句；

}

函数名.call(对象名);

函数名.apply(对象名);

回调函数

可以在定义函数时定义一个函数形参，当调用函数时传递函数到实参，在函数最后调用函数。这时候这个函数被当作一个普通的实参处理。

function fun(callback){
  callback();
}

function callback(){
  console.log("这是一个回调函数")；
}

function fun(function(){
  console.log("这是一个回调函数")；
}){
  callback();
}
节流阀

节流阀可以强制使一个函数执行完毕再去执行下一次函数。

利用回调函数，添加一个变量来控制，锁住函数和解锁函数。

var flag = true;
function fun(callback){
  if(flag){      //判断是否能执行
    	falg = false；
     	//函数执行代码
     }
  callback();
}

//回调函数
function callback(){
  flag = true;
}
14.3 Date

Data对象封装着一个时间对象，需要在构造函数中传递一个表示时间的字符串作为参数。

Data只能通过构造函数来实例化日期对象。

日期的格式 月份/日/年 时:分:秒

//直接调用封装着代码运行时的时间。
var date = new Date();
alert(date);
//传入参数调用时封装的传入参数指定的时间。
var date = new Date("12/03/2011 11:10:30");
alert(date);
  • 如果没有跟参数返回当前系统的当前时间。
  • 参数常用： 数字型 2018，1，1 字符串”1018-1-1 8:8:9“
  • 数字型的月份会比实际月份大一。
Data的方法

获取当前时间

//获取当前时间以时分秒形式输出
function getTime(){
            var time = new Date;
            var h = time.getHours();
            h = h < 10?"0" + h : h;
            var m = time.getMinutes();
  			m = m < 10?"0" + m : m;
            var s = time.getSeconds();
  			s = s < 10?"0" + s : s;
            return h + ":" + m + ":" + s ;
        }

//获得当前时间以年月日星期格式返回
function getDate(){
            var date = new Date;
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
            var day = date.getDay();
            return year + "年" + month + "月" + dates + "日" + arr[day] ;
        }
getDate()

获取当前日期对象的日期。

var date = new Date("12/03/2011 11:10:30");
alert(data.getDate());
getDay()

获取当前日期是周几。

返回一个0~6的数。周日返回的是0。

x var date = new Date("12/03/2011 11:10:30");
alert(data.getDay());
getMonth()

获取当前时间对象的月份。

返回0~11的值(与中国月份并不等值)

​ 0 代表 1月，11 代表 12月

getFullYear()

获取当前对象的年份，以四位数字返回年份

getYear()

获取当前对象的年份，以两位数字返回年份。

不推荐使用，用getFullYear()方法替代。

getTime(),valueOf()

获取当前日期对象的时间戳。

时间戳：指从格林威治标准时间的1970年1月1日，0时0分0秒到当前日期所花费的毫秒数。

标准时间的换算单位非常繁杂，使用时间戳可以减少换算量。

计算机底层保存时间都使用的是时间戳。

var time = +new Date();
var date = new Date();
date.valueOf();
date.getTime();
Date.now();

倒计时

//接收时间，得到倒计时时间
        function countDown(time){
            var nowTime = +new Date(); //获得当前时间
            var inputTime = +new Date(time); //获得输入时间
            var times  = (inputTime - nowTime) / 1000;//获得相差秒数
            var d = parseInt(times/60/60/24);
         	d = d < 10?"0" + d : d;
            var h = parseInt(times/60/60%24);
          	h = h < 10?"0" + h : h;
            var m = parseInt(times/60%60);
          	m = m < 10?"0" + m : m;
            var s = parseInt(times%60);
          	s = s < 10?"0" + s : s;
            return d + "天" + h + "时" + m + "分" + s + "秒"; 
        }
        alert(countDown("2022-2-26 12:00:00"));
14.4 Math

Math和其他的对象不同，它不是一个构造函数，它属于一个工具类不用创建，它里面封装了数学运算相关的属性和方法。

  • Math并不是构造器，所有的方法和属性都是静态的。

使用举例：

alert( Math.abs(-1))   //输出输入数字的绝对值
Math.random()

可以生成一个0-1之间的随机数。

生成一个 x-y之间的随机整数：

  • Math.round(Math.random() * (y-x) +x);

    //返回两个数之间的整数包含两个数
function getRandom(min,max){
  return Math.floor(Math.random) * (max - min + 1) + min;
}

取整函数

  • Math.floor() 向下取整
  • Math.ceil() 向上取整
  • Math.round() 四舍五入（.5往大了取）
14.5 包装类

基本数据类型

​ String Number Boolean Null Undefined

引用数据类型

​ Object

在JS中为提供了三个包装类，通过三个包装类可以将基本数据类型的数据转换为对象：

​ String():可以将基本数据类型字符串转换为String对象。

​ Number():可以将基本数据类型的数字转换为Number对象。

​ Boolean():可以将基本数据类型的布尔值转换为Boolean对象。

注意：实际应用中不会使用基本数据类型的对象，如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预计的结果。

方法和属性能添加给对象，不能添加给基本数据类型。

​ 当对基本数据类型的值调用属性或者方法时：（如： str.toString() )

  		浏览器会临时使用包装类将其转换为对象，然后再调用对象的属性和方法。

​ 调用完之后，会再将其转换为基本类型。

string类的属性

底层字符串是以字符数组的形式储存的。可以使用 字符串名[下标] 的方式访问指定字符。

length: 调用 类名.length 可以返回当前字符串的长度。

console.log(str.lengh);
//基本包装类型：就是把简单数据类型包装成为了复杂数据类型。
1.把简单数据类型把包装为复杂数据类型。基本数据类型就有了属性和方法。
var temp = new String('andy');
2.把临时变量的值给str
str = temp；
3.销毁这个临时变量
temp = null；

字符串的不变性:

  • 字符串不可变,指的是里面的值不可变,虽然看上去可以改变内容,但是其实是地址变了,内存中开辟了一个新的内存空间.
string类的方法：

字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成后会返回一个新的字符串.

charAt()

获取指定位置的字符，相当于 字符串名[下标]

不会改变原来的字符串。

语法：

​ var 新字符串名 = 字符串名.charAt(下标);

var strName = str.charAt(2);   //相当于：
var strName = str[2];  //h5新增,在java中没有这种用法

//获取字符串中字符的个数
charCodeAt()

获取指定字符串指定下标的字符编码(Unicode编码)

多用于判断用户按下哪个键.

不会改变原字符串。

语法：

​ var 新字符串名 = 字符串名.charCodeAt(下标);

var strName = str.charCodeAt(2);
fromCharCode()

这个函数需要通过构造对象去调用

接受一个Unicode编码，返回对应的字符。

语法：

​ var 字符串名 = String.fromCharCode(编码);

var strName = String.fromCharCode();
concat()

可以链接两个或多个字符串

作用和 + 号一样,+号方式更加常用

不会改变原来的字符串

语法：

​ var 新字符串名 = 字符串名.concat(" " ," ");

var strName = str.concat(" " ," ");
indexOf() & lastIndexOf()

indexOf():

​ 该方法用于检测一个字符串中是否含有指定的内容

​ 如果字符串含有指定的内容，就会返回第一次出现的索引

​ 如果没有找到指定的内容，则会返回-1

​ 可以指定第二个参数，从指定位置开始查找

lastIndexOf():

​ 该方法的用法和indexOf()一样，不同的是从后往前找。

语法：

​ var result = 字符串名.indexOf(“str”,下标)；

var result = str.indexOf("str");  //在变量str中查找'str'字符串,从最开始开始查找
var result1 = str.indexOf("str",2);  //在变量str中查找'str'字符串,从下标为2开始查找
slice()

可以从字符串中截取指定的内容

不会影响原字符串，而是将截取的内容返回。

参数：

​ 第一个：开始位置的索引(包括开始位置)

​ 第二个：结束位置的索引(不包括结束位置)

​ 如果省略第二个参数，就会截取到以后所有的字符

​ 可以传递负数，会从后往前计算。

语法：

​ var result = 字符串名.slice(开始位置，结束位置);

var result = str.slice(1,3);
substring()

可以用来截取一个字符串，和slice()类似

参数：

​ 第一个：开始位置的索引(包括开始位置)

​ 第二个：结束位置的索引(不包括结束位置)

不同之处：

​ 这个方法不能接受负值，如果传递了负值，会默认使用0

​ 而且会自动调整参数的位置，如果第二个参数小于第一个，会自动交换位置

substr()

用来截取字符串

参数：

  1. 截取开始位置的索引
  2. 截取的长度

语法：

​ var result = 字符串.substr(开始位置，长度);

var result = str.substr(1,1)
split()

可以将一个字符串拆分为一个数组(join将数组转换为字符串)

不会影响到原来的字符串

参数：

​ 需要一个字符串为参数，将会根据该字符串去拆分数组(可以传递正则表达式)

​ 如果传递空串会将字符串每个字符都拆分,使用正则表达式也会全部拆分

语法：

​ var result = 字符串.split(“分隔符”);

var result = str.solit(",");
toUpperCase() & toLowerCase()

将一个字符串转换为全大写或者全小写

不会影响到原来的字符串

语法：

​ var result = 字符串.toUppercase();

​ var result = 字符串.toLowerCase();

var result = str.toUppercase();
var result = str.toLowerCase();
search()

可以搜索字符串中是否含有指定的内容

如果搜索到指定的内容,则会返回第一次出现的索引,如果没有搜索到,会返回-1

可以接受正则表达式作为参数,然后会根据正则表达式去检索字符串

语法:

​ var result = 字符串.search(‘str’);

​ var result = 字符串.search(/str/);

	var result = str.search('str');

	var result = str.search(/str/);
match()

可以根据正则表达式,从一个字符串中将符合条件内容提取出来

默认情况下match只会找到第一个符合要求的内容,找到以后就会停止检索

​ 可以设置正则表达式为全局匹配模式,这样就会匹配到所有的内容

​ 可以为一个正则表达式设置多个匹配模式,且顺序无所谓

match()语句会将匹配到的内容封装到一个数组中返回,即使之查询到一个结果

语法:

​ var result = 字符串.match(/[a-z]/ig);

var result = str.match(/[a-z]/ig);
replace()

可以将字符串中指定内容替换为新的内容

不会影响到原来的字符串

参数:

​ 1.被替换的内容,可以接受一个正则表达式为参数

​ 2.新的内容

默认只会替换第一个,删除指定的内容可以使用空串替换

语法:

​ var result = str.replace(“被替换的内容”,“新的内容”);

var result = str.replace("a","@");
14.6 正则类

创建正则表达式对象

语法：

​ var 类名 = new RegExp(“正则表达式”,“匹配模式”)

​ var 类名 = /正则表达式/匹配模式

var reg = new RegExp("","");   /*输入字符串*/
var reg = /a/i

15 正则表达式

正则表达式用于定义一些字符串的规则。

​ 可以使计算机根据正则表达式，来检查一个字符串是否符合规则

​ 获取字符串中符合规则的内容提取出来

15.1 创建正则表达式

语法：

​ var 类名 = new RegExp(“正则表达式”,“匹配模式”) (可以传递变量)

​ var 正则名 = /正则表达式/匹配模式 (使用字面量创建，不能传递变量)

匹配模式(可以填写多个匹配模式,顺序无所谓)：

​ i 忽略大小写

​ g 全局匹配模式,会一直匹配下去

​ m 执行多行匹配

var reg = new RegExp("a","i");  //参数为字符串形式
var reg = /a/i
15.2 正则表达式的方法
test()

使用这个方法可以用来检测一个字符串是否符合正则表达式的规则

​ 如果符合则返回true，如果不符合则返回falst

严格区分大小写(可以添加匹配模式 i 改为不严格区分大小写)

语法：

​ var reg = new RegExp(“正则表达式”,“匹配模式”)；

​ reg.test(字符串);

var reg = /a/;
reg.test("abc");
15.3 正则匹配规则
正则: 集合

直接使用字符来匹配是否存在对应的字符,查找给定集合中的字符串

语法:

​ var reg = /字符串或字符/

var reg = /a/;
str = 'abc';
reg.test(str);         //匹配是否str中是否存在a字符
正则: 或 | []

只能表示一个字符

在正则表达式中可以使用 | 来表示或

在正则表达式中也可以使用 [] 来表示或

语法:

​ var reg = /字符串1 | 字符串2/ ；

​ var reg = /[字符串1字符串2]/ ；

var reg = /a|b/;
var reg = /[ab]/;
str = 'abc';
reg.test(str);         //匹配是否str中是否存在a字符或者b字符
正则: 省略 -

在正则表达式中可以使用 - 来省略中间的字符串(只有几种)

只能表示一个字符

语法:

​ [a-z] : 任意小写字母

​ [A-Z] : 任意大写字母

​ [A-z] : 任意字母

​ [0-9] : 任意0到9数字

var reg = /[a-d]/
str = 'abc';
reg.test(str);    //匹配字符串中是否含有a到d的字符
正则: [^] 非

在正则表达式中可以使用[^]来表示除了指定的字符串

只有在[]才表示非的意思,在[]外指代开头的意思

语法:

​ var reg = /[^字符串]/

var reg = /[^a]/
str = 'abc';
reg.test(str);    //匹配字符串中是否含有除了a以外的字符串
正则: 重复 {n} {n,m}

通过两次可以设置一个内容出现的次数

量词只对它前边的一个内容起作用

字符{n} 表示前边一个字符连续出现n次

如果是多个字符连续出现使用: (字符串){n} 的形式匹配

如果不确定连续出现几次可以使用: (字符串){n,m} 的形式匹配

语法:

​ var reg = /(字符串){n}/;

var reg = /(abc){2}/;    //匹配的是: abcabc
var reg = /abc{2}/;      //匹配的是: abcc
var reg = /abc{2,3}/;      //匹配的是: abcc 或 abccc
正则: 至少一个 n+

匹配任何包含至少一个n的字符串 相当于 {1,}

语法:

​ var reg = /ab+c/; //匹配abc,abbc等

正则: 零个或多个 n*

匹配任何包含零个或者多个n的字符串 相当于 {0,}

语法:

​ var reg = /ab*c/; //匹配ac,abc,abbc等

正则: 零个或一个 n?

匹配任何包含零个或者个的字符串 相当于 {0,1}

语法:

​ var reg = /ab?c/; //匹配ac,abc

正则: 开头 ^n

匹配以指定字符开头的字符串

语法:

​ var reg = /^a/; //匹配ac,abc,abbc等以a开头的字符串

正则: 结尾 n$

匹配以指定字符结尾的字符串

如果在正则表达式中同时使用^和$则要求字符串必须完全符合正则表达式:

reg = /^a$/ //只能匹配到只有a的字符串

var reg = /abc$/; //匹配c,ac,abc,abbc等以c结尾的字符串

正则：特殊字符

正则表达式中存在一些特殊意义的字符：

  • . -表示任意一个字符(除了换行分页)
  • \w -表示任意字母，数字，下划线 [A-z0-9_]
  • \W -表示除了任意字母，数字，下划线 [^A-z0-9_]
  • \d -表示任意数字 [0-9]
  • \D -表示除了数字 [^0-9]
  • \s - 表示空格
  • \S -表示除了空格
  • \b -表示单词边界
  • \B -表示除了单词边界
var reg = /\bcat\b /    // 检测有无cat这个单词
reg.test("this is a cats")    //没有cat，返回falst

16 Web APIs

Web API是浏览器提供的一套浏览器功能和页面元素的API(DOM和BOM)

web API主要是针对浏览器提供的接口,主要针对浏览器做交互效果.

Web API一般都有输入和输出(函数的传参和返回值),Web API很多都是方法(函数)

17 对象(DOM)

DOM
  • DOM,全称Document Object Model文档对象模型
  • js中通过DOM对html文档进行操作。
  • 文档： --文档表示的就是整个html网页文档,document表示
  • 元素： --页面的所有标签都是元素，使用element表示
  • 节点： --网页中的多有内容都是节点(标签，属性，文本，注释)，使用node表示。
  • 对象： --对象表示将网页中的每一个部分都转换为了一个对象
  • 模型： --使用模型来表示对象之间的关系，方便操纵对象
节点

节点：Node–构成html文档最基本的单位

常用节点分为四类：

  1. 文档节点：整个html文档
  2. 元素节点：html文档中的html标签
  3. 属性节点：元素的属性
  4. 文本节点：html标签中的文本内容，空白，换行

节点的属性：

node-Namenode-Typenode-Value
文档节点document9null
元素节点标签名1null
属性节点属性名2属性值
文本节点text3文本内容

buGCUH.png

事件

事件，就是文档或者浏览器窗口发生的一些特定的交互瞬间触发响应机制。

事件三要素： 事件源 事件类型 事件处理程序

javascript与html之间的交互式通过事件实现的

对应web应用来说，有下面这些代表性的事件：

​ 点击某个元素，将鼠标移动到某个元素上方，按下键盘上的某个键……

整个文档按照自上向下的顺序执行，如果js代码写在上面，很有可能会读取不到相应的对象。可以使用 window中的onload事件来控制js代码在页面加载完再运行

  • 当时间的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，事件对象中封装这当前事件相关的一切信息，比如：鼠标的坐标，键盘哪个按键被按下。
//给window绑定onload事件，只有页面加载完成之后才会运行相应的js代码，用于解决js代码在页面加载之前运行的问题
window.onload = function(){
    js代码 
}

<button id="btn_Id" onclick="">这是一个按钮</button>
    <script type="text/javascript">
      	//获取事件源 --> 注册事件 -->添加事件处理程序
        //获取id属性为btn_Id的标签对象
        var btn = document.getElementById("btn_Id");
        
        //设置对应对象的单击事件函数
        btn.onclick = function() {
            alert("点击成功");
        }
    </script>
属性此事件发生在何时…
onabort图像的加载被中断。
onblur元素失去焦点。
onchange域的内容被改变。
onclick当用户点击某个对象时调用的事件句柄。
ondblclick当用户双击某个对象时调用的事件句柄。
onerror在加载文档或图像时发生错误。
onfocus元素获得焦点。
onkeydown某个键盘按键被按下。
onkeypress某个键盘按键被按下并松开。
onkeyup某个键盘按键被松开。
onsubmit加载页面确认按钮被点击。
onmousedown鼠标按钮被按下。
onmousemove鼠标被移动。
onmouseout鼠标从某元素移开。
onmouseover鼠标移到某元素之上。
onmouseup鼠标按键被松开。
onreset重置按钮被点击。
onresize窗口或框架被重新调整大小。
onselect文本被选中。
onload重新加载页面
onunload用户退出页面。
onpageshow重新加载页面
onscroll滚动事件
属性描述
altKey返回当事件被触发时，“ALT” 是否被按下。
button返回当事件被触发时，哪个鼠标按钮被点击。
clientX返回当事件被触发时，鼠标指针的水平坐标。
clientY返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey返回当事件被触发时，“CTRL” 键是否被按下。
metaKey返回当事件被触发时，“meta” 键是否被按下。
relatedTarget返回与事件的目标节点相关的节点。
screenX返回当某个事件被触发时，鼠标指针的水平坐标。
screenY返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey返回当事件被触发时，“SHIFT” 键是否被按下。
DOM的属性

元素.innerHTML 获取元素内部的html代码(包括html标签)

对于自结束标签，此属性没有意义

元素.属性 获取元素的对应属性

​ 对于class属性需要使用 元素.className来读取，其他方式无法读取

元素.innerText

该属性可以获取到元素内部的文本内容，不识别html标签，是非w3c标准的。

和innerHTML类似，不同的是它会自动将html标签去除，只获取其中的文本

document.body

该属性保存着文档中body标签的引用

语法：

​ var body = document.body;

document.documentElement

该属性保存着html的根标签

语法：

​ var html = document.documentElement;

document.all

该属性保存着文档中全部的标签，等于： document.getElementTagName("*");

语法：

var all = document.all;

表单属性

先需要获取对应的表单元素。

type,value,checked,selected.disabled(被禁用)

DOM的方法

浏览器已经提供了文档的节点对象: document

可以在页面中直接使用，文档节点代表的是整个网页

核心思想： 获取对象 -》 操作对象

举例：

<body>
    <button id="btn_id">这是一个按钮</button>
    <script type="text/javascript">
        var btn = document.getElementById("btn_id");   //通过文档对象的的id名来获取对应的标签对象，更改标签对象的内容。
        btn.innerHTML = "Button"
    </script>
</body>
getElementById()

通过ID属性获取一个元素节点对象(id属性是唯一的)

返回的是一个封装好的对象，需要使用属性值来提取或者修改内容

如果未找到返回null

语法：

​ var 节点对象 = document.getElementById(“id属性”);

var ele = document.getElementById("id");
getElementsByTagName()

通过标签名获取一组元素节点对象(相同的标签名会有多个节点)

这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中去

即使查询到的元素只有一个也会封装到数组中

使用document.getElementsByTagName(“标签名”)；会获得当前页面上所有的指定标签名，封装成一个伪数组的形式返回。

语法：

​ var 节点对象 = document.getElementsByTagName(“标签名”)；

var ele = document.getElementsByTagName("标签名")；

可以使用父元素调用getElementsByTagName(“标签名”)来获取父元素内部的指定标签对象。

但是父元素必须是单个对象，不能是父元素数组

var ol = document.getElementsByTagName("ol");
        var li = ol[0].getElementsByTagName("li");
        console.dir(li);
getElementsByName()

通过name属性获取一组元素节点对象(相同的name属性会有多个节点)

这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中去

即使查询到的元素只有一个也会封装到数组中

属性： length innerHTML

语法：

​ var 节点对象 = document.getElementsByName(“name属性”);

var ele = document.getElementsByTagName("标签名")；
getElementsByClassName()

getElementsByClassName()是html5新增的方法

通过class属性获取一组元素节点对象(相同的class属性会有多个节点)

这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中去

此属性IE8及以下版本不支持

即使查询到的元素只有一个也会封装到数组中

语法：

​ var 节点对象 = document.getElementsByClassName(“class属性”);

querySelector()

通过css选择器来查询一个元素节点对象,是html5新增的对象

只会返回一个元素节点对象，如果有多个符合要求的节点对象，也只会返回第一个

在IE8中也可以使用

语法：

​ document.querySelector(“选择器”)；

document.querySelector("div .class")；
querySelectorAll()

通过css选择器来查询多个元素节点对象,是html5新增的对象

这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中去

即使查询到的元素只有一个也会封装到数组中

语法：

​ document.querySelectorAll(“css选择器”)；

获取子节点方法和属性
属性：

使用具体的元素节点调用

childNodes

表示当前节点的所有子节点，返回一个数组。

会获取包括文本节点在内的所有节点，不光是元素节点(换行居然也算!在IE8及以下版本不会将空白当成子节点)

语法：

​ var cns = 子节点对象.childNodes;

children

表示当前节点的所有子元素节点(仅仅是元素节点，不包含文本节点)

语法：

​ var cns = 元素节点对象.children;

	//获取指定所有节点中的元素节点
var dou = document.getElementsByClassName("doubao")[0];
        for(var i = 0;i<dou.childNodes.length;i++){
            if(dou.childNodes[i].nodeType = 1){
                console.log(ul.childNodes[i]);
            }
        }
firstChild

表示当前节点的第一个子节点(包括空白文本节点)

语法：

​ var cns = 元素节点对象.firstChild;

firstElementChild

获取当前元素的第一个子元素(只有元素节点)

不支持IE8及以下的浏览器

语法：

​ var cns = 元素节点对象.firstElementChild;

lastChild

表示当前节点的最后一个子节点(包括空白文本节点)

语法：

​ var cns = 元素节点对象.lastChild;

lastElementChild

获取当前元素的最后一个子元素(只有元素节点)

不支持IE8及以下的浏览器

语法：

​ var cns = 元素节点对象.lastElementChild;

方法：

通过具体的元素节点调用

getElementsByTagName()

返回当前节点的指定标签名后代节点

语法：

var ebt = 元素节点.getElementsByTagName(“标签名”);

获取父亲,兄弟节点的方法和属性
属性：
parentNode

获取当前节点的父节点(元素最近的父节点)

因为获取的是元素节点的父节点，所以获得是标签节点，不会是文本节点。

如果未找到返回null。

语法：

​ var cns = 元素节点对象.parentNode;

previousSibling

获取当前节点前一个兄弟节点(会获取空白的文本)

语法：

​ var cns = 元素节点对象.previousSibling;

previousElementSibling

获取当前节点前一个兄弟元素(不会获取到文本元素)

不支持IE8及以下的浏览器

语法：

​ var cns = 元素节点对象.previousElementSibling;

nextSibling

获取当前节点后一个兄弟节点(会获取空白的文本)

语法：

​ var cns = 元素节点对象.nextSibling;

nextElementSibling

获取当前节点前一个兄弟元素节点(不会获取到文本元素)

不支持IE8及以下的浏览器

语法：

​ var cns = 元素节点对象.nextElementSibling;

18 操作对象

1.创建方法
innerHtml

向指定元素中添加html语言。

如果创建多个元素时，采取拼接效率会比较低。如果采用数组形式拼接，效率会很高。

var ele= document.createElement("div");
ele.innerHtml = "<a></a>"
write()

创建元素，如果页面文档流加载完毕。再调用这句话，会导致页面重新绘制。

document.write("<a></a>");
createElement()

创建一个元素节点对象

需要一个标签名作为参数，会返回该标签名创建元素节点的对象.

如果创建多个元素时，效率会比较高。

语法：

​ var ele= document.createElement(“标签名”)

//创建一个div标签对象
var ele= document.createElement("div");
createTextNode()

创建一个文本节点对象

需要一个文本内容作为参数，会将根据该文本内容创建的节点返回

语法：

var text = createTextNode(“文本”);

//创建一个文本对象
var text= document.createTextNode("文本")
2.添加方法
appendChild()

向一个父节点添加子节点，如果已经有元素则在后面追加。

语法：

​ 父节点.appendChild(子节点)；

//创立一个元素节点
var ele= document.createElement("div");
//创立一个文本节点
var text= document.createTextNode("文本");
//将文本节点添加到元素节点中
ele.appendChild(text);
insertBefore()

可以在指定的子节点前插入新的字节点

语法：

​ 父节点.insertBefore(新节点,旧节点);

div.insertBefore(newEle,oldEle);
3.替换方法
replaceChlid()

可以使用指定的新节点替换旧节点

语法：

​ 父节点.replaceChild(新节点,旧节点)；

div.replaceChild(newEle,oldEle);
4.删除方法
removeChild()

可以删除一个子节点

语法：

​ 父节点.removeChild(子节点)；

div.removeChild(ele);
5.复制节点(克隆)
cloneNode()

调用该方法返回指定节点的一个副本

语法：

​ 节点.cloneNode() //浅拷贝 只会拷贝标签不会拷贝内容

​ 节点.cloneNode(true) //深拷贝 会拷贝标签和内容

var li = li.cloneNode()
6.取消默认行为

提交按钮和超链接会又默认的跳转行为，有时候需要取消。

有时需要取消页面上的默认事件，如复制，上下文菜单。

取消方法：

​ 在相应标签绑定的函数最后添加代码：

​ return ：falst；

​ 向helf属性中添加：

​ javascript:;

19. 操作对象的样式和属性

1.操作内联样式

通过js修改元素的样式：

语法： 元素.style.样式名 = 样式值;

注意：如果css的样式名中含有 - ，这种名称在接js中不合法，比如：background-color ，需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写。

background-color -》 backgroundColor

通过style属性设置的样式是修饰的内联样式，如果在非内联样式中样式后指定 !important属性，不会被js代码所改变。

var div = document.getElementById("相应id");      //通过id获取指定的节点
div.style.width = "22px";     //通过js修改相应元素的样式
2.读取内联样式

通过js读取元素的样式：

​ 语法： 元素.style.样式名;

注意：如果css的样式名中含有 - ，这种名称在接js中不合法，比如：background-color ，需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写。

读取到的***px是字符串，如果直接与数字相加是拼串操作。

通过style属性读取的是内联属性。

var div = document.getElementById("相应id");      //通过id获取指定的节点
alert(div.style.width);     //通过js读取相应元素的样式
3.读取当前样式(currentStyle)

（只有ie浏览器可以使用！！非常恶心！！）

通过js读取档期啊元素显示的样式：

​ 语法： 元素.currentStyle.样式名;

可以读取当前元素正在显示的样式，不论内联还是外联。

如果当前元素没有设置指定读取的值，会返回默认的值。

获取到的属性是只读的，想更改需要使用元素名.style.属性名 = 指定值的形式修改。

var div = document.getElementById("相应id");      //通过id获取指定的节点
var css = div.currentStyle.width;
4.读取当前样式(其他浏览器)

所有浏览器中都可以使用(不支持Ie8及以下浏览器)：

​ getComputedStyle()这个方法来获取元素的当前样式

​ 这个方法是window的方法可以直接使用

需要两个参数：

​ var 返回元素名 = getComputedStyle(节点,null);

​ 第一个：要获取样式的元素

​ 第二个：可以传递一个伪元素，一般传递null

​ 该方法会返回一个对象，对象中封装了当前元素的对应的样式，可以使用返回元素.样式的形式访问需要的样式。

如果获取的样式没有设置，则会获取到真实的值，而不是默认值。

​ 比如: 没有设置width，不会获取到auto，而是会获取到一个真实的长度。

  • 返回的值会带着相应的单位，类型为字符串。
var div = document.getElementById("相应id");      //通过id获取指定的节点
var obj = getComputedStyle(div,null);   //获取指定节点的样式对象
alert(obj.width)   //从样式对象中获取样式
5.读取当前样式(通用方法)

​ 未有系统定义的通用方法，可以采取自己写函数的形式定义通用方法：

​ ie8及以下版本浏览器无getComputedStyle属性，其他浏览器存在getComputedStyle属性为关键条件。

function getStyle( node , name ){
	if(window.getComputedStyle){  //判断是否存在属性,ie8中无次属性。
		return getComputedStyle(node,null)[name];
				}
    	else{
            	return node.currentStyle[name];
        }
}
6.其他操作样式的方法

clientWidth 返回当前对象的可见宽度(盒子的宽度和内容的宽度和);

clientHeight 返回当前对象的可见高度(盒子的高度和内容的高度和);

  • 返回的是一个数字，并不是一个字符串。可以直接进行计算。
  • 因为返回的是内容区和内边距，所以只读。
var box1 = document.getElementById("box1");

alert(box1.clientWidth);    /*返回对象的可见宽度*/
alert(box1.clientHeight);    /*返回对象的可见高度*/

offsetWidth: 返回当前对象整个盒子的宽度(盒子整体的宽度);

offsetHeight: 返回当前对象整个盒子的高度(盒子整体的高度);

  • 返回的是一个数字，并不是一个字符串。可以直接进行计算。
  • 因为返回的是内容区，内边距和边框，所以只读。
var box1 = document.getElementById("box1");

alert(box1.offsetWidth);    /*返回对象的全部宽度*/
alert(box1.offsetHeight);    /*返回对象的全部高度*/
  • scrollWidth
  • scrollHeight
    • 可以获取整个滚动区域的宽度和高度。
  • scrollLeft
  • scrollTop
    • 可以获取滚动条的距离。
  • scrollHeight - scrollTop == clientHeight

当以上等式满足时，表示滚动条到底。

var box1 = document.getElementById("box1");
/*onscroll事件会在滚动条滚动时触发*/
box1.onscroll = function(){
	if(box1.scrollHeight - box1.scrollTop == box1.clientHeight){
    	alert("滚动条已经滚动到底");
	}
}
修改类的方式修改样式

每使用一次js修改元素属性的代码，浏览器就会重新渲染一次页面。

修改大量的样式时需要大量的代码。

  • 可以通过提前定义css类样式，在修改元素的类的方法来间接的修改元素的样式。
  • 只需要修改一次，就可以修改多个样式。浏览器只需要渲染一次，性能较好。
  • 使行为和表现分离。
  • 更改类属性
window.onload = function(){
            var btn = document.getElementById("btn01");

            //btn的类名b1
            //修改btn的类名为b2
            btn.className = "b2";
        }
  • 增加类属性
window.onload = function(){
            var btn = document.getElementById("btn01");

            //btn的类名b1
            //修改btn的类名为b2 b1
            btn.className += " b2";   //中间需要一个空格
        }
获取属性

可以通过获得要操作的对象，然后通过两种方式获取对象中的属性。

既可以获得原有属性也可以获得默认属性。

自定义属性，用于保存一定的数据。

自定义属性规范： 以 data-属性名

  1. 对象.属性名；
  2. 对象.getAttribute(‘属性名’);
var db = document.getElementById("doubao");
document.write(db.id);
document.write(db.getAttribute("id"));
  • 可以向标签元素中添加自定义属性。
  • 对象.属性名 方式只能获得对象的内置属性(元素本身自定义的属性)。
  • 对象,getAttribute(“属性”);可以获得对象的自定意属性。
获取自定义属性

可以获取标签中的用户自定义属性有两种方法：

  1. 对象.getAttribute(‘属性名’); /任意自定义属性都可以获取
  2. 对象.dataset.自定义属性名； //只有符合h5新的自定义属性规范的才能获取到。
  3. 对象.dataset是一个集合，里面存放了所有以data开头的自定义属性。对象.dataset[“自定义属性名”]；也可以拿到。
  4. 如过自定义属性中存在多个 - 链接：
    1. 对象.getAttribute(‘属性名’);
    2. 对象.dataset.自定义属性名； //使用驼峰命名法
    3. 对象.dataset[“自定义属性名”]； //使用驼峰命名法
<div data-index="1">
<div data-index-time="1">
  
var db = document.querySelectorAll("div")[0];
var db1 = document.querySelectorAll("div")[1];

var index1 = db.getAttribute('data-index');
var index2 = db.dataset.index;   //注意获取的是dataset集合中的值，必须符合h5规范才能使用，且注意属性名的区别。

var index3 = db1.getAttribute('data-index-time');
var index4 = db1.dataset.indexTime;   //需要使用驼峰命名法
设置属性

可以通过获得要操作的对象，然后通过两种方式更改对象中的属性。

  1. 对象.属性 = ’值‘；
  2. 对象.setAttribute(‘属性’,‘值’);
var db = document.getElementById("doubao");
db.id = 'db';
db.setAttribute('db');
  • 对象.属性 = ’值‘；的方式只能设置内置属性值。
  • 对象.setAttribute(‘属性’,‘值’);可以设置自定义属性值。
  • 当设置class属性时，采用对象.属性 = ’值‘；的方法比较特殊：
db.className = 'db';
移除属性

可以通过获得要操作的对象，然后removeAttribute()对象中的属性。

  • removeAttribute(‘属性’);
var db = document.getElementById("doubao");
db.removeAttribute('id');
  • 使用removeAttribute()方法可以移除内置对象和自定义对象。

20. 事件

事件，就是文档或者浏览器窗口发生的一些特定的交互瞬间

javascript与html之间的交互式通过事件实现的

对应web应用来说，有下面这些代表性的事件：

  点击某个元素，将鼠标移动到某个元素上方，按下键盘上的某个键……

​ 整个文档按照自上向下的顺序执行，如果js代码写在上面，很有可能会读取不到相应的对象。可以使用 window中的onload事件来控制js代码在页面加载完再运行

  • 当时间的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，事件对象中封装这当前事件相关的一切信息.
    • 比如：鼠标的坐标，键盘哪个按键被按下,鼠标滚轮滚动的方向。
  • 取消正在生效的事件只需要将事件函数赋值为 null 即可。
//给window绑定onload事件，只有页面加载完成之后才会运行相应的js代码，用于解决js代码在页面加载之前运行的问题
window.onload = function(){
    js代码 
}

<button id="btn_Id" onclick="">这是一个按钮</button>
    <script type="text/javascript">
        //获取id属性为btn_Id的标签对象
        var btn = document.getElementById("btn_Id");
        
        //设置对应对象的单击事件函数
        btn.onclick = function() {
            alert("点击成功");
        }
    </script>
属性此事件发生在何时…
onabort图像的加载被中断。
onblur元素失去焦点。
onchange域的内容被改变。
onclick当用户点击某个对象时调用的事件句柄。
ondblclick当用户双击某个对象时调用的事件句柄。
onerror在加载文档或图像时发生错误。
onfocus元素获得焦点。
onkeydown某个键盘按键被按下。
onkeypress某个键盘按键被按下并松开。
onkeyup某个键盘按键被松开。
onsubmit加载页面确认按钮被点击。
onmousedown鼠标按钮被按下。
onmousemove鼠标被移动。
onmouseout鼠标从某元素移开。(会冒泡)
onmouseleave鼠标从某元素移开。(不会冒泡)
onmouseover鼠标进入元素(会冒泡)
onmouseenter鼠标进入元素(不会冒泡)）
onmouseup鼠标按键被松开。
onreset重置按钮被点击。
onresize窗口或框架被重新调整大小。
onselect文本被选中。
onload重新加载页面
onunload用户退出页面。
onpageshow重新加载页面
onscroll滚动事件
属性描述
altKey返回当事件被触发时，“ALT” 是否被按下。
button返回当事件被触发时，哪个鼠标按钮被点击。
clientX返回当事件被触发时，鼠标指针的水平坐标。
clientY返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey返回当事件被触发时，“CTRL” 键是否被按下。
metaKey返回当事件被触发时，“meta” 键是否被按下。
relatedTarget返回与事件的目标节点相关的节点。
screenX返回当某个事件被触发时，鼠标指针的水平坐标。
screenY返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey返回当事件被触发时，“SHIFT” 键是否被按下。

21.事件高级

一.事件的绑定

给与响应的元素绑定相应的事件。

注册事件有三种方式：

  • 传统方式
  • 方法监听注册方式
  • attachEvent函数添加事件

步骤：

​ 获取指定元素的对象 --》 给指定元素绑定相应的事件函数

传统方式绑定事件：

此方法如果给一个元素绑定多个相同的事件，后方的事件会覆盖原来的事件。(注册事件的唯一性)

/*获取指定元素的对象*/
var cbt = document.getElementById("cql");

/*传统方式为指定元素绑定事件函数*/
bt.onclick = function(event){
       alert("使用onclick事件绑定的事件！");
       }
方法监听注册方式

如果一个元素绑定事件后，再绑定相同的事件函数，后绑定的会覆盖新绑定的，如果想要继续绑定：

​ 元素对象.addEventListener(“绑定事件类型”,function(){},falst);

​ 元素对象.addEventListener(“绑定事件类型”,函数名,falst);

  • 第一个参数： 绑定的事件的类型，需要以字符串的形式，不需要 加on;

  • 第二个参数: 绑定的事件函数，可以是具体函数，也可以是函数名；

  • 第三个函数：是否在捕获阶段触发，一般传递falst。(默认冒泡)

    可以绑定多个相同的事件函数，并且触发的顺序是按照绑定的先后顺序触发的。

    注：ie8及以下不支持

/*获取指定元素的对象*/
var bt = document.getElementById("bt");

/*为指定元素绑定事件函数*/
            bt.onclick = function(event){
                alert("使用onclick事件绑定的事件！");
            }

            /*为指定的元素再增加事件函数，想先绑定先执行*/
	bt.addEventListener("click",function(){
                alert("添加的事件函数1");
            },false);
            bt.addEventListener("click",function(){
                alert("添加的事件函数2");
            },false);
不建议使用的事件监听

ie8及以下可以使用

​ attachEvent(“事件类型”,function(){});

​ attachEvent(“事件类型”,函数名);

  • 第一个参数： 绑定事件的类型，字符串的形式，需要加on；
  • 第二个参数： 绑定的事件函数。
  • 先绑定，后执行。
/*获取指定元素的对象*/
var bt = document.getElementById("cql");

/*为指定元素绑定事件函数*/
            bt.onclick = function(event){
                alert("使用onclick事件绑定的事件！");
            }
/*为ie8及以下绑定多个相同的事件函数*/
		bt.attachEvent("onclick",function(){
                alert("ie8及以下绑定事件");
        })
兼容性事件绑定函数：

大部分浏览器增加事件方法：

​ 对象.addEventListener(“事件类型(不加on)”,事件函数，false);

少部分浏览器增加事件方法：

​ 对象.attachEvent(“事件类型”,事件函数);

/*参数一： 绑定事件对象  ，参数二： 绑定事件类型(不加on) ,参数三：函数*/
function bind(obj , eventStr , callback){
    if(obj.addEventListener){
        	//大部分浏览器兼容方式
    	obj.addEventListener(evemtStr , callback , false);
    }
    else {
       	      //ie8及以下
    	//obj.attachEvent("on"+eventStr , callback);
        obj.attachEvent("on"+eventStr , function(){
            //在匿名函数中调用回调函数
            callback.call(obj);
        });
    } 
}
二. 事件的删除

可以通过事件的删除，将对应元素已经绑定的事件取消。

  • 传统的删除事件
  • 监听器移除事件
  • detachEvent函数移除事件
传统方式删除事件

直接将设置事件的组件的相应事件设为null。

/*获取指定元素的对象*/
var bt = document.getElementById("cql");

/*为指定元素绑定事件函数*/
      bt.onclick = function(event){
           alert("使用onclick事件绑定的事件！");
       }
/*为指定事件删除事件函数*/
	 bt.onclick = null；
监听器移除事件

removeEventListener(‘事件’,函数名);

  • 第一个参数： 要删除事件的类型，需要以字符串的形式，不需要 加on;
  • 第二个参数: 绑定的事件函数。只能是函数名；
var bt = document.getElementById("cql");
        bt.onclick = fun(); 
         function fun(){
            console.log("第一次触发");
        }
		bt.removeEventListener('click',fun);
detachEvent函数移除事件

ie8及以下不可以使用

​ detachEvent(“事件类型”,函数名);

  • 第一个参数： 绑定事件的类型，字符串的形式，需要加on；
  • 第二个参数： 绑定的事件函数,只能是函数名。
var bt = document.getElementById("cql");
        bt.onclick = fun(); 
         function fun(){
            console.log("第一次触发");
        }
		bt.detachEvent("onclick",fun);
三. 事件的传播

事件发生时会在元素节点之间按照特定的顺序传播。

事件的传播分为三个阶段：

  1. 捕获阶段：
    • 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。
  2. 目标阶段：
    • 事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
  3. 冒泡阶段：
    • 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。
  • ie8及以下的浏览器没有捕获阶段。
  • js代码中只能执行捕获或者冒泡其中的一个阶段。
  • onclick和attchEvent只能得到冒泡阶段。
  • addEventListener()如果第三个参数时true，表示事件捕获阶段调用事件处理程序，如果是false(不写默认就是false)，表示在事件冒泡阶段调用事件处理程序。
  • onblur，onfocus，onmouseenter,onmouseleave并没有冒泡。
四. 冒泡原理

​ 冒泡是指事件的向上传导性，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。

<html>
</head>
<body>
    <!--当事件3触发时，其祖先的相同事件，事件2，事件3也会被触发-->
    <div id="box1" onclick="事件1">
	<div id="box2" onclick="事件2">
	  <div id="box3" onclick="事件3">
          </div>
        </div>
     </div>
</body>
</html>
五. 事件对象

element.onclick = function(event){}

  1. event就是一个事件对象，写到侦听函数的小括号中，当作形参使用。
  2. 事件对象只有有了事件才会存在，他是系统自动创建的，不需要传递参数。
  3. 事件对象是关于事件的一系列相关数据的集合，与事件相关的一系列信息都存储到这个对象中，有很多的方法。例如：鼠标事件含有鼠标的相关信息：鼠标坐标。键盘事件：判断按下，松开的键。
  4. 事件对象的形参可以自由命名。
  5. 在ie 8及以前需要使用window.event来使用事件对象。
事件对象属性方法说明
e.target返回触发事件的对象 非标准ie6-8
e.srcElement返回触发事件的对象
e.type返回事件的类型，如click不带on
e.cancelBubble该属性阻止冒泡，非标准ie6-8使用
e.returnValue该属性阻止默认事件，非标准ie6-8使用
e.preventDefault()该方法阻止默认事件，例如：不让链接跳转
e.stopPropagation()阻止冒泡
  • e.target返回的是触发事件的对象，this返回的是绑定事件的对象。(e.target点击了哪个元素，就返回哪个元素，this是哪个元素绑定了这个点击事件就返回哪个元素)
  • 阻止默认行为：让跳转不跳转，或者让提交按钮不提交。默认上下文菜单不出现。
  • 可以使用return: false;来阻止默认行为，并且没有兼容性问题。但是return后面的代码不会被执行，而且只限于传统的注册方式。
六. 取消冒泡

​ 冒泡大多数情况下对于开发来说都是有益的，但是有些情况下需要取消冒泡。

取消冒泡方法：

​ 可以将事件对象的cancelBubble设置为 true； //兼容性不好ie6-8

​ event.cancelBubble = true;

​ 可以使用e.stopPropagation()取消冒泡

box.onclick = function(event){

                /*去除事件的冒泡，修改event的cancelBubble属性为true*/
                 event = event||window.event;
                 event.cancelBubble = true;
  			/* 或者使用stopPropagation()取消当前事件的冒泡。触发事件到此截止*/
				e.stopPropagation()
                alert("这是div的响应事件");
            }
七. 事件的委派

​ 是将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。利用冒泡原理设置每个子节点的事件

  事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。
  使用e.target属性得到触发事件的元素。
  • 但是事件委派父元素中任何位置都有可能触发响应是事件。
  • 事件函数返回的event的target属性表示触发事件的对象，谁触发这个事件，就返回对应标签的对象。
  • 可以使用将期望触发事件的子元素增加特定的class属性值，使用event.target.className是否等于指定的class值来限定触发的范围。
box.onclick = function(event){          
         /*event.target可以得到当前点击的对象，this得到绑定事件的对象*/ 
    	if(event.target.className == "指定class值"){
            	 alert("期望的元素的响应事件");
        }
            }
八.常用的鼠标事件
鼠标事件触发条件
onclick鼠标点击左键触发
onmouseover鼠标经过触发
onmouseout鼠标离开触发
onfocus获得鼠标焦点触发
onblur失去鼠标焦点触发
onmouseup鼠标弹起触发
onmousemove鼠标移动触发
onmousedown鼠标按下触发
8.1 禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于取消默认的上下文菜单。

//为整个文档对象绑定事件，禁止弹出菜单的默认行为。
document.addEventListener("contextmenu",function(e){
            e.preventDefault();
        });
8.2 禁止鼠标选中文字

selectstart 选择文字事件

//为整个文档对象绑定事件，禁止选中文字的默认行为。
document.addEventListener("selectstart",function(e){
            e.preventDefault();
     });
八* 鼠标事件对象

event对象代表事件的状态，是事件相关的一系列信息的集合。主要使用的是鼠标事件对象：MouseEvent和键盘对象KeyboardEvent。

鼠标事件对象说明
e.clientX返回鼠标相对于浏览器窗口可视区的X坐标(不加px)
e.clientY返回鼠标相对于浏览器窗口可视区的Y坐标(不加px)
e.pageX返回鼠标相对于文档页面的X坐标 Ie9+支持(不加px)
e.pageY返回鼠标相对于文档页面的Y坐标 ie9+ 支持(不加px)
e.screenX返回鼠标相对于电脑屏幕的X坐标(不加px)
e.screenY返回鼠标相对于电脑屏幕的Y坐标(不加px)
九. 常用键盘事件
键盘事件触发条件
onkeyup某个键盘按键被松开时触发(不区分字母大小写)
onkeydown某个键盘按键被按下时触发(不区分字母大小写)
onkeypress某个键盘按键被按下时触发(但是不识别功能键，区分字母大小写)
九* 键盘事件对象

e.keyCode 返回按下键的ASC码值。

onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写。更多使用onkeydown和onkeyup可以识别所有键(包括功能键)，Keypress不识别功能键，但是区分大小写，返回不同的ASC码值。

十. 手动调用事件

可以通过手动使用指定元素的事件。s

元素对象.事件();

document.addEventListener("selectstart",function(e){
            e.preventDefault();
     });
document.selectstart();

22.对象(BOM)

  • 浏览器对象模型 ,BOM可以使我们通过js来操作浏览器的操作。
  • 在BOM中提供了一组对象，用来完成对浏览器的操作。
  • BOM对象：
    • Window
      • 代表中各浏览器的窗口，同时window也是网页中的全局对象。
      • 他是JS访问浏览器窗口的一个接口。
      • 定义在全局作用域中的变量，函数都会变成window对象的属性和方法。
    • Navigator
      • 代表当前浏览器的信息。通过该对象可以来识别不同的浏览器。
    • Loction
      • 代表当前浏览器的地址栏信息，通过Loction可以获取到地址栏的信息，或者操作浏览器跳转页面。
    • History
      • 代表浏览器的历史纪录，可以通过该对象操作浏览器的历史记录。由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或者向后翻页。而且该操作只在当此访问时有效。
    • Screen
      • 代表用户的屏幕信息 ，通过该对象可以获取用户的显示器的相关信息。
    • 这些BOM对象都是在浏览器中作为Window的属性保存的，可以通过window对象来使用，也可以直接使用。
Navigator

代表当前浏览器的信息。通过该对象可以来识别不同的浏览器。也可以得到系统的版本号。

属性
属性描述
appCodeName返回浏览器的代码名。
appMinorVersion返回浏览器的次级版本。
appName返回浏览器的名称。
appVersion返回浏览器的平台和版本信息。
browserLanguage返回当前浏览器的语言。
cookieEnabled返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass返回浏览器系统的 CPU 等级。
onLine返回指明系统是否处于脱机模式的布尔值。
platform返回运行浏览器的操作系统平台。
systemLanguage
userAgent返回由客户机发送服务器的 user-agent 头部的值。
userLanguage返回 OS 的自然语言设置。
userAgent

​ 由于历史原因，浏览器中的Navigator的属性大多不能使用，但是userAgent可以返回一个字符串，字符串中包含描述浏览器信息的内容。不同的浏览器会有不同的userAgent。


alert(navigator.userAgent);
//返回值：
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36

判断浏览器：

var ua = navigator.userAgent;

if(/firefox/i.test(us)){
   		alert("火狐浏览器");
   }
else if (/chrome/i.test(ua)){
         	alert("谷歌浏览器");
         }
else if(/msie/i.test(ua)){    //只能判断ie10及以下版本
        	alert("ie浏览器");
        }
/*else if (window.ActiveXObject){    //ie11做了手脚
                 alart("ie11会判断失误"); 
         }*/
else if("ActiveXObject" in window){    //只能判断ie10及以下版本
        	alert("ie浏览器");
        }
  • 如果通过UserAgent不能判断，可以通过一些浏览器中特有的对象，来判断浏览器的信息。
    • 比如：ActiveXObject ie中独有的
History

​ 代表浏览器的历史纪录，可以通过该对象操作浏览器的历史记录。由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或者向后翻页。而且该操作只在当此访问时有效。

属性
  • length 返回浏览器历史列表中url的数量。当次访问的链接的数量。
history.back()

可以用来回退到上一个页面，作用的和浏览器的回退按钮一样。

window.onload = function (evwnt) {
            var btn = document.getElementById("btn");

            btn.onclick = function (event) {
                history.back();
            }
        }
history.forward()

可以前进到下一个页面，效果 个浏览器的前进按钮一样。

window.onload = function (evwnt) {
            var btn = document.getElementById("btn");

            btn.onclick = function (event) {
                history.forward();
            }
        }
history.go();
  • 可以用来跳转到指定的页面。
  • 他需要一整数作为参数。
    • 1 ：表示向前跳转一个页面，相当于forward()。
    • 2 ： 表示向前跳转2个页面。
    • -1 ：表示向后跳转一个页面。
    • -2 ： 表示享后跳转两个页面。
window.onload = function (evwnt) {
            var btn = document.getElementById("btn");

            btn.onclick = function (event) {
                //history.back();
                history.go(-1);   //相当于back();
            }       
        }
Location

​ 代表当前浏览器的地址栏信息，通过Loction可以获取到地址栏的信息，或者操作浏览器跳转页面。

  • 如果直接打印location,则可以直接获取到地址栏的详细信息(当前页面的完整路径)。
  • 如果将location书香修改为一个完整的路径，或者相对路径，则页面会自动跳转到指定的路径，并且会生成相应的历史记录。
属性描述
location.hash设置或返回从井号 (#) 开始的 URL（锚点）。
location.host设置或返回主机名和当前 URL 的端口号。
location.hostname设置或返回当前 URL 的主机名。
location.href设置或返回完整的 URL。
location.pathname设置或返回当前 URL 的路径部分。
location.port设置或返回当前 URL 的端口号。
location.protocol设置或返回当前 URL 的协议。
location.search设置或返回从问号 (?) 开始的 URL（查询部分）。
属性描述
location.assign()加载新的文档。会生成历史记录,可以后退
location.reload()重新加载当前文档。作用和刷新一样
location.replace()用新的文档替换当前文档，普通刷新(F5)。不会生成历史记录，无法后退，可以添加参数true表示强制刷新(ctrl + F5)。
Screen

代表用户的屏幕信息 ，通过该对象可以获取用户的显示器的相关信息。

  • 返回或设置： 高度宽度，分辨率，刷新率。
window 及事件

代表中各浏览器的窗口，同时window也是网页中的全局对象。

1. window加载事件
  • window.onload
  • addEventListener

window.onload事件

该事件会在所有网页元素加载后发生，常用与在最上方执行script代码。

会在DOM和样式表，图片，flash等等加载完后执行。

addEventListener(’ ',function(){},false)

仅当DOM加载完成，不包括样式表，图片，flash等。

如果页面上的图片很多，从用户访问onload触发可能需求较长的时间，交互

2. window 调整窗口大小

当浏览器窗口大小被改变后会触发一下事件

  • window.onresize = function(){}
  • window.addEventListener(“resize”,function(){});
window.onload = function(){
     window.onresize = function(){
          console.log("高:" +  window.innerWidth);
          console.log("低:" +  window.innerHeight);
       	
     }
}
3. window 定时器
  • setTimeout
  • setInterval
setInterval()

  • 重复，可以将一个函数，每隔一段时间执行一次。

  • 参数：

    • 回调函数，函数会每个一段时间被调用一次。
    • 每次调用间隔的时间，单位是毫秒。可以省略，省略默认为0.

  • 需要定义一个定时器标识，用来设置区分定时器。

    语法：

    - var 定时器标识 = setInterval(函数,间隔时间);

  • 如果同时开启多个定时器，被赋值的标识只会标识最新的定时器，但是如果不删除之前开启的定时器，它们还会运行。在开器定时器前关闭之前开启的定时器。

clearInterval()
  • 可以用来关闭一个已经开始的定时器。
  • 方法需要一个定时器的表示作为参数。
    • clearInterval(定时器标识);
    • 可以接受任意类型的参数，如果为有效的定时器标识，即为执行，如果不是也不报错。
window.onload = function () {
            var time = 1;
            var count = document.getElementById("count");
            var btn = document.getElementById("btn");
    	//定义定时器，且指定定时器标识。
            var iv = setInterval(function () {
                count.innerHTML = time++;
            },1000)
            btn.onclick = function(event){
                //关闭指定的定时器
                clearInterval(iv);
            }
        }
setTimeout()

  • 延时调用，不会马上执行，而是隔一段时间后再执行，而且只会调用一次。

  • 需要定义一个定时器标识，用来设置区分定时器。

    语法：

    • var 定时器标识 = setTimeout(函数,延迟的时间);
clearTimeout()
  • 关闭一个延时调用。
  • 方法需要一个定时器的表示作为参数。
    • clearTimeout(定时器标识);
window.onload = function () {
            
            var count = document.getElementById("count");
            var btn = document.getElementById("btn");
            
            //设置延迟函数   ---   延迟时间   只会运行一次
           var iv = setTimeout(function(){

                count.innerHTML = "延迟函数1s显示";

            },1000)
            btn.onclick = function(event){
                //关闭指定的延迟调用
                clearTimeout(iv);
            }
        }

23. 执行队列

JavaScript语言的一大特点就是单线程，同一时间只能做一件事，因为这是脚本语言诞生的使命所导致，Javascript是为了处理页面中用户的交互，以及操作DOM而诞生的。

  1. 先执行执行栈中的同步任务。
  2. 异步任务(回调函数)放入任务队列中。
  3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈中，开始执行。
23.1 同步和异步

为了解决JS执行时间过长会导致页面渲染不连贯，导致页面渲染加载阻塞的感觉。利用多核CPU的计算能力，HTML5提出WebWorker标准，允许javaScript脚本创建多个线程，JS中出现了同步和异步。

  • 同步：前一个任务结束再执行后一个任务
  • 异步：同时处理多个任务。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n26cYynM-1650012029029)(./img/js异步处理机制.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EHltRKvq-1650012029030)(./img/js异步执行机制2.png)]

  • 会将异步任务交给异步进程处理，如果满足调用的条件，异步进程会将回调函数放到异步任务队列中，等待发送到执行栈中执行。
  • 由于主线程的重复获得任务，执行任务，再获得任务，再执行任务，所以这种机制被称为事件循环(event loop).
同步任务：

同步任务都在主线程上执行形成一个执行栈。

异步任务：

JS的异步任务是通过回调函数来实现的。

异步任务的类型：

  1. 普通事件： click，resize
  2. 资源加载：load，error
  3. 定时器：setInterval ，setTimeout

24.PC网页特效

24.1 元素偏移量 offset

offset翻译过来就是偏移量，使用offset系列相关属性可以动态的得到该元素的位置，大小等。

  • 获得元素距离带有定位父元素的位置。
  • 获得元素自身的大小(宽度高度)。
  • 返回的数值不带单位。
offset系列属性功能
element.offsetParent返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body。
element.offsetTop返回元素相对带有定位父元素上方的偏移量，如果没有返回到body的偏移量。
element.offsetLeft返回元素相对带有定位父元素左边框的偏移量。
element.offsetwidth返回自身包括padding，边框，内容区的宽度，返回数值不带单位。
element.offsetHeight返回自身包括padding，边框，内容区的高度，返回数值不带单位。
style与offset的区别

offset:

  • offset可以得到任意样式表中的样式值。
  • offset系列获得的数值是没有单位的数字。
  • offsetWidth包含padding + border + width。
  • offsetWidth等属性是只读属性，只能获取不能赋值。
  • 获取元素大小位置时使用offset比较合适。

style：

  • style只能得到行内样式表中的样式值。
  • style.width获得的时带有单位的字符串。
  • style.width获得不包含padding和border的值。
  • style.width时可读写属性，可以获取也可以赋值。
  • 给与元素更改值的时候，使用style改变。
24.2 元素可视区 client

client(客户端)，使用client系列的相关属性可以获取元素可视区的相关信息，通过clinent系列的相关属性可以动态的获得边框大小，元素大小。

client不计算文字超出的高度，只计算盒子的高度和宽度。

client系列属性功能
element.clientTop返回元素上边框的大小
element.clientLeft返回元素左边框的大小
element.clientWidth返回自身包括padding，内容区域宽度，不含边框，返回数值不带单位
element.clientHeight返回自身 包括padding，内容区高度，不含边框，返回数值不带单位。
24.3 元素滚动 scroll

scroll 翻译过来是滚动的，使用scroll系列的相关属性可以动态的得到该元素的大小，滚动的距离。

scroll计算文字超出的高度，如果没有超出则会返回盒子的高度。

scroll系列属性作用
element.scrollTop返回被卷曲的上侧距离，返回数值不带单位
element.scrollLeft返回被卷曲的左侧距离，返回数值不带单位
element.scrollWidth返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight返回自身实际的高度，不含边框，返回数值不带单位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a2zxOFQ2-1650012029032)(./img/scroll解析.png)]

  • 元素被卷曲的高度宽度使用element.scrollTop与element.scrollLeft属性
  • 页面被卷曲的高度和宽度使用window.pageYOffset与window.pageXOffset来得到
  • window.scroll(x,y) 设置网页滚动到的位置，不带单位
三大系列大小对比作用
element.offsetWidth返回自身包括padding，边框，内容区的宽度，不带单位
element.clientWidth返回自身包括padding，，内容区的宽度，不带单位
element.scrollWidth返回自身实际的宽度，内容超出后返回实际占有的宽度，不带单位
24.4 立即执行函数

常规函数需要定义之后调用才能执行，立即执行函数不需要调用就可以执行。

立即执行函数中独立创建了一个作用域。里面所有的变量都是局部变量不会有命名冲突的问题。

语法：

​ (function(形参){})(实参) //(匿名函数)()

​ (function(形参){}(实参)) //(匿名函数())

25. 动画函数

核心原理：通过定时器setInterval()不断移动盒子位置。

实现步骤：

  • 获取盒子当前位置。
  • 让盒子在当前位置加上1个移动距离。
window.onload = function () {
            var div = document.querySelector("div");

            //obj动画执行的对象
            //target结束时的距离
            function animate(obj, target) {
              
              //先去除定时器，防止多个定时器同时执行
              clearInterval(obj.time);
              //使用为对象添加属性方式定义定时器
                obj.time = setInterval(function () {
                  	
                    if (obj.offsetLeft >= target) {
                        clearInterval(time);
                    }
                    obj.style.left = obj.offsetLeft + 10 + "px";

                }, 30);
            }
            animate(div,400);
        }
缓动动画

原理：

  1. 盒子每次移动的距离慢慢减小，速度会慢慢下降。
  2. 核心算法 ： 每次移动的距离 = （目标值 - 现在位置）/10
window.onload = function () {
            var div = document.querySelector("div");

            //obj动画执行的对象
            //target结束时的距离
            function animate(obj, target) {
                //定义缓动的速度
              var step = 0;
              //先去除定时器，方式多个定时器
              clearInterval(obj.time);
              //使用为对象添加属性方式定义定时器
                obj.time = setInterval(function () {
                  	
                    if (obj.offsetLeft >= target) {
                        clearInterval(time);
                    }
                    step = (target - obj.offsetLeft)/10; 
                  	step > 0? Math.ceil(step):Math.floor(step);
                    obj.style.left = obj.offsetLeft + step + "px";

                }, 30);
            }
            animate(div,400);
        }

26. 本地存储

随着网页的应用普遍，变得越来越复杂，为了满足存储的要求，html5提出了相关解决办法。

数据存储在用户的浏览器中。

设置，读取方便，甚至页面刷新不丢失数据。

容量较大，sessionStorage存储5M数据，localStorage存储20M数据。

只能存储字符串，可以将对下那个json.stringify()编码使用。

window.sessionStorage

声明周期为关闭浏览器窗口，刷新页面不会清除。

在同一窗口(页面)下数据可以共享。

以键值对的形式存储使用。

语法：

​ sessionStorage.setItem(key,value); //设置对应键的值

​ sessionStorage.getItem(key); //获取对应键的值

​ sessionStorage.removeItem("key"); //删除指定键的值

​ sessionStorage.clear(); //删除说有的值

<body>
    <form action="#">
        <input type="text" class="text">
        <button class="setb">存储</button>
        <button class="getb">获得</button>
        <button class="removeb">删除</button>
        <button class="delb">清空</button>
    </form>

    <script>
        var text = document.querySelector(".text");
        var setb = document.querySelector(".setb");
        var getb = document.querySelector(".getb");
        var removeb = document.querySelector(".removeb");
        var delb = document.querySelector(".delb");


        setb.addEventListener("click",function(){
            //存储到sessionStorage中
            sessionStorage.setItem("textkey",text.value);
            alert("存储成功");
        });
        getb.addEventListener("click",function(){
            //从sessionStorage中提取指定key的数据
            var str = sessionStorage.getItem("textkey");
            alert(str);
        });
        removeb.addEventListener("click",function(){
            //从sessionStorage中删除指定key的数据
            var str = sessionStorage.removeItem("textkey");
            
        });
        delb.addEventListener("click",function(){
            //清空sessionStorage中数据
            sessionStorage.clear();
            
        });
    </script>
</body>
windou.localStorage

生命周期永久生效，除非手动删除，否则关闭页面也会存在。

可以多窗口(同一浏览器共享)

以键值对的形式存储应用使用。

语法：

​ localStorage.setItem(key,value); //设置对应键的值

​ localStorage.getItem(key); //获取对应键的值

​ localStorage.removeItem("key"); //删除指定键的值

​ localStorage.clear(); //删除说有的值

<body>
    <form action="#">
        <input type="text" class="text">
        <button class="setb">存储</button>
        <button class="getb">获得</button>
        <button class="removeb">删除</button>
        <button class="delb">清空</button>
    </form>

    <script>
        var text = document.querySelector(".text");
        var setb = document.querySelector(".setb");
        var getb = document.querySelector(".getb");
        var removeb = document.querySelector(".removeb");
        var delb = document.querySelector(".delb");


        setb.addEventListener("click",function(){
            //存储到localStorage中
            
            localStorage.setItem("textkey",text.value);
            alert("存储成功");
        });
        getb.addEventListener("click",function(){
            //从localStorage中提取指定key的数据
            var str = localStorage.getItem("textkey");
            alert(str);
        });
        removeb.addEventListener("click",function(){
            //从localStorage中删除指定key的数据
            var str = localStorage.removeItem("textkey");
            
        });
        delb.addEventListener("click",function(){
            //清空localStorage中数据
            localStorage.clear();
            
        });
    </script>
</body>

* json

  • js中的对象只有js自己认识，其他语言不认识。

  • json就是特殊格式的字符串。这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象。

  • json在开发中主要用来数据的交互。

  • json

    • javascript object notation

  • json和js对象的格式一样，只不过json字符串的属性名必须加双引号。

  • json分类：

      1. 对象 {}
      2. 数组 []

  • json中允许的值：

      1. 字符串
      2. 数值
      3. 布尔值
      4. null
      5. 对象
      6. 数组

  • JSON在ie7及以下不兼容。

var obj = '{"name" = "cql","age" = "2"}';   //对象

var arr = '[1,2,3,4,"hhh"]';    //数组
JSON.parse()

可以将json字符串转换为js对象。

需要一个json字符串作为参数，会将该字符串转换为js对象。

var jsonStr = JSON.parse("JOSN字符串");
JSON.stringify()

可以将一个js对象转换为JSON字符串。

需要一个js对象作为参数，会返回一个JSON字符串。

var jsonStr = JSON.stringify( js对象 );
eval()

  • 可以用来指定一段字符串形式的js代码，并将结构返回。

  • 如果使用eval()执行的字符串中含有{},他会将{}当成是代码块。

    • 如果不希望将其当成代码块来执行，就需要在字符串前后各加一个 （） 。

  • 少使用，性能较差，且有安全隐患。

var str = "alert("字符串形式的js代码");";

evel( str );     //会执行字符串中的js代码

evel( “（”+ str + “）” );     //如果要执行的代码中含有{}
兼容IE7

如果需要兼容ie7及以下浏览器，则可以从外部引入一个js文件来处理。

<script type="text/javascript" src="js/json2.js"></script>

json2.js代码：

//  json2.js
//  2016-05-01
//  Public Domain.
//  NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
//  See http://www.JSON.org/js.html
//  This code should be minified before deployment.
//  See http://javascript.crockford.com/jsmin.html

//  USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO
//  NOT CONTROL.

//  This file creates a global JSON object containing two methods: stringify
//  and parse. This file is provides the ES5 JSON capability to ES3 systems.
//  If a project might run on IE8 or earlier, then this file should be included.
//  This file does nothing on ES5 systems.

//      JSON.stringify(value, replacer, space)
//          value       any JavaScript value, usually an object or array.
//          replacer    an optional parameter that determines how object
//                      values are stringified for objects. It can be a
//                      function or an array of strings.
//          space       an optional parameter that specifies the indentation
//                      of nested structures. If it is omitted, the text will
//                      be packed without extra whitespace. If it is a number,
//                      it will specify the number of spaces to indent at each
//                      level. If it is a string (such as "\t" or "&nbsp;"),
//                      it contains the characters used to indent at each level.
//          This method produces a JSON text from a JavaScript value.
//          When an object value is found, if the object contains a toJSON
//          method, its toJSON method will be called and the result will be
//          stringified. A toJSON method does not serialize: it returns the
//          value represented by the name/value pair that should be serialized,
//          or undefined if nothing should be serialized. The toJSON method
//          will be passed the key associated with the value, and this will be
//          bound to the value.

//          For example, this would serialize Dates as ISO strings.

//              Date.prototype.toJSON = function (key) {
//                  function f(n) {
//                      // Format integers to have at least two digits.
//                      return (n < 10)
//                          ? "0" + n
//                          : n;
//                  }
//                  return this.getUTCFullYear()   + "-" +
//                       f(this.getUTCMonth() + 1) + "-" +
//                       f(this.getUTCDate())      + "T" +
//                       f(this.getUTCHours())     + ":" +
//                       f(this.getUTCMinutes())   + ":" +
//                       f(this.getUTCSeconds())   + "Z";
//              };

//          You can provide an optional replacer method. It will be passed the
//          key and value of each member, with this bound to the containing
//          object. The value that is returned from your method will be
//          serialized. If your method returns undefined, then the member will
//          be excluded from the serialization.

//          If the replacer parameter is an array of strings, then it will be
//          used to select the members to be serialized. It filters the results
//          such that only members with keys listed in the replacer array are
//          stringified.

//          Values that do not have JSON representations, such as undefined or
//          functions, will not be serialized. Such values in objects will be
//          dropped; in arrays they will be replaced with null. You can use
//          a replacer function to replace those with JSON values.

//          JSON.stringify(undefined) returns undefined.

//          The optional space parameter produces a stringification of the
//          value that is filled with line breaks and indentation to make it
//          easier to read.

//          If the space parameter is a non-empty string, then that string will
//          be used for indentation. If the space parameter is a number, then
//          the indentation will be that many spaces.

//          Example:

//          text = JSON.stringify(["e", {pluribus: "unum"}]);
//          // text is '["e",{"pluribus":"unum"}]'

//          text = JSON.stringify(["e", {pluribus: "unum"}], null, "\t");
//          // text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]'

//          text = JSON.stringify([new Date()], function (key, value) {
//              return this[key] instanceof Date
//                  ? "Date(" + this[key] + ")"
//                  : value;
//          });
//          // text is '["Date(---current time---)"]'

//      JSON.parse(text, reviver)
//          This method parses a JSON text to produce an object or array.
//          It can throw a SyntaxError exception.

//          The optional reviver parameter is a function that can filter and
//          transform the results. It receives each of the keys and values,
//          and its return value is used instead of the original value.
//          If it returns what it received, then the structure is not modified.
//          If it returns undefined then the member is deleted.

//          Example:

//          // Parse the text. Values that look like ISO date strings will
//          // be converted to Date objects.

//          myData = JSON.parse(text, function (key, value) {
//              var a;
//              if (typeof value === "string") {
//                  a =
//   /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
//                  if (a) {
//                      return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
//                          +a[5], +a[6]));
//                  }
//              }
//              return value;
//          });

//          myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) {
//              var d;
//              if (typeof value === "string" &&
//                      value.slice(0, 5) === "Date(" &&
//                      value.slice(-1) === ")") {
//                  d = new Date(value.slice(5, -1));
//                  if (d) {
//                      return d;
//                  }
//              }
//              return value;
//          });

//  This is a reference implementation. You are free to copy, modify, or
//  redistribute.

/*jslint
    eval, for, this
*/

/*property
    JSON, apply, call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours,
    getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join,
    lastIndex, length, parse, prototype, push, replace, slice, stringify,
    test, toJSON, toString, valueOf
*/


// Create a JSON object only if one does not already exist. We create the
// methods in a closure to avoid creating global variables.

if (typeof JSON !== "object") {
    JSON = {};
}

(function () {
    "use strict";

    var rx_one = /^[\],:{}\s]*$/;
    var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g;
    var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
    var rx_four = /(?:^|:|,)(?:\s*\[)+/g;
    var rx_escapable = /[\\\"\u0000-\u001f\u007f-\u009f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
    var rx_dangerous = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;

    function f(n) {
        // Format integers to have at least two digits.
        return n < 10
            ? "0" + n
            : n;
    }

    function this_value() {
        return this.valueOf();
    }

    if (typeof Date.prototype.toJSON !== "function") {

        Date.prototype.toJSON = function () {

            return isFinite(this.valueOf())
                ? this.getUTCFullYear() + "-" +
                        f(this.getUTCMonth() + 1) + "-" +
                        f(this.getUTCDate()) + "T" +
                        f(this.getUTCHours()) + ":" +
                        f(this.getUTCMinutes()) + ":" +
                        f(this.getUTCSeconds()) + "Z"
                : null;
        };

        Boolean.prototype.toJSON = this_value;
        Number.prototype.toJSON = this_value;
        String.prototype.toJSON = this_value;
    }

    var gap;
    var indent;
    var meta;
    var rep;


    function quote(string) {

// If the string contains no control characters, no quote characters, and no
// backslash characters, then we can safely slap some quotes around it.
// Otherwise we must also replace the offending characters with safe escape
// sequences.

        rx_escapable.lastIndex = 0;
        return rx_escapable.test(string)
            ? "\"" + string.replace(rx_escapable, function (a) {
                var c = meta[a];
                return typeof c === "string"
                    ? c
                    : "\\u" + ("0000" + a.charCodeAt(0).toString(16)).slice(-4);
            }) + "\""
            : "\"" + string + "\"";
    }


    function str(key, holder) {

// Produce a string from holder[key].

        var i;          // The loop counter.
        var k;          // The member key.
        var v;          // The member value.
        var length;
        var mind = gap;
        var partial;
        var value = holder[key];

// If the value has a toJSON method, call it to obtain a replacement value.

        if (value && typeof value === "object" &&
                typeof value.toJSON === "function") {
            value = value.toJSON(key);
        }

// If we were called with a replacer function, then call the replacer to
// obtain a replacement value.

        if (typeof rep === "function") {
            value = rep.call(holder, key, value);
        }

// What happens next depends on the value's type.

        switch (typeof value) {
        case "string":
            return quote(value);

        case "number":

// JSON numbers must be finite. Encode non-finite numbers as null.

            return isFinite(value)
                ? String(value)
                : "null";

        case "boolean":
        case "null":

// If the value is a boolean or null, convert it to a string. Note:
// typeof null does not produce "null". The case is included here in
// the remote chance that this gets fixed someday.

            return String(value);

// If the type is "object", we might be dealing with an object or an array or
// null.

        case "object":

// Due to a specification blunder in ECMAScript, typeof null is "object",
// so watch out for that case.

            if (!value) {
                return "null";
            }

// Make an array to hold the partial results of stringifying this object value.

            gap += indent;
            partial = [];

// Is the value an array?

            if (Object.prototype.toString.apply(value) === "[object Array]") {

// The value is an array. Stringify every element. Use null as a placeholder
// for non-JSON values.

                length = value.length;
                for (i = 0; i < length; i += 1) {
                    partial[i] = str(i, value) || "null";
                }

// Join all of the elements together, separated with commas, and wrap them in
// brackets.

                v = partial.length === 0
                    ? "[]"
                    : gap
                        ? "[\n" + gap + partial.join(",\n" + gap) + "\n" + mind + "]"
                        : "[" + partial.join(",") + "]";
                gap = mind;
                return v;
            }

// If the replacer is an array, use it to select the members to be stringified.

            if (rep && typeof rep === "object") {
                length = rep.length;
                for (i = 0; i < length; i += 1) {
                    if (typeof rep[i] === "string") {
                        k = rep[i];
                        v = str(k, value);
                        if (v) {
                            partial.push(quote(k) + (
                                gap
                                    ? ": "
                                    : ":"
                            ) + v);
                        }
                    }
                }
            } else {

// Otherwise, iterate through all of the keys in the object.

                for (k in value) {
                    if (Object.prototype.hasOwnProperty.call(value, k)) {
                        v = str(k, value);
                        if (v) {
                            partial.push(quote(k) + (
                                gap
                                    ? ": "
                                    : ":"
                            ) + v);
                        }
                    }
                }
            }

// Join all of the member texts together, separated with commas,
// and wrap them in braces.

            v = partial.length === 0
                ? "{}"
                : gap
                    ? "{\n" + gap + partial.join(",\n" + gap) + "\n" + mind + "}"
                    : "{" + partial.join(",") + "}";
            gap = mind;
            return v;
        }
    }

// If the JSON object does not yet have a stringify method, give it one.

    if (typeof JSON.stringify !== "function") {
        meta = {    // table of character substitutions
            "\b": "\\b",
            "\t": "\\t",
            "\n": "\\n",
            "\f": "\\f",
            "\r": "\\r",
            "\"": "\\\"",
            "\\": "\\\\"
        };
        JSON.stringify = function (value, replacer, space) {

// The stringify method takes a value and an optional replacer, and an optional
// space parameter, and returns a JSON text. The replacer can be a function
// that can replace values, or an array of strings that will select the keys.
// A default replacer method can be provided. Use of the space parameter can
// produce text that is more easily readable.

            var i;
            gap = "";
            indent = "";

// If the space parameter is a number, make an indent string containing that
// many spaces.

            if (typeof space === "number") {
                for (i = 0; i < space; i += 1) {
                    indent += " ";
                }

// If the space parameter is a string, it will be used as the indent string.

            } else if (typeof space === "string") {
                indent = space;
            }

// If there is a replacer, it must be a function or an array.
// Otherwise, throw an error.

            rep = replacer;
            if (replacer && typeof replacer !== "function" &&
                    (typeof replacer !== "object" ||
                    typeof replacer.length !== "number")) {
                throw new Error("JSON.stringify");
            }

// Make a fake root object containing our value under the key of "".
// Return the result of stringifying the value.

            return str("", {"": value});
        };
    }


// If the JSON object does not yet have a parse method, give it one.

    if (typeof JSON.parse !== "function") {
        JSON.parse = function (text, reviver) {

// The parse method takes a text and an optional reviver function, and returns
// a JavaScript value if the text is a valid JSON text.

            var j;

            function walk(holder, key) {

// The walk method is used to recursively walk the resulting structure so
// that modifications can be made.

                var k;
                var v;
                var value = holder[key];
                if (value && typeof value === "object") {
                    for (k in value) {
                        if (Object.prototype.hasOwnProperty.call(value, k)) {
                            v = walk(value, k);
                            if (v !== undefined) {
                                value[k] = v;
                            } else {
                                delete value[k];
                            }
                        }
                    }
                }
                return reviver.call(holder, key, value);
            }


// Parsing happens in four stages. In the first stage, we replace certain
// Unicode characters with escape sequences. JavaScript handles many characters
// incorrectly, either silently deleting them, or treating them as line endings.

            text = String(text);
            rx_dangerous.lastIndex = 0;
            if (rx_dangerous.test(text)) {
                text = text.replace(rx_dangerous, function (a) {
                    return "\\u" +
                            ("0000" + a.charCodeAt(0).toString(16)).slice(-4);
                });
            }

// In the second stage, we run the text against regular expressions that look
// for non-JSON patterns. We are especially concerned with "()" and "new"
// because they can cause invocation, and "=" because it can cause mutation.
// But just to be safe, we want to reject all unexpected forms.

// We split the second stage into 4 regexp operations in order to work around
// crippling inefficiencies in IE's and Safari's regexp engines. First we
// replace the JSON backslash pairs with "@" (a non-JSON character). Second, we
// replace all simple value tokens with "]" characters. Third, we delete all
// open brackets that follow a colon or comma or that begin the text. Finally,
// we look to see that the remaining characters are only whitespace or "]" or
// "," or ":" or "{" or "}". If that is so, then the text is safe for eval.

            if (
                rx_one.test(
                    text
                        .replace(rx_two, "@")
                        .replace(rx_three, "]")
                        .replace(rx_four, "")
                )
            ) {

// In the third stage we use the eval function to compile the text into a
// JavaScript structure. The "{" operator is subject to a syntactic ambiguity
// in JavaScript: it can begin a block or an object literal. We wrap the text
// in parens to eliminate the ambiguity.

                j = eval("(" + text + ")");

// In the optional fourth stage, we recursively walk the new structure, passing
// each name/value pair to a reviver function for possible transformation.

                return (typeof reviver === "function")
                    ? walk({"": j}, "")
                    : j;
            }

// If the text is not JSON parseable, then a SyntaxError is thrown.

            throw new SyntaxError("JSON.parse");
        };
    }
}());

例子

getStyle


//获取指定元素的样式
// obj： 要获取样式的元素
// name: 要获取样式的名字

function getStyle(obj,name){
    if(window.getComputedStyle){
        //正常的浏览器的方式，具有getComputedStyle()方法
        return getComputedStyle(obj,null)[name];
    }
    else{
        //IE8的方式，没有getComputedStyle()方法
        return obj.currentStyle[name];
    }
}

move


//获取指定元素的样式
// obj： 要获取样式的元素
// name: 要获取样式的名字

function getStyle(obj,name){
    if(window.getComputedStyle){
        //正常的浏览器的方式，具有getComputedStyle()方法
        return getComputedStyle(obj,null)[name];
    }
    else{
        //IE8的方式，没有getComputedStyle()方法
        return obj.currentStyle[name];
    }
}


            // 参数： 
            // obj：要执行动画的对象
            // attr：要执行动画的样式，比如： left top width height 
            // target: 执行动画的目标位置
            // speed：移动的速度(整数右，负数左)
            // callback：回调函数(会在动画执行完毕后执行)

function move(obj,attr,target,speed,callback){
    //关闭上一个定时器
    clearInterval(obj.timer);

    //获取元素的位置
    var current = parseInt(getStyle(obj,attr));

    //判断速度的正负
    if(current > target){
        speed = -speed
    }
    obj.timer = setInterval(function(){
        //获取原来的style值
        var oldValue = parseInt(getStyle(obj,attr));

        //在旧的值上增加
        var newValue = oldValue + speed;

        if((speed < 0 && newValue < target) || (speed > 0 && newValue >target)){
            newValue = target;
        }

        //设置新的值
        obj.style[attr] = newValue + "px";

        if(newValue == target){
            //达到目标，关闭定时器
            clearInterval(obj.timer);
            //执行完毕调用函数
            callback && callback();
        }
    },30);
}

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        img {
            width: 400px;
            height: 200px;
        }

        #outer {
            position: relative;
            width: 410px;
            height: 200px;
            margin: 200px auto;
            border: solid 2px rgb(126, 219, 20);
            background-color: rgb(205, 240, 6);  
            padding: 2px 0px;
            overflow: hidden;
        }

        #imgList {
            /* width: 2050px; */
            list-style: none;
            position: absolute;
            left: 0px;
        }

        #imgList li {
            float: left; 
            margin: 0 5px;
        }

        #navDiv {
            position: absolute;
            top: 170px;
            /* left: 110px; */
        }

        #navDiv a{
            float: left;
            width: 15px;
            height: 15px;
            background-color: rgb(6, 197, 211);
            margin: 0 10px;
            border-radius: 2px;
            /* 设置半透明的程度 */
            opacity: 0.3;
            filter: alpha(opacity=50);
        }

        #navDiv a:hover {
            opacity: 0.7;
        }
    </style>
        <script type="text/javascript" src="js/move.js"></script>
        <script type="text/javascript">
            window.onload = function(){
                //设置定时器名(自动跳转的定时器)
                var timer;
                
                //设置图片容器的宽度
                var imgList = document.getElementById("imgList");
                var imgArr = document.getElementsByTagName("img");
                // 动态调整图片列表盒子的宽度
                imgList.style.width = 410 * imgArr.length + "px";

                //设置导航按钮居中
                var navDiv = document.getElementById("navDiv");
                var outer = document.getElementById("outer");

                navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";

                //图片的索引
                var index = 0;
                
                //获取所有的a
                var allA = document.getElementsByTagName("a");
                allA[index].style.opacity = "0.7";

                //为所有超链接绑定事件
                for(var i=0;i<allA.length;i++){

                    //每个超链接保存自己的序号
                    allA[i].num = i;

                    allA[i].onclick = function(){


                        // 关闭定时器，以防止冲突
                        clearInterval(timer);
                        
                        index = this.num;
                        // imgList.style.left = (index * -410) + "px";
                        move(imgList,"left",-410*index,20,function(){
                            setA();
                            autoChange();
                        });
                    }
                }

                //开启自动轮播
                autoChange();



                //设置所有的a背景透明度返回默认值
                function setA(){
                    //判断是否为最后一张图片，如果是则设为一
                    if(index >= imgArr.length - 1){
                        index = 0;

                        //设置跳转到第一张
                        imgList.style.left = 0 ;
                    }

                    for(var i=0;i<allA.length;i++){
                        //设置内联样式为空串，不会影响到hove
                        allA[i].style.opacity = "";
                    }
                    //清除a的变化后用以下语句重新设置特别的样式
                        allA[index].style.opacity = "0.7";
                }


                //自动切换函数


                function autoChange(){

                timer =  setInterval(function(){
                        //使索引自增，以索引lai控制超链接和移动距离
                        index++;
                        // if(index > 4){
                        //     index = 0;
                        // }

                        index %= imgArr.length;
                        
                        move(imgList,"left",-410*index,20,function(){
                             //setA()会清除所有a的变化
                            setA();
                        }); 
                        
                    },1000);

                }
            }
        </script>
</head>
<body>
    <!-- 用于放置无序列表大的容器 -->
    <div id="outer">
        <!-- 用于放置图片 -->
        <ul id="imgList">
            <li><img src="images/sister.jpg" alt=""></li>
            <li><img src="images/dao.jpg" alt=""></li>
            <li><img src="images/fear.jpg" alt=""></li>
            <li><img src="images/gz.jpg" alt=""></li>
            <li><img src="images/san.jpg" alt=""></li>
            <!-- 最后一张图片和第一张相同 -->
            <li><img src="images/sister.jpg" alt=""></li>
        </ul>
        <div id="navDiv">
            <!-- 超链接中href设置为javascript:;可以取消超链接的默认跳转行为 -->
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>
</body>
</html>

,attr));

    //在旧的值上增加
    var newValue = oldValue + speed;

    if((speed < 0 && newValue < target) || (speed > 0 && newValue >target)){
        newValue = target;
    }

    //设置新的值
    obj.style[attr] = newValue + "px";

    if(newValue == target){
        //达到目标，关闭定时器
        clearInterval(obj.timer);
        //执行完毕调用函数
        callback && callback();
    }
},30);

}




### 轮播图

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        img {
            width: 400px;
            height: 200px;
        }

        #outer {
            position: relative;
            width: 410px;
            height: 200px;
            margin: 200px auto;
            border: solid 2px rgb(126, 219, 20);
            background-color: rgb(205, 240, 6);  
            padding: 2px 0px;
            overflow: hidden;
        }

        #imgList {
            /* width: 2050px; */
            list-style: none;
            position: absolute;
            left: 0px;
        }

        #imgList li {
            float: left; 
            margin: 0 5px;
        }

        #navDiv {
            position: absolute;
            top: 170px;
            /* left: 110px; */
        }

        #navDiv a{
            float: left;
            width: 15px;
            height: 15px;
            background-color: rgb(6, 197, 211);
            margin: 0 10px;
            border-radius: 2px;
            /* 设置半透明的程度 */
            opacity: 0.3;
            filter: alpha(opacity=50);
        }

        #navDiv a:hover {
            opacity: 0.7;
        }
    </style>
        <script type="text/javascript" src="js/move.js"></script>
        <script type="text/javascript">
            window.onload = function(){
                //设置定时器名(自动跳转的定时器)
                var timer;
                
                //设置图片容器的宽度
                var imgList = document.getElementById("imgList");
                var imgArr = document.getElementsByTagName("img");
                // 动态调整图片列表盒子的宽度
                imgList.style.width = 410 * imgArr.length + "px";

                //设置导航按钮居中
                var navDiv = document.getElementById("navDiv");
                var outer = document.getElementById("outer");

                navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";

                //图片的索引
                var index = 0;
                
                //获取所有的a
                var allA = document.getElementsByTagName("a");
                allA[index].style.opacity = "0.7";

                //为所有超链接绑定事件
                for(var i=0;i<allA.length;i++){

                    //每个超链接保存自己的序号
                    allA[i].num = i;

                    allA[i].onclick = function(){


                        // 关闭定时器，以防止冲突
                        clearInterval(timer);
                        
                        index = this.num;
                        // imgList.style.left = (index * -410) + "px";
                        move(imgList,"left",-410*index,20,function(){
                            setA();
                            autoChange();
                        });
                    }
                }

                //开启自动轮播
                autoChange();



                //设置所有的a背景透明度返回默认值
                function setA(){
                    //判断是否为最后一张图片，如果是则设为一
                    if(index >= imgArr.length - 1){
                        index = 0;

                        //设置跳转到第一张
                        imgList.style.left = 0 ;
                    }

                    for(var i=0;i<allA.length;i++){
                        //设置内联样式为空串，不会影响到hove
                        allA[i].style.opacity = "";
                    }
                    //清除a的变化后用以下语句重新设置特别的样式
                        allA[index].style.opacity = "0.7";
                }


                //自动切换函数


                function autoChange(){

                timer =  setInterval(function(){
                        //使索引自增，以索引lai控制超链接和移动距离
                        index++;
                        // if(index > 4){
                        //     index = 0;
                        // }

                        index %= imgArr.length;
                        
                        move(imgList,"left",-410*index,20,function(){
                             //setA()会清除所有a的变化
                            setA();
                        }); 
                        
                    },1000);

                }
            }
        </script>
</head>
<body>
    <!-- 用于放置无序列表大的容器 -->
    <div id="outer">
        <!-- 用于放置图片 -->
        <ul id="imgList">
            <li><img src="images/sister.jpg" alt=""></li>
            <li><img src="images/dao.jpg" alt=""></li>
            <li><img src="images/fear.jpg" alt=""></li>
            <li><img src="images/gz.jpg" alt=""></li>
            <li><img src="images/san.jpg" alt=""></li>
            <!-- 最后一张图片和第一张相同 -->
            <li><img src="images/sister.jpg" alt=""></li>
        </ul>
        <div id="navDiv">
            <!-- 超链接中href设置为javascript:;可以取消超链接的默认跳转行为 -->
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>
</body>
</html>
精选资源
JavaScript基础教程（第8版).pdf
02-14
JavaScript基础教程第8版详细介绍了该语言的核心概念，包括语言的语法、程序结构、数据类型、变量、运算符、控制结构、函数、对象、事件处理、表单验证等方面。本书通过大量的实例和练习题，帮助初学者从零开始，...
精选资源
JavaScript 基础入门指南.pdf
最新发布
12-07
### JavaScript 基础概念和核心技术 #### JavaScript 简介 ...总结而言，通过系统学习和实践JavaScript基础概念及其在Web页面的应用，初学者能够掌握编程的基石，进一步开发出能够与用户互动的Web应用。
JavaScript中hasOwnProperty操作符的用法
刘旭的博客
04-29 588
hasOwnProperty 语法：对象.hasOwnProperty（属性名） Object.prototype.hasOwnProperty.call（对象，属性名） hasOwnProperty返回的值是布尔类型 true/false 简单示例一下 var obj={ name:'aa', age:'2', habby:'睡觉，钓鱼' } console.log(obj.hasOwnProperty('name'))//true
JS 初级面试题
热门推荐
qq_40055200的博客
11-11 2万+
优快云 1.基本数据类型有哪几种?(高频) undefined,null,boolean,string,number,Symbol(es6) Symbol:定义对象的唯一标识(和id一样) let name = Symbol() console.log(typeof name) // Symbol 2.引用数据类型有哪些?(高频) Object,Array 内建对象:Object,String,Array 介绍js有哪些内置对象？ Object是JavaScript..
js进阶（Es6-）
qq_41950754的博客
09-30 1989
js高阶部分
js中的hasOwnProperty()方法
weixin_43961899的博客
07-31 2万+
hasOwnProperty()方法用于检测一个对象是否含有特定的自身属性，返回一个布尔值 那么我们来验证一下 function Fn() { this.age = 'wm' } Fn.prototype.sex = '女' var obj = new Fn() // 实例化对象会继承构造函数里的属性和方法 ...
hasOwnProperty.call
qq_36657291的博客
03-29 382
是 JavaScript 中的一个方法，用于检查一个对象是否拥有特定的自身（非继承）属性。这样做可以让你在没有实例化对象的情况下，或者想要检查某个对象是否拥有特定属性时使用。是对象实例的方法，如果对象拥有指定的自有属性，它返回。这两种方法的结果是一样的，但第二种方法使用了。
精选资源
pink老师Javascript基础PPT.zip
02-06
pink老师的Javascript基础PPT课程旨在为学员构建坚实的JavaScript基础，以便更好地理解和应用这项强大的脚本语言。 在"JavaScript第一天.pdf"中，我们可能学习到JavaScript的基本概念，包括它的历史背景、应用领域...
精选资源
javascript基础语法总结.pdf
07-02
这个资源是javaScript基础语法的总结，适合学完javascript基础语法的进行巩固、复习！ 这...我是想免费给大家看的,这怎么还收费
Object.prototype.hasOwnProperty.call()
Damien_J_Scott的博客
03-04 8599
之前判定是否含有该key的方法一直是 !!obj[key],后面看到了更加规范的,记录下 JavaScript中Object对象原型上的hasOwnProperty()用来判断一个属性是定义在对象本身而不是继承自原型链。 从console的test可以看出来,它可以判定该key是否存在于object中.但是既然这样可以实现,为什么还要使用Object.prototype.hasOwnProperty.call(),这么复杂的写法呢. 这个test可以看出来,明明a是object的属性,为什么返回.
Object.prototype.hasOwnProperty.call(myObj, prop) 和 Object.hasOwnProperty(prop)区别
qq_52065282的博客
08-01 754
这个方法对于判断属性是否是对象自身的属性（而非继承而来）非常有用。注意，它不会检查原型链上的属性。hasOwnProperty 是 JavaScript 中对象的方法之一，参数是要检查的属性名，如果对象拥有该属性true，反之false。方法的对象，并将要检查的属性作为参数传递给该方法。方法的方法，也就是通过函数调用的方式来执行。方法被覆盖或修改，确保调用的是原生的。方法受可能存在的重写或修改的影响。是一种使用函数的方式来调用。方法，我们可以指定需要执行。检查对象是否具有特定属性。
js中的hasOwnProperty()方法详解
weixin_47450807的博客
01-24 886
Object.prototype.hasOwnProperty(prop)函数，不会查找该属性的原型链上的属性。和in不同. //例如: let obj = { a: 10 } console.log("a" in obj) //true console.log("toString" in obj) //true console.log(obj.hasOwnProperty("a")) //true console.log(obj.hasOwnProperty("toString")) //false
js属性对象的hasOwnProperty方法
zhouzuoluo的博客
04-15 645
IE 5.5+、FireFox、Chrome、Safari、Opera等主流浏览器均支持该函数。 Object的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性。可以用于区分自身属性和继承属性，如下 function foo() { this.name = 'foo' this.sayHi = function () { co...
JavaScript属性对象的hasOwnProperty方法：检测一个属性是否是对象的自有属性
Loong专栏
12-15 516
hasOwnProperty() 方法是 Object 的原型方法（也称实例方法），它定义在 Object.prototype 对象之上，所有 Object 的实例对象都会继承 hasOwnProperty() 方法。 hasOwnProperty() 方法用来检测一个属性是否是对象的自有属性，而不是从原型链继承的。 hasOwnProperty() 方法不会检测对象的原型链，只会检测当前对象本身，只有当前对象本身存在该属性时才返回 true。 var obj = {x: 1} obj.ha.
关于javascript的Object. hasOwnProperty，看我就够了
大灰狼的小绵羊哥哥的博客
03-05 2399
hasOwnProperty基本概念 hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中（非继承属性）是否具有指定的属性， 如果 object 具有带指定名称的属性，则 hasOwnProperty 方法返回 true，否则返回 false。此方法不会检查对象原型链中的属性；该属性必须是对象本身的一个成员。 使用语法 obj.hasOwnProperty(pro...
安全{}.hasOwnProperty.call检测
W_w1111的博客
10-28 314
在不确定变量类型的情况下安全地进行属性检测，从而提高代码的健壮性和容错能力。
前端代码开发规范-js篇
qq_22010473的博客
05-23 319
目录 1、引用类型： 1.1、引用类型使用const，避免使用var。理由：这样能确保你不能对引用重新赋值，不会因此出现 bug 或难以理解的代码 // bad var a = { name: 'zx', age: 24}; var b = [1, 2, 3]; // good const a = { name: 'zx', age: 24}; const b = [1...
pink老师JavaScript基础课程PPT合集
从给定的文件信息中，我们可以提炼出关于JavaScript基础知识点的相关内容。以下是对这些文件内容的详细说明和知识点的整理： 标题：“pink老师Javascript基础PPT.zip” 描述：“2021年pink老师线下班 Javascript...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值