JS知识点

script

外层循环控制行数
内层循环控制列数

编码的习惯:
1:严格的代码缩进
2:合适的变量的命名
3:每一行的末尾添加分号
4:代码分组(类型的代码放到一起),不同类型的代码组要进行隔行
5:添加合适的注释

进制:
js的机制的表示形式:
二进制:0b binary
八进制:0o octal
十进制:
十六进制:0x hexadecimal
1、
JavaScript介绍
js是一种脚本语言 还是动态类型 弱类型的基于原型的语言
脚本语言:直接由浏览器解析执行 必须要有宿主运行的宿主(host)环境,通常是浏览器。不能开发一些系统软件
非脚本语言可以直接在操作系统上执行
动态类型、弱类型:js的数据类型当赋值以后才可以确定 并且是可以改变的
基于原型:基于原型继承_ proto _ 创建的所有对象都是基于一个原型对象而创建的。

2、
前端三层
HTML 结构层 写网页结构内容 身体
css 样式层 写网页样式 衣服
JavaScript 行为层 写网页动态特效 行为

3、
JavaScrip发展史

  1. 1995
    网景 联合 sun 发布 JavaScript)livescript
  2. 2009
    ECMAScript5(ES5) 学
  3. 2015
    ECNAScript6

ECNA:欧洲计算机

学习js的几部分:
1.ECMAScript:js的核心基础部分。规定了js的基本语法,类型,流程控制语句。
2.DOM:通过js去操作页面文档
3.BOM:如何使用js访问它的宿主对象。浏览器。
4.面向对象:js的高级部分。
js的组成部分
1)ECMAScript 核心js 规定了js的基础语言 :数据类型 变量 常亮 分支 循环 数组 函数 对象等
2)DOM document object model 文档对象模型 规定了一套管理HTML文档的机制
3)BOM browser object model 浏览器对象模型

5、
引入js
1.内部引入

可以写在页面任何位置 推荐写在body结束标签之前(加载完所有的HTML 在加载js)
一个页面可以有script标签
注意:type属性可以省略

2.外部引入——内容与行为的分离
1)新建js文件
2)HTML文件中引入

可以写在网页任何位置
推荐写在head标签里
一个页面里可以有多个script标签

注意: 外部和内部不可以共用一个script 如果共用 内部引入不生效

6、
js的语法
1)JavaScript区分大小写
2)js语句以分号或者换行结尾
3)推荐一行只写一条语句 并且以分号结尾
4)js忽略多余的空格

整理代码格式 ctrl+alt+L

7、
输出方式
1)输出到控制台
console.log()
注意:不解析HTML标签
2)输出到页面
document.write()
注意:解析HTML标签 输出到当前script后面
3)弹出警告框
window.alert()
简写alert()
注意:阻止页面程序的执行 不解析HTML标签

打开控制台:Crtl+shift+J

HTML元素在js中的应用
1)引号中写HTML的标签
document.write(‘

你好 中国<>/h2’)
2)元素中引入script

8、 js调试 控制台调试 包含三部分 1)错误类型 Typeerror 2)错误原因 console .Log is not a function 3)错误的位置

9、
多个script报错
其中一个script有错 对其他script没有影响
同一个script中 错误及错误之后不执行 错误之前会执行

10、
标识符:identifier
给内存中的不同类型的数据起的名字
1)概念 在计算机编程语言中 标识符是用户编程时使用的名字
列如 变量名 数组名 函数名 对象名等
2)标识符命名规则(必须遵守)
①区分大小写 a A
②可以包含数字 字母 下划线 $
③不可以以数字数字开头
④不能是js的关键字和保留字
3)标识符的命名规范(建议)
①见名知意
②多个单词建议驼峰命名法
大驼峰 所有单词首字母都大写 HelloWorld
小驼峰 第一个单词首字母小写 后面单词首字母都大写 helloWorld
③禁用单字符标识符
标识符有很多种类
变量名 常量名 只读变量名 方法名 类型名
11、
变量 variable
一块有名字的内存 内存中的数据可以被修改
变量的提升
定义
值可以改变的量 称为变量
作用
存储数据的容器
声明变量
var 变量名
变量赋值
变量名 = 值
等号右侧赋值给等号左侧
变量的初始化
声明变量的同时给变量赋值 称为变量的初始化
var 变量名 = 值
一条语句可以声明多个变量 逗号隔开
var 变量1,变量2,…;
①var x = 5,y = 6,z = x + y 声明变量的同时赋值
console.log(z)
②var x,y,z;//声明变量
x=5 ;//变量赋值
y=6;//变量赋值
z=x+y;//变量赋值
console.log(z);
声明变量没有赋值
返回undefined(未定义) 不报错
var x;
console.log(x); undefined
变量没有声明
console.log(y); 报错Referenceerror
重新声明变量
在js中 重新声明变量 之前的值不会丢失
变量重新赋值
后面的值会覆盖前面的值
变量声明提升
js在执行前会把变量的声明提升到所有代码的最顶部 赋值留在原地
不写var的情况
不写var声明的变量为全局变量 使用范围不受控制
变量的分类
①全局变量——任何位置都可以使用
②局部变量——只能在局部作用域中使用

12、
动态输入框
prompt(‘默认提示’,‘默认值’)
注意:
1)默认值可以省略
2)返回string类型

13、
常量
字面量:1 1.1 true false undefined null ‘abc’
只读变量:read only const
声明
const 常量名 = 值;
注意
①常量的值不可以改变 重新赋值会报错
②声明常量的同时必须赋值
③常量声明不会提升
常量命名规范
常量名习惯大写 多个单词习惯用下划线

14、
注释
1)HTML

2)css
3)js
①单行注释
//注释的内容
ctrl+/
②多行注释
/* 注释的内容 */
ctrl+shift+/
③方法的注释
方法上边/**按回车
注意:注释之间不能相互嵌套

15、
数据类型——js支持的数据类型
1)基本数据类型——5
Number 数字类型
包含了所有的数字(整数、小数、正数、负数、极大极小数、进制数) 、NaN(not a number)、Infinity、-Infinity
NaN:not a number
Infinity:当分母为零 分子为正数
-Infinity:当分母为零 分子为负数

Xtring 字符串类型
引号包含的任意内容
单双引号都可以
注意:
①引号成对出现
②字符串可以相互嵌套 单引号内嵌套双引号 双引号内嵌套单引号
③一个字符串需要写在同一行 跨行显示会报错 可以在换行的位置加转义字符(下面 17)

 转义字符\(反斜杠)

产生歧义内容的前面
语法:\转义的内容
例子:var str1 = ‘双节’快乐’’;
特殊的转义字符:
\n 换行 new line
\t 制表符 tab
\r 回到一行的开始 return
\bb 退格符 backspace

Boolean 布尔类型
包含两个值
true 真
false 假

Undefined 未定义类型——只有唯一的一个值:undefined
声明变量没有赋值 返回值为undefined 数据类型为undefined
注意:
①undefined一般不会主动去赋值
②undefined表示变量的数据类型不确定
因为js拥有动态的数据类型 根据变量的赋值 确定变量的数据类型
声明未定义

Null 空类型——只有唯一的一个值:null
null代表了一个不存在的对象
一般用来主动释放对象
typeof时返回object

2)引用数据类型——1
本质上都是Object
Array、Function、Date
object 对象类型
1)object 对象类型 typeof返回object
var obj = {
键值对
}
键值对
键名:键值 key:value 属性:属性值
键名 默认为string类型 引号可加可不加
键值 可以是任何数据类型
多个键值对之间用逗号分隔 最后一个键值对后面不加逗号

2)array 数组类型 typeof返回object
数组中的数据称为数组元素 数组元素可以是任何数据类型 多个数组元素之间用逗号分隔
var arr = [数组元素1,数组元素2,。。。]

3)function 函数类型 typeof返回function
函数默认不执行 当调用或者事件驱动才执行
function f(){

}

16、
判断数据类型
typeof 值
返回右侧值的数据类型
可以返回 number string boolean undefined object function

17、
转义字符\(反斜杠)
产生歧义内容的前面
语法:\转义的内容
例子:var str1 = ‘双节’快乐’’;
特殊的转义字符:
\n 换行 new line
\t 制表符 tab
\r 回到一行的开始 return
\bb 退格符 backspace

18、
js拥有动态的数据类型
js根据赋值确定变量的数据类型 同一个变量可以为多种数据类型

19、
运算符 操作符
分类:
1)根据操作数
一元运算符(单目运算符)、
二元运算符(双目运算符)、
三元运算符(三目运算符)
2)根据作用
1+2:1和2称之为 操作数或者是算子,+:运算符
1+2:表达式
返回值:表达式或者是算子计算的结果
所有的运算
算数运算符

      • / %(取余) ++(自增) --(自减)
        1)当全是number 正常进行数学运算
        2)当遇到string
        +:遇到字符串会直接进行字符串拼接 返回string类型
    • / %:转换为number进行计算 能转换为数字 进行正常的数学运算 如果不能转换为数字 则返回NaN
      %:结果的符号取决于%左边的算子的符号
      做计算时 true转换为1 false转换为0 undefined不能参与计算返回NaN null转换为0 NaN返回NaN
      +:一元 二元
      console.log(+5);一元
      console.log(5+5);二元
      -:一元 二元
      、/、%:二元
      console.log(5
      5)二元
      ++ 自增 自己+1 i++:后++ ++i:前++ i++相当于i=i+1
      – 自减 自己-1 i–:后-- --i:前-- i–相当于i=i-1
      不管前加加还是后加加 对于变量自身来说没有区别 都是+1
      前加加 先执行加1 再返回 后加加 先返回 再加1
      前减减 先执行-1 再返回 后减减 先返回 在-1

                            比较运算符(关系运算符)
      

用来比较两个算子的关系在
只能比较两个值 返回布尔类型

、<、>=、<=
== 等于 只判断数值
=== 绝对等于 全等 绝对等于 既判断数值 又判断数据类型
!= 不等于 不等于 等于取反
!== 不绝对等于 不全等 全等取反
特殊比较:
字符串比较是一个字符vs一个字符 一旦能决定大小 就不再往下执行
console.log(undefinednull) true
console.log(undefined
=null) false
console.log(NaNNaN) false
console.log(NaN
=NaN) false
console.log(NaN != NaN) true
console.log(true == 1) true
console.log(true === 1) false
console.log(false == 0) true
console.log(false === 0) false
console.log(null == 0) false
console.log(null === 0) false

                                     逻辑运算符

返回值为布尔类型
&& and 逻辑与 并且 所有表单式结果都为true 最终结果为true 只要有一个表达式的结果为false 最终结果就为false
|| or 逻辑或 或者 只要有一个表达式的结果为true 最终结果就为true 所有表单式结果都为false 最终结果为false
! not 逻辑非 取反
优先级从大到小:非与或

                                       赋值运算符

等号右侧的值赋值给等号左侧
返回值:计算的结果
右侧可以是操作数 也可以是表达式
= 赋值 右侧的返回值赋值给左侧的变量
+= i+=j 相当于i=i+j
-= i-=j 相当于i=i-j
= i=j 相当于i=i*j
/= i/=j 相当于i=i/j
%= i%=j 相当于i=i%j
注意:
短路逻辑
表达式结果一旦能决定最终结果 后面的表达式就不再执行
逻辑与短路的条件:false
逻辑或短路的条件:true

不是布尔值的逻辑运算符
逻辑与 第一个值为false返回第一个值 如果第一个值为true 则返回第二个值
逻辑或 第一个值为true返回第一个值 如果第一个值为false 则返回第二个值
一下六个值转换为false 其余所有值都转换为true
undefined
null
false
0
NaN
“”(双引号)或’’(单引号) (空字符串,中间有空格时也是true)
三目运算符(条件运算符)
语法
表达式1?表达式2:表达式3
说明
①表达式1为布尔值
②表达式1为true 执行表达式2
③表达式1位false 执行表达式3

	 位运算符

操作32位的整数 必须是整数
32位整数的最高位是1表示负数 最高位是0表示正数

~ ^ >> << >>> & |

  1. ~ 按位取反
    遇到0转换为1
    遇到1转换为0
    实质:求负再减1
    应用:取整 ~~number
    2)^ 按位异或:一个数先后对同一个数异或两次,结果是它本身
    相同为0 不同为1
    应用一:交换两个边路的值
    var num1=10;
    var num2=20;
    num1 = num1 ^ num2;
    num2 = num1 ^ num2;
    num1 = num1 ^ num2;
    应用二:简单的加密应用
    var heart = 5211314;
    //加密
    var key = 999999999;
    var result = heart ^ key;
    log (result);//加密
    log (result ^ key);//解密

3)>> 带符号右移
num>>n
实质:除以2的n次方
右移几位 右侧删除几位
4)<< 左移(不叫带符号左移)
num<<n
实质:乘以2的n次方
左移几位 右侧补几个零

随机生成一个数
(Math.random()(max-min+1)+min)
随机生成一个整数
parseInt(Math.random()
(max-min+1)+min)

运算符优先级:

1)先乘除取余 在加减
2)小括号优先级最高
3)一元优先级大于二元
4)二元优先级大于三元
5)逻辑运算符优先级为非与或
6)优先级相同 从左往右执行

名词解释:
1+5
操作数:1、5
运算符:+
表单式:1+5
返回值:操作数和表达式都有返回值 操作数返回整个结果

js中的运算符操作的都是返回值

20、
精确度问题
不可避免
解决:
值.tofixed(number)
返回string类型

21、
数据类型转换
为何需要类型转换?
任何语言中都有一种规则:不允许不同类型的数据之间进行运算
如果是不同类型的数据进行运算 那么久需要向同种类型转换之后再做运算

1)自动(隐式)转换
转换为number类型
- * / %
转换为string +
当一个数值+字符串转换为string
转换为boolean
需要布尔值 如果你的值不是布尔值 会隐式转换为布尔类型
列如:if条件 三目表达式 比较运算符 逻辑运算符 while循环等
以下六个转换为false 其余都转换为true
false undefined null NaN 0 “” ’ ’ (空字符串)

2)强制(显式)转换
转换为number
Number()
总结:
①true转换为1 false转换为0
②只要包含不是数字的字符返回NaN
③前后的空格可以忽略
④数字前面的0也是忽略

 转换为string类型

String()
转换为boolean类型
Boolean()

log(1&&2);都为true
log(1||2);第一个为true 短路
log(0&&2);第一个为false 短路
22、
程序
程序=数据+算法
数据:变量、数组、对象等
算法:顺序结构、分支结构、循环结构

分支结构
1)if 单分支结构
单分支选择语句 根据条件有选择的执行或者不执行这唯一的一个分支
语法:
if(条件){满足条件执行的语句};
注意:
①条件一般为布尔值,如果不是布尔值,会隐式转换布尔值
转换为false的有:false null undefined NaN 0 ’ ’
②大括号中是满足条件执行的语句 如果条件为false 大括号中的语句不执行

2)if-else 双分支
执行且必须执行其中的某一个分支
语法:
if(条件){满足条件执行的语句}else{不满足条件执行的语句}
注意:
①小括号后不加分号
②条件一般为布尔值,如果不是布尔值,会隐式转换布尔值
转换为false的有:false null undefined NaN 0 ’ ’
③当条件为true,执行if大括号中的语句;当条件为false,执行else大括号中的语句
④当只有一条执行语句,if和else后面的大括号可以省略

3)else-if 多分支
执行且必须执行其中的某一个分支
if(条件){满足当前条件执行的语句}
else if(条件){满足当前条件执行的语句}
else if(){}
else if(){}

else{以上条件都不满足执行的语句}
注意:
①小括号后不加分号
②条件为布尔值
③else可以省略
④上面的条件一旦满足,后面的条件不执行,只要后面的条件执行,表示上面的条件都不满足

4)
switch语句
使用绝对等于进行等值比较判断
语法:
switch(变量表达式){
case 表达式1:
代码块1;
break;
case 表达式2:
代码块2;
break;

default:
代码块n;

}
注意:
①变量表达式可以是任何数据类型
②表达式1等一般为常量
③default可以省略的,写上表示上面条件都不满足,执行的语句
④break可以省略 加上表示结束整个switch结构
⑤switch做全等比较

分支结构之间可以相互嵌套

循环结构
1)for
语法
for(初始化循环变量;循环条件;迭代){
循环体
}
注意:
①for循环小括号内的两个分号不可以省略
②小括号后不能加分号
③循环变量、循环条件、迭代可以省略
④初始化循环变量可以有多个,用逗号隔开 例如 var x,y
执行原理
①初始化循环变量,判断循环变量是否满足条件,不满足,直接退出循环
②满足,进入到循环内部,执行循环体
③执行迭代,使循环变量的值发生改变
④判断改变后的循环变量是否满足循环条件,不满足,直接退出循环
⑤满足,进入到循环内部,执行循环体
⑥执行迭代,使循环变量的值发生改变
⑦判断改变后的循环变量是否满足循环条件,不满足,直接退出循环

for(初始化循环变量;循环条件;迭代){
循环体;
}
2)while
循环要素
①初始化循环变量
②循环条件
③迭代(改变循环变量)
④循环体
语句:
while(循环条件){
需要反复执行的代码
}
var i=1;//初始化循环变量
while (i<=100){ //循环条件
console.log(i);//循环体
i++;//迭代
}
3)do-while
语法:
do{
需要执行的重复的代码
}
while(条件);

注意:while和do-while的区别
while:先判断在执行
do-while:先执行一次,再判断

过程:
①先执行一次大括号中的语句
②在判断条件是否为true,当条件为false,结束整个循环,当条件为true,执行大括号中的语句

循环结构和分支结构可以互相嵌套

循环嵌套
1)语法
for(var i=0;i< ;i++){
for(var j=0;j< ;j++){
for(var k=0;k< ;k++){
}
}
}
2)执行原理
外层循环走一下 内层循环走一圈
外层循环实际控制内层循环的次数
内层循环实际控制的是输出
行(外层循环遍历行,外层循环控制内层循环执行次数)
列(内层循环遍历列,内层循环控制实际的输出)

break和continue
1)break
配合switch和循环使用
表示结束整个结构(当有循环嵌套,结束当前层循环)
语法:break;
注意:
break后面的语句不执行
2)continue
配合循环使用
表示跳过本次循环,继续下一轮循环
语法:
continue;
注意:
continue后面的语句不执行

22、
模式字符串:在变量和字符串进行+连接的时候使用更加的方便
语法:模式字符串的内容;符号是Esc键下面的那个符号。
模式字符串中${内容}:内容可以是任意的js的表达式

bit:位,0或者是一个1 就是1bit
byte:8bits
字符集:charset
所有的字符集本质上都是整数的集合。一个字符一定对应着一个整数,反之不一定
ASCII:是一个单字节字符集,共收录了128个字符,只用到了字节中的低7bits【0-127】
0字符:48
A字符:65
a字符:97

有些特殊的字符:用于控制显示的字符
如果在程序中需要使用这些具有特殊意义的字符,但是这些字符没有一个具体的字符
必须使用一种特殊的表示形式来表达这些特殊的符号
\r:回车符:控制光标回到当前行的行首
\n:换行符:光标换到下一行
enter键:对应着两个字符:\r\n:让光标去到下一行的行首
\t:tab 键 水平制表符 占用【1-4】个半角符号的空白空间 补齐4的倍数
\b:对应着退格键 退格符 backspace键
’ :代表了字符 ’
":代表了字符 "
\:代表了字符 \

ASCII:世界上所有的字符集都兼容了该字符集
ISO8859-1:西欧字符集
gb2312:收录了所以的简体中文
gbk:gb2312的一个超集,收录了简体中文,繁体中文,各个少数名族的符号
utf-8:收录了世界上所有的符号

23、
函数:function java里叫方法:method
函数是一段有名字独立的功能代码块,通过名字可以在任意的位置访问调用该代码块。
使用函数带来的优点:
1.代码的复用
2.功能模块化,更易于后期的维护和修改。

对于一个人对象来说:属性+功能的组合体。
属性:年龄、姓名、身高、体重、性别
功能:吃喝拉撒睡、学习、开车、写字。
人如果要想去开车,需要外部提高一辆车给他开
很多功能是需要外部提供的数据

函数的定义的形式:function 命令定义形式
函数声明定义形式
函数的定义的语法:封装函数
function 函数名(参数列表){ 函数体 }

function:js的关键字,用于定义函数。
如果一行代码的内容以function 开始,那么js引擎会认为这是一条定义函数的语句
函数名:是一种标识符,该名字应该能体现函数要实现的功能 首字符小写 如果是多个单词构成 从第二个单词开始首字符大写
(参数列表):这一对小括号必须要有,里面的内容可以为空
小括号中内容被称为【参数列表】也称为:【形参列表】简称【形参】
参数:参与内部执行的数据
形式参数:形式上参与内部执行的数据
形参的个数是任意的 依据功能的需求来确定 形参是用来接收外部的数据的 供函数内部使用
外部提供的数据是实际参与函数内部执行的数据
形参是变量 是局部变量是当前函数的局部变量 只能在函数内使用
形参变量的命名需要体现出要接收的数据的含义 多个形参变量之间使用逗号分隔最后一个形参的后面不需要逗号
{方法体}:{}是必须要存在的 里面的内容为函数的主体实现功能部分 function body
函数体可以是js的合法代码

使用:
函数的调用 invoke function call function
语法:函数名(实参列表)
实参列表:实际参与函数运算的数据 通常实参的个数和形参的个数是一致的 多个实参用逗号分离
调用函数的时候 就把实参的值赋值给形式参数 让实际参数在函数中参与运算

定义函数的时候
①参数列表的本质就是用来接收外部的数据的 当函数被使用(调用)的时候形式参数用来接收实际参数的值在函数中参与运算
②形参列表也可以表示函数的自身的需求,需要使用者使用该函数的时候,提供给函数的外部数据。
③形参列表中定义的是局部变量,使用逗号分隔。只能在当前函数中使用。形参列表中的参数变量的个数没有限制,通常是不能重名的。
使用函数:调用函数
语法:函数名(实参列表)
①实参列表的个数和顺序应该和形参列表是一致的
②实参的个数比形参的多,后面多余的实参就没有形参来接收匹配了。就没有办法通过形参来访问实参了。
③实参的个数比形参的少,后面多余的形参的值是undefined。
函数的调用的过程的简单说明:
①函数的定义不会被执行
②只有函数的调用会被执行,当执行函数的调用语句的时候,首先将实际参数的值赋值给形式参数(数值的传递简称传参)。然后执行函数体内的代码,当函数体内的代码执行完毕之后,执行当前函数调用语句后的代码。

补充:如果一个变量的值是null,和一个变量的值是undefined。
变量的值是null:通常是意料之中的事情
一个变量的值是undefined:通常是意料之外的事情
注意:
不管js提供的内置函数,还是我们自定义的函数,如果参数涉及到了区间的值,那么区间都是[前闭后开)。

函数的返回值:当一个函数被调用执行的时候,函数自身执行之后会产生一个结果,那么该结果就称为函数的返回值
①并不是所有的函数都需要返回值。根据具体的业务的需求,有选择的让函数可以有返回值和没有返回值
②如果一个函数没有返回值,那么undefined作为函数的默认返回值
,返回值为未定义
③如果我们定义的函数当希望函数执行完毕之后,希望函数产生一个结果。使用该结果,那么该函数就应该定义为具有返回值的函数。如果一个函数当执行完毕之后,只是简单执行函数体中的功能,而不希望有什么结果,那就不需要返回值。
④函数的返回值就是一个数据,可以是js支持的任意类型。
⑤如果希望函数有返回值,那么必须使用关键字 return 在函数体中将需要返回的结果返回
语法:return 需要返回的值;
return后可以是js的任意的有返回值的代码
return语句的个数是没有限制的

return的使用:
①return js的关键字
②return只能在函数体中使用
③使用return返回函数需要的返回值
return js的任意的有返回值的代码
④如果一个函数不需要返回值那么也可以使用return来结束函数。
语法:return;
⑤只要在函数体中执行到了 return语句,那么都会立即结束函数的执行,函数返回

 从返回值的角度去给函数分类:

可以分为2类:
①有返回值的函数
②无返回值的函数,默认返回undefined
这两类函数的使用:
①:无返回值的函数的调用:
只有唯一的一种正常的使用方式:直接调用
②有返回值的函数的调用:
1.使用一个变量来接收函数的返回值——使用最多的
var num = random(0,100);
2.作为一个表达式的操作数使用:
var value = num + random(0,100);
3.作为方法的实参使用:
var num = random(random(0,10),100);
4.直接调用,会丢弃函数的返回值——很少
random(0,100);
5.作为一个方法的返回值——不多:
function f(){
return random(0,10);
}

 函数的定义声明的方式:一共用三种

1)function 命令行模式(函数声明方式)——最常用的
function 函数名(参数列表){函数体}
特点:函数具有声明提升的特点,可以在定义函数的前面使用函数
2)函数的表达式方式:
右边的是一个匿名函数对象,存在于内存中。函数变量名保存的是该对象的地址
通过函数变量名保存的函数对象的地址去访问内存中的匿名函数-
var 函数变量名 = function(参数列表){函数体}
特点:
①这样的函数称为匿名函数
②通过指向匿名函数对象的函数变量去访问该匿名函数
③必须先定义后使用,定义在前,使用在后
④调用该匿名函数:函数变量(实参列表)
3)使用构造函数 ——了解:
var 函数变量名 = new Function(“形参列表” “…” “函数体”)
调用:函数变量名 ();

函数的分类:
1):从返回值的角度
①有返回值
②无返回值
2)从参数的角度
①有参函数
②无参函数
3)从定义者的角度
①js语言自身定义的函数:js内置函数 Math.random()
直接使用
②开发者自定义的函数
定义后使用
③第三方的开发者定义的函数
需要引入之后才能使用
4)从调用者的角度
①实例函数
对象作为调用者
②静态函数
类型作为调用者
类型:对对象的抽象的描述
人,树,车,动物
对象:类型的一个具体的实例
小刚,园区门口的那颗小白杨
我的那辆自行车,邻居家的小狗

函数的重载:overload

重载的概念:
多个函数之间,函数名字相同,参数列表不同 称为函数的重载
js中不支持函数的重载 如果多个函数的名字相同,参数不同,那么后面的函数会覆盖掉前面的函数
在后续的学习中,可以使用其他方式实现重载

函数书写的几点意见:
1)函数名一定要见名知意 要通过方法的名字能猜出函数实现的功能
2)函数的参数的名字也要见名知意,通过参数变量的名字可以猜出实参的数据内容
3)函数体中,先处理一些特殊情况,然后在解决一般情况
4)函数体中需要使用变量,尽量使用局部变量,能不使用全局变量就不要使用全局变量
以使用局部变量为荣,以使用全局变量为耻。
5)函数的功能实现的越单一越好。职责单一。越单一越容易被复用
6)函数体不能过于臃肿。越短小越好

24、
函数的参数传递:
1:函数定义的参数:形参列表
形参的作用:接收实参的数据的
2:函数调用的参数:实参列表
实参:本次函数执行中的实际参数运算的外部数据
3:传参的本质:
把实参的数据赋值给形式参数变量
4:值传递:
将实参变量的值(不是地址)赋值给形参变量。简称传值。pass by value
基本数据类型作为参数,那么都是值传递
引用数据类型作为参数,那么就是地址传递(引用传递|传引用)pass yb reference。
5:栈帧:stack frame
每个栈帧对应着一个未运行完的函数。栈帧中保存当前函数的所有的局部变量(函数内定义的局部变量和形参变量)

 栈中数据的特点

先入后出 | 后入先出。frist in last
压栈:push 将数据压入栈顶
弹栈:pop 将栈顶数据删除

关于js程序中处理的数据使用的内存的类型:
1:堆内存 heap js中的对象数据
js引擎动态管理的。灵活,慢
2:栈内存 stack 函数中的局部变量
静态管理的。内存是连续的,对函数的占用的内存的分配是固定的。效率高,不灵活。
特点:数据是先入后出,后入先出。
压栈:将数据压入栈内存 push
弹栈:将数据从栈顶删除 pop
方法调用:
1.再栈内存中给函数分配栈帧
栈帧中保存的是当前函数中的所有的局部变量
2.将实参的值给形参
3.执行函数体中的代码
4.函数执行完毕之后 对应的栈帧被清除掉

25、
局部变量和全局变量的区别:
1:定义的位置
全局:方法外定义的
局部:方法内,形参也是局部变量
2:作用域不同
全局:整个script代码块内。
局部:只能在定义的方法内使用。
3:生命周期不同
全局:生命周期依赖于window对象。window对象代表了当前浏览器窗口,窗口被关闭全局变量被销毁
局部:生命周期依赖于栈帧,依赖于函数的调用,从开始调用到结束调用
4:被访问的优先级不同
当全局变量和局部变量重名的时候,那么在函数中局部变量被访问的优先级高于全局变量
在函数内如果访问重名的全局变量:可以通过【window.全局变量名 或者是this.全局变量】
5:所处的内存不同
全局:堆中
局部:栈中
6:使用上的区别:
①优先使用局部变量。全局变量不易于整体的维护,可能存在变量之间数据的污染覆盖等问题。
②如果当一个数据希望在多个函数内共享,而且保存使用之后的值,需要使用全局的。

补充:定义的所有的全局变量还有方法,都会作为window对象的属性和功能存在。
局部变量不会

函数 | 方法的执行符:一对小括号。可以让一个函数对象执行函数体中的内容。

函数的名字或者函数变量:代表了函数对象自身,通过指针(保存对象地址的变量)的指向。

回调函数:一个函数fn 的参数是函数对象,然后在fn 内部调用执行参数函数。这个参数函数就是回调函数。
callback

匿名自执行函数—匿名立即执行函数:执行且仅执行一次。是以一个函数存在的,是一个封闭的空间,可以定义局部变量。function前面必须有个符号,不能以function开头

(function(){
console.log(匿名自执行函数)
})();

26、
局部函数——闭包:
1:定义在函数体内的局部函数
2:局部函数的作用域在函数体内,所以只能在函数体内调用

27、
函数的属性:
name:代表了函数的名字,string类型。
①对于有名函数,name返回的就是函数的名字。以字符串返回
函数名.name
②匿名函数的名字,如果使用一个变量指向的匿名函数,那么函数的名字是该变量的字符串形式
length:代表了当前函数对象的形参的个数
arguments:
①是函数体中的一个属性,直接使用即可
②是一个对象,代表了本次调用的的实参列表的数据
③有一个属性:length 代表了实参的个数 length 是一个大于等于0的整数值。
④是一个类数组对象。一个类似数组的对象。数组就是一组数据的集合
⑤通常使用形参来接收实参数据,并处理实参数据。如果说参数的个数的需求是变化的,那么就不能使用形参来接收实参了,这时候就不需要定义形参来接收实参了,可以使用arguments来接收实参的数据。
可以通过arguments.length 获得实参的个数。
可以通过arguments[i] 获得序号是i的实参的值。序号从0开始,依次递增。
⑥callee 该属性是一个对象,代表了函数本身。
callee属性在js的严格代码形式下不允许使用。
ues strict //启动js的严格代码模式(全局)

28、
函数对象的实例函数:
toString():
返回当前函数对象的字符串表示形式。
call():
将当前函数借给其他的对象使用。
apply():
将当前函数借给其他的对象使用。语法和call稍有差别
bind():
利用当前对象的函数,帮助其他的对象去创建一个新函数

29、
递归:
函数直接的或者间接的调用了自身过程,称为递归调用。
递归调用解决问题的特点:
①问题可以分解为若干个子问题 子问题也可以分解为子问题
②子问题的解决方式和问题本身解决的方式一致
③最终问题的解决要依赖于子问题的解决
④必须存在一个子问题能够直接解决
递归调用的优缺点:
优点:思路简单,代码实现简单
缺点:效率低,非常占用栈内存
可以使用递归实现的功能,大部分都可以用循环实现如果递归的层数不确定就不能使用循环实现

30、
let 和var 的异同
相同点:
①都是js的关键字
②都是用来在js中定义变量的
不同点:
① 定义的变量的作用域的区别
var 定义的只有全局变量和局部变量,没有块级作用域
let 定义的变量有全局变量和局部变量,还有块级作用域变量
②是否可以重复定义
var 可以重复定义变量
let 不可以重复定义同一个变量
③是否可以作为window属性存在
使用var定义的全局变量,会作为window对象的属性存在
使用let 定义的全局变量,不会作为window对象的属性存在
④出现的时间
var:随着js语言诞生的。
let :ES6版本出现的。

目前接触过的对象的类型:
Object,Function,Array
31、
数组
数组出现的意义:当需要一个变量保存多个数据的时候,就需要使用数组了。
概念:一组有序的变量的集合。
有序:每一个数组中的数据都有一个键和它对应。键就是它的序号
变量:数组中的每个数据都是一个变量
集合:一组特殊的键值对的集合,键是数值型,值是js支持的任意类型。
基本的数组的定义形式:
var 数组变量 | 数组引用 = [ ];——定义了一个空数组
var 数组变量 | 数组引用 = [1,true,“123”,null,undefined,function(){},{},[1,2,3]]定义了一个有初始值的数组
特点:
①数组是js中的一种内置的类型,是引用数据类型
②数组在堆中分配内存
③是一种特殊的对象,所有的键都是数值型的,从0开始,依次递增的。
④数组是一组有序的变量的集合。数组中的变量在数组中称为【元素】element
⑤数组中的元素都是有序号的,从0开始:0序的。这个序号称为【下标】、【索引】、【角标】。
⑥访问数组中的元素的语法:【数组变量[元素下标] | 数组变量[“元素下标”]】
每个元素都是一个变量,变量能做的元素就都能做。
⑦ 数组在堆中分配内存,数组的元素是连续的分配的内存,【随机访问数组元素的效率很高。删除元素和插入元素的效率比较低】
⑧数组的本质是对象,是一组键值对的集合。键都是数值型的,值可以是js支持的任意类型。
⑨数组有个属性:length,是一个整数类型,是一个大于等于0的整数。代表了当前数组中的元素的个数。
通过 【数组名.length】 【数组名[“length”]】 访问。是一个可读可写的属性。
⑩数组元素的下标的取值范围是:【0—length-1】
length
1.length,是一个整数类型,是一个大于等于0的整数。代表了当前数组中的元素的个数。
通过 【数组名.length】 【数组名[“length”]】 访问。是一个可读可写的属性。
2.length属性的取值范围: 【0~(232-1)】数组的元素的最大下标为232-2.
3.数组的元素赋值的时候,可以下标是不连续的进行赋值。可以存在下标的元素是undefined的值、 那么length属性的值保存的最大下标不是undefined的元素的下标+1的值
4.数组的length属性可以直接赋值,实现对数组的扩容(后面添加值为undefined的元素),和缩容()(截断高下标的所有的元素)
5.可以给数组添加非数值型的键,并给该key设置对应的value。非数值型的key不会被length属性统计。
6.如果给数组添加的元素的下标超过了下标的最大取值,那么该元素就不会被length统计。
数组的定义的形式介绍
1.表达式方式
var 数组名 = [元素1,元素2,…];
创建了一个数组,并指定了几个元素的值,个数也指定了。
2.构造数组方式
var 数组名 = naw Array(元素1,元素2,…);
多个元素代表了初始化的元素 一个元素代表了初始化的长度

32、
in运算符
1:js的关键字,是一个操作符
2:用来判断某一个字符串是否是某个对象中的key。
语法:“字符串” in 对象
如果是,返回true,否则返回false

33、
数组元素的操作:增删改查
增加:在最后的一个元素后面追加一个元素。
arr[arr.length] = 值;
删除:删除某一个下标的元素
delete arr[下标];
会将该下标的元素设置为undefined。length属性不会被影响。
修改:给元素赋予新的一个值
arr[下标] = 新值;
查:获取指定下标的值
arr[下标]

34、
数组元素的遍历
1:使用基本的for循环
2:使用for in循环 i代表了元素的下标
for (var i in array){

}
3:使用for of循环 不知道ele元素对应的下标
for(var ele of array){
console.log(ele)
}
4:使用函数对象的实例方法 forEach
var fn = function(val,index,arr){
console.log(val,index);
console.log(arr);
}
val 是被遍历的数组的每个元素
index 被遍历的数组的索引
arr 被遍历的数组

类数组对象:
如果一个对象的所有的键值对的键部分都是数值型的,从0开始一次递增的。0序的。
还有length属性。代表了元素的个数。称该对象为类数组对象。
类数组对象就是一个集合。

类数组对象和数组的区别:
类数组对象的length属性,需要自己维护,自己进行修改
数组的length属性,是数组底层自己进行维护的,是自己动态调整的。
数组有很多的实例函数可以使用。
类数组对象没有这些实例函数使用。

35、
函数分类
1:有参无参函数

2:有返回值无返回值

3:实例函数、静态函数
实例函数:
实例就是对象。实例对象调用的函数
自定义的全局函数也是实例函数,是window对象的实例函数。
实例函数的访问方式:对象. 实例函数(实参列表)
实例函数通常操作的是当前实例对象
静态函数:
任何的实例对象一定隶属于某一种类型
直接通过构造函数对象调用的函数,就是静态函数
通过类型名,构造函数名调用的函数。

构造函数. 函数名(实参)

Array:Function
     即是构造函数,也代表了某种类型

属性的分类:
实例属性:
实例对象包含的属性。
数组的length属性。函数的name、length属性。
静态属性:
通过类型名,构造函数名调用的属性
这样的属性通常是只读的属性。
将实例函数和实例属性统称为:实例成员。
将静态属性和静态属性统称为:静态成员。

36、
数组的实例函数:
push:压栈
作用:给当前数组的尾部追加元素
语法:数组. push(元素1,元素2,…);
返回:数组当前的长度
pop:弹栈
作用:将数组的最后一个元素删除,length属性会被改变
语法:数组. pop();
返回:被删除的元素。如果数组是空的,返回undefined。

shift:
作用:删除当前数组的第一个元素。头元素
语法:数组. shift();
返回:被删除的元素或者undefined。
unshift:
作用:给当前数组元素添加指定的头元素
语法:数组. unshift(ele1,ele2,…);
返回:当前数组的长度

join:
作用:将当前数组的所有的元素使用指定的字符进行连接,。形成一个字符串
语法:数组. join(连接符);separator 分隔符
参数:如果省略,那么使用逗号 作为默认的分隔符、
如果使用空字符串作为实参,那么返回的是没有分隔符的连接形式
返回:连接之后的字符串对象

indexOf:
作用:用来查找当前数组是否存在指定的元素
语法:数组. indexOf(searchElement,fromIndex ?)
searchElement:待搜索的数据
fromIndex:可选参数,搜索的起始索引。省略,从头开始找。
返回:搜索的结果,如果可以找到,返回第一个匹配元素的索引,没有找到返回-1;
lastIndexOf:
作用:用来查找当前数组是否存在指定的元素
语法:数组. lastindexOf(searchElement,fromIndex ?)
searchElement:待搜索的数据
fromIndex:可选参数,搜索的起始索引。省略,从尾部开始找。
返回:搜索的结果,如果可以找到,返回第一个匹配元素的索引,没有找到返回-1;
indexOf 和 lastIndexOf 区别:
indexOf是顺序查找
lastIndexOf是逆序查找

slice:切下的意思
作用:从当前数组中截取子数组
语法:数组. slice(start ?,end ?);
start:被截取数组的开始索引,包含
end:被截取数组的结束索引,不包含
如果end省略,从start截取到末尾
如果都省略,复制当前数组
返回:被截取的子数组

splice:
作用:可以是当前数组实现增删改的操作
返回:被删除的元素组成的数组
增加操作:数组对象. splice(插入的位置,0,插入的数据列表)
返回空字符串
删除操作:数组对象. splice(删除的位置,删除的个数)
返回被删除的元素组成的数组
修改操作:
数组对象. splice(修改的位置,修改的个数,修改的数据)

reverse:
作用:对当前数组进行自身的翻转。
语法:数组. reverse()
返回:翻转之后的数组

sort:
作用:对当前数组进行升序排序
sort 函数的默认排序的规则:
将所有数组中的元素都转换为字符串之后再去排序,按照字符串的排序规则进行默认排序
字符串的排序的规则是:依次比较相同位置上的字符的Unicode码值,如果码值相同,比较后续位置上的字符的Unicode码值
注意:如果不希望使用字符串的默认规则去排序,那么就需要给sort函数提供回调函数,并在回调函数中按照一定的规则去实现回调函数。回调函数的实现的规则:以升序为例子:两个形参代表了待排序数组中的元素。要在回调函数中对参数进行比较。
升序:如果第一个参数大于第二个参数,返回正数,如果第一个参数大于第二个参数,返回负数。两个参数相等则返回0.
降序:如果第一个参数大于第二个参数,返回负数,如果第一个参数大于第二个参数,返回正数。两个参数相等则返回0.

map:
作用:遍历数组,对数组中的所有的元素进行某个操作,返回操作之后的值组成的新数组。
回调函数的参数的意思和forEach一致
filter:
作用:对当前数组的所有的元素进行过滤,将满足条件的元素过滤得到组成一个新数组返回。
find:
作用:元素查找
返回:第一个满足回调函数的条件的元素的值
如果所有的元素都不满足条件,返回undefined

findIndex:
作用:元素查找,返回索引。
用法:和find基本一致
some:
作用:判断当前数组中是否存在元素满足回调函数中的条件,只要有一个元素满足回调函数的条件,some就返回true,否则返回false。

every:
作用:判断当前数组中是否所有元素满足回调函数中的条件,只要有一个元素不满足回调函数的条件,some就返回false,否则返回true。

includes: 和 indexOf基本一致,返回值不同。
作用:当前数组中是否包含指定的值。
语法:数组. includes(searchElement,fromIndex ?)
返回:存在返回true,否则返回false
cancat:
作用:将当前数组和实参的内容进行连接,形成一个新数组返回

数组的静态函数:
语法:Array. isArray(obj):
作用:用来判断实参 obj 对象是否是数组
返回:如果obj 是数组,返回true,否则返回false

总结:
基本数据类型作为参数,函数调用过程中,一定不会改变实参的值。因为是传值。值传递。
pass by value
引用数据类型作为参数,函数调用,不能确定是否会改变实参的值。因为是传引用
pass by reference。

37、
多维数组
严格意义上说,数组只有一位数组

一维数组:数组的元素是我们需要的数据
二维数组:一维数组的元素是一维数组,这样的一维数组就称为维数组
三维数组:一维数组的元素是二维数组
n维数组: 一维数组的元素是n-1维数组。

3~n维数组称为多维数组。

38、
排序
八大排序:
冒泡、直接选择、直接插入、快速排序

 时间复杂度:主要的用来衡量一个算法的优劣的
概念:一个算法随着问题规模的增大,消耗的时间的变化的趋势的函数。
常数阶:0(1)
线性阶:0(n)
平方阶:0(n^2)
 空间复杂度:
次要的用来衡量一个算法的优劣的。多个算法之间的空间复杂度通常是不会有太大差别的。除非使用递归实现的算法,递归的空间复杂度比较高。
 稳定排序:相同的元素排序前后的相对的位置不会发生改变的排序
 不稳定排序:相同的元素排序前后的相对的位置可能不会发生改变的排序

冒泡排序:
核心思想:通过不断的对无序区所有的相邻的元素进行比较,如果低下标的元素大于高下标的元素,那么两个元素就进行互换。实现了将无序区的最大的元素移动到了最后面。
需要比较的趟数:长度-1
第一趟比较的趟数:长度-1
每一趟的比较的次数都是递减1的

39、
对象:
对象的基本构成:属性+功能。 哈希结构,hash,映射(一一对应的关系)。
可以通过key访问对应的value,不可以通过value找到对应的kkey 映射是单向的
键 key:值value 一组称为键值对
属性名:属性值
js中的对象是由若干个键值对的集合
键:无序的,唯一的 数据类型为字符串型
值:值是依附于所对应的键的,无序的,不唯一的。可以是js支持的任意类型作为值。

如何访问对象的属性值:通过键获取它的值
语法:
①对象.键
②对象[“属性名”]

如果一个对象的键都是数值型的,从0开始递增的整数
数组是一类特殊的js对象:所有的键都是数值型的。从0开始,以次递增。

对象的相关概念:
1:类型:class Array,Function,Number,String,Boolean,Null,Undefined。
网络:指包含由各特殊的事物抽出来的共通点的抽象概念
老师:对对象的抽象的描述。
例子:
树,人,动物,学生
2:对象:实例对象 object
老师:某种类型中的一个具体的实例。
树:我家院子里的那颗樱桃树
3:类型和对象的关系
类型是描述对象的。

思考:现实的世界中,是先有类型还是先有的对象
先有对象
先认识各种对象然后归位了某种类型

js描述对象的语法:
var 对象变量 = {
key1:varlue1,
key2:varlue2,

keyN:varlueN,
};
js中的对象是键值对的集合
键值对的集合——映射——单向的。可以通过key找到对象value。
value是我们需要处理的数据,key是获得数据的途径
通过key得到value的方式:
1:如果键是标识符的规则形式:
①对象名. 键名 obj. name
②对象名[“键名”] obj[“name”]
③对象名[变量名] 变量名保存了字符串键名
var key = “name”;obj[key]
2:如果键不满足标识符的规则:
①对象名[“键名”] obj[“1a”]
②对象名[变量名] 变量名保存了字符串键名
var key = “a b”;obj[key]
3:数值型的键
①对象名[数值型键] obj [1]
②对象名[“数值型键”] obj [“1”]
③对象名[变量名] 变量名保存了字符串键名
var key = “1”;obj[key]

 键:key
所有的键都是字符串,可以使用双引号或者单引号将键字符串包围
如果键的字符串遵循了标识符的命名规则,那么引号可以省略,建议省略。
如果键的字符串中包含了不满足标识符命名规则的字符,那么必须使用引号表示出来。
如果键是数字那么可以省略引号
      特点:
1:无序的
2:唯一的,重名后定义的会覆盖前面的。
3:都是字符串
      建议:
使用标识符的命名方式去表示键,省略引号
 值:value
命名表示方式:
     返回值为js支持的任意类型的表达式或者是变量。函数、数组、对象......
      特点:
1:无序的,value是依赖于对应的key的。key是无序的,所以value会跟着key无序
2:可以重复的
3:就是一个变量,可以做任何的对变量的操作。

this:
1:js中的关键字
2:是一个对象的引用
3:是当前对象的引用。或者代表了当前对象。
全局函数中this:window对象,this和window指向了同一个对象
对象函数中this:当前对象,调用该函数的对象

40、
js中创建函数的方式:
1:表达式方式:
var 对象名 = {
key1:varlue1,
key2:varlue2,

keyN:varlueN
};
2:构造函数方式:
var 对象名 = new Object(对象 | 空);
3:通过Object 的静态函数创建
var object = Object. create(obj | null)

键值对的增删改查
删:通过键删除键值对

41、
对象的遍历方式:
1:for-in
for(var key in obj){
console. log(${key}--${obj [key] })//必须使用[ ]
}
2:Object 的静态函数 keys(obj)
得到一个数组,数组的元素为实参对象的所有的键
var keys = Object. keys(obj)
for(let i = 0;i<keys。length;i++)
3:Object 的静态函数 values(obj)
得到一个数组,数组的元素为实参对象的所有的值
能获得所有的值,不能获得值对应的键。
4:Object 的静态函数 entries(obj);entry:键值对的意思
得到一个数组,数组的元素是数组,每个元素数组是一对键值对。
会得到obj实参的键值对的数据
补充:for of 循环,只能用来遍历数组,不能用来遍历对象。

42、
面向对象编程的思维模式
根据需求创建具有指定功能和属性的若干个对象,然后通过对象之间的相互作用实现最终的需求。

找对象,搞对象。
如果一个对象的功能足够大强大,那么就可以实现任何的需求了
js为了帮助开发者快读开发,在js中定义了若干个对象,对象中包含了若干个成员,提供了一些基础的功能来帮助开发者。

js提供的内置对象的介绍
掌握内置对象的基本使用和功能
一切皆是对象:当我们希望一个基本数据需要当对象使用的时候,。那么它就可以被转换为对象。
Object 对象:
1:Object是js中的一个构造函数,还代表了 对象 这种类型。
2:Object()可以做为工具方法使用。可以将任意的基本数据类型转换为对象。
3:作为构造函数使用,使用new 关键字调用,用来创建对象。可以指定创建的对象的初始内容或者为空。
4:还定义了一些静态的函数,作为工具函数使用。
Object. keys():得到obj对象的key,以数组形式返回。
Object. values():得到obj对象的varlue,以数组形式返回。
Object. entries():得到obj对象的key+value,以二维数组形式返回。
Object. create(obj | null):创建对象的。
Object. getOwnProertNames(obj):用来获取obj对象的所有的键,以数组形式返回,包括不开枚举的属性。
5:Object对象提供了一些基础的实例方法供通过Object构造函数创建的对象使用。
obj. toString()返回当前对象的字符串表示形式
obj. toLocaleSting():得到当前对象的具有本地特性的字符串表示形式。
obj. hasOwnProperty(key):用来判断 key 是否是当前对象的私有属性
obj. valueOf():返回当前对象的原始值。主要针对的是三种数据类型Number String Boolean的对象中获取原始值。
6:js是一个基于原型的语言。任何的对象的创建都在某一个原型对象上创建的。这个原型对象提供了所有对象可能需要使用的功能。
toString … 这个原型是Object构造函数的原型。这个原型是依赖于Object对象的。或者说这个原型对象是Object对象的。所有的js中对象的创建都以Object构造函数的原型的对象为基础创建的
Object 是js中的任何类型的父类型。所有的js中的任何类型的数据都是以Object为父类型创建的。
所有的js中创建的对象都直接的或者间接的继承了Object原型对象中的内容
js语言是一个单根系统。跟对象是Object。
7:父类型大,还是子类型大?父类型描述的对象的范围大,子类型描述的对象的范围更加的具体。子类型中的功能更加的强大。
父类型中的功能是将所有的子类型中的共有功能抽取出来形成的。
8:instanceof
js的一个关键字
作用:用来判断一个对象的是否是某种类型的实例的。
语法:对象 instanceof 类型
返回:如果是,返回true,否则false。
结论:子类型的对象永远是父类型的实例。Object是所有的类型的父类型,那么所有的对象都是Object的实例。一切皆对象。

三种基本数据类型:Number、String、Boolea但是我们有将基本数据类型转换为对象的需求,就需要将基本数据类型转换为对象。这些转换需要某些函数的支持。
数值型----数值型对象 转换依靠 Number 对象
布尔型----布尔型对象 转换依靠 Boolean 对象
字符串型----字符串对象 转换依靠 String 对象

Number对象:
1:他是基本数据类型-数值型 对应的包装类型对象。通过Number构造函数对象可以将数值型数据包装成一个对象。通过new 关键字调用。通过new 关键字 调用Number(数据)转换为 一个对象的过程。称为装箱操作。boxing。
2:作为工具函数使用:将任意类型转换为数值型。强制类型转换。
3:提供了静态的成员。

4:提供了用于操作数值对象的实例函数。
     num. toString(radix):将当前对象转换为指定进制的字符串表示形式
     num. toFixed(digit):将当前对象的小数点后保留指定的位数。
总结:
     构造函数
     工具函数
     静态成员
     实例成员

Boolean对象
1:作为构造函数使用。可以将布尔值的基本类型数据装箱为对象。new 调用。
2:作为工具函数使用。将任意类型转换为布尔类型数据。
只有5个数据转换的结果是false,其他的都是true。

Mayh对象
js中的Math对象是一个比较特殊的对象。
1:Math 不能作为构造函数使用。不能创建Math类型的对象。
2:Math 对象中定义的成员都是静态的成员,不需要使用实例对象调用。
Math. 调用的。都是只读属性+工具函数。

静态属性:
           E	返回算术常量 e,即自然对数的底数(约等于2.718)。
           PI	返回圆周率(约等于3.14159)。 ****
           SQRT1_2	返回返回 2 的平方根的倒数(约等于 0.707)。
           SQRT2	返回 2 的平方根(约等于 1.414)。

    静态方法:
        abs(x)	返回数的绝对值。
        ceil(x)	对数进行上舍入。 **
        floor(x) 	对数进行下舍入。 **
        max(x,y)	返回 x 和 y 中的最高值。 **
        min(x,y)	返回 x 和 y 中的最低值。 **
        pow(x,y)	返回 x 的 y 次幂。
        random()	返回 [0 ~ 1) 之间的随机数。 ******
        round(x)	把数四舍五入为最接近的整数。 ***
        sqrt(x)	返回数的平方根。

js的内置时间对象:
js语言的时间原点:标准世界时1970年1月1日0时0分0秒
Date对象:
1:js的内置的用于管理设置时间的。
2:作为工具函数使用。
获得当前日期的字符串对象。
3:作为构造函数使用。创建日对象的。
转换为数值:当前日期距离时间原点的毫秒的时间差
①无参:创建系统时间的日期对象。
②有参:创建指定日期的时间对象。
③创建的对象可以转换为string和number
4:静态函数
now():当前系统时间距离时间原点的毫秒时间差。
parse():使用指定的字符串中的日期和和时间原点的毫秒时间差。
5:实例函数:
①to类
将日期对象转换为各种风格的日期字符串对象。
②get类
用来获得日期对象的各种具体的日期时间属性的。年月日,时分秒
③set类
用来设置日期对象的各种日期时间属性的。
④other
getTime 返回当前日期对象距离时间原点的
getTime

注意:
1:日期对象的月份属性是0序的,取值范围【0-11】
          如果通过构造函数去设置日期。如果是数值型的那么就需要从0开始计算。如果是字符串从1开始算第一个月
2:日期对象的星期也是0序的。从0开始【0-6】

String对象
1:js的内置对象,是三个基本数据类型对应的包装对象之一。
2:作为工具函数使用,可以将任意类型转换为字符串类型。
String
3:作为构造函数,可以将基本数据类型的字符串转换为字符串对象。
new String(“123”)
4:提供了一些静态函数和大量的实例函数
5:任何一个字符串常量都可以看做一个 String 对象。
字符串对象的初始化方式
1:使用字符串常量赋值。简单 ,当需要str 当做对象使用的时候,底层会进行装箱操作。
2:构造函数
建议使用第一种方式
字符串对象的底层实现
1:字符串的底层实现:
字符串是由若干个字符序列组成的,字符串对象
底层使用字符数组来管理这些字符序列。
所以字符串具有一些字符数组的特点。但不是数组对象。
在某些操作上,可以使用操作数组的方式去访问字符串中的字符数据。
只能通过访问数组的方式去获取字符元素,不能去修改字符数据。
2:字符串对象的特点:
①底层使用数组来管理所有的字符。
②字符串具有一旦创建就不能修改的特性。只读属性。
缺点:所有看似对字符串的修改,都会生成新的字符串对象。如果反复的去修改字符串,会造成内存的浪费。
优点:数据安全
静态函数:
String. fromCharCode(number…):接收一个数值型数组,返回该数组中的所有的元素所对应的字符。
功能:数值到字符的转换
实例属性和方法
属性:
length属性:代表了字符串对象中的字符的个数
是一个大于等于0的整数值
str. length 是一个只读属性,赋值没有意义,不会改变该属性的值。
在代码严格模式下,赋值运行的时候会报错。
实例函数:
charAt()
charCodeAt()
startsWith:用来判断当前字符串是否以指定的字符串开始的。 是:true 否:false。
endsWith:用来判断当前字符串是否以指定的字符串结尾的。 是:true 否:false。

遍历方式:
1:基本的for 使用遍历数组的方式遍历的。
2:for of 专门用于遍历数组的。
3:for in 用来遍历对象的。
4:for 循环使用 charAt(建议使用)

Global对象
js语言有一个规则:任何一个函数必须都隶属于某个对象
在js中有一些内置函数,称为全局函数,直接可以调用。这些函数没有归属,所以就虚拟了一个对象称为Global。这些全局函数作为该虚拟对象的函数。
js中的全局函数:
isNaN(num):用来判断是否是NaN的,是返回true,否则返回false。
该函数也属于window对象和Number对象
isFinite(num):用来判断num是否是有穷数,是有穷数true,否则false。
该函数也属于window对象和Number对象
parselnt(str,radix?):将str字符串解析为整数,不能解析返回NANa
该函数也属于window对象和Number对象
parseFloat(str):将str字符串解析为浮点数,不能解析返回NaN
该函数也属于window对象和Number对象
编码:encode
从明文到密文,为了安全、易于传输。
从字符到底层的字符串的整数的二进制表示形式
解码:decode
从密文到明文。
将底层的二进制最终显式为字符。
编码函数:
encodeURI:不会对网址中的常见字符进行编码,只对中文,空格等等进行编码
encodeURIComponent:只对数字、字母不进行编码,其他的都会编码
解码函数:
decodeURI:对encodeURI的结果进行解码
decodeURIComponent:对encodeURIComponent的结果进行解码
使用:一般建议使用 encodeURIComponent 和 decodeURIComponent 进行编码和解码
一般情况下只对提交的部分进行编码和解码。也就是 ? 后的内容进行编码和解码。
eval(str):
作用:接收一个字符串作为参数,可以将实参的内容转换为js代码执行。
返回:执行的结果

1:call、apply、bind都是函数对象的函数。
2:call、apply 都是可以将一个函数对象借用给其他的对象使用
3:bind 用来帮助一个对象在某个函数对象的基础上生成一个函数对象。
问题:
1:两个对象具有完全一致的功能,那么这两个功能是同一个功能,还是两个功能。是否是同一个函数对象?不是同一个对象,两个对象,各自占有自己独立的空间。代码冗余,浪费内存。
2:如何解决上述的问题,如果不同的对象具有完全一致的功能方法,只保留一个对象的功能,其他的对象去借用该对象的功能。

call 的具体使用
语法:函数对象. call(借用的对象,实参列表)
call 方法借用的本质。改变函数体内的this 的指向,指向了借用这对象。谁借用this指向谁。

apply 的具体使用
apply 的使用和call 的使用基本一致。
语法:函数对象. apply(借用的对象,[实参列表])
apply 和call 的区别就在于实参的使用,apply的实参需要使用一个一维数组保存所有的参数

bind 的具体使用
语法:函数对象. bind(需要生成函数对象的对象)
本质:会生成一个新的函数对象,函数对象中的this,是实参对象。

总结:
call 和 apply 的使用更多一些,不会生成新的函数对象,只是实现了对象之间的函数的借用。在调用借用函数的时候,去改变函数体中的this 实现借用的功能。
bind :会生成一个新的函数对象,相比较会消耗内存,使用偏少。

43、
js语言诞生的历史背景:
需要某些交互在客户端进行,来改善用户体验,让交互更加的及时高效。Document
DOM:Document Object Mode | 文档对象模型。
页面文档:是对象的集合,页面中的所有的节点都被解析为对象而且对象之间是存在关系的
树状的结构。document对象是该结构的根节点(root node)。
父节点:parent node
子节点:child node
叶子节点:leaf node
文档属于浏览器对象的一部分。
js是一个脚本语言,浏览器是js运行的宿主环境。js可以访问浏览器中的某些功能或者是对象。
浏览器为了让js可以更好的去访问文档,将整个文档和文档中的所有的节点都看做一个个的对象。
通过js可以访问这些对象。整个文档可以看做一个对象的模型。

浏览器对象 window 提供了 document 对象来代表整个文档。通过该对象可以访问页面中的所有的元素。
document对象是DOM部分的核心。
学习DOM就是学习如何通过document对象去对整个文档进行增删改查。
document对象直接使用即可。是浏览器提供给js用来访问文档的接口。
学习DOM就是document对象的属性和功能。

DOM:是一套规范,规定了js访问文档的方式。规范的核心就是document对象。规定了 如何通过js访问document对象的属性和功能。

44、
文档中节点的类型介绍:
1:文档节点 document 根节点
2:元素节点 单标签或者是双标签
3:属性节点
4:文本节点
5:注释节点
在DOM规范字:任何的节点对象都必须有三个属性。
①nodeName:节点的名称
②nadeType:节点类型
③nodeValue:节点值

元素对象的获取方式
1:通过id去获取 //全局搜索
通过方法 getElementById(id属性值)
在整个文档中去搜索指定id值的元素对象。
返回:如果存在返回元素对象,否则返回 null
优点:效率高,兼容性好。
2:通过标签名获取 //可以局部搜索
搜索的范围元素对象. getElementsByTagName(“标签名”)
返回:HTMLCollection 类数组的对象。通过下标去访问具体的元素对象。
3:通过name属性获取 //表单元素
document. getElementsByName(“name属性值”)
返回:NodeList 类数组对象。通过下标访问
4:通过class属性获得。//类名 不要加 .
搜索的范围元素对象. getElementsByClassName(“class属性值”)
返回:HTMLCollection 类数组的对象。通过下标去访问具体的元素对象。
5:通过选择器 //
搜索的范围元素对象. querySelection(选择器)
返回:第一个满足条件的元素对象
低版本的IE不支持
6:通过选择器 //
搜索的范围元素对象. querySelectionAII(选择器)
返回:所有满足条件的元素对象
低版本的IE不支持

getElementsByTagName 和 querySelectionAII 的区别
getElementsByTagName:获得指定标签的所有的元素集合对象,类数组
会根据内容的改变而动态更新集合中的内容
querySelectionAII :获得指定选择器的所有的元素集合对象,类数组
获得的集合对象是静态的,不会动态更新里面的元素。

45、
修改和设置元素节点中的内容
获得元素节点中的内容:
包含了节点中的所有的子元素的内容:标签+文本
语法:元素节点对象. innerHTML
设置元素节点中的内容:
语法:元素节点对象. innerHTML = “内容”
注意:
1:会覆盖所有的子元素的内容。
2:设置的内容中如果包含了标签,标签会生效
innerText:
获得元素中的文本内容,不包含标签内容
语法和innerHTML一致
注意:
1:会覆盖所有的子元素的内容
2:设置的内容中如果包含了标签,标签会被当成普通的文本进行显示,而不是标签原本的含义。
textContent:和innerText用法一致,作用一致
textContent兼容性好于innerText
value:专门用于设置和获取表单元素的属性
语法:
获取:元素对象. value
设置:元素对象. value = “值”
注意:
获取到的值为string类型

元素节点中的属性节点的获取
1:通过元素对象的attributes属性,返回的是元素对象的所有的属性和值的集合。
元素. attributes
2:元素. getAttributeNode(“属性名”)
上述两种方式得到的都是属性节点对象
拿到属性节点对象之后,可以通过nodeValue 获取具体的某个属性的值

属性值的获取和设置
1:
获取:
元素对象. getAttribute(“属性名”)
返回属性名对应的属性值,如果属性不存在返回null
设置-添加:
元素对象. setAttribute(key,value)
对于自定义属性来说,可以操作
2:
获取
先获取属性节点对象,然后通过属性节点对象的nodeValue属性去获取和设置属性值
对于自定义属性来说,可以操作
3:
获取
元素. key
元素对象[“key”]
设置:
元素对象. key = value
元素对象[“key”] = value
缺点:不能获得和设置自定义的属性

对于元素的class属性,
如果使用 . 访问或者是 [ ] 访问设置那么需要将class改为className才能生效
设置class属性:
元素对象. className = value
元素对象. [“className”] = value
获取class属性:
元素对象 . className
元素对象[“className”]
获取和设置元素的checked属性
获取:
元素对象. checked
元素对象[“checked”]
如果是选中的状态,返回true,否则false。
设置:
元素对象. checked = true | false
元素对象[“checked”] = true | false

属性节点的添加和删除
添加属性节点:
1:元素. setAttribute(key,value)
2:document . createAttribute(key)
node . nodeValue = value
元素. setAttributeNode(node)
删除属性节点:
元素removeAttribute(key)

46、
节点对象之间的关系:
1:父子关系,求父元素的所有的子节点。
元素. childNodes
NodeList:类数组对象。通过下标访问具体的子节点对象。
2:第一个孩子节点对象
元素. firstChild
3:最后一个孩子节点对象
元素. lastChild
4:父元素节点对象
元素. parentNode
5:下一个兄弟节点对象
元素. nextSibling
6:上一个兄弟节点对象
元素. prevSibing

47、
元素节点之间的关系:
1:父子关系,求父元素的所有的子元素节点。
元素. children
HTMLCollection:类数组对象。通过下标访问具体的子节点对象。
2:第一个孩子元素节点对象
元素. firstElementChild
3:最后一个孩子元素节点对象
元素. lastElementChild
4:父元素节点对象
元素. parentElement
5:下一个兄弟元素节点对象
元素. nextElementSibling
6:上一个兄弟元素节点对象
元素. prevElementSibing

48、
定时器方法
window . setInterval(callback,millis)
1:该方法属于window对象的方法,是一个全局方法,直接使用即可。
2:callback 参数:是一个回调函数,可以传入匿名函数,或者是有名函数的名字。
3:millis :是一个时间,单位毫秒
4:作用:该方法被称为“间歇”执行函数。每间隔millis 毫秒的时间,就执行一次回调函数。
5:该方法返回一个整数值,从1开始的整数值,代表了该定时器的编号。如果想停止该定时器,需要使用该编号
6:通过 clearInterval(定时器编号)停止指定编号的定时器。
7:定时器函数可以同时开启多个,每个定时器函数都会返回一个不同的定时器编号
8:定时器函数中的回调函数的第一次执行是在setInterval函数执行的 第二个参数时间之后才会执行
9:定时器函数的执行不会影响后面的代码的执行
10:定时器函数和循环的区别:
①每次回调或者循环执行的一次的周期不同。
②停止的方式:循环:break,循环条件。定时器:clearInterval
③循环是同步的、setInterval异步的

49、
document对象的属性介绍:
1:document . documentElement html 根标签元素对象。
2:document . body body节点对象
3:document . head head节点对象
4:document . title title节点对象中的内容。也就是页面标题。
通过document . title 可以获取和设置文档的标题
5:document . doctype 文档类型说明节点
6:document . readyState 用来当前文档被加载的状态
状态有三个值:
loading:文档的结构的加载
interactive:加载外部资源文件
complete:加载完毕
7:document . documentURI 地址栏的地址
8:document . domain 域名
localhost、127.0.0.1都是代表本机地址
ip地址:ipv4:在任何的网络中,网络中的每一台计算机必须有一个唯一的标识
用ip地址来作为唯一的标识,每一台同一个网络中的计算机必须有唯一的一个ip地址作为标识。
ip地址使用 32bit 来表示。4bytes。使用三个 . 分符来分隔四个字节表示的整数。每个整数的取值范围是:[0-255]
域名:网络中的主机的ip地址的另外的一种容易记忆理解的字符串表示形式。
一个ip地址会对应一个域名,一个域名可以对应多个ip地址。
如何从域名转换成域名对应的ip地址呢?
DNS:就是一台电脑,域名解析服务器。专门用于将域名转换为ip地址的计算。
9:document . location:
是一个对象,代表了地址栏对象。可以直接使用location来访问该对象。
location对象的属性:
location. href:代表了地址栏中的地址,可以通过修改该值来实现页面的跳转

url:协议、主机地址、端口号、请求的文件
     协议:http:https:
     主机地址:域名、ip地址。确定了网络上的某一台计算机
     端口号:[0-65535]     确定了计算机中的某一个软件。http:80   备用8080
     请求的文件
10:
     document . links 所有的a标签的集合
     document . images 所有的img标签的集合
     document . forms 所有的form标签的集合
     document . script 所有的script标签的集合

style
1:通过style 属性添加修改元素的行内样式。
设置:
语法:元素 . style . 样式属性 = value;
样式属性 使用驼峰命名法
value 都是字符串
获得:
语法:元素 . style . 样式属性
返回:样式值的字符串形式。

2:通过cssText 属性添加修改元素的样式。
     该值是元素对象的所有的行内样式的字符串表示形式。

通过style的方法修改样式:
设置:
元素 . setProperty(key,value);
key:样式属性名,使用中划线的命名方式
value:样式值。
获得样式:
元素 . style . getPropertyValue(key);
返回样式值
删除:
元素 . style . removeProperty(key);

50、
获取元素的内部样式和外部样式的方式
window . getComputedStyle(ele)
获得指定元素的样式声明对象。获得对象之后,在通过访问样式对象的具体的属性获得具体的值。
通过的到的样式声明对象访问具体的样式属性的时候,使用驼峰命名法。
该方法对于IE低版本不支持,IE8及其以前的版本

IE低版本的实现方式
语法:currentStyle
返回:元素的样式声明对象
通过返回的对象,可以访问具体的样式属性

元素. currentStyle 所有的IE版本都支持该方法

51、
DOM常用方法
document. createElement(标签名)
作用:用来创建元素对象。创建的元素对象存在于内存中。必须将内存中的创建好的对象,添加到文档中才能看到创建的对象。标签名不敏感(不区分大小写)

appendChild(子元素)
作用:将某个子元素尾部添加到当前元素中来
语法:父元素. appendChild(子元素)
特点:

insertBefour:
作用:将某个元素插入到指定的元素的前面
语法:父元素:insertBefour(带插入的元素,插入的位置元素)
特点:具有移动元素的功能。

createTextNode("内容")
作用:创建文本节点对象。

cloneNode
作用:克隆节点对象。复制节点对象
语法:被克隆对象. cloneNode(deep?boolean)
     deep:true:深度复制。连子元素一起复制。false,浅度复制。不复制子元素。
返回:克隆的对象。
克隆对象,不能复制对象的事件

replaceChild:
作用:对某一个子元素进行替换
语法:父元素. replaceChild(newEle,oldEle);
返回:被删除的元素。

contains
作用:判断一个元素是否是另外一个元素的子元素
语法:元素. contains(other)
      如果other是当前元素的子元素,返回true,否则返回false

hasChildNodes
作用:用啦判断当前元素是否有子节点
返回:有子元素,返回true,否则false

isEqualNode:
作用:用来比较两个元素是否一样
语法:元素. isEqualNode(other)
返回:如果当前元素和实参元素一模一样,返回true,否则返回false。

52、
DOM常用属性:
offsetParent:偏移定位
介绍:是DOM中的对象的一个只读属性。是一个对象。

注意:offsetParent 存在浏览器兼容问题,以谷歌为例子。

offsetParent 在不同的情形下具有不同的值。
情形如下:
1:如果当前对象有定位的属性:fixed。那么该对象的offsetParent 在谷歌浏览器中就是null。火狐是body对象。	固定定位的坐标参照的是浏览器窗口的左上角的点,和其他的元素没有关系。
2:如果当前对象没有fixed定位属性,而且父元素中所有的元素都没有定位。那么该元素的offsetParent是body对象。
3:如果当前对象没有fixed定位属性,而且父元素中所有的元素都有定位的属性的元素,那么该元素的offsetParent 是距离它最近的具有定位属性的父元素。
offsetLeft:
     只读属性,返回当前对象距离当前对象的offsetParent的左边界的水平距离
offsetTop:
     只读属性,返回当前对象距离当前对象的offsetParent的上边界的垂直距离

offsetWidth:元素对象的包括边框在内的宽度。
offsetHeight:元素对象的包括边框在内的高度
     包含的内容:边框、滚动条、内边距、内容区域。
     不包含:外边距

clientWidth:元素对象的视口的宽度
clientHeight:元素对象的视口的高度
     包含:内容区域,也就是css设置的高度和宽度、内边距
     不包含:边框、外边距、滚动条

53、
事件
1:事件的概念:
发生或者作用到文档中的元素对象上的某些行为,称为事件。
2:事件的组成部分:
①事件源:
发生或者作用到文档中的元素对象
②事件类型:
事件的种类:比如:鼠标事件、键盘事件、文档事件等等。。。
③事件处理程序:
当事件发生的时候,执行的函数
给元素绑定事件处理程序的方式:
1.DOM0级:行内式,头标签中使用
事件处理程序使用this作为实参,this的含义:当前对象(事件源)。
删除:使用删除属性的方式去删除绑定的时间处理程序。
2.DOM0级:动态绑定方式
3.DOM2级:注册监听
3:事件对象
js中万物皆对象。所以当事件发生的时候,底层会产生一个事件对象。该对象包含了很多和事件相关的信息。通过获取该事件对象可以获得和事件相关的信息。
4:事件的种类
①鼠标事件
②键盘事件
③文档事件
④表单元素事件

DOM0级元素绑定事件处理程序的方式介绍:
直接在元素头标签的属性中给元素绑定事件处理程序。可以称为行内式。
语法:<on+事件名称 = “事件处理程序”>
事件处理程序:一般就是函数调用代码。可以是多个函数的调用。使用分号分隔。

注意:如果在事件处理程序中使用实参,那么this代表了当前元素对象。

DOM0级动态绑定:
语法:元素. on+事件名称 = 事件处理程序。
事件名称是固定的。
事件处理程序:可以是有名函数的名字,或者是匿名函数。
删除动态绑定的事件处理函数:
元素. on+事件名称 = null;
特点:
1:使用动态绑定的方式,如果使用同一个事件进行多次处理程序的绑定,那么后绑定的会覆盖前面的。
2:this 的使用:在动态绑定的事件处理函数中直接使用this即可。this代表了当前的事件源,响应事件的元素对象。
3:动态事件绑定处理程序的兼容性比较好。

DOM2级事件处理程序:注册监听
语法:
元素. addEventListener(事件名称,回调函数,事件流);
事件名称:字符串、不需要添加on
回调函数:元素上触发事件的时候执行的函数,可以是匿名函数、或者是有名函数的名字
事件流:此处是一个布尔值,true:事件捕获。false事件冒泡。默认事件冒泡
删除事件监听:
语法:元素. removeEventListener(事件名称,回调函数。事件流)
注意:如果想删除某个元素上的监听程序,那么添加的时候必须使用有名函数进行绑定。
删除的时候和添加的时候的实参保持一致。

特点:
     1:同一个事件多次注册监听,不会发生覆盖
     2:可以直接在回调函数中使用this,代表了当前的事件源对象。响应事件的元素。
     3: 删除的时候和添加的时候的实参保持一致。才能删除,必须使用有名函数
     4:可以选择事件流,事件捕获和事件冒泡,默认事件冒泡
     5:存在兼容问题。低版本的IE不支持。

DOM2级事件处理程序的IE低版本:
添加:
语法:元素. attachEvent(on+事件名称,回调函数)
删除:元素. detachEvent(on+事件名称,回调函数)
特点:
1:可以对同一个事件多次绑定不同的事件处理程序。不会产生覆盖
2:事件处理程序中this,代表的是window对象。不是当前事件源。
3:添加和删除的方法,对于IE的版本,IE10及其以前的版本支持,IE11不支持。
4:不支持事件流。

事件流:事件的流向。event stream
事件流分为2类:
1:事件捕获
2:事件冒泡

事件冒泡:
     事件,从内层元素,子元素向父元素一次传递。
     默认的。
事件捕获:
     事件,从外层元素到内层元素,由外到里,由大到小,依次传递。

事件对象的捕获
事件对象的捕获的方式:事件对象会作为实参传递给事件处理函数的形参。用形参来接收事件对象。
直接使用形参表示事件对象。

问题:存在兼容问题。IE8及其以前的版本不支持使用参数接收事件对象。

低版本的IE的解决方案:直接在事件的绑定的函数在使用window. event来表示事件对象。

注意:DOM2中动态绑定的事件对象的捕获和DOM0 的动态绑定方式的事件对象的捕获方式一样

事件对象的属性:
type:代表了事件的名称 | 类型,是一个
keyCode:按键的键码值,每一个按键都对应了唯一的一个键码值。
0:48
a:65
方向键:左上右下:37~40
空格:32
W:87
A:65
S:83
D:68

altKey:代表了alt键是否被按下
shiftKey:代表了shift键是否被按下
ctrlKey:代表了ctrl是否被按下
如果按下都是true 否则就是false。

鼠标事件对象的两个属性:
clientX:鼠标点击的点的坐标距离浏览器窗口的水平距离。
clientY:鼠标点击的点的坐标距离浏览器窗口的垂直距离。

pageX:鼠标点击的点的坐标距离页面左上角的水平距离。
pageY:鼠标点击的点的坐标距离页面左上角的垂直距离。

重要(两个):
offsetX:当前事件点距离事件源左上角的水平距离
offsetY:当前事件点距离事件源左上角的垂直距离

screenX:当前事件发生的点距离屏幕左上角的水平距离
screenY:当前事件发生的点距离屏幕左上角的垂直距离

重点(两个):
currentTarget:代表了当前事件源对象。和this 是等价的
target:代表了第一个触发该事件的元素对象。该元素对象不一定绑定了事件处理程序

cutterTarget:这个元素一定是绑定了事件处理程序的。

bubbles:
作用:判断事件是否支持事件冒泡。
如果支持:true ,否则false
mouseenter和  不支持冒泡排序。

key:获得按键的键的名称的全程,字符串形式。

button:针对鼠标事件的属性。一个整数值。
代表了按下了鼠标的那个键。
左键:0	中键:1	右键:2

eventPhase:该事件对象属性有三个值:
1:因为事件捕获,从子元素触发的事件捕获到父元素。由父元素的事件处理程序中捕获的事件对象的该属性值。
2:事件源的事件处理程序中的捕获的事件对象的该属性值。
3:因为事件冒泡,从子元素冒泡到父元素,有父元素的事件处理程序中捕获的事件对象的该属性值。

按住按键,事件会持续触发
按键事件:
1:按键事件一般给底层的父元素添加,不给页面上的某个具体的元素添加。
比如给document,document. documentElement,document. body 添加

节点对象和元素节点对象的区别:
元素节点对象是节点对象的一种
7种类型的节点对象有一个公共的父亲,Node。

54、
事件对象的方法:
preventDefault:
作用:用来阻止元素对象的默认行为。
注意:preventDefault()方法对象IE的低版本 IE8及其以前的版本不支持。
在IE的低版本中使用 e. returnValue = false ;来实现阻止默认行为。

阻止a标签的默认行为的其他的实现。
javascript:void(0)
javascript:代表着点击a标签的时候执行js代码
void(0):void 是js的保留字,意思是空的意思,在这里的含义就是:什么都不执行。

阻止右键菜单的默认行为
右键菜单事件:oncontextmenu

stopPropagation:
作用:用来阻止当前事件继续往父元素冒泡传播的
注意:该函数对于IE8及其以前的版本不兼容
兼容实现:e. cancelBubble = true;

onKeydown 和onKeypress 的区别:
1:onKeydown 字符的键码值从65开始(a)
onKeypress 字符的键码值从97开始(a)
2:onKeydown 键盘上所有的按键按下都会被触发
onKeypress 不支持功能键
注意:键盘事件一般给document对象或者是body对象添加。

55、
表单事件:
focus:表单获得焦点的事件,当一个表单事件获得焦点的时候,该事件发生。

blur:表单失去焦点的时候触发的事件。

input:当表单元素的内容发生改变的时候触发的事件。

change:当表单元素的内容确定发生改变的时候触发的事件。
     以输入框为例:当输入完毕,输入框失去焦点的时候触发change,或者输入完毕之后回车也会触发。
change 在表单元素中。
radio 和 checkbox、select 当选择的时候就立即触发。

submit:表单提交事件,当表单被提交的时候触发,该事件必须给form 元素添加
     通过给事件绑定的处理函数,返回false ,来实现阻断表单的提交。
     如果返回true,或者什么都不返回 默认是可以提交成功的。

reset:表单重置事件,当表单被重置的时候触发,该事件需要给form元素添加。
     可以让事件绑定的函数返回false,实现阻断重置,
     如果返回true,或者什么都不返回 默认是可以重置成功的。

56、
页面滚动事件:
scroll:
1:页面滚动事件,当元素或者是整个文档滚动条发生滚动的时候触发执行。
2:对于可以进行滚动的元素,有两个和滚动相关的属性。
scrollLeft:内容卷上去的宽度。最小值是0
scrollTop:内容卷上去得高度。最小值是0
元素. scrollLeft
元素. scrollTop
3:如果给整个文档添加滚动事件,一般是给window对象添加。
window对象没有 scrollLeft 和 scrollTop 属性。
一般使用 documentElement 或者是 body 对象的 scrollLeft 和 scrollTop 属性。
obj = document. documentElement || document。. body
obj. scrollTop
obj. scrollLeft
4:可以通过改变scrollLeft 和 scrollTop 的值来实现调整滚动的位置。

57、
文档加载事件(重点)
load:
1:当页面文档全部加载渲染完毕之后触发执行。包括外部资源。
2:可以个某个元素添加,用来判断元素节点是否加载完毕。
3:如果给整个文档添加该事件,一般是给window对象添加。、
4:load 称为原生js 的入口

文档加载失败事件
error:用来检测文档或者元素节点是否加载成功,如果加载失败触发执行。

文档结构加载完毕事件
DOMContentLoaded:
1:完档结构加载完毕之后触发执行,不包括外部资源的加载。
2:该事件先于 load 事件执行
3:该事件必须使用DOM2事件处理程序注册监听。
4:该事件需要给document 对象添加。

文档加载状态改变事件
readystatechange:当document对象的属性 readystate 的值发生改变的时候触发执行。
在整个文档加载过程中,一共触发执行2次。
第一次:loading 切换到 interactive
第二次:interactive 切换到 complete

该事件需要给document 对象添加

58、
鼠标滚轮事件
IE和谷歌的实现:
1:事件需要给document 对象添加。
2:根据事件对象的属性 wheelDelta 的值来判断是向下滚动还是向上滚动
如果e. wheelDelta为正的是往上滑(120) e. wheelDelta为负的是往下滑(120)

火狐浏览器的实现:
1:事件名称:DOMMouseScroll
2:必须使用DOM2事件处理程序
3:给document对象添加,根据事件对象的属性detail。来确定是向上还是向下滚动。
4:e. detail 的值-3代表:向上  3:向下。

59、
事件委托
原始的方式存在的问题:
1:如果子元素比较多,那么事件响应的速度会相对较慢。效率不高。
2:如果给容器添加了子元素,那么子元素也需要单独去绑定事件处理程序,才能获得一样的效果。
事件委托:
1:将事件处理程序绑定给所有的子元素的父元素,子元素接收到了事件,然后通过事件冒泡会传递给父元素。
父元素的事件处理程序通过捕获的对象,通过事件对象的属性 target 对象。可以知道是哪个子元素冒泡事件给自己。
可以获得第一个响应事件的子元素了
子元素的事件委托给父元素去执行。
优点:只给一个元素绑定了事件处理程序,效率相对较高。
对于新添加的子元素也适用,不需要单独在给新加入的子元素进行特殊的处理。

60、
移动端定义的事件:
touchstart:开始触摸屏幕的事件。
touchend:结束触摸屏幕的事件。
touchmove:在屏幕滑动的事件
touchcancel:触摸事件强制被终止的事件,当手机出现一些突发事件的时候触发执行,比如:来电。
针对触屏事件的事件对象的属性:
touches:类数组对象、当前屏幕上的触摸点的信息。
targetTouches:当前事件源上的所有的触摸点的信息。
changedTouches:导致当前事件发生的触摸点的信息。

61、
BOM介绍:browser Object Mode 浏览器对象模型。
定义了如何通过js 来和浏览器交互。
BOM中的核心对象是window对象。BOM的规范中,所有的浏览器必须提供一个对象叫window。
该对象代表了浏览器对象。该对象可以让js直接去访问它 ,来操作浏览器对象。
js 通过window对象来访问浏览器对象。
window对象由若干个组成部分组成:
文档对象:document
地址栏对象:location
导航栏:navigator
浏览记录对象:history

学习BOM就是学习window对象的属性和方法。
window对象的属性中有对象,还要学习这些对象的属性和方法。通过
通过这些属性和方法可以用来访问浏览器中的组件。

62、
window对象
1:window对象是BOM的核心对象
2:window对象是由浏览器创建的。供js使用。
3:window对象是一个全局对象,可以直接在js代码中使用,它就代表了当前浏览器窗口。
4:每打开一个浏览器窗口,那么该窗口都会有一个对应的window对象。当浏览器窗口被创建的时候,window对象被创建,当浏览器窗口被关闭的时候与之对应的window对象被销毁。
5:在js的全局作用域下,定义的全局变量和全局的方法,都会作为当前窗口的window对象的属性和方法存在。可以通过window. 去访问全局变量和方法。一般情况下window是可以省略的。如果需要区分同名耳朵局部变量和全局变量的情况,可以使用window. 来确定访问的是全局变量。
6:在全局作用域下定义的函数,中的this 代表了window对象。所以也可以使用this区分同名的局部和全局变量。
7:在全局作用域下直接使用this,this代表了window对象。
8:window对象是浏览器窗口提供的内置对象,对外提供了很多属性和方法供js来访问,以实现对浏览器窗口的访问。

63、
window对象的常用方法:
1:isNaN
2:isFinite
3:parseInt:将字符串解析为数值型+
4:parseFloat
5:alert(any?):将实参转换为字符串,并将字符串的内容使用浏览器的默认警告框显示出来。
不同的浏览器的样式存在差异
该函数是阻塞式函数,该函数一旦执行,会导致当前js代码暂停执行。只有点击之后,后续的代码才会执行。
6:confirm(msg):导致当前窗口弹出一个系统确认框,使用实参作为内容,两个按钮,确定+取消的两个按钮。
该函数也是一个阻塞式的函数。该函数有返回值,如果点击了确定 返回true,点击取消 返回false。
7:prompt(msg):导致当前窗口弹出一个系统输入框,用来接收用户的输入。输入框使用实参作为默认的内容。该函数也是阻塞式函数,该函数的返回值为字符串类型,返回输入的内容。

64、
window对象方法:
open:
作用:用来打开一个浏览器窗口
语法:window. open(url,windowName,windowFeature);
windowName:是打开的窗口的name属性的值。字符串
注意:如果新打开的窗口的windowName 的值,已经存在于已经打开的窗口中,那么新打开的窗口会占用已经存在的窗口,而不会再次新生产一个新的window对象。
可以省略
url:打开的窗口显示的页面的url地址。
缺点:空地址
windowFeature:窗口的特征
缺省:默认特征
返回:返回创建的浏览器窗口对象的地址-引用。

close:
作用:关闭当前窗口
语法:window. close();

setInterval:间歇执行函数。
作用:每隔指定的时间执行指定的函数
语法:window. setInterval(callback,intervalTime)
     callback:被间歇执行的函数,第一次调用是在setInterval被调用的intervalTime 毫秒之后。
     intervalTime:毫秒,回调函数被返回执行的时间间隔。
返回:返回定时器编号。从1开始的正整数。依次递增的正整数。
注意:
1:该方法为异步方法
     同步:顺序执行的代码。前面的代码没有执行完,不会执行后面的代码。优点:安全。缺点:当前的任务没有执行完毕,就不能执行后续的任务代码。
     异步:代码不是顺序执行的。缺点:数据可能存在不安全的问题优点:不会影响后续代码的执行。
2:定时器可以启动任意个。
3:定时器使用完毕之后要关闭掉,使用clearInterval
clearInterval
作用:用来清理定时器。
语法:window. clearInterval(定时器编号)

setTimeOut:延迟执行函数
作用:延迟知道的事件,去执行某个函数一次。
语法:window. setTimeOut(callback,delayTime)
callback:延迟执行的回调函数
delayTime:延迟的时间,单位毫秒
异步函数
返回:定时器编号,从1开始的正整数
使用 clearTimeOut 来清除知道编号的定时器。

两张定时器的编号共用一套

moveTo(x,y)
作用:将当前窗口移动到指定的位置。坐标相对于屏幕的。

moveBy(offsetX,offsetY)
作用:将当前窗口在x和y轴上移动指定的距离。

resizeTo(width,height)
作用:将当前窗口重新设置为指定的宽度和高度。

resizeBy(offsetX,offsetY)
作用:将当前窗口的宽度和高度增加或者减少指定的值。

scrollTo(x,y)
作用:将当前窗口滚动到指定的位置。

scrollBy(offsetX,offsetY)
作用:将当前窗口滚动指定的距离。

js(浏览器)是单线程的。

65、
window对象的属性
location:
1:是window对象的一个属性,是一个对象。代表了浏览器的地址栏部分。
2:可以使用window. location 或者是 document. location 或者是location来访问该对象。

location的属性和方法:
属性:
     href:是一个字符串,代表了当前窗口的地址栏中的地址信息。
          通过修改该href 的值可以实现页面的跳转。
          会产生浏览器的记录
     protocol:是一个字符串,代表了 url 的 协议部分。
     hostname:是一个字符串,代表了 url 的 域名部分。
	代表本机的地址的字符串有:localhost  或者 127..0.0.1
     host:主机名+端口号
     port:请求的端口号
     pathname:请求的资源路径
     search:请求的参数。

方法:
     assign(url):跳转到url 的页面。会产生浏览记录。
     reload(bool?):重新加载当前页面。bool为true ,代表了不使用缓存数据 false代表了使用缓存数据刷新。
     replace(url):使用指定的url 替换掉当前的url,并实现页面跳转。不会产生浏览记录。

window对象的name属性
1:name属性是一个字符串,默认为空
2:作用:可以实现不同的页面之间的数据的传输。
使用同一个window 对象打开不同的html 页面。

注意:不要使用name作为全局变量使用。

history:
1:history对象是window的一个属性
2:代表了当前窗口的所有的浏览历史。
history的属性:
length:代表了浏览记录的个数
history的方法:
出于安全考虑,浏览器不让js 通过history 对象直接访问浏览记录
但是history 对象提供了三个接口(方法)来实现在这些浏览记录之间跳转.
forward():让当前窗口跳转到当前记录的下一个记录。如果已经是最后一个记录了,此方法无效。和浏览器上的前进的按钮功能是等价的。
back():让当前窗口跳转到当前记录的前一个记录。如果已经是第一个记录了,此方法无效。和浏览器上的后退的按钮功能是等价的。
go(num):以当前浏览器窗口的页面为原点。可以实现前进或者后退num个记录跳转。
如果num是正数,等价于调用了num次 forward()
如果num是负数,等价于调用了num次 back()
如果num是0,意味着刷新。
如果num的值超过了能跳转的范围,操作无效。

navigator:
1:window对象的一个属性,是一个对象。

plugins:当前浏览器安装的插件信息,类数组对象
userAgent:保存了当前系统的一些信息,这些信息会发送给服务器,服务器根据这些信息可以进行统计,是pc端访问的,还是手机端访问的。
     如果是手机端访问的,userAgent在中会包含一个字段:mobile。

closed属性:
用来代表一个window是否已经关闭了。
如果该属性为true 代表关闭了。否则还是打开的状态。

window:是window对象的一个属性,代表了他自身
self:是window对象的一个属性,代表了他自身
window === window. window === window. self

screen属性:
代表了当前的屏幕。是一个对象
width:屏幕的像素宽度
height:屏幕的像素高度
colorDepth:屏幕的真彩色的位数
availWidth:浏览器可用宽度
availHeight:浏览器可用高度

screenX:浏览器对象距离屏幕左上角的水平距离(只读属性)
screenY:浏览器对象距离屏幕左上角的垂直距离(只读属性)

innerWidth:浏览器窗口的宽度。不包含边框,边框以内的窗口的宽度,包含滚动条(只读属性)
innerHeight:浏览器窗口的高度。不包含边框,边框以内的窗口的宽度,包含滚动条(只读属性)

outerWidth:浏览器的宽度,包括了浏览器的所有的内容在内。
outerHeight:浏览器的高度,包括了浏览器的所有的内容在内

scrollX:水平方向上的,页面卷到左边的距离(只读属性)
scrollY:垂直方向上的,页面卷到上边的距离(只读属性)

66、
外部js加载的默认顺序
从上到下,依次加载,边加载边执行
问题:如果引入的外部js文件比较大,而且还是网络文件。肯定会影响到后续代码的执行。

js加载的属性:
defer:延迟加载
作用:导致包含defer 属性的script 标签引用的外部的js代码,延迟加载。
在文档结构加载完毕之前加载。
使用defer的情形:
1:js代码和其他的js代码没有约束关联关系,相对比较独立。
2:代码是在load事件执行之后才会使用到的内容。

async:异步加载	(sync为同步加载)
当script标签中有async属性的时候,那么该标签引用的外部的文件,可以实现异步加载。
不会影响后续代码的加载和执行。
问题:多个异步script外部文件,没有办法办证这些文件加载完毕的顺序。
async使用的场景:
文件大,网络文件,文件加载完毕之后使用,没有和其他的文件有使用上的约束关系。

67、
回流:因为页面元素的尺寸、是否显示、插入元素、删除元素等操作,导致了页面结构布局需要重新计算调整,这个过程称为回流,也称为重排。

重绘:因为页面元素的外观、样式等导致了元素需要重新的绘制,结构没有发生改变。这个过程称为重绘。

1:发生回流一定会发生重绘。
2:回流至少会发生一次。第一次显示页面的时候。会发生一次。

为了提高页面的效率,要尽量少的发生回流和重绘。

导致回流和重绘发生的情形:
页面初次显示、字体大小、元素的尺寸、内容的变化、窗口大小的改变、添加删除元素。

避免回流和重绘反复发生的一些建议:
1:修改元素样式属性的时候,尽量一次完成,不要多次修改。使用CSSText替代 style.
2:批量处理对元素的添加删除操作。借助文档碎片。documentFragment
3:尽量使用 固定定位和觉得定位。fixed absolute。

文档碎片(文档片段):

documentFragment的特点和使用
特点:
1:documentFragment 对象是DOM中的第7种节点类型
2:documentFragment对象是内存中的一个对象。可以用来作为容器使用,用来保存若干个节点对象。将容器中的这些节点一次性的添加到文档中。提高效率,减少回流操作。
使用:
创建:document. createDocumentFragment()
添加子元素:fragment. appendChild

68、
正则
1:全称:正则表达式,regular expression
Java:regex
js:regexp
2:正则的概念
正则表达式是一种特殊的字符序列,由一般字符和一些具有特殊意义的字符
表述了一套字符序列的内容构成的规则。
3:正则的规则
①整体字符串的匹配,字符串是否匹配正则所描述的规则。
②子串的匹配和查找。
4:学习正则:
①学习正则中的特殊字符和含义和用法。
②正则是一种新的类型,RegExp。要学习这种新的类型的属性和方法。

正则的创建
     1:使用 /正则序列内容/[修饰符] 的字面量形式。
     var 正则变量 = /正则序列内容/[修饰符]
     2:使用构造函数
     var 正则变量 = new RegExp ("正则序列内容","修饰符")

test 方法的使用
1:该方法是 正则对象的实例方法
2:作用:用来检测实参的字符串中是否有子串满足当前规定的字符串的格式。
3:返回:如果存在,返回true 否则返回false。
4:语法:正则对象. test(字符串数据)


正则的构成
1:普通字符。0-9,a-z,A-Z等等。就代表了他自身的原本的含义。
2:特殊字符。又称为 【元字符 】。在正则中具有特殊的含义,不是原本的意思。

特殊字符的介绍:
1:定位符
     ^:定位的开始符号。限定了匹配的字符串的第一个字符的内容
     $:定位结束符号。限定了匹配的字符串的最后一个字符的内容
     如果正则表达式包含了开始符^和结束符$,那么意味着是整串的匹配。
2:数量词
     ?:规定了该符号出现在前面的字符出现的次数为0或者是1.
     *  :规定了该符号出现在前面的字符出现的次数为0到n次
     + :规定了该符号出现在前面的字符出现的次数为1到n次
     {n}:规定了该符号出现在前面的字符出现的次数为n次
     {m,n}:规定了该符号出现在前面的字符出现的次数为[m-n]次。两头包含
     {m,}:规定了该符号出现在前面的字符出现的次数为  m到无穷  次 包含m
3:字符集[ ]
     [abc]:中括号中所有的字符中的某一个字符。
     [a-z]:表示a-z之间的所有的字符中的某一个字符。闭区间
          -:在字符集中使用,称为 连字符
     [A-Z]:表示A-Z之间的所有的字符中的某一个字符。闭区间
     [0-9]:表示0-9之间的所有的字符中的某一个字符
     [0-9a-zA-Z]:表示三个区间的集合中的某一个字符
     [0-9a-zA-Z_]:标识符字符集合中的某一个字符。
     [^0-9]:表示0-9之外的所有的字符的集合中的某一个字符
          ^:在字符集中使用,称为 脱字符
4:预定义字符集 
     \d:等价于[0-9] 数组字符集
     \D:等价于[^0-9] 非字符集
     \s:代表了所有的空白字符的集合  (tab  空格)
     \S:代表了所有的非空白字符的集合
     \w:代表了标识符字符的集合  等价于[0-9a-zA-Z_]
     \W:代表了非标识符字符的集合
5:选择符号  | 
     从一组的多个选项中匹配某一个。
6:转义字符
     \?:代表?本身
     \*:代表*号
     \+:代表了+号
     \\:代表\符号
     \/:代表/符号
7:特殊符号
     . :代表了任意字符,\n\r除外
     \. :代表了. 这个字符
     [\u4e00-\u9fa5]:中文字符的区间。

69、
match:
从当前字符串对象中查找匹配的子串,并返回第一个匹配的子串的数组形式。,
使用字符串作为实参的缺点
1:只能匹配简单确定的模式的字符串
2:只能找到第一个满足查找内容的子字符串。

使用正则的好处
1:可以进行比较复杂模式的字符串的匹配
2:可以找到所有的满足规则的子串

split:
作用:使用指定的分隔符对当前字符串进行切割,返回切割的内容,以数组的形式返回。
该方法执行正则作为实参,使用正则所描述的字符串作为切割符进行切割。

replace:
作用:将当前字符串中的某些内容替换为指定的内容
使用字符串作为实参的问题
1:实现复杂
2:每次只能替换一个需要替换的内容

search:
作用:查找子串。从头到尾顺序搜索,找到满足要求的子串立即返回,返回子串的索引。
搜索不到返回-1
和indexOf的作用基本一致,只是该方法支持正则,indexOf不支持

修饰符:
g:global 全局搜索。
i:ignorecase 忽略大小写。

70、
正则的分组
给正则分组的意义:一旦给正则分组了,那么底层进行匹配的时候会保存每一分组所匹配到的内容。并可以根据RegExp. $组号 获得组匹配到的内容。
组号从1开始,依次递增。组可以嵌套使用。
组号的确定,根据向右的小括号的顺序来确定

正则的实例函数
test:
语法:正则对象. test(匹配的字符串)
作用:用来判断 当前正则对象所描述在字符串是否包含在实参字符串中
如果包含,返回true 否则false
可以进行子串的匹配,和整串的匹配。

exec:execute 执行的意思。
     作用:子串的匹配和查找	
     返回:查找的结果的数组,第一个满足要求的字符
     特点:正则要使用修饰符 g 表示全局搜索。每次调用 exec 方法都会记录下本次搜索结束的位置。
          下次调用exec 都会从上次结束的位置继续往后搜索,并返回搜索到的结果
          如果后续没有可以搜索的内容了,则返回null。
          如果该方法执行的结果返回是null,那么下次再次调用该方法,继续从头搜索。记录搜索的位置的变量被重置了

正则中的数量词的贪婪和懒惰模式
数量词分为两种模式:
1:贪婪模式:匹配的时候会尽可能多的去匹配字符 。直到匹配不成功为止。
2:懒惰模式:匹配的时候会尽可能多的去匹配字符 。匹配成功立即停止。
在贪婪模式的数量词后添加 ?以启动数量词的懒惰模式

71、
考量算法优劣的标准:
1:时间复杂度:随着问题规模的扩大,消耗的时间变化的趋势
2:空间复杂度:随着问题规模的扩大,消耗的空间变化的趋势

稳定排序:数列中相同的值排序前后的相对位置没有发生改变。
不稳定排序:数列中相同的值排序前后的相对位置可能发生改变。

八大排序
四大排序:
冒泡:前面有讲
选择:
     基本原理:将无序区中最小的元素和无序区的第一个元素互换位置。
          1:查找最小值,必须找到最小值的索引
          需要比较的趟数:长度-1
     实现:
          1:外层循环控制趟数
          2:内层循环控制本躺的无序区的最小元素索引的查找
          3:还要将无序区的最小值和无序区的第一个元素互换。 

插入:
     核心思想:将无序区的第一个元素,插入到有序区的合适的位置,插入之后,保证有序区依然有序。
     需要的趟数:长度-1
     外层循环控制趟数:长度-1
     内层循环本趟的合适的位置的查找和元素的移动
     问题:
          1:对带插入的无序区的第一个元素要备份。
          2:最后插入的位置??
          3:外层循环的次数通过长度控制,内层循环的停止的条件

快排:

二分搜索法:也称为 折半查找法
     作用:用来查找指定的数列中是否存在指定的值,返回查找的值的索引,和indexOf功能类似。
     二分搜索法前提:待搜索数列必须是有序的。效率很高。
     核心思想:通过不断的对带搜索区域不断的一分为二,来缩小带搜索区域的范围。

     需要两个变量来代表带搜索区域的开始和结束索引。
     low:低下标
     high:高下标
     mid:是low 和high 的中间的索引值
     获得mid 中间索引之后,用该索引的元素和带搜索的值key 进行比较。
     如果mid的值比key大,改变high 到mid-1
     如果mid的值比key小,改变low 到mid+1
     如果mid的值 === key 返回mid 

72、
XML:可扩展标记语言,是一种比较重度的存储和传输数据的一种格式。
JSON:轻量级的用于数据传输的数据格式。格式遵循了ECMAScript中的一个标准,所以js对该格式直接支持。在js中定义了JSON对象。用于操作json数据。
JSON:
作用:用于网络传输数据。
JSON本质上就是字符串。
主要由键值对构成,所有的键必须使用引号。他的值可以是js的任意类型,除了undefined 和 函数。

js对JSON是直接支持的,在js中有JSON对象,用来操作JSON字符串。	

JSON对象提供了两个工具函数。
JSON. stringify(obj):
     作用:将一个对象转换为JSON字符串
JSON. parse(jsonStr)
     作用:将一个JSON字符串还原为对象。

JSON的数据可以在程序中以字符串的形式存在,或者是单独存在的文件

73、
面向对象和面向过程
面向过程的编程思维:
将问题分解为若干个功能模块,然后让这些功能模块按照一定的顺序和逻辑执行。
将问题过程化
优点:对于简单的问题很容易实现。
缺点:对于业务逻辑比较复杂的问题,对于过程化的思维理顺整个过程是比较困难的。代码的复用性很差

面向对象的编程思维:
将问题抽象成若干个对象,然后让对象具有需要的功能和属性,通过对象之间的相互作用实现最终的需求。
缺点:对于简单的问题实现起来比过程化的要复杂。
优点:将问题中涉及到的对象去单独描述,每个对象和其他的对象的交互是有限的,逻辑相对简单。每个相对是比较独立的。代码的复用性更好。

面向对象就是创建不同的对象,让对象之间相互作用实现最终的需求。
两者不矛盾。面向对象是包含面向过程的。但是过程是通过对象来完成的。

自定义构造函数(模板)去创建对象。
定义构造函数的语法:
function 构造函数名(){
     this. 属性1 = value1;
     this. 属性2 = value2;
     this. 属性3 = value3;
     .........
}
上述的构造函数的问题:
     通过上述的构造函数创建的对象的属性和功能是一致的,我们希望对象之间是存在差异的。

构造函数名:就是一个方法的名字,但是作为构造函数的名字首字符需要大写。
     还要通过函数名能体现你要创建的对象的类型。
     构造函数中的属性:使用标识符即可。
     值:js支持的任意类型。

上述的构造函数的演变的版本
function 构造函数名(value1,value2,value3,........){
     this. 属性1 = value1;
     this. 属性2 = value2;
     this. 属性3 = value3;
     .........
}

74、
构造函数的特点:
1:定义构造函数的目的是为了通过它去创建若干个对象。
2:构造函数在创建对象的过程中充当了模板的角色。
3:创建出来的对象需要的属性应该在构造函数中去定义。
4:构造函数的首字符需要大写,构造函数的名字代表了应该创建的对象的类型。
5:构造函数创建对象的时候需要使用new 来调用。
6:构造函数中的this:
1:this. name 代表了创建好的对象。
2:构造函数中给属性绑定的函数中的this:代表了调用该函数的对象。

构造函数的执行过程:
1:向js引擎去申请一块堆内存,创建一个空对象(以原型对象为基础),并将该空对象赋值给this。
     this就代表了刚刚创建好的对象。
2:将实参的值赋值给形参。
3:给this 从上到下依次绑定属性。
4:所有的属性绑定完毕之后,对象初始化完毕了。
5:由new 关键字 将创建好并初始化完毕的对象的地址带回赋值给左边的变量。

构造函数和普通函数的区别:
1:语义上的区别
构造函数定义的初衷就是为了创建对象的,作为模板存在。
普通函数定义的初衷是为了实现某个功能,当然功能可能也是创建对象。

2:语法上的区别:
     如果我们希望某个函数作为构造函数使用,那么该函数就应该首字符大写。
     所有的js内置构造函数都遵循该规则。

     普通函数规范上首字符要求小写的。

3:使用的方式:
     构造函数使用new 来调用。
     普通函数直接调用。

4:构造函数的返回值是this。不需要使用return返回。
     如果在构造函数中显示使用return 返回数据,如果return的是基本数据类型,那么返回的还是默认的this。如果返回的是引用数据类型,那么实际返回的就是显示返回的数据,覆盖掉了返回的this。
     普通函数如果需要返回值的话必须使用return 返回数据。

5:在函数中的this区别
     构造函数中的this 代表了通过构造函数创建的对象。
     普通函数this 通常是代表了window对象。

保证构造函数使用new 来调用
1:在构造函数内添加"use strict" 启用函数内的代码严格模式。
再该模式下,this的值为undefined。给this绑定属性会报错。
2:判断this是否是Student类型的实例。如果不是就不是用new 来调用的。
3:在函数内使用new. target ,如果使用了new 调用 那么new. target就是当前函数。
如果没有使用new 调用,new. target 是undefined。

使用构造函数的优缺点
优点:
1:构造函数定义了一个模板,使用该模板,可以更方便快捷的创建若干个对象。而且创建的对象是有类型的。是自定义的类型。

缺点:
     通过构造函数创建的对象,每个对象都具有自己的私有属性的内存空间,对于对象的方法也是每个对象一份。对于不同的对象相同的方法,不能实现对象之间的共享,浪费了内存。

原型:
1:任何的函数都有一个属性:prototype。该属性指向了一个对象,该对象称为函数的原型对象,简称原型。
2:函数是具有唯一性的,所以任何函数的原型也是具有唯一性的。可以将需要对象共享的内容添加到原型中,可以实现对象对原型中添加内容的共享。
3:函数的原型对象中有一个属性:construction。该属性指向了构造函数。
4:通过构造函数可以创建任意个对象,这些对象中有一个隐藏的属性【prototype】
。该属性指向了构造函数的原型。大部分的浏览器都提供了一个供外部访问的属性__proto__来代表 隐藏的属性prototype【】通过该属性可以访问原型中的内容。
5:任何函数都是有原型对象的。但是只有构造函数的原型是有存在价值的,普通函数的原型对象对于我们来说是无用的。
6:原型也是对象,原型对象中也有__proto__属性,该属性指向原型对象的原型对象。任何对象都具有__proto__属性,指向了原型对象。
7:有原型对象中的__proto__属性连接起来的所有的原型对象,称为原型链。
8:原型链的顶端是Object构造函数的原型。相当于所有的对象都可以使用Object原型中的定义的内容。
9:Object构造函数的原型中__proto__属性值是null。
10:当一个对象访问一个属性的时候,会先从自己的私有属性中查找,如果私有属性不存在,就去__proto__属性指向的原型中去查找,如果还不存在,就去原型的原型中去找,就是沿着原型链向上的方向依次查找,如果Object的原型中还没有找到,那么就报错了。

     我们可以将需要共享的内容,添加到构造函数的原型对象中,通过构造函数创建的对象,就可以共享原型中的内容了。

如果私有属性和原型中存在相同的属性,优先访问自己的私有属性。

构造函数、原型对象、对象之间的关系
1:构造函数的prototype属性指向了函数的原型对象。
2:函数的原型对象的construction属性指向了构造函数。
3:构造函数创建了若干个对象。
4:被创建的__proto__属性指向了构造函数的原型对象。
对象可以使用原型链上定义的内容,原型链继承。

75、
new :js的关键字,用来调用构造函数创建对象的。
new关键字的作用:
1:用来申请内存创建空对象的。
2:让this指向刚刚创建好的空对象。
3:让当前创建好的对象的__proto__指向函数的原型。让对象可以使用原型中的内容。
4:将创建好的对象的首地址返回。让构造函数默认返回 this。

Object对象的原型对象的原型是null
Object对象的原型对象中定义了所有的对象可以使用的一些功能
Object. create(null);创建了一个空对象,并且创建的对象的原型是null。
对象的原型中保存什么内容?
对象共享的内容
如果在对象的原型中添加内容?
Student. prototype. name = “学生”
如何访问原型中的内容?
Student. prototype. name
obj. proto. name
obj. name ??可能存在覆盖,访问不到。

this总结:
1:在事件处理函数中的this代表了当前响应事件的元素对象。
2:this 代表了obj对象
3:this代表了window对象
function test(){
console. log(this)
}
4:this代表了window对象
console. log(this)
5:局部函数中的this代表了window对象。
function fn(){
var fn1 = function(){
console. log(this)
}
}
6:this 代表了创建的对象
function Person(name){
this. name = name;
}
7:函数内的this代表了调用study 函数的对象。
function Person(){

}
8:原型中函数中的this 代表了当前对象。也就是调用eat 函数的对象。
Person. prototype. eat = function(){
     console. log(this)
}

76、
js中的继承
继承:inheritance

js是基于原型的继承的语言:
     当创建一个对象的时候,该对象有一个属性__proto__指向了一个原型对象,该原型中包含了一些内容,可以供对象继承使用。所有的对象都从Object的原型中继承。

继承的概念:
     子对象可以直接使用访问父对象中的内容的过程。

子对象、子类型
父对象、父类型

父类型:树。子类型:杨树、槐树。。。。
父类型所描述的对象的范围更大,子类型描述的对象更加的具体。

继承的作用:
子类型可以复用父类型中的成员(属性+功能)。

借用构造函数继承
优点:通过借用父类型的规则函数实现了父类型中代码的复用。
缺点:
1:不能继承父类型构造函数原型中的内容。
2:使用instanceof 来测试,子对象 instanceof 父类型 结果为false。
当只有子类型的实例是父类型的对象的时候才能使用继承的关系。

原型链继承——第一种
1:创建父类型的实例,不需要传参
2:将子类型的原型指向父类型的实例。
3:修正:将子类型的原型的construction指向子类型的构造函数。
缺点:会导致子类型的对象的原型中存在父类型实例的私有属性。

原型链继承——第二种
1:创建一个对象,以父元素的原型为原型。
2:用创建的对象作为子类型的原型。
3:修正:将子类型的原型的construction指向子类型的构造函数。
4:在子类型实现原型链继承之后,才能在子类型的原型中添加需要的方法。

组合继承:借用构造函数继承+原型链继承。

instanceof:
作用:检测左边的对象是否是右边类型的实例。
左边是对象 右边是构造函数。
之前得出结论:
1:子类对象是父类型的实例。
2:任何对象都是Object 的实例。

深入理解:
作用:用来检测右边的构造函数的原型对象是否在左边的对象的原型链上。

构造函数的静态成员
Array 构造函数的原型中定义着 数组的实例对象可以访问的实例对象

Array. isArray():
     数组构造函数的一个静态函数,工具函数。用来检测实参是否是数组。

Number. MAX_VALUE:
     静态属性。

静态成员是属于类型的成员,不是实例的成员。
静态属性:类型的属性存在。通过 构造函数名. 属性 访问。
静态方法:类型中的工具方法存在。通过 构造函数. 方法名  访问。

每个静态成员具有唯一性的特点。在内存中是占有唯一的内存空间的。是依赖于构造函数对象的,不依赖实例对象。

静态成员和实例成员的区别:
1:使用方式:
     静态成员:【使用类型,构造函数】直接调用
     实例成员:使用对象()调用
2:语义:
     静态成员:依赖于类型、依赖于构造函数对象。不属于类型中具体的某个对象的。
     实例成员:依赖于任何一个实例对象的。和类型没有直接的关系。
3:内存:
     静态成员:依赖于构造函数,任何一个静态成员都只有一份;
     实例成员:依赖于实例对象的,所以没创建一个对象就会产生一份。(不包括原型中的内容。)(原型中定义的内容都是对象实例来访问的)。

Object的原型中定义的函数:
hasOwnProperty:用来判断实参是否是当前对象的私有属性。

如果一个属性存在于该对象内部,就是私有属性。
构造函数内定义的都是私有属性。原型中的不是私有属性。静态成员也不是私有属性。

Object的静态函数
Object. getOwnProPertyName(obj):获得实参的所有的私有属性。
Object. getPrototypeOf(obj):获得一个对象的原型对象。称为获得一个对象的原型对象的标准访问方式。
Object. setPrototypeOf(obj,Object. prototype):
将obj的__proto__指向第二个实参。
Object. freeze(obj):冻结实参对象。
Object. seal(obj):禁止扩展和删除实参对象中的内容。
Object. preventExtensions(obj):禁止扩展实参对象,不允许添加属性。

77、
in:用来判断key是否存在于对象中。
语法:key in obj
返回:true,false。
结论:对象的私有属性和原型中的内容,只要能被对象访问的内容都是true。 静态不行

78、
作用域:scope
变量或者函数可以被使用的范围。

主要存在两种作用域:
1:全局作用域
2:函数的局部作用域

作用域的作用:
规定了不同作用域下定义的内容可以被使用的范围。
不同的作用域下可以定义同名的变量。

作用域存在层次
     层次的结构:最外层是全局作用域-然后是函数的局部作用域-函数内的定义的函数的局部作用域。
     这样的层次结构决定了每一个层级的作用域,只能访问它所有的外部层级的作用域的内容以及本层级作用域的内容,不能访问内部层级作用域的内容。

作用域的这样的层级的关系就称为作用域链。

作用域链:一定是从全局作用域开始的。以当前执行的作用域为结束点。

作用域链的作用:
保证了在不同的作用域下【有权】【有序】的访问在不同的作用域下定义的内容。
在某个作用域下,只能访问当前作用域产生的作用域链中定义的内容。

当在任何的作用域下访问内容的时候,查找的过程:
先从当前作用域下查找,有直接访问。没有,向它的上一级作用域下查找。
依次类推,知道找到最外层的作用域 全局作用域,如果还没有找到就报错了。

在js代码执行的过程中,会不断的发生作用域的切换。
每当开始执行进入一个新的作用域的时候,会把当前的作用域作为一个节点保存。每个作用域节点中保存的是该作用域下定义的内容。当结束一个作用域的时候,将节点删除
作用域链:执行过程中保存下来的所有的作用域的节点组成的链
作用域第一个节点:全局作用域
作用域最后一个节点:当前作用域,当前执行的js代码所在的作用域。

作用域链的作用:可以保证在不同作用域下有权、有序的访问不同作用域下定义的内容。

79、
闭包:closure
概念:可以在函数外部访问的局部函数。
作用:
1:可以在函数的外部去访问函数内定义的局部变量。
2:可以将局部变量的生命周期延长。延长到闭包被销毁。
3:可以将局部变量作为对象的私有属性使用。
缺点:
1:因为闭包的存在,导致函数内的局部作用域中的变量一直保存在内存中,会占用内存。
2:闭包中保存的变量的值,每次闭包函数的使用,都会影响后续闭包函数的使用。

80、
设计模式:设计模式代表了最佳的实践

设计模式是针对某一类问题所提出的最佳的解决方案。

简单工厂模式:为了解决创建大量的对象。还降低了类型之间的耦合度。
单例设计模式(singleton):解决的问题是,如何针对一个类型,只能创建该类型唯一的一个实例对象。
观察者设计模式:observer
又称为发布订阅模式。
当某个对象和对个其他的对象有关联的时候,如果这个对象发生了状态的改变,如何更好的通知给其他的对象。

DOM2级事件处理程序使用的就是观察者设计模式。

81、
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

官网:http://jquery.com

目前 jQuery 最新的版本是 3.5.1,任何一个版本都提供了两个版本
1: compressed, production jQuery 压缩版,代码库中只有代码,发布产品的时候使用。体积比较小。
2: uncompressed, development jQuery 未压缩版本,开发时使用,可以参考jQuery的源代码。

我们使用的版本是一个兼容最好的版本 1.12.4

82、
原生的js的入口函数:
window. onload

jQuery的入口函数:
ready事件。

两者的区别:
1:window. onload 多次定义会覆盖 ready事件不会产生覆盖。
2:reayd事件是jQuery中定义的事件。onload 是原生js定义的事件。
ready 事件会先于 onload 执行

83、
的 介 绍 1 : j Q u e r y 是 一 个 构 造 函 数 。 的介绍 1:jQuery 是一个构造函数。 1jQuery 是jQuery的别名。$ 是 jQuery的构造函数。
2:可以用来选取页面的元素,获得页面元素的jQuery对象。
3:还可以用来类型的转换,将js对象转换为jQuery对象。

js对象和jQuery对象的互相转换
1:js对象到jQuery对象
语法:$(js对象)强转
2:jQuery对象到js对象
语法:jQuery对象 [下标]

84、
基础选择器
ID选择器:
$("#ID名"). css(“属性”,“属性值”)
类选择器:
$(". 类名"). css(“属性”,“属性值”)
元素选择器
$(“元素名称”). css(“属性”,“属性值”)
群组选择器
$("#ID名,. 类名"). css(“属性”,“属性值”)
后代选择器(空格)
$(“同css”). css(“属性”,“属性值”)
子代选择器(>)
$(“同css”). css(“属性”,“属性值”)
下一个兄弟元素(+)
$(“同css”). css(“属性”,“属性值”)
后面所有兄弟元素(~)
$(“同css”). css(“属性”,“属性值”)
全局选择器(
$("
"). css(“属性”,“属性值”)

85、
过滤选择器:对集合中的元素进行过滤筛选
容器中的第一个元素(: first),第一个ul中的第一个元素
$("").css(“属性”,“属性值”)
容器中的最后一个元素(: last),最后一个ul中的最后一个元素
$(“同css”). css(“属性”,“属性值”)
容器中指定类型的第一个元素(: first)
$(“ul li : first”). css(“属性”,“属性值”)
容器中指定类型的最后一个元素
$(“ul li : last”). css(“属性”,“属性值”)
容器中指定下标的元素 从0开始
$(“ul : eq(下标)”). css(“属性”,“属性值”)
容器中偶数下标的元素
$(“ul : even”). css(“属性”,“属性值”)
容器中奇数下标的元素
$(“ul : odd”). css(“属性”,“属性值”)
容器中下标大于n的所有的元素
$(“ul : =gt(下标)”). css(“属性”,“属性值”)
容器中下标小于n的所有元素
$(“ul : =lt(下标)”). css(“属性”,“属性值”)

86、
结构伪类选择器:对集合中的元素进行过滤筛选
第一个孩子元素 (first-child),每个的ul中的第一个孩子元素
$(“ul : first-child”). css(“属性”,“属性值”)
最后一个孩子元素(last-child),每个的ul中的最后一个孩子元素
$(“ul : last-child”). css(“属性”,“属性值”)
第n个孩子元素,下标从1开始。
$(“ul : nth-child(下标)”). css(“属性”,“属性值”)
奇数孩子下标
$(“ul : nth-child(even)”). css(“属性”,“属性值”)
偶数孩子下标
$(“ul : nth-child(odd)”). css(“属性”,“属性值”)
倒数第n个孩子的
$(“ul : nth-last-child(下标)”). css(“属性”,“属性值”)
第一个指定类型的元素
$(“ul p : first-of-type”). css(“属性”,“属性值”)
最后一个指定类型的元素
$(“ul p : last-of-type”). css(“属性”,“属性值”)
指定下标和指定元素的元素,下标从1开始
$(“ul p : nth-of-type(下标)”). css(“属性”,“属性值”)
指定逆序下标和指定元素的元素,下标从1开始
$(“ul p : nth-last-of-type(下标)”). css(“属性”,“属性值”)

87、
表单过滤选择器:
所有的input标签的元素
$(": input"). css(“属性”,“属性值”)
所有type 是text 的input
$(": text"). css(“属性”,“属性值”)
所有type 是password的input
$(": password"). css(“属性”,“属性值”)
所有type 是radio 的input
$(": radio"). css(“属性”,“属性值”)
所有type 是checkbox 的input
$(": checkbox"). css(“属性”,“属性值”)
所有type 是submit 的input
$(": submit"). css(“属性”,“属性值”)
所有type 是reset 的input
$(": reset"). css(“属性”,“属性值”)
所有type 是button。
$(": button"). css(“属性”,“属性值”)
所有选择的表单元素
$(": checked"). css(“属性”,“属性值”)
$(": selected"). css(“属性”,“属性值”)

88、
jQuery常用方法
html():
作用:和元素js中的元素dom属性 innerHTML 的作用一模一样。
获取和设置页面元素中的内容。设置的内容包含标签会生效。

text():
用法和作用和 innerText是一致的。而且不存在兼容性的问题
获取和设置元素中的文本内容,如果设置了标签,name标签不生效,作为普通文本显示。
如果是一个集合对象,那么会将集合对象中的内容进行隐式遍历

补充:上述的两个方法,没有参数是获取元素的内容,添加了参数是设置元素的内容。

val():
作用:和原生js中的表单元素的dom属性value 作用是一致的。
获取和设置表单元素中的内容。

prop():property
作用:用来操作元素的DOM属性。
如果添加的属性不是元素所具有的标签属性,那么是不会再元素上显示的。
对于自定义的属性,该属性和属性值会存在于对象上,不会以标签属性存在。
attr():attribute
作用:用来操作元素的标签属性。
对于自定义的属性,会作为自定义的标签属性存在。

建议:使用prop来实现对属性的获取和设置。

removeProp()
作用:删除元素的prop属性
1:对于自定义的标签属性,不能删除
2:内置的标签属性,属性名还在,属性值被设置为了undefined
removeAttr()
作用:删除元素的标签属性
将内置的和自定义的全部删除,包括属性名和属性值一并删除

上述的两个方法可以一次性删除多个方法,中间用空格删除。

addClass()
作用:设置元素的class属性的值
removeClass()
作用:删除元素的class属性的值
toggleClass()
作用:有这个class属性就删除,没有就添加

css():
获取和设置的css样式

对行内的外部的内部的样式提供了统一的访问接口。浏览器的兼容问题解决了。
样式的名称支持 中划线 or 驼峰命名

可以对元素一次性设置多个样式属性。使用对象来设置。

width():元素的css样式的宽度
height():元素的css样式的高度
innerWidth():包含内边距,padding
innerHeight():包含内边距,padding
outerWidth():包含边框,border
outerHeight() :包含边框,border

上述6个方法的返回值都是数值型。
上述的6个方法,可以通过传参来设置对应的宽度和高度。

scrollLeft():用于获得和设置水平方向滚动的距离
scrollTop():用于获得和设置垂直方向滚动的距离

89、
jQuery对象创建
语法:$(“创建的标签的内容”)
创建的标签的内容:可以是头标签(空元素),可以是对标签(可以设置内容),添加属性的对标签

内部添加元素的方法
append:将指定的元素尾部添加到当前容器中。
jQuery父元素对象. append(jQuery子元素对象 | 标签字符串)

appendTo:将当前jQuery元素尾部追加到指定的父元素中。
jQuery子元素对象. appendTo(jQuery父元素对象 | 选择器)

prepend:将指定的元素添加到当前容器中的头部

prependTo:将当前jQuery元素头部添加到指定的父元素中。

外部添加元素的方法:
after:将指定的元素添加到当前元素的后面。

insertAfter:将当前元素插入到指定元素的后面

before:将指定的元素插入到当前元素的前面

insertBefore:将当前元素插入到指定的元素前面。

总结:append、appendTo、prepend、prependTo、after、insertAfter、before、insertBefore都具有移动现有元素的方法

删除元素的方法:
empty:
清空指定的容器元素。
父元素. empty():清空父元素,子元素全部被删除。

remove:
删除当前元素
元素. remove():删除当前元素及其子元素。
将一个结果集中的某些元素删除,通过选择器过滤。

clone:
作用:元素的复制。
参数:可以接收一个Boolean值作为实参,true,深度复制:事件一并复制。
false:不复制事件,浅复制,后代元素一并复制。

parent:
获得当前元素的直接父元素的jQuery对象。
parents:
获得当前元素的所有的直接的和间接的父元素
parentUntil(ele):
获得当前元素和ele元素之间的所有的父元素,不包括ele

children:
获得当前元素的所有的子代元素
find(selector):从一个结果集中中过滤出指定选择器的内容。
从当前的元素中查找满足过滤条件的后代元素。

sibling():获得当前元素的所有的兄弟元素
next():当前元素的下一个兄弟元素
nextAll():当前元素的后面的所有的兄弟元素
nextUntil(ele):当前元素的后面的指定区间的兄弟元素,不包含两端
prev():当前元素的上一个兄弟元素
prevAll():当前元素的前面的所有的兄弟元素
prevUntil():当前元素的前面的指定区间的兄弟元素。

90、
结构过滤方法
first():获得结果集中的第一个元素
last():获得结果集中的最后一个元素。
eq(n):获得结果集中执行下标的元素。0序的
filter():对结果集进行选择器过滤。可以多个 中间用逗号隔开

其他方法:
addBack():将产生当前结果集的对象追加到当前结果集中,并返回。
end():返回在链式调用中,和当前对象不相同的最近的那个调用者对象。

91、
jQuery中的事件处理-1
callback:
语法:jQuery对象. 事件名称([外部数据],callback);

注意:
回调函数中的this 代表了当前元素对象,是js原生对象。
事件对象的捕获方式:使用回调函数的形参方式即可,并且解决了兼容问题。
对同一个事件多次绑定不会覆盖。
对于外部的数据,可以使用事件对象 e.data 来表示外部的数据。

jQuery中的事件处理-2
bind
语法:jQuery对象. bind(types,data,fn);

jQuery中的事件处理-3
代理:
delegate函数:
语法:父元素. delegate(“后代元素”,事件名称,[数据],fn)

jQuery中的事件处理-4
on:
语法:jQuery对象. on(types,selector,data,fn)

注意:
1:on可以替代bind实现更优的选择。
2:on可以替代代理
3:同一个事件多次绑定不会覆盖

jQuery中的事件处理-5
hover:
语法:jquery对象. hover(fn1,fn2)
fn1:当jQuery对象触发了mouseenter事件执行fn1
fn2:当jQuery对象触发了mouseleave事件执行fn2.

jQuery中的事件处理-6
one:用于对某个事件的单词事件的绑定,触发一次就删除了。
语法:jQuery对象. one(types,selector,data,fn)

jQuery中的事件的删除
unbind:删除指定的事件
undelegate:删除指定的事件
off:删除所有的事件,也可以删除指定的事件

92、
jQuery的事件对象的捕获
和原生的捕获的方式基本一致,使用事件处理函数的形参来接收产生的事件对象。
e 和 原生js中的e 基本是一致的,事件对象e 的用法和原生的基本一致。

事件对象的方法:
1:preventDefault 取消默认行为的
原生的js中的兼容实现:e. returnValue = false
2:stopPropagation:阻止事件冒泡
原生的js中的兼容实现:e. cancelBubble = true
使用jQuery中使用事件对象调用上面的方法,不需要考虑兼容问题了。

说明:事件处理函数中的this:是js原生对象。
e. target 和原生的一致
e. currentTarget 和 原生的一致

93、
动画
显示隐藏:
hide(delayTime,callback)
隐藏当前对象
show(delayTime,callback)
显示当前对象
toggle(delayTime,callback)
如果隐藏就显示,如果显示就隐藏

delayTime:动画持续时间,毫秒
callback:动画结束之后 执行的函数。

滑动
slideDown(delayTime,callback)
滑出当前对象
slideUp(delayTime,callback)
收起当前对象
slideToggle(delayTime,callback)
如果收起就下滑,如果下滑就收起

淡入淡出
fadeIn(delayTime,callback)
fadeOut(delayTime,callback)
fadeToggle(delayTime,callback)
fadeTo(delayTime,to,callback)
一旦调用,会影响其他的三个函数的边界透明度

自定义动画函数 animate
语法:jQuery对象. animate(styles,time,easing,callback)
styles:样式对象,只对数值型的样式敏感。
time:对象从当前样式变化到styles 样式下持续的事件,毫秒。
支持:fast slow
easing:样式过渡的变化的方式:
swing(慢快慢-默认)、linear(匀速)

动画结束函数:
stop(clearQueue,gotoEnd)
clearQueue:true:清空动画队列中的内容。false:不清空
clearEnd:true:让当前动画立即执行完毕。false:
false,false:立即结束当前动画,继续执行动画队列中的下一个动画
true,false:立即结束当前动画,并清空后续的动画。
false,true:立即让当前动画执行完毕,并执行后续的动画。
true,true:立即让当前动画执行完毕,并清空后续的东湖

jQuery遍历对象:
实例函数:job. each(function(index,ele){})
回调函数中的参数
index:被遍历的集合中的元素的索引,从0开始。
ele:被遍历的集合的元素,和index是对应的。ele是js的原生对象。
静态函数:$.each(obj,function(index,ele){})
回调函数中的参数
index:被遍历的集合中的元素的索引,从0开始。
ele:被遍历的集合的元素,和index是对应的。ele是js的原生对象。

.音乐
音频视频api–js

<audio src='' autoplay controls></audio>  <video ></video>
常用属性:
autoplay	自动播放
controls	显示控件
currentTime	返回当前音频/视频的播放时间
duration	返回当前音频/视频的总时长
ended		返回当前音频/视频是否播放结束
paused		暂停状态  暂停 true  false播放
src			音频/视频路径
volume		设置音量

常用事件:
oncanplay	在用户可以开始播放视频/音频(audio/video)时触发   视频/音频(audio/video)在加载过程中,触发的
ontimeupdate	当前音频/视频播放时间发生改变时触发   
object.addEventListener("timeupdate", myScript); function myScript(){ }
play()		播放
pause()		暂停

bug:臭虫的意思。在计算机科学中,代表程序中的错误。
debug:解决错误。调试错误

断点调试:breakpoint。让程序暂停的点。 script

外层循环控制行数
内层循环控制列数

编码的习惯:
1:严格的代码缩进
2:合适的变量的命名
3:每一行的末尾添加分号
4:代码分组(类型的代码放到一起),不同类型的代码组要进行隔行
5:添加合适的注释

进制:
js的机制的表示形式:
二进制:0b binary
八进制:0o octal
十进制:
十六进制:0x hexadecimal
1、
JavaScript介绍
js是一种脚本语言 还是动态类型 弱类型的基于原型的语言
脚本语言:直接由浏览器解析执行 必须要有宿主运行的宿主(host)环境,通常是浏览器。不能开发一些系统软件
非脚本语言可以直接在操作系统上执行
动态类型、弱类型:js的数据类型当赋值以后才可以确定 并且是可以改变的
基于原型:基于原型继承_ proto _ 创建的所有对象都是基于一个原型对象而创建的。

2、
前端三层
HTML 结构层 写网页结构内容 身体
css 样式层 写网页样式 衣服
JavaScript 行为层 写网页动态特效 行为

3、
JavaScrip发展史

  1. 1995
    网景 联合 sun 发布 JavaScript)livescript
  2. 2009
    ECMAScript5(ES5) 学
  3. 2015
    ECNAScript6

ECNA:欧洲计算机

学习js的几部分:
1.ECMAScript:js的核心基础部分。规定了js的基本语法,类型,流程控制语句。
2.DOM:通过js去操作页面文档
3.BOM:如何使用js访问它的宿主对象。浏览器。
4.面向对象:js的高级部分。
js的组成部分
1)ECMAScript 核心js 规定了js的基础语言 :数据类型 变量 常亮 分支 循环 数组 函数 对象等
2)DOM document object model 文档对象模型 规定了一套管理HTML文档的机制
3)BOM browser object model 浏览器对象模型

5、
引入js
1.内部引入

可以写在页面任何位置 推荐写在body结束标签之前(加载完所有的HTML 在加载js)
一个页面可以有script标签
注意:type属性可以省略

2.外部引入——内容与行为的分离
1)新建js文件
2)HTML文件中引入

可以写在网页任何位置
推荐写在head标签里
一个页面里可以有多个script标签

注意: 外部和内部不可以共用一个script 如果共用 内部引入不生效

6、
js的语法
1)JavaScript区分大小写
2)js语句以分号或者换行结尾
3)推荐一行只写一条语句 并且以分号结尾
4)js忽略多余的空格

整理代码格式 ctrl+alt+L

7、
输出方式
1)输出到控制台
console.log()
注意:不解析HTML标签
2)输出到页面
document.write()
注意:解析HTML标签 输出到当前script后面
3)弹出警告框
window.alert()
简写alert()
注意:阻止页面程序的执行 不解析HTML标签

打开控制台:Crtl+shift+J

HTML元素在js中的应用
1)引号中写HTML的标签
document.write(‘

你好 中国<>/h2’)
2)元素中引入script

8、 js调试 控制台调试 包含三部分 1)错误类型 Typeerror 2)错误原因 console .Log is not a function 3)错误的位置

9、
多个script报错
其中一个script有错 对其他script没有影响
同一个script中 错误及错误之后不执行 错误之前会执行

10、
标识符:identifier
给内存中的不同类型的数据起的名字
1)概念 在计算机编程语言中 标识符是用户编程时使用的名字
列如 变量名 数组名 函数名 对象名等
2)标识符命名规则(必须遵守)
①区分大小写 a A
②可以包含数字 字母 下划线 $
③不可以以数字数字开头
④不能是js的关键字和保留字
3)标识符的命名规范(建议)
①见名知意
②多个单词建议驼峰命名法
大驼峰 所有单词首字母都大写 HelloWorld
小驼峰 第一个单词首字母小写 后面单词首字母都大写 helloWorld
③禁用单字符标识符
标识符有很多种类
变量名 常量名 只读变量名 方法名 类型名
11、
变量 variable
一块有名字的内存 内存中的数据可以被修改
变量的提升
定义
值可以改变的量 称为变量
作用
存储数据的容器
声明变量
var 变量名
变量赋值
变量名 = 值
等号右侧赋值给等号左侧
变量的初始化
声明变量的同时给变量赋值 称为变量的初始化
var 变量名 = 值
一条语句可以声明多个变量 逗号隔开
var 变量1,变量2,…;
①var x = 5,y = 6,z = x + y 声明变量的同时赋值
console.log(z)
②var x,y,z;//声明变量
x=5 ;//变量赋值
y=6;//变量赋值
z=x+y;//变量赋值
console.log(z);
声明变量没有赋值
返回undefined(未定义) 不报错
var x;
console.log(x); undefined
变量没有声明
console.log(y); 报错Referenceerror
重新声明变量
在js中 重新声明变量 之前的值不会丢失
变量重新赋值
后面的值会覆盖前面的值
变量声明提升
js在执行前会把变量的声明提升到所有代码的最顶部 赋值留在原地
不写var的情况
不写var声明的变量为全局变量 使用范围不受控制
变量的分类
①全局变量——任何位置都可以使用
②局部变量——只能在局部作用域中使用

12、
动态输入框
prompt(‘默认提示’,‘默认值’)
注意:
1)默认值可以省略
2)返回string类型

13、
常量
字面量:1 1.1 true false undefined null ‘abc’
只读变量:read only const
声明
const 常量名 = 值;
注意
①常量的值不可以改变 重新赋值会报错
②声明常量的同时必须赋值
③常量声明不会提升
常量命名规范
常量名习惯大写 多个单词习惯用下划线

14、
注释
1)HTML

2)css
3)js
①单行注释
//注释的内容
ctrl+/
②多行注释
/* 注释的内容 */
ctrl+shift+/
③方法的注释
方法上边/**按回车
注意:注释之间不能相互嵌套

15、
数据类型——js支持的数据类型
1)基本数据类型——5
Number 数字类型
包含了所有的数字(整数、小数、正数、负数、极大极小数、进制数) 、NaN(not a number)、Infinity、-Infinity
NaN:not a number
Infinity:当分母为零 分子为正数
-Infinity:当分母为零 分子为负数

Xtring 字符串类型
引号包含的任意内容
单双引号都可以
注意:
①引号成对出现
②字符串可以相互嵌套 单引号内嵌套双引号 双引号内嵌套单引号
③一个字符串需要写在同一行 跨行显示会报错 可以在换行的位置加转义字符(下面 17)

 转义字符\(反斜杠)

产生歧义内容的前面
语法:\转义的内容
例子:var str1 = ‘双节’快乐’’;
特殊的转义字符:
\n 换行 new line
\t 制表符 tab
\r 回到一行的开始 return
\bb 退格符 backspace

Boolean 布尔类型
包含两个值
true 真
false 假

Undefined 未定义类型——只有唯一的一个值:undefined
声明变量没有赋值 返回值为undefined 数据类型为undefined
注意:
①undefined一般不会主动去赋值
②undefined表示变量的数据类型不确定
因为js拥有动态的数据类型 根据变量的赋值 确定变量的数据类型
声明未定义

Null 空类型——只有唯一的一个值:null
null代表了一个不存在的对象
一般用来主动释放对象
typeof时返回object

2)引用数据类型——1
本质上都是Object
Array、Function、Date
object 对象类型
1)object 对象类型 typeof返回object
var obj = {
键值对
}
键值对
键名:键值 key:value 属性:属性值
键名 默认为string类型 引号可加可不加
键值 可以是任何数据类型
多个键值对之间用逗号分隔 最后一个键值对后面不加逗号

2)array 数组类型 typeof返回object
数组中的数据称为数组元素 数组元素可以是任何数据类型 多个数组元素之间用逗号分隔
var arr = [数组元素1,数组元素2,。。。]

3)function 函数类型 typeof返回function
函数默认不执行 当调用或者事件驱动才执行
function f(){

}

16、
判断数据类型
typeof 值
返回右侧值的数据类型
可以返回 number string boolean undefined object function

17、
转义字符\(反斜杠)
产生歧义内容的前面
语法:\转义的内容
例子:var str1 = ‘双节’快乐’’;
特殊的转义字符:
\n 换行 new line
\t 制表符 tab
\r 回到一行的开始 return
\bb 退格符 backspace

18、
js拥有动态的数据类型
js根据赋值确定变量的数据类型 同一个变量可以为多种数据类型

19、
运算符 操作符
分类:
1)根据操作数
一元运算符(单目运算符)、
二元运算符(双目运算符)、
三元运算符(三目运算符)
2)根据作用
1+2:1和2称之为 操作数或者是算子,+:运算符
1+2:表达式
返回值:表达式或者是算子计算的结果
所有的运算
算数运算符

      • / %(取余) ++(自增) --(自减)
        1)当全是number 正常进行数学运算
        2)当遇到string
        +:遇到字符串会直接进行字符串拼接 返回string类型
    • / %:转换为number进行计算 能转换为数字 进行正常的数学运算 如果不能转换为数字 则返回NaN
      %:结果的符号取决于%左边的算子的符号
      做计算时 true转换为1 false转换为0 undefined不能参与计算返回NaN null转换为0 NaN返回NaN
      +:一元 二元
      console.log(+5);一元
      console.log(5+5);二元
      -:一元 二元
      、/、%:二元
      console.log(5
      5)二元
      ++ 自增 自己+1 i++:后++ ++i:前++ i++相当于i=i+1
      – 自减 自己-1 i–:后-- --i:前-- i–相当于i=i-1
      不管前加加还是后加加 对于变量自身来说没有区别 都是+1
      前加加 先执行加1 再返回 后加加 先返回 再加1
      前减减 先执行-1 再返回 后减减 先返回 在-1

                            比较运算符(关系运算符)
      

用来比较两个算子的关系在
只能比较两个值 返回布尔类型

、<、>=、<=
== 等于 只判断数值
=== 绝对等于 全等 绝对等于 既判断数值 又判断数据类型
!= 不等于 不等于 等于取反
!== 不绝对等于 不全等 全等取反
特殊比较:
字符串比较是一个字符vs一个字符 一旦能决定大小 就不再往下执行
console.log(undefinednull) true
console.log(undefined
=null) false
console.log(NaNNaN) false
console.log(NaN
=NaN) false
console.log(NaN != NaN) true
console.log(true == 1) true
console.log(true === 1) false
console.log(false == 0) true
console.log(false === 0) false
console.log(null == 0) false
console.log(null === 0) false

                                     逻辑运算符

返回值为布尔类型
&& and 逻辑与 并且 所有表单式结果都为true 最终结果为true 只要有一个表达式的结果为false 最终结果就为false
|| or 逻辑或 或者 只要有一个表达式的结果为true 最终结果就为true 所有表单式结果都为false 最终结果为false
! not 逻辑非 取反
优先级从大到小:非与或

                                       赋值运算符

等号右侧的值赋值给等号左侧
返回值:计算的结果
右侧可以是操作数 也可以是表达式
= 赋值 右侧的返回值赋值给左侧的变量
+= i+=j 相当于i=i+j
-= i-=j 相当于i=i-j
= i=j 相当于i=i*j
/= i/=j 相当于i=i/j
%= i%=j 相当于i=i%j
注意:
短路逻辑
表达式结果一旦能决定最终结果 后面的表达式就不再执行
逻辑与短路的条件:false
逻辑或短路的条件:true

不是布尔值的逻辑运算符
逻辑与 第一个值为false返回第一个值 如果第一个值为true 则返回第二个值
逻辑或 第一个值为true返回第一个值 如果第一个值为false 则返回第二个值
一下六个值转换为false 其余所有值都转换为true
undefined
null
false
0
NaN
“”(双引号)或’’(单引号) (空字符串,中间有空格时也是true)
三目运算符(条件运算符)
语法
表达式1?表达式2:表达式3
说明
①表达式1为布尔值
②表达式1为true 执行表达式2
③表达式1位false 执行表达式3

	 位运算符

操作32位的整数 必须是整数
32位整数的最高位是1表示负数 最高位是0表示正数

~ ^ >> << >>> & |

  1. ~ 按位取反
    遇到0转换为1
    遇到1转换为0
    实质:求负再减1
    应用:取整 ~~number
    2)^ 按位异或:一个数先后对同一个数异或两次,结果是它本身
    相同为0 不同为1
    应用一:交换两个边路的值
    var num1=10;
    var num2=20;
    num1 = num1 ^ num2;
    num2 = num1 ^ num2;
    num1 = num1 ^ num2;
    应用二:简单的加密应用
    var heart = 5211314;
    //加密
    var key = 999999999;
    var result = heart ^ key;
    log (result);//加密
    log (result ^ key);//解密

3)>> 带符号右移
num>>n
实质:除以2的n次方
右移几位 右侧删除几位
4)<< 左移(不叫带符号左移)
num<<n
实质:乘以2的n次方
左移几位 右侧补几个零

随机生成一个数
(Math.random()(max-min+1)+min)
随机生成一个整数
parseInt(Math.random()
(max-min+1)+min)

运算符优先级:

1)先乘除取余 在加减
2)小括号优先级最高
3)一元优先级大于二元
4)二元优先级大于三元
5)逻辑运算符优先级为非与或
6)优先级相同 从左往右执行

名词解释:
1+5
操作数:1、5
运算符:+
表单式:1+5
返回值:操作数和表达式都有返回值 操作数返回整个结果

js中的运算符操作的都是返回值

20、
精确度问题
不可避免
解决:
值.tofixed(number)
返回string类型

21、
数据类型转换
为何需要类型转换?
任何语言中都有一种规则:不允许不同类型的数据之间进行运算
如果是不同类型的数据进行运算 那么久需要向同种类型转换之后再做运算

1)自动(隐式)转换
转换为number类型
- * / %
转换为string +
当一个数值+字符串转换为string
转换为boolean
需要布尔值 如果你的值不是布尔值 会隐式转换为布尔类型
列如:if条件 三目表达式 比较运算符 逻辑运算符 while循环等
以下六个转换为false 其余都转换为true
false undefined null NaN 0 “” ’ ’ (空字符串)

2)强制(显式)转换
转换为number
Number()
总结:
①true转换为1 false转换为0
②只要包含不是数字的字符返回NaN
③前后的空格可以忽略
④数字前面的0也是忽略

 转换为string类型

String()
转换为boolean类型
Boolean()

log(1&&2);都为true
log(1||2);第一个为true 短路
log(0&&2);第一个为false 短路
22、
程序
程序=数据+算法
数据:变量、数组、对象等
算法:顺序结构、分支结构、循环结构

分支结构
1)if 单分支结构
单分支选择语句 根据条件有选择的执行或者不执行这唯一的一个分支
语法:
if(条件){满足条件执行的语句};
注意:
①条件一般为布尔值,如果不是布尔值,会隐式转换布尔值
转换为false的有:false null undefined NaN 0 ’ ’
②大括号中是满足条件执行的语句 如果条件为false 大括号中的语句不执行

2)if-else 双分支
执行且必须执行其中的某一个分支
语法:
if(条件){满足条件执行的语句}else{不满足条件执行的语句}
注意:
①小括号后不加分号
②条件一般为布尔值,如果不是布尔值,会隐式转换布尔值
转换为false的有:false null undefined NaN 0 ’ ’
③当条件为true,执行if大括号中的语句;当条件为false,执行else大括号中的语句
④当只有一条执行语句,if和else后面的大括号可以省略

3)else-if 多分支
执行且必须执行其中的某一个分支
if(条件){满足当前条件执行的语句}
else if(条件){满足当前条件执行的语句}
else if(){}
else if(){}

else{以上条件都不满足执行的语句}
注意:
①小括号后不加分号
②条件为布尔值
③else可以省略
④上面的条件一旦满足,后面的条件不执行,只要后面的条件执行,表示上面的条件都不满足

4)
switch语句
使用绝对等于进行等值比较判断
语法:
switch(变量表达式){
case 表达式1:
代码块1;
break;
case 表达式2:
代码块2;
break;

default:
代码块n;

}
注意:
①变量表达式可以是任何数据类型
②表达式1等一般为常量
③default可以省略的,写上表示上面条件都不满足,执行的语句
④break可以省略 加上表示结束整个switch结构
⑤switch做全等比较

分支结构之间可以相互嵌套

循环结构
1)for
语法
for(初始化循环变量;循环条件;迭代){
循环体
}
注意:
①for循环小括号内的两个分号不可以省略
②小括号后不能加分号
③循环变量、循环条件、迭代可以省略
④初始化循环变量可以有多个,用逗号隔开 例如 var x,y
执行原理
①初始化循环变量,判断循环变量是否满足条件,不满足,直接退出循环
②满足,进入到循环内部,执行循环体
③执行迭代,使循环变量的值发生改变
④判断改变后的循环变量是否满足循环条件,不满足,直接退出循环
⑤满足,进入到循环内部,执行循环体
⑥执行迭代,使循环变量的值发生改变
⑦判断改变后的循环变量是否满足循环条件,不满足,直接退出循环

for(初始化循环变量;循环条件;迭代){
循环体;
}
2)while
循环要素
①初始化循环变量
②循环条件
③迭代(改变循环变量)
④循环体
语句:
while(循环条件){
需要反复执行的代码
}
var i=1;//初始化循环变量
while (i<=100){ //循环条件
console.log(i);//循环体
i++;//迭代
}
3)do-while
语法:
do{
需要执行的重复的代码
}
while(条件);

注意:while和do-while的区别
while:先判断在执行
do-while:先执行一次,再判断

过程:
①先执行一次大括号中的语句
②在判断条件是否为true,当条件为false,结束整个循环,当条件为true,执行大括号中的语句

循环结构和分支结构可以互相嵌套

循环嵌套
1)语法
for(var i=0;i< ;i++){
for(var j=0;j< ;j++){
for(var k=0;k< ;k++){
}
}
}
2)执行原理
外层循环走一下 内层循环走一圈
外层循环实际控制内层循环的次数
内层循环实际控制的是输出
行(外层循环遍历行,外层循环控制内层循环执行次数)
列(内层循环遍历列,内层循环控制实际的输出)

break和continue
1)break
配合switch和循环使用
表示结束整个结构(当有循环嵌套,结束当前层循环)
语法:break;
注意:
break后面的语句不执行
2)continue
配合循环使用
表示跳过本次循环,继续下一轮循环
语法:
continue;
注意:
continue后面的语句不执行

22、
模式字符串:在变量和字符串进行+连接的时候使用更加的方便
语法:模式字符串的内容;符号是Esc键下面的那个符号。
模式字符串中${内容}:内容可以是任意的js的表达式

bit:位,0或者是一个1 就是1bit
byte:8bits
字符集:charset
所有的字符集本质上都是整数的集合。一个字符一定对应着一个整数,反之不一定
ASCII:是一个单字节字符集,共收录了128个字符,只用到了字节中的低7bits【0-127】
0字符:48
A字符:65
a字符:97

有些特殊的字符:用于控制显示的字符
如果在程序中需要使用这些具有特殊意义的字符,但是这些字符没有一个具体的字符
必须使用一种特殊的表示形式来表达这些特殊的符号
\r:回车符:控制光标回到当前行的行首
\n:换行符:光标换到下一行
enter键:对应着两个字符:\r\n:让光标去到下一行的行首
\t:tab 键 水平制表符 占用【1-4】个半角符号的空白空间 补齐4的倍数
\b:对应着退格键 退格符 backspace键
’ :代表了字符 ’
":代表了字符 "
\:代表了字符 \

ASCII:世界上所有的字符集都兼容了该字符集
ISO8859-1:西欧字符集
gb2312:收录了所以的简体中文
gbk:gb2312的一个超集,收录了简体中文,繁体中文,各个少数名族的符号
utf-8:收录了世界上所有的符号

23、
函数:function java里叫方法:method
函数是一段有名字独立的功能代码块,通过名字可以在任意的位置访问调用该代码块。
使用函数带来的优点:
1.代码的复用
2.功能模块化,更易于后期的维护和修改。

对于一个人对象来说:属性+功能的组合体。
属性:年龄、姓名、身高、体重、性别
功能:吃喝拉撒睡、学习、开车、写字。
人如果要想去开车,需要外部提高一辆车给他开
很多功能是需要外部提供的数据

函数的定义的形式:function 命令定义形式
函数声明定义形式
函数的定义的语法:封装函数
function 函数名(参数列表){ 函数体 }

function:js的关键字,用于定义函数。
如果一行代码的内容以function 开始,那么js引擎会认为这是一条定义函数的语句
函数名:是一种标识符,该名字应该能体现函数要实现的功能 首字符小写 如果是多个单词构成 从第二个单词开始首字符大写
(参数列表):这一对小括号必须要有,里面的内容可以为空
小括号中内容被称为【参数列表】也称为:【形参列表】简称【形参】
参数:参与内部执行的数据
形式参数:形式上参与内部执行的数据
形参的个数是任意的 依据功能的需求来确定 形参是用来接收外部的数据的 供函数内部使用
外部提供的数据是实际参与函数内部执行的数据
形参是变量 是局部变量是当前函数的局部变量 只能在函数内使用
形参变量的命名需要体现出要接收的数据的含义 多个形参变量之间使用逗号分隔最后一个形参的后面不需要逗号
{方法体}:{}是必须要存在的 里面的内容为函数的主体实现功能部分 function body
函数体可以是js的合法代码

使用:
函数的调用 invoke function call function
语法:函数名(实参列表)
实参列表:实际参与函数运算的数据 通常实参的个数和形参的个数是一致的 多个实参用逗号分离
调用函数的时候 就把实参的值赋值给形式参数 让实际参数在函数中参与运算

定义函数的时候
①参数列表的本质就是用来接收外部的数据的 当函数被使用(调用)的时候形式参数用来接收实际参数的值在函数中参与运算
②形参列表也可以表示函数的自身的需求,需要使用者使用该函数的时候,提供给函数的外部数据。
③形参列表中定义的是局部变量,使用逗号分隔。只能在当前函数中使用。形参列表中的参数变量的个数没有限制,通常是不能重名的。
使用函数:调用函数
语法:函数名(实参列表)
①实参列表的个数和顺序应该和形参列表是一致的
②实参的个数比形参的多,后面多余的实参就没有形参来接收匹配了。就没有办法通过形参来访问实参了。
③实参的个数比形参的少,后面多余的形参的值是undefined。
函数的调用的过程的简单说明:
①函数的定义不会被执行
②只有函数的调用会被执行,当执行函数的调用语句的时候,首先将实际参数的值赋值给形式参数(数值的传递简称传参)。然后执行函数体内的代码,当函数体内的代码执行完毕之后,执行当前函数调用语句后的代码。

补充:如果一个变量的值是null,和一个变量的值是undefined。
变量的值是null:通常是意料之中的事情
一个变量的值是undefined:通常是意料之外的事情
注意:
不管js提供的内置函数,还是我们自定义的函数,如果参数涉及到了区间的值,那么区间都是[前闭后开)。

函数的返回值:当一个函数被调用执行的时候,函数自身执行之后会产生一个结果,那么该结果就称为函数的返回值
①并不是所有的函数都需要返回值。根据具体的业务的需求,有选择的让函数可以有返回值和没有返回值
②如果一个函数没有返回值,那么undefined作为函数的默认返回值
,返回值为未定义
③如果我们定义的函数当希望函数执行完毕之后,希望函数产生一个结果。使用该结果,那么该函数就应该定义为具有返回值的函数。如果一个函数当执行完毕之后,只是简单执行函数体中的功能,而不希望有什么结果,那就不需要返回值。
④函数的返回值就是一个数据,可以是js支持的任意类型。
⑤如果希望函数有返回值,那么必须使用关键字 return 在函数体中将需要返回的结果返回
语法:return 需要返回的值;
return后可以是js的任意的有返回值的代码
return语句的个数是没有限制的

return的使用:
①return js的关键字
②return只能在函数体中使用
③使用return返回函数需要的返回值
return js的任意的有返回值的代码
④如果一个函数不需要返回值那么也可以使用return来结束函数。
语法:return;
⑤只要在函数体中执行到了 return语句,那么都会立即结束函数的执行,函数返回

 从返回值的角度去给函数分类:

可以分为2类:
①有返回值的函数
②无返回值的函数,默认返回undefined
这两类函数的使用:
①:无返回值的函数的调用:
只有唯一的一种正常的使用方式:直接调用
②有返回值的函数的调用:
1.使用一个变量来接收函数的返回值——使用最多的
var num = random(0,100);
2.作为一个表达式的操作数使用:
var value = num + random(0,100);
3.作为方法的实参使用:
var num = random(random(0,10),100);
4.直接调用,会丢弃函数的返回值——很少
random(0,100);
5.作为一个方法的返回值——不多:
function f(){
return random(0,10);
}

 函数的定义声明的方式:一共用三种

1)function 命令行模式(函数声明方式)——最常用的
function 函数名(参数列表){函数体}
特点:函数具有声明提升的特点,可以在定义函数的前面使用函数
2)函数的表达式方式:
右边的是一个匿名函数对象,存在于内存中。函数变量名保存的是该对象的地址
通过函数变量名保存的函数对象的地址去访问内存中的匿名函数-
var 函数变量名 = function(参数列表){函数体}
特点:
①这样的函数称为匿名函数
②通过指向匿名函数对象的函数变量去访问该匿名函数
③必须先定义后使用,定义在前,使用在后
④调用该匿名函数:函数变量(实参列表)
3)使用构造函数 ——了解:
var 函数变量名 = new Function(“形参列表” “…” “函数体”)
调用:函数变量名 ();

函数的分类:
1):从返回值的角度
①有返回值
②无返回值
2)从参数的角度
①有参函数
②无参函数
3)从定义者的角度
①js语言自身定义的函数:js内置函数 Math.random()
直接使用
②开发者自定义的函数
定义后使用
③第三方的开发者定义的函数
需要引入之后才能使用
4)从调用者的角度
①实例函数
对象作为调用者
②静态函数
类型作为调用者
类型:对对象的抽象的描述
人,树,车,动物
对象:类型的一个具体的实例
小刚,园区门口的那颗小白杨
我的那辆自行车,邻居家的小狗

函数的重载:overload

重载的概念:
多个函数之间,函数名字相同,参数列表不同 称为函数的重载
js中不支持函数的重载 如果多个函数的名字相同,参数不同,那么后面的函数会覆盖掉前面的函数
在后续的学习中,可以使用其他方式实现重载

函数书写的几点意见:
1)函数名一定要见名知意 要通过方法的名字能猜出函数实现的功能
2)函数的参数的名字也要见名知意,通过参数变量的名字可以猜出实参的数据内容
3)函数体中,先处理一些特殊情况,然后在解决一般情况
4)函数体中需要使用变量,尽量使用局部变量,能不使用全局变量就不要使用全局变量
以使用局部变量为荣,以使用全局变量为耻。
5)函数的功能实现的越单一越好。职责单一。越单一越容易被复用
6)函数体不能过于臃肿。越短小越好

24、
函数的参数传递:
1:函数定义的参数:形参列表
形参的作用:接收实参的数据的
2:函数调用的参数:实参列表
实参:本次函数执行中的实际参数运算的外部数据
3:传参的本质:
把实参的数据赋值给形式参数变量
4:值传递:
将实参变量的值(不是地址)赋值给形参变量。简称传值。pass by value
基本数据类型作为参数,那么都是值传递
引用数据类型作为参数,那么就是地址传递(引用传递|传引用)pass yb reference。
5:栈帧:stack frame
每个栈帧对应着一个未运行完的函数。栈帧中保存当前函数的所有的局部变量(函数内定义的局部变量和形参变量)

 栈中数据的特点

先入后出 | 后入先出。frist in last
压栈:push 将数据压入栈顶
弹栈:pop 将栈顶数据删除

关于js程序中处理的数据使用的内存的类型:
1:堆内存 heap js中的对象数据
js引擎动态管理的。灵活,慢
2:栈内存 stack 函数中的局部变量
静态管理的。内存是连续的,对函数的占用的内存的分配是固定的。效率高,不灵活。
特点:数据是先入后出,后入先出。
压栈:将数据压入栈内存 push
弹栈:将数据从栈顶删除 pop
方法调用:
1.再栈内存中给函数分配栈帧
栈帧中保存的是当前函数中的所有的局部变量
2.将实参的值给形参
3.执行函数体中的代码
4.函数执行完毕之后 对应的栈帧被清除掉

25、
局部变量和全局变量的区别:
1:定义的位置
全局:方法外定义的
局部:方法内,形参也是局部变量
2:作用域不同
全局:整个script代码块内。
局部:只能在定义的方法内使用。
3:生命周期不同
全局:生命周期依赖于window对象。window对象代表了当前浏览器窗口,窗口被关闭全局变量被销毁
局部:生命周期依赖于栈帧,依赖于函数的调用,从开始调用到结束调用
4:被访问的优先级不同
当全局变量和局部变量重名的时候,那么在函数中局部变量被访问的优先级高于全局变量
在函数内如果访问重名的全局变量:可以通过【window.全局变量名 或者是this.全局变量】
5:所处的内存不同
全局:堆中
局部:栈中
6:使用上的区别:
①优先使用局部变量。全局变量不易于整体的维护,可能存在变量之间数据的污染覆盖等问题。
②如果当一个数据希望在多个函数内共享,而且保存使用之后的值,需要使用全局的。

补充:定义的所有的全局变量还有方法,都会作为window对象的属性和功能存在。
局部变量不会

函数 | 方法的执行符:一对小括号。可以让一个函数对象执行函数体中的内容。

函数的名字或者函数变量:代表了函数对象自身,通过指针(保存对象地址的变量)的指向。

回调函数:一个函数fn 的参数是函数对象,然后在fn 内部调用执行参数函数。这个参数函数就是回调函数。
callback

匿名自执行函数—匿名立即执行函数:执行且仅执行一次。是以一个函数存在的,是一个封闭的空间,可以定义局部变量。function前面必须有个符号,不能以function开头

(function(){
console.log(匿名自执行函数)
})();

26、
局部函数——闭包:
1:定义在函数体内的局部函数
2:局部函数的作用域在函数体内,所以只能在函数体内调用

27、
函数的属性:
name:代表了函数的名字,string类型。
①对于有名函数,name返回的就是函数的名字。以字符串返回
函数名.name
②匿名函数的名字,如果使用一个变量指向的匿名函数,那么函数的名字是该变量的字符串形式
length:代表了当前函数对象的形参的个数
arguments:
①是函数体中的一个属性,直接使用即可
②是一个对象,代表了本次调用的的实参列表的数据
③有一个属性:length 代表了实参的个数 length 是一个大于等于0的整数值。
④是一个类数组对象。一个类似数组的对象。数组就是一组数据的集合
⑤通常使用形参来接收实参数据,并处理实参数据。如果说参数的个数的需求是变化的,那么就不能使用形参来接收实参了,这时候就不需要定义形参来接收实参了,可以使用arguments来接收实参的数据。
可以通过arguments.length 获得实参的个数。
可以通过arguments[i] 获得序号是i的实参的值。序号从0开始,依次递增。
⑥callee 该属性是一个对象,代表了函数本身。
callee属性在js的严格代码形式下不允许使用。
ues strict //启动js的严格代码模式(全局)

28、
函数对象的实例函数:
toString():
返回当前函数对象的字符串表示形式。
call():
将当前函数借给其他的对象使用。
apply():
将当前函数借给其他的对象使用。语法和call稍有差别
bind():
利用当前对象的函数,帮助其他的对象去创建一个新函数

29、
递归:
函数直接的或者间接的调用了自身过程,称为递归调用。
递归调用解决问题的特点:
①问题可以分解为若干个子问题 子问题也可以分解为子问题
②子问题的解决方式和问题本身解决的方式一致
③最终问题的解决要依赖于子问题的解决
④必须存在一个子问题能够直接解决
递归调用的优缺点:
优点:思路简单,代码实现简单
缺点:效率低,非常占用栈内存
可以使用递归实现的功能,大部分都可以用循环实现如果递归的层数不确定就不能使用循环实现

30、
let 和var 的异同
相同点:
①都是js的关键字
②都是用来在js中定义变量的
不同点:
① 定义的变量的作用域的区别
var 定义的只有全局变量和局部变量,没有块级作用域
let 定义的变量有全局变量和局部变量,还有块级作用域变量
②是否可以重复定义
var 可以重复定义变量
let 不可以重复定义同一个变量
③是否可以作为window属性存在
使用var定义的全局变量,会作为window对象的属性存在
使用let 定义的全局变量,不会作为window对象的属性存在
④出现的时间
var:随着js语言诞生的。
let :ES6版本出现的。

目前接触过的对象的类型:
Object,Function,Array
31、
数组
数组出现的意义:当需要一个变量保存多个数据的时候,就需要使用数组了。
概念:一组有序的变量的集合。
有序:每一个数组中的数据都有一个键和它对应。键就是它的序号
变量:数组中的每个数据都是一个变量
集合:一组特殊的键值对的集合,键是数值型,值是js支持的任意类型。
基本的数组的定义形式:
var 数组变量 | 数组引用 = [ ];——定义了一个空数组
var 数组变量 | 数组引用 = [1,true,“123”,null,undefined,function(){},{},[1,2,3]]定义了一个有初始值的数组
特点:
①数组是js中的一种内置的类型,是引用数据类型
②数组在堆中分配内存
③是一种特殊的对象,所有的键都是数值型的,从0开始,依次递增的。
④数组是一组有序的变量的集合。数组中的变量在数组中称为【元素】element
⑤数组中的元素都是有序号的,从0开始:0序的。这个序号称为【下标】、【索引】、【角标】。
⑥访问数组中的元素的语法:【数组变量[元素下标] | 数组变量[“元素下标”]】
每个元素都是一个变量,变量能做的元素就都能做。
⑦ 数组在堆中分配内存,数组的元素是连续的分配的内存,【随机访问数组元素的效率很高。删除元素和插入元素的效率比较低】
⑧数组的本质是对象,是一组键值对的集合。键都是数值型的,值可以是js支持的任意类型。
⑨数组有个属性:length,是一个整数类型,是一个大于等于0的整数。代表了当前数组中的元素的个数。
通过 【数组名.length】 【数组名[“length”]】 访问。是一个可读可写的属性。
⑩数组元素的下标的取值范围是:【0—length-1】
length
1.length,是一个整数类型,是一个大于等于0的整数。代表了当前数组中的元素的个数。
通过 【数组名.length】 【数组名[“length”]】 访问。是一个可读可写的属性。
2.length属性的取值范围: 【0~(232-1)】数组的元素的最大下标为232-2.
3.数组的元素赋值的时候,可以下标是不连续的进行赋值。可以存在下标的元素是undefined的值、 那么length属性的值保存的最大下标不是undefined的元素的下标+1的值
4.数组的length属性可以直接赋值,实现对数组的扩容(后面添加值为undefined的元素),和缩容()(截断高下标的所有的元素)
5.可以给数组添加非数值型的键,并给该key设置对应的value。非数值型的key不会被length属性统计。
6.如果给数组添加的元素的下标超过了下标的最大取值,那么该元素就不会被length统计。
数组的定义的形式介绍
1.表达式方式
var 数组名 = [元素1,元素2,…];
创建了一个数组,并指定了几个元素的值,个数也指定了。
2.构造数组方式
var 数组名 = naw Array(元素1,元素2,…);
多个元素代表了初始化的元素 一个元素代表了初始化的长度

32、
in运算符
1:js的关键字,是一个操作符
2:用来判断某一个字符串是否是某个对象中的key。
语法:“字符串” in 对象
如果是,返回true,否则返回false

33、
数组元素的操作:增删改查
增加:在最后的一个元素后面追加一个元素。
arr[arr.length] = 值;
删除:删除某一个下标的元素
delete arr[下标];
会将该下标的元素设置为undefined。length属性不会被影响。
修改:给元素赋予新的一个值
arr[下标] = 新值;
查:获取指定下标的值
arr[下标]

34、
数组元素的遍历
1:使用基本的for循环
2:使用for in循环 i代表了元素的下标
for (var i in array){

}
3:使用for of循环 不知道ele元素对应的下标
for(var ele of array){
console.log(ele)
}
4:使用函数对象的实例方法 forEach
var fn = function(val,index,arr){
console.log(val,index);
console.log(arr);
}
val 是被遍历的数组的每个元素
index 被遍历的数组的索引
arr 被遍历的数组

类数组对象:
如果一个对象的所有的键值对的键部分都是数值型的,从0开始一次递增的。0序的。
还有length属性。代表了元素的个数。称该对象为类数组对象。
类数组对象就是一个集合。

类数组对象和数组的区别:
类数组对象的length属性,需要自己维护,自己进行修改
数组的length属性,是数组底层自己进行维护的,是自己动态调整的。
数组有很多的实例函数可以使用。
类数组对象没有这些实例函数使用。

35、
函数分类
1:有参无参函数

2:有返回值无返回值

3:实例函数、静态函数
实例函数:
实例就是对象。实例对象调用的函数
自定义的全局函数也是实例函数,是window对象的实例函数。
实例函数的访问方式:对象. 实例函数(实参列表)
实例函数通常操作的是当前实例对象
静态函数:
任何的实例对象一定隶属于某一种类型
直接通过构造函数对象调用的函数,就是静态函数
通过类型名,构造函数名调用的函数。

构造函数. 函数名(实参)

Array:Function
     即是构造函数,也代表了某种类型

属性的分类:
实例属性:
实例对象包含的属性。
数组的length属性。函数的name、length属性。
静态属性:
通过类型名,构造函数名调用的属性
这样的属性通常是只读的属性。
将实例函数和实例属性统称为:实例成员。
将静态属性和静态属性统称为:静态成员。

36、
数组的实例函数:
push:压栈
作用:给当前数组的尾部追加元素
语法:数组. push(元素1,元素2,…);
返回:数组当前的长度
pop:弹栈
作用:将数组的最后一个元素删除,length属性会被改变
语法:数组. pop();
返回:被删除的元素。如果数组是空的,返回undefined。

shift:
作用:删除当前数组的第一个元素。头元素
语法:数组. shift();
返回:被删除的元素或者undefined。
unshift:
作用:给当前数组元素添加指定的头元素
语法:数组. unshift(ele1,ele2,…);
返回:当前数组的长度

join:
作用:将当前数组的所有的元素使用指定的字符进行连接,。形成一个字符串
语法:数组. join(连接符);separator 分隔符
参数:如果省略,那么使用逗号 作为默认的分隔符、
如果使用空字符串作为实参,那么返回的是没有分隔符的连接形式
返回:连接之后的字符串对象

indexOf:
作用:用来查找当前数组是否存在指定的元素
语法:数组. indexOf(searchElement,fromIndex ?)
searchElement:待搜索的数据
fromIndex:可选参数,搜索的起始索引。省略,从头开始找。
返回:搜索的结果,如果可以找到,返回第一个匹配元素的索引,没有找到返回-1;
lastIndexOf:
作用:用来查找当前数组是否存在指定的元素
语法:数组. lastindexOf(searchElement,fromIndex ?)
searchElement:待搜索的数据
fromIndex:可选参数,搜索的起始索引。省略,从尾部开始找。
返回:搜索的结果,如果可以找到,返回第一个匹配元素的索引,没有找到返回-1;
indexOf 和 lastIndexOf 区别:
indexOf是顺序查找
lastIndexOf是逆序查找

slice:切下的意思
作用:从当前数组中截取子数组
语法:数组. slice(start ?,end ?);
start:被截取数组的开始索引,包含
end:被截取数组的结束索引,不包含
如果end省略,从start截取到末尾
如果都省略,复制当前数组
返回:被截取的子数组

splice:
作用:可以是当前数组实现增删改的操作
返回:被删除的元素组成的数组
增加操作:数组对象. splice(插入的位置,0,插入的数据列表)
返回空字符串
删除操作:数组对象. splice(删除的位置,删除的个数)
返回被删除的元素组成的数组
修改操作:
数组对象. splice(修改的位置,修改的个数,修改的数据)

reverse:
作用:对当前数组进行自身的翻转。
语法:数组. reverse()
返回:翻转之后的数组

sort:
作用:对当前数组进行升序排序
sort 函数的默认排序的规则:
将所有数组中的元素都转换为字符串之后再去排序,按照字符串的排序规则进行默认排序
字符串的排序的规则是:依次比较相同位置上的字符的Unicode码值,如果码值相同,比较后续位置上的字符的Unicode码值
注意:如果不希望使用字符串的默认规则去排序,那么就需要给sort函数提供回调函数,并在回调函数中按照一定的规则去实现回调函数。回调函数的实现的规则:以升序为例子:两个形参代表了待排序数组中的元素。要在回调函数中对参数进行比较。
升序:如果第一个参数大于第二个参数,返回正数,如果第一个参数大于第二个参数,返回负数。两个参数相等则返回0.
降序:如果第一个参数大于第二个参数,返回负数,如果第一个参数大于第二个参数,返回正数。两个参数相等则返回0.

map:
作用:遍历数组,对数组中的所有的元素进行某个操作,返回操作之后的值组成的新数组。
回调函数的参数的意思和forEach一致
filter:
作用:对当前数组的所有的元素进行过滤,将满足条件的元素过滤得到组成一个新数组返回。
find:
作用:元素查找
返回:第一个满足回调函数的条件的元素的值
如果所有的元素都不满足条件,返回undefined

findIndex:
作用:元素查找,返回索引。
用法:和find基本一致
some:
作用:判断当前数组中是否存在元素满足回调函数中的条件,只要有一个元素满足回调函数的条件,some就返回true,否则返回false。

every:
作用:判断当前数组中是否所有元素满足回调函数中的条件,只要有一个元素不满足回调函数的条件,some就返回false,否则返回true。

includes: 和 indexOf基本一致,返回值不同。
作用:当前数组中是否包含指定的值。
语法:数组. includes(searchElement,fromIndex ?)
返回:存在返回true,否则返回false
cancat:
作用:将当前数组和实参的内容进行连接,形成一个新数组返回

数组的静态函数:
语法:Array. isArray(obj):
作用:用来判断实参 obj 对象是否是数组
返回:如果obj 是数组,返回true,否则返回false

总结:
基本数据类型作为参数,函数调用过程中,一定不会改变实参的值。因为是传值。值传递。
pass by value
引用数据类型作为参数,函数调用,不能确定是否会改变实参的值。因为是传引用
pass by reference。

37、
多维数组
严格意义上说,数组只有一位数组

一维数组:数组的元素是我们需要的数据
二维数组:一维数组的元素是一维数组,这样的一维数组就称为维数组
三维数组:一维数组的元素是二维数组
n维数组: 一维数组的元素是n-1维数组。

3~n维数组称为多维数组。

38、
排序
八大排序:
冒泡、直接选择、直接插入、快速排序

 时间复杂度:主要的用来衡量一个算法的优劣的
概念:一个算法随着问题规模的增大,消耗的时间的变化的趋势的函数。
常数阶:0(1)
线性阶:0(n)
平方阶:0(n^2)
 空间复杂度:
次要的用来衡量一个算法的优劣的。多个算法之间的空间复杂度通常是不会有太大差别的。除非使用递归实现的算法,递归的空间复杂度比较高。
 稳定排序:相同的元素排序前后的相对的位置不会发生改变的排序
 不稳定排序:相同的元素排序前后的相对的位置可能不会发生改变的排序

冒泡排序:
核心思想:通过不断的对无序区所有的相邻的元素进行比较,如果低下标的元素大于高下标的元素,那么两个元素就进行互换。实现了将无序区的最大的元素移动到了最后面。
需要比较的趟数:长度-1
第一趟比较的趟数:长度-1
每一趟的比较的次数都是递减1的

39、
对象:
对象的基本构成:属性+功能。 哈希结构,hash,映射(一一对应的关系)。
可以通过key访问对应的value,不可以通过value找到对应的kkey 映射是单向的
键 key:值value 一组称为键值对
属性名:属性值
js中的对象是由若干个键值对的集合
键:无序的,唯一的 数据类型为字符串型
值:值是依附于所对应的键的,无序的,不唯一的。可以是js支持的任意类型作为值。

如何访问对象的属性值:通过键获取它的值
语法:
①对象.键
②对象[“属性名”]

如果一个对象的键都是数值型的,从0开始递增的整数
数组是一类特殊的js对象:所有的键都是数值型的。从0开始,以次递增。

对象的相关概念:
1:类型:class Array,Function,Number,String,Boolean,Null,Undefined。
网络:指包含由各特殊的事物抽出来的共通点的抽象概念
老师:对对象的抽象的描述。
例子:
树,人,动物,学生
2:对象:实例对象 object
老师:某种类型中的一个具体的实例。
树:我家院子里的那颗樱桃树
3:类型和对象的关系
类型是描述对象的。

思考:现实的世界中,是先有类型还是先有的对象
先有对象
先认识各种对象然后归位了某种类型

js描述对象的语法:
var 对象变量 = {
key1:varlue1,
key2:varlue2,

keyN:varlueN,
};
js中的对象是键值对的集合
键值对的集合——映射——单向的。可以通过key找到对象value。
value是我们需要处理的数据,key是获得数据的途径
通过key得到value的方式:
1:如果键是标识符的规则形式:
①对象名. 键名 obj. name
②对象名[“键名”] obj[“name”]
③对象名[变量名] 变量名保存了字符串键名
var key = “name”;obj[key]
2:如果键不满足标识符的规则:
①对象名[“键名”] obj[“1a”]
②对象名[变量名] 变量名保存了字符串键名
var key = “a b”;obj[key]
3:数值型的键
①对象名[数值型键] obj [1]
②对象名[“数值型键”] obj [“1”]
③对象名[变量名] 变量名保存了字符串键名
var key = “1”;obj[key]

 键:key
所有的键都是字符串,可以使用双引号或者单引号将键字符串包围
如果键的字符串遵循了标识符的命名规则,那么引号可以省略,建议省略。
如果键的字符串中包含了不满足标识符命名规则的字符,那么必须使用引号表示出来。
如果键是数字那么可以省略引号
      特点:
1:无序的
2:唯一的,重名后定义的会覆盖前面的。
3:都是字符串
      建议:
使用标识符的命名方式去表示键,省略引号
 值:value
命名表示方式:
     返回值为js支持的任意类型的表达式或者是变量。函数、数组、对象......
      特点:
1:无序的,value是依赖于对应的key的。key是无序的,所以value会跟着key无序
2:可以重复的
3:就是一个变量,可以做任何的对变量的操作。

this:
1:js中的关键字
2:是一个对象的引用
3:是当前对象的引用。或者代表了当前对象。
全局函数中this:window对象,this和window指向了同一个对象
对象函数中this:当前对象,调用该函数的对象

40、
js中创建函数的方式:
1:表达式方式:
var 对象名 = {
key1:varlue1,
key2:varlue2,

keyN:varlueN
};
2:构造函数方式:
var 对象名 = new Object(对象 | 空);
3:通过Object 的静态函数创建
var object = Object. create(obj | null)

键值对的增删改查
删:通过键删除键值对

41、
对象的遍历方式:
1:for-in
for(var key in obj){
console. log(${key}--${obj [key] })//必须使用[ ]
}
2:Object 的静态函数 keys(obj)
得到一个数组,数组的元素为实参对象的所有的键
var keys = Object. keys(obj)
for(let i = 0;i<keys。length;i++)
3:Object 的静态函数 values(obj)
得到一个数组,数组的元素为实参对象的所有的值
能获得所有的值,不能获得值对应的键。
4:Object 的静态函数 entries(obj);entry:键值对的意思
得到一个数组,数组的元素是数组,每个元素数组是一对键值对。
会得到obj实参的键值对的数据
补充:for of 循环,只能用来遍历数组,不能用来遍历对象。

42、
面向对象编程的思维模式
根据需求创建具有指定功能和属性的若干个对象,然后通过对象之间的相互作用实现最终的需求。

找对象,搞对象。
如果一个对象的功能足够大强大,那么就可以实现任何的需求了
js为了帮助开发者快读开发,在js中定义了若干个对象,对象中包含了若干个成员,提供了一些基础的功能来帮助开发者。

js提供的内置对象的介绍
掌握内置对象的基本使用和功能
一切皆是对象:当我们希望一个基本数据需要当对象使用的时候,。那么它就可以被转换为对象。
Object 对象:
1:Object是js中的一个构造函数,还代表了 对象 这种类型。
2:Object()可以做为工具方法使用。可以将任意的基本数据类型转换为对象。
3:作为构造函数使用,使用new 关键字调用,用来创建对象。可以指定创建的对象的初始内容或者为空。
4:还定义了一些静态的函数,作为工具函数使用。
Object. keys():得到obj对象的key,以数组形式返回。
Object. values():得到obj对象的varlue,以数组形式返回。
Object. entries():得到obj对象的key+value,以二维数组形式返回。
Object. create(obj | null):创建对象的。
Object. getOwnProertNames(obj):用来获取obj对象的所有的键,以数组形式返回,包括不开枚举的属性。
5:Object对象提供了一些基础的实例方法供通过Object构造函数创建的对象使用。
obj. toString()返回当前对象的字符串表示形式
obj. toLocaleSting():得到当前对象的具有本地特性的字符串表示形式。
obj. hasOwnProperty(key):用来判断 key 是否是当前对象的私有属性
obj. valueOf():返回当前对象的原始值。主要针对的是三种数据类型Number String Boolean的对象中获取原始值。
6:js是一个基于原型的语言。任何的对象的创建都在某一个原型对象上创建的。这个原型对象提供了所有对象可能需要使用的功能。
toString … 这个原型是Object构造函数的原型。这个原型是依赖于Object对象的。或者说这个原型对象是Object对象的。所有的js中对象的创建都以Object构造函数的原型的对象为基础创建的
Object 是js中的任何类型的父类型。所有的js中的任何类型的数据都是以Object为父类型创建的。
所有的js中创建的对象都直接的或者间接的继承了Object原型对象中的内容
js语言是一个单根系统。跟对象是Object。
7:父类型大,还是子类型大?父类型描述的对象的范围大,子类型描述的对象的范围更加的具体。子类型中的功能更加的强大。
父类型中的功能是将所有的子类型中的共有功能抽取出来形成的。
8:instanceof
js的一个关键字
作用:用来判断一个对象的是否是某种类型的实例的。
语法:对象 instanceof 类型
返回:如果是,返回true,否则false。
结论:子类型的对象永远是父类型的实例。Object是所有的类型的父类型,那么所有的对象都是Object的实例。一切皆对象。

三种基本数据类型:Number、String、Boolea但是我们有将基本数据类型转换为对象的需求,就需要将基本数据类型转换为对象。这些转换需要某些函数的支持。
数值型----数值型对象 转换依靠 Number 对象
布尔型----布尔型对象 转换依靠 Boolean 对象
字符串型----字符串对象 转换依靠 String 对象

Number对象:
1:他是基本数据类型-数值型 对应的包装类型对象。通过Number构造函数对象可以将数值型数据包装成一个对象。通过new 关键字调用。通过new 关键字 调用Number(数据)转换为 一个对象的过程。称为装箱操作。boxing。
2:作为工具函数使用:将任意类型转换为数值型。强制类型转换。
3:提供了静态的成员。

4:提供了用于操作数值对象的实例函数。
     num. toString(radix):将当前对象转换为指定进制的字符串表示形式
     num. toFixed(digit):将当前对象的小数点后保留指定的位数。
总结:
     构造函数
     工具函数
     静态成员
     实例成员

Boolean对象
1:作为构造函数使用。可以将布尔值的基本类型数据装箱为对象。new 调用。
2:作为工具函数使用。将任意类型转换为布尔类型数据。
只有5个数据转换的结果是false,其他的都是true。

Mayh对象
js中的Math对象是一个比较特殊的对象。
1:Math 不能作为构造函数使用。不能创建Math类型的对象。
2:Math 对象中定义的成员都是静态的成员,不需要使用实例对象调用。
Math. 调用的。都是只读属性+工具函数。

静态属性:
           E	返回算术常量 e,即自然对数的底数(约等于2.718)。
           PI	返回圆周率(约等于3.14159)。 ****
           SQRT1_2	返回返回 2 的平方根的倒数(约等于 0.707)。
           SQRT2	返回 2 的平方根(约等于 1.414)。

    静态方法:
        abs(x)	返回数的绝对值。
        ceil(x)	对数进行上舍入。 **
        floor(x) 	对数进行下舍入。 **
        max(x,y)	返回 x 和 y 中的最高值。 **
        min(x,y)	返回 x 和 y 中的最低值。 **
        pow(x,y)	返回 x 的 y 次幂。
        random()	返回 [0 ~ 1) 之间的随机数。 ******
        round(x)	把数四舍五入为最接近的整数。 ***
        sqrt(x)	返回数的平方根。

js的内置时间对象:
js语言的时间原点:标准世界时1970年1月1日0时0分0秒
Date对象:
1:js的内置的用于管理设置时间的。
2:作为工具函数使用。
获得当前日期的字符串对象。
3:作为构造函数使用。创建日对象的。
转换为数值:当前日期距离时间原点的毫秒的时间差
①无参:创建系统时间的日期对象。
②有参:创建指定日期的时间对象。
③创建的对象可以转换为string和number
4:静态函数
now():当前系统时间距离时间原点的毫秒时间差。
parse():使用指定的字符串中的日期和和时间原点的毫秒时间差。
5:实例函数:
①to类
将日期对象转换为各种风格的日期字符串对象。
②get类
用来获得日期对象的各种具体的日期时间属性的。年月日,时分秒
③set类
用来设置日期对象的各种日期时间属性的。
④other
getTime 返回当前日期对象距离时间原点的
getTime

注意:
1:日期对象的月份属性是0序的,取值范围【0-11】
          如果通过构造函数去设置日期。如果是数值型的那么就需要从0开始计算。如果是字符串从1开始算第一个月
2:日期对象的星期也是0序的。从0开始【0-6】

String对象
1:js的内置对象,是三个基本数据类型对应的包装对象之一。
2:作为工具函数使用,可以将任意类型转换为字符串类型。
String
3:作为构造函数,可以将基本数据类型的字符串转换为字符串对象。
new String(“123”)
4:提供了一些静态函数和大量的实例函数
5:任何一个字符串常量都可以看做一个 String 对象。
字符串对象的初始化方式
1:使用字符串常量赋值。简单 ,当需要str 当做对象使用的时候,底层会进行装箱操作。
2:构造函数
建议使用第一种方式
字符串对象的底层实现
1:字符串的底层实现:
字符串是由若干个字符序列组成的,字符串对象
底层使用字符数组来管理这些字符序列。
所以字符串具有一些字符数组的特点。但不是数组对象。
在某些操作上,可以使用操作数组的方式去访问字符串中的字符数据。
只能通过访问数组的方式去获取字符元素,不能去修改字符数据。
2:字符串对象的特点:
①底层使用数组来管理所有的字符。
②字符串具有一旦创建就不能修改的特性。只读属性。
缺点:所有看似对字符串的修改,都会生成新的字符串对象。如果反复的去修改字符串,会造成内存的浪费。
优点:数据安全
静态函数:
String. fromCharCode(number…):接收一个数值型数组,返回该数组中的所有的元素所对应的字符。
功能:数值到字符的转换
实例属性和方法
属性:
length属性:代表了字符串对象中的字符的个数
是一个大于等于0的整数值
str. length 是一个只读属性,赋值没有意义,不会改变该属性的值。
在代码严格模式下,赋值运行的时候会报错。
实例函数:
charAt()
charCodeAt()
startsWith:用来判断当前字符串是否以指定的字符串开始的。 是:true 否:false。
endsWith:用来判断当前字符串是否以指定的字符串结尾的。 是:true 否:false。

遍历方式:
1:基本的for 使用遍历数组的方式遍历的。
2:for of 专门用于遍历数组的。
3:for in 用来遍历对象的。
4:for 循环使用 charAt(建议使用)

Global对象
js语言有一个规则:任何一个函数必须都隶属于某个对象
在js中有一些内置函数,称为全局函数,直接可以调用。这些函数没有归属,所以就虚拟了一个对象称为Global。这些全局函数作为该虚拟对象的函数。
js中的全局函数:
isNaN(num):用来判断是否是NaN的,是返回true,否则返回false。
该函数也属于window对象和Number对象
isFinite(num):用来判断num是否是有穷数,是有穷数true,否则false。
该函数也属于window对象和Number对象
parselnt(str,radix?):将str字符串解析为整数,不能解析返回NANa
该函数也属于window对象和Number对象
parseFloat(str):将str字符串解析为浮点数,不能解析返回NaN
该函数也属于window对象和Number对象
编码:encode
从明文到密文,为了安全、易于传输。
从字符到底层的字符串的整数的二进制表示形式
解码:decode
从密文到明文。
将底层的二进制最终显式为字符。
编码函数:
encodeURI:不会对网址中的常见字符进行编码,只对中文,空格等等进行编码
encodeURIComponent:只对数字、字母不进行编码,其他的都会编码
解码函数:
decodeURI:对encodeURI的结果进行解码
decodeURIComponent:对encodeURIComponent的结果进行解码
使用:一般建议使用 encodeURIComponent 和 decodeURIComponent 进行编码和解码
一般情况下只对提交的部分进行编码和解码。也就是 ? 后的内容进行编码和解码。
eval(str):
作用:接收一个字符串作为参数,可以将实参的内容转换为js代码执行。
返回:执行的结果

1:call、apply、bind都是函数对象的函数。
2:call、apply 都是可以将一个函数对象借用给其他的对象使用
3:bind 用来帮助一个对象在某个函数对象的基础上生成一个函数对象。
问题:
1:两个对象具有完全一致的功能,那么这两个功能是同一个功能,还是两个功能。是否是同一个函数对象?不是同一个对象,两个对象,各自占有自己独立的空间。代码冗余,浪费内存。
2:如何解决上述的问题,如果不同的对象具有完全一致的功能方法,只保留一个对象的功能,其他的对象去借用该对象的功能。

call 的具体使用
语法:函数对象. call(借用的对象,实参列表)
call 方法借用的本质。改变函数体内的this 的指向,指向了借用这对象。谁借用this指向谁。

apply 的具体使用
apply 的使用和call 的使用基本一致。
语法:函数对象. apply(借用的对象,[实参列表])
apply 和call 的区别就在于实参的使用,apply的实参需要使用一个一维数组保存所有的参数

bind 的具体使用
语法:函数对象. bind(需要生成函数对象的对象)
本质:会生成一个新的函数对象,函数对象中的this,是实参对象。

总结:
call 和 apply 的使用更多一些,不会生成新的函数对象,只是实现了对象之间的函数的借用。在调用借用函数的时候,去改变函数体中的this 实现借用的功能。
bind :会生成一个新的函数对象,相比较会消耗内存,使用偏少。

43、
js语言诞生的历史背景:
需要某些交互在客户端进行,来改善用户体验,让交互更加的及时高效。Document
DOM:Document Object Mode | 文档对象模型。
页面文档:是对象的集合,页面中的所有的节点都被解析为对象而且对象之间是存在关系的
树状的结构。document对象是该结构的根节点(root node)。
父节点:parent node
子节点:child node
叶子节点:leaf node
文档属于浏览器对象的一部分。
js是一个脚本语言,浏览器是js运行的宿主环境。js可以访问浏览器中的某些功能或者是对象。
浏览器为了让js可以更好的去访问文档,将整个文档和文档中的所有的节点都看做一个个的对象。
通过js可以访问这些对象。整个文档可以看做一个对象的模型。

浏览器对象 window 提供了 document 对象来代表整个文档。通过该对象可以访问页面中的所有的元素。
document对象是DOM部分的核心。
学习DOM就是学习如何通过document对象去对整个文档进行增删改查。
document对象直接使用即可。是浏览器提供给js用来访问文档的接口。
学习DOM就是document对象的属性和功能。

DOM:是一套规范,规定了js访问文档的方式。规范的核心就是document对象。规定了 如何通过js访问document对象的属性和功能。

44、
文档中节点的类型介绍:
1:文档节点 document 根节点
2:元素节点 单标签或者是双标签
3:属性节点
4:文本节点
5:注释节点
在DOM规范字:任何的节点对象都必须有三个属性。
①nodeName:节点的名称
②nadeType:节点类型
③nodeValue:节点值

元素对象的获取方式
1:通过id去获取 //全局搜索
通过方法 getElementById(id属性值)
在整个文档中去搜索指定id值的元素对象。
返回:如果存在返回元素对象,否则返回 null
优点:效率高,兼容性好。
2:通过标签名获取 //可以局部搜索
搜索的范围元素对象. getElementsByTagName(“标签名”)
返回:HTMLCollection 类数组的对象。通过下标去访问具体的元素对象。
3:通过name属性获取 //表单元素
document. getElementsByName(“name属性值”)
返回:NodeList 类数组对象。通过下标访问
4:通过class属性获得。//类名 不要加 .
搜索的范围元素对象. getElementsByClassName(“class属性值”)
返回:HTMLCollection 类数组的对象。通过下标去访问具体的元素对象。
5:通过选择器 //
搜索的范围元素对象. querySelection(选择器)
返回:第一个满足条件的元素对象
低版本的IE不支持
6:通过选择器 //
搜索的范围元素对象. querySelectionAII(选择器)
返回:所有满足条件的元素对象
低版本的IE不支持

getElementsByTagName 和 querySelectionAII 的区别
getElementsByTagName:获得指定标签的所有的元素集合对象,类数组
会根据内容的改变而动态更新集合中的内容
querySelectionAII :获得指定选择器的所有的元素集合对象,类数组
获得的集合对象是静态的,不会动态更新里面的元素。

45、
修改和设置元素节点中的内容
获得元素节点中的内容:
包含了节点中的所有的子元素的内容:标签+文本
语法:元素节点对象. innerHTML
设置元素节点中的内容:
语法:元素节点对象. innerHTML = “内容”
注意:
1:会覆盖所有的子元素的内容。
2:设置的内容中如果包含了标签,标签会生效
innerText:
获得元素中的文本内容,不包含标签内容
语法和innerHTML一致
注意:
1:会覆盖所有的子元素的内容
2:设置的内容中如果包含了标签,标签会被当成普通的文本进行显示,而不是标签原本的含义。
textContent:和innerText用法一致,作用一致
textContent兼容性好于innerText
value:专门用于设置和获取表单元素的属性
语法:
获取:元素对象. value
设置:元素对象. value = “值”
注意:
获取到的值为string类型

元素节点中的属性节点的获取
1:通过元素对象的attributes属性,返回的是元素对象的所有的属性和值的集合。
元素. attributes
2:元素. getAttributeNode(“属性名”)
上述两种方式得到的都是属性节点对象
拿到属性节点对象之后,可以通过nodeValue 获取具体的某个属性的值

属性值的获取和设置
1:
获取:
元素对象. getAttribute(“属性名”)
返回属性名对应的属性值,如果属性不存在返回null
设置-添加:
元素对象. setAttribute(key,value)
对于自定义属性来说,可以操作
2:
获取
先获取属性节点对象,然后通过属性节点对象的nodeValue属性去获取和设置属性值
对于自定义属性来说,可以操作
3:
获取
元素. key
元素对象[“key”]
设置:
元素对象. key = value
元素对象[“key”] = value
缺点:不能获得和设置自定义的属性

对于元素的class属性,
如果使用 . 访问或者是 [ ] 访问设置那么需要将class改为className才能生效
设置class属性:
元素对象. className = value
元素对象. [“className”] = value
获取class属性:
元素对象 . className
元素对象[“className”]
获取和设置元素的checked属性
获取:
元素对象. checked
元素对象[“checked”]
如果是选中的状态,返回true,否则false。
设置:
元素对象. checked = true | false
元素对象[“checked”] = true | false

属性节点的添加和删除
添加属性节点:
1:元素. setAttribute(key,value)
2:document . createAttribute(key)
node . nodeValue = value
元素. setAttributeNode(node)
删除属性节点:
元素removeAttribute(key)

46、
节点对象之间的关系:
1:父子关系,求父元素的所有的子节点。
元素. childNodes
NodeList:类数组对象。通过下标访问具体的子节点对象。
2:第一个孩子节点对象
元素. firstChild
3:最后一个孩子节点对象
元素. lastChild
4:父元素节点对象
元素. parentNode
5:下一个兄弟节点对象
元素. nextSibling
6:上一个兄弟节点对象
元素. prevSibing

47、
元素节点之间的关系:
1:父子关系,求父元素的所有的子元素节点。
元素. children
HTMLCollection:类数组对象。通过下标访问具体的子节点对象。
2:第一个孩子元素节点对象
元素. firstElementChild
3:最后一个孩子元素节点对象
元素. lastElementChild
4:父元素节点对象
元素. parentElement
5:下一个兄弟元素节点对象
元素. nextElementSibling
6:上一个兄弟元素节点对象
元素. prevElementSibing

48、
定时器方法
window . setInterval(callback,millis)
1:该方法属于window对象的方法,是一个全局方法,直接使用即可。
2:callback 参数:是一个回调函数,可以传入匿名函数,或者是有名函数的名字。
3:millis :是一个时间,单位毫秒
4:作用:该方法被称为“间歇”执行函数。每间隔millis 毫秒的时间,就执行一次回调函数。
5:该方法返回一个整数值,从1开始的整数值,代表了该定时器的编号。如果想停止该定时器,需要使用该编号
6:通过 clearInterval(定时器编号)停止指定编号的定时器。
7:定时器函数可以同时开启多个,每个定时器函数都会返回一个不同的定时器编号
8:定时器函数中的回调函数的第一次执行是在setInterval函数执行的 第二个参数时间之后才会执行
9:定时器函数的执行不会影响后面的代码的执行
10:定时器函数和循环的区别:
①每次回调或者循环执行的一次的周期不同。
②停止的方式:循环:break,循环条件。定时器:clearInterval
③循环是同步的、setInterval异步的

49、
document对象的属性介绍:
1:document . documentElement html 根标签元素对象。
2:document . body body节点对象
3:document . head head节点对象
4:document . title title节点对象中的内容。也就是页面标题。
通过document . title 可以获取和设置文档的标题
5:document . doctype 文档类型说明节点
6:document . readyState 用来当前文档被加载的状态
状态有三个值:
loading:文档的结构的加载
interactive:加载外部资源文件
complete:加载完毕
7:document . documentURI 地址栏的地址
8:document . domain 域名
localhost、127.0.0.1都是代表本机地址
ip地址:ipv4:在任何的网络中,网络中的每一台计算机必须有一个唯一的标识
用ip地址来作为唯一的标识,每一台同一个网络中的计算机必须有唯一的一个ip地址作为标识。
ip地址使用 32bit 来表示。4bytes。使用三个 . 分符来分隔四个字节表示的整数。每个整数的取值范围是:[0-255]
域名:网络中的主机的ip地址的另外的一种容易记忆理解的字符串表示形式。
一个ip地址会对应一个域名,一个域名可以对应多个ip地址。
如何从域名转换成域名对应的ip地址呢?
DNS:就是一台电脑,域名解析服务器。专门用于将域名转换为ip地址的计算。
9:document . location:
是一个对象,代表了地址栏对象。可以直接使用location来访问该对象。
location对象的属性:
location. href:代表了地址栏中的地址,可以通过修改该值来实现页面的跳转

url:协议、主机地址、端口号、请求的文件
     协议:http:https:
     主机地址:域名、ip地址。确定了网络上的某一台计算机
     端口号:[0-65535]     确定了计算机中的某一个软件。http:80   备用8080
     请求的文件
10:
     document . links 所有的a标签的集合
     document . images 所有的img标签的集合
     document . forms 所有的form标签的集合
     document . script 所有的script标签的集合

style
1:通过style 属性添加修改元素的行内样式。
设置:
语法:元素 . style . 样式属性 = value;
样式属性 使用驼峰命名法
value 都是字符串
获得:
语法:元素 . style . 样式属性
返回:样式值的字符串形式。

2:通过cssText 属性添加修改元素的样式。
     该值是元素对象的所有的行内样式的字符串表示形式。

通过style的方法修改样式:
设置:
元素 . setProperty(key,value);
key:样式属性名,使用中划线的命名方式
value:样式值。
获得样式:
元素 . style . getPropertyValue(key);
返回样式值
删除:
元素 . style . removeProperty(key);

50、
获取元素的内部样式和外部样式的方式
window . getComputedStyle(ele)
获得指定元素的样式声明对象。获得对象之后,在通过访问样式对象的具体的属性获得具体的值。
通过的到的样式声明对象访问具体的样式属性的时候,使用驼峰命名法。
该方法对于IE低版本不支持,IE8及其以前的版本

IE低版本的实现方式
语法:currentStyle
返回:元素的样式声明对象
通过返回的对象,可以访问具体的样式属性

元素. currentStyle 所有的IE版本都支持该方法

51、
DOM常用方法
document. createElement(标签名)
作用:用来创建元素对象。创建的元素对象存在于内存中。必须将内存中的创建好的对象,添加到文档中才能看到创建的对象。标签名不敏感(不区分大小写)

appendChild(子元素)
作用:将某个子元素尾部添加到当前元素中来
语法:父元素. appendChild(子元素)
特点:

insertBefour:
作用:将某个元素插入到指定的元素的前面
语法:父元素:insertBefour(带插入的元素,插入的位置元素)
特点:具有移动元素的功能。

createTextNode("内容")
作用:创建文本节点对象。

cloneNode
作用:克隆节点对象。复制节点对象
语法:被克隆对象. cloneNode(deep?boolean)
     deep:true:深度复制。连子元素一起复制。false,浅度复制。不复制子元素。
返回:克隆的对象。
克隆对象,不能复制对象的事件

replaceChild:
作用:对某一个子元素进行替换
语法:父元素. replaceChild(newEle,oldEle);
返回:被删除的元素。

contains
作用:判断一个元素是否是另外一个元素的子元素
语法:元素. contains(other)
      如果other是当前元素的子元素,返回true,否则返回false

hasChildNodes
作用:用啦判断当前元素是否有子节点
返回:有子元素,返回true,否则false

isEqualNode:
作用:用来比较两个元素是否一样
语法:元素. isEqualNode(other)
返回:如果当前元素和实参元素一模一样,返回true,否则返回false。

52、
DOM常用属性:
offsetParent:偏移定位
介绍:是DOM中的对象的一个只读属性。是一个对象。

注意:offsetParent 存在浏览器兼容问题,以谷歌为例子。

offsetParent 在不同的情形下具有不同的值。
情形如下:
1:如果当前对象有定位的属性:fixed。那么该对象的offsetParent 在谷歌浏览器中就是null。火狐是body对象。	固定定位的坐标参照的是浏览器窗口的左上角的点,和其他的元素没有关系。
2:如果当前对象没有fixed定位属性,而且父元素中所有的元素都没有定位。那么该元素的offsetParent是body对象。
3:如果当前对象没有fixed定位属性,而且父元素中所有的元素都有定位的属性的元素,那么该元素的offsetParent 是距离它最近的具有定位属性的父元素。
offsetLeft:
     只读属性,返回当前对象距离当前对象的offsetParent的左边界的水平距离
offsetTop:
     只读属性,返回当前对象距离当前对象的offsetParent的上边界的垂直距离

offsetWidth:元素对象的包括边框在内的宽度。
offsetHeight:元素对象的包括边框在内的高度
     包含的内容:边框、滚动条、内边距、内容区域。
     不包含:外边距

clientWidth:元素对象的视口的宽度
clientHeight:元素对象的视口的高度
     包含:内容区域,也就是css设置的高度和宽度、内边距
     不包含:边框、外边距、滚动条

53、
事件
1:事件的概念:
发生或者作用到文档中的元素对象上的某些行为,称为事件。
2:事件的组成部分:
①事件源:
发生或者作用到文档中的元素对象
②事件类型:
事件的种类:比如:鼠标事件、键盘事件、文档事件等等。。。
③事件处理程序:
当事件发生的时候,执行的函数
给元素绑定事件处理程序的方式:
1.DOM0级:行内式,头标签中使用
事件处理程序使用this作为实参,this的含义:当前对象(事件源)。
删除:使用删除属性的方式去删除绑定的时间处理程序。
2.DOM0级:动态绑定方式
3.DOM2级:注册监听
3:事件对象
js中万物皆对象。所以当事件发生的时候,底层会产生一个事件对象。该对象包含了很多和事件相关的信息。通过获取该事件对象可以获得和事件相关的信息。
4:事件的种类
①鼠标事件
②键盘事件
③文档事件
④表单元素事件

DOM0级元素绑定事件处理程序的方式介绍:
直接在元素头标签的属性中给元素绑定事件处理程序。可以称为行内式。
语法:<on+事件名称 = “事件处理程序”>
事件处理程序:一般就是函数调用代码。可以是多个函数的调用。使用分号分隔。

注意:如果在事件处理程序中使用实参,那么this代表了当前元素对象。

DOM0级动态绑定:
语法:元素. on+事件名称 = 事件处理程序。
事件名称是固定的。
事件处理程序:可以是有名函数的名字,或者是匿名函数。
删除动态绑定的事件处理函数:
元素. on+事件名称 = null;
特点:
1:使用动态绑定的方式,如果使用同一个事件进行多次处理程序的绑定,那么后绑定的会覆盖前面的。
2:this 的使用:在动态绑定的事件处理函数中直接使用this即可。this代表了当前的事件源,响应事件的元素对象。
3:动态事件绑定处理程序的兼容性比较好。

DOM2级事件处理程序:注册监听
语法:
元素. addEventListener(事件名称,回调函数,事件流);
事件名称:字符串、不需要添加on
回调函数:元素上触发事件的时候执行的函数,可以是匿名函数、或者是有名函数的名字
事件流:此处是一个布尔值,true:事件捕获。false事件冒泡。默认事件冒泡
删除事件监听:
语法:元素. removeEventListener(事件名称,回调函数。事件流)
注意:如果想删除某个元素上的监听程序,那么添加的时候必须使用有名函数进行绑定。
删除的时候和添加的时候的实参保持一致。

特点:
     1:同一个事件多次注册监听,不会发生覆盖
     2:可以直接在回调函数中使用this,代表了当前的事件源对象。响应事件的元素。
     3: 删除的时候和添加的时候的实参保持一致。才能删除,必须使用有名函数
     4:可以选择事件流,事件捕获和事件冒泡,默认事件冒泡
     5:存在兼容问题。低版本的IE不支持。

DOM2级事件处理程序的IE低版本:
添加:
语法:元素. attachEvent(on+事件名称,回调函数)
删除:元素. detachEvent(on+事件名称,回调函数)
特点:
1:可以对同一个事件多次绑定不同的事件处理程序。不会产生覆盖
2:事件处理程序中this,代表的是window对象。不是当前事件源。
3:添加和删除的方法,对于IE的版本,IE10及其以前的版本支持,IE11不支持。
4:不支持事件流。

事件流:事件的流向。event stream
事件流分为2类:
1:事件捕获
2:事件冒泡

事件冒泡:
     事件,从内层元素,子元素向父元素一次传递。
     默认的。
事件捕获:
     事件,从外层元素到内层元素,由外到里,由大到小,依次传递。

事件对象的捕获
事件对象的捕获的方式:事件对象会作为实参传递给事件处理函数的形参。用形参来接收事件对象。
直接使用形参表示事件对象。

问题:存在兼容问题。IE8及其以前的版本不支持使用参数接收事件对象。

低版本的IE的解决方案:直接在事件的绑定的函数在使用window. event来表示事件对象。

注意:DOM2中动态绑定的事件对象的捕获和DOM0 的动态绑定方式的事件对象的捕获方式一样

事件对象的属性:
type:代表了事件的名称 | 类型,是一个
keyCode:按键的键码值,每一个按键都对应了唯一的一个键码值。
0:48
a:65
方向键:左上右下:37~40
空格:32
W:87
A:65
S:83
D:68

altKey:代表了alt键是否被按下
shiftKey:代表了shift键是否被按下
ctrlKey:代表了ctrl是否被按下
如果按下都是true 否则就是false。

鼠标事件对象的两个属性:
clientX:鼠标点击的点的坐标距离浏览器窗口的水平距离。
clientY:鼠标点击的点的坐标距离浏览器窗口的垂直距离。

pageX:鼠标点击的点的坐标距离页面左上角的水平距离。
pageY:鼠标点击的点的坐标距离页面左上角的垂直距离。

重要(两个):
offsetX:当前事件点距离事件源左上角的水平距离
offsetY:当前事件点距离事件源左上角的垂直距离

screenX:当前事件发生的点距离屏幕左上角的水平距离
screenY:当前事件发生的点距离屏幕左上角的垂直距离

重点(两个):
currentTarget:代表了当前事件源对象。和this 是等价的
target:代表了第一个触发该事件的元素对象。该元素对象不一定绑定了事件处理程序

cutterTarget:这个元素一定是绑定了事件处理程序的。

bubbles:
作用:判断事件是否支持事件冒泡。
如果支持:true ,否则false
mouseenter和  不支持冒泡排序。

key:获得按键的键的名称的全程,字符串形式。

button:针对鼠标事件的属性。一个整数值。
代表了按下了鼠标的那个键。
左键:0	中键:1	右键:2

eventPhase:该事件对象属性有三个值:
1:因为事件捕获,从子元素触发的事件捕获到父元素。由父元素的事件处理程序中捕获的事件对象的该属性值。
2:事件源的事件处理程序中的捕获的事件对象的该属性值。
3:因为事件冒泡,从子元素冒泡到父元素,有父元素的事件处理程序中捕获的事件对象的该属性值。

按住按键,事件会持续触发
按键事件:
1:按键事件一般给底层的父元素添加,不给页面上的某个具体的元素添加。
比如给document,document. documentElement,document. body 添加

节点对象和元素节点对象的区别:
元素节点对象是节点对象的一种
7种类型的节点对象有一个公共的父亲,Node。

54、
事件对象的方法:
preventDefault:
作用:用来阻止元素对象的默认行为。
注意:preventDefault()方法对象IE的低版本 IE8及其以前的版本不支持。
在IE的低版本中使用 e. returnValue = false ;来实现阻止默认行为。

阻止a标签的默认行为的其他的实现。
javascript:void(0)
javascript:代表着点击a标签的时候执行js代码
void(0):void 是js的保留字,意思是空的意思,在这里的含义就是:什么都不执行。

阻止右键菜单的默认行为
右键菜单事件:oncontextmenu

stopPropagation:
作用:用来阻止当前事件继续往父元素冒泡传播的
注意:该函数对于IE8及其以前的版本不兼容
兼容实现:e. cancelBubble = true;

onKeydown 和onKeypress 的区别:
1:onKeydown 字符的键码值从65开始(a)
onKeypress 字符的键码值从97开始(a)
2:onKeydown 键盘上所有的按键按下都会被触发
onKeypress 不支持功能键
注意:键盘事件一般给document对象或者是body对象添加。

55、
表单事件:
focus:表单获得焦点的事件,当一个表单事件获得焦点的时候,该事件发生。

blur:表单失去焦点的时候触发的事件。

input:当表单元素的内容发生改变的时候触发的事件。

change:当表单元素的内容确定发生改变的时候触发的事件。
     以输入框为例:当输入完毕,输入框失去焦点的时候触发change,或者输入完毕之后回车也会触发。
change 在表单元素中。
radio 和 checkbox、select 当选择的时候就立即触发。

submit:表单提交事件,当表单被提交的时候触发,该事件必须给form 元素添加
     通过给事件绑定的处理函数,返回false ,来实现阻断表单的提交。
     如果返回true,或者什么都不返回 默认是可以提交成功的。

reset:表单重置事件,当表单被重置的时候触发,该事件需要给form元素添加。
     可以让事件绑定的函数返回false,实现阻断重置,
     如果返回true,或者什么都不返回 默认是可以重置成功的。

56、
页面滚动事件:
scroll:
1:页面滚动事件,当元素或者是整个文档滚动条发生滚动的时候触发执行。
2:对于可以进行滚动的元素,有两个和滚动相关的属性。
scrollLeft:内容卷上去的宽度。最小值是0
scrollTop:内容卷上去得高度。最小值是0
元素. scrollLeft
元素. scrollTop
3:如果给整个文档添加滚动事件,一般是给window对象添加。
window对象没有 scrollLeft 和 scrollTop 属性。
一般使用 documentElement 或者是 body 对象的 scrollLeft 和 scrollTop 属性。
obj = document. documentElement || document。. body
obj. scrollTop
obj. scrollLeft
4:可以通过改变scrollLeft 和 scrollTop 的值来实现调整滚动的位置。

57、
文档加载事件(重点)
load:
1:当页面文档全部加载渲染完毕之后触发执行。包括外部资源。
2:可以个某个元素添加,用来判断元素节点是否加载完毕。
3:如果给整个文档添加该事件,一般是给window对象添加。、
4:load 称为原生js 的入口

文档加载失败事件
error:用来检测文档或者元素节点是否加载成功,如果加载失败触发执行。

文档结构加载完毕事件
DOMContentLoaded:
1:完档结构加载完毕之后触发执行,不包括外部资源的加载。
2:该事件先于 load 事件执行
3:该事件必须使用DOM2事件处理程序注册监听。
4:该事件需要给document 对象添加。

文档加载状态改变事件
readystatechange:当document对象的属性 readystate 的值发生改变的时候触发执行。
在整个文档加载过程中,一共触发执行2次。
第一次:loading 切换到 interactive
第二次:interactive 切换到 complete

该事件需要给document 对象添加

58、
鼠标滚轮事件
IE和谷歌的实现:
1:事件需要给document 对象添加。
2:根据事件对象的属性 wheelDelta 的值来判断是向下滚动还是向上滚动
如果e. wheelDelta为正的是往上滑(120) e. wheelDelta为负的是往下滑(120)

火狐浏览器的实现:
1:事件名称:DOMMouseScroll
2:必须使用DOM2事件处理程序
3:给document对象添加,根据事件对象的属性detail。来确定是向上还是向下滚动。
4:e. detail 的值-3代表:向上  3:向下。

59、
事件委托
原始的方式存在的问题:
1:如果子元素比较多,那么事件响应的速度会相对较慢。效率不高。
2:如果给容器添加了子元素,那么子元素也需要单独去绑定事件处理程序,才能获得一样的效果。
事件委托:
1:将事件处理程序绑定给所有的子元素的父元素,子元素接收到了事件,然后通过事件冒泡会传递给父元素。
父元素的事件处理程序通过捕获的对象,通过事件对象的属性 target 对象。可以知道是哪个子元素冒泡事件给自己。
可以获得第一个响应事件的子元素了
子元素的事件委托给父元素去执行。
优点:只给一个元素绑定了事件处理程序,效率相对较高。
对于新添加的子元素也适用,不需要单独在给新加入的子元素进行特殊的处理。

60、
移动端定义的事件:
touchstart:开始触摸屏幕的事件。
touchend:结束触摸屏幕的事件。
touchmove:在屏幕滑动的事件
touchcancel:触摸事件强制被终止的事件,当手机出现一些突发事件的时候触发执行,比如:来电。
针对触屏事件的事件对象的属性:
touches:类数组对象、当前屏幕上的触摸点的信息。
targetTouches:当前事件源上的所有的触摸点的信息。
changedTouches:导致当前事件发生的触摸点的信息。

61、
BOM介绍:browser Object Mode 浏览器对象模型。
定义了如何通过js 来和浏览器交互。
BOM中的核心对象是window对象。BOM的规范中,所有的浏览器必须提供一个对象叫window。
该对象代表了浏览器对象。该对象可以让js直接去访问它 ,来操作浏览器对象。
js 通过window对象来访问浏览器对象。
window对象由若干个组成部分组成:
文档对象:document
地址栏对象:location
导航栏:navigator
浏览记录对象:history

学习BOM就是学习window对象的属性和方法。
window对象的属性中有对象,还要学习这些对象的属性和方法。通过
通过这些属性和方法可以用来访问浏览器中的组件。

62、
window对象
1:window对象是BOM的核心对象
2:window对象是由浏览器创建的。供js使用。
3:window对象是一个全局对象,可以直接在js代码中使用,它就代表了当前浏览器窗口。
4:每打开一个浏览器窗口,那么该窗口都会有一个对应的window对象。当浏览器窗口被创建的时候,window对象被创建,当浏览器窗口被关闭的时候与之对应的window对象被销毁。
5:在js的全局作用域下,定义的全局变量和全局的方法,都会作为当前窗口的window对象的属性和方法存在。可以通过window. 去访问全局变量和方法。一般情况下window是可以省略的。如果需要区分同名耳朵局部变量和全局变量的情况,可以使用window. 来确定访问的是全局变量。
6:在全局作用域下定义的函数,中的this 代表了window对象。所以也可以使用this区分同名的局部和全局变量。
7:在全局作用域下直接使用this,this代表了window对象。
8:window对象是浏览器窗口提供的内置对象,对外提供了很多属性和方法供js来访问,以实现对浏览器窗口的访问。

63、
window对象的常用方法:
1:isNaN
2:isFinite
3:parseInt:将字符串解析为数值型+
4:parseFloat
5:alert(any?):将实参转换为字符串,并将字符串的内容使用浏览器的默认警告框显示出来。
不同的浏览器的样式存在差异
该函数是阻塞式函数,该函数一旦执行,会导致当前js代码暂停执行。只有点击之后,后续的代码才会执行。
6:confirm(msg):导致当前窗口弹出一个系统确认框,使用实参作为内容,两个按钮,确定+取消的两个按钮。
该函数也是一个阻塞式的函数。该函数有返回值,如果点击了确定 返回true,点击取消 返回false。
7:prompt(msg):导致当前窗口弹出一个系统输入框,用来接收用户的输入。输入框使用实参作为默认的内容。该函数也是阻塞式函数,该函数的返回值为字符串类型,返回输入的内容。

64、
window对象方法:
open:
作用:用来打开一个浏览器窗口
语法:window. open(url,windowName,windowFeature);
windowName:是打开的窗口的name属性的值。字符串
注意:如果新打开的窗口的windowName 的值,已经存在于已经打开的窗口中,那么新打开的窗口会占用已经存在的窗口,而不会再次新生产一个新的window对象。
可以省略
url:打开的窗口显示的页面的url地址。
缺点:空地址
windowFeature:窗口的特征
缺省:默认特征
返回:返回创建的浏览器窗口对象的地址-引用。

close:
作用:关闭当前窗口
语法:window. close();

setInterval:间歇执行函数。
作用:每隔指定的时间执行指定的函数
语法:window. setInterval(callback,intervalTime)
     callback:被间歇执行的函数,第一次调用是在setInterval被调用的intervalTime 毫秒之后。
     intervalTime:毫秒,回调函数被返回执行的时间间隔。
返回:返回定时器编号。从1开始的正整数。依次递增的正整数。
注意:
1:该方法为异步方法
     同步:顺序执行的代码。前面的代码没有执行完,不会执行后面的代码。优点:安全。缺点:当前的任务没有执行完毕,就不能执行后续的任务代码。
     异步:代码不是顺序执行的。缺点:数据可能存在不安全的问题优点:不会影响后续代码的执行。
2:定时器可以启动任意个。
3:定时器使用完毕之后要关闭掉,使用clearInterval
clearInterval
作用:用来清理定时器。
语法:window. clearInterval(定时器编号)

setTimeOut:延迟执行函数
作用:延迟知道的事件,去执行某个函数一次。
语法:window. setTimeOut(callback,delayTime)
callback:延迟执行的回调函数
delayTime:延迟的时间,单位毫秒
异步函数
返回:定时器编号,从1开始的正整数
使用 clearTimeOut 来清除知道编号的定时器。

两张定时器的编号共用一套

moveTo(x,y)
作用:将当前窗口移动到指定的位置。坐标相对于屏幕的。

moveBy(offsetX,offsetY)
作用:将当前窗口在x和y轴上移动指定的距离。

resizeTo(width,height)
作用:将当前窗口重新设置为指定的宽度和高度。

resizeBy(offsetX,offsetY)
作用:将当前窗口的宽度和高度增加或者减少指定的值。

scrollTo(x,y)
作用:将当前窗口滚动到指定的位置。

scrollBy(offsetX,offsetY)
作用:将当前窗口滚动指定的距离。

js(浏览器)是单线程的。

65、
window对象的属性
location:
1:是window对象的一个属性,是一个对象。代表了浏览器的地址栏部分。
2:可以使用window. location 或者是 document. location 或者是location来访问该对象。

location的属性和方法:
属性:
     href:是一个字符串,代表了当前窗口的地址栏中的地址信息。
          通过修改该href 的值可以实现页面的跳转。
          会产生浏览器的记录
     protocol:是一个字符串,代表了 url 的 协议部分。
     hostname:是一个字符串,代表了 url 的 域名部分。
	代表本机的地址的字符串有:localhost  或者 127..0.0.1
     host:主机名+端口号
     port:请求的端口号
     pathname:请求的资源路径
     search:请求的参数。

方法:
     assign(url):跳转到url 的页面。会产生浏览记录。
     reload(bool?):重新加载当前页面。bool为true ,代表了不使用缓存数据 false代表了使用缓存数据刷新。
     replace(url):使用指定的url 替换掉当前的url,并实现页面跳转。不会产生浏览记录。

window对象的name属性
1:name属性是一个字符串,默认为空
2:作用:可以实现不同的页面之间的数据的传输。
使用同一个window 对象打开不同的html 页面。

注意:不要使用name作为全局变量使用。

history:
1:history对象是window的一个属性
2:代表了当前窗口的所有的浏览历史。
history的属性:
length:代表了浏览记录的个数
history的方法:
出于安全考虑,浏览器不让js 通过history 对象直接访问浏览记录
但是history 对象提供了三个接口(方法)来实现在这些浏览记录之间跳转.
forward():让当前窗口跳转到当前记录的下一个记录。如果已经是最后一个记录了,此方法无效。和浏览器上的前进的按钮功能是等价的。
back():让当前窗口跳转到当前记录的前一个记录。如果已经是第一个记录了,此方法无效。和浏览器上的后退的按钮功能是等价的。
go(num):以当前浏览器窗口的页面为原点。可以实现前进或者后退num个记录跳转。
如果num是正数,等价于调用了num次 forward()
如果num是负数,等价于调用了num次 back()
如果num是0,意味着刷新。
如果num的值超过了能跳转的范围,操作无效。

navigator:
1:window对象的一个属性,是一个对象。

plugins:当前浏览器安装的插件信息,类数组对象
userAgent:保存了当前系统的一些信息,这些信息会发送给服务器,服务器根据这些信息可以进行统计,是pc端访问的,还是手机端访问的。
     如果是手机端访问的,userAgent在中会包含一个字段:mobile。

closed属性:
用来代表一个window是否已经关闭了。
如果该属性为true 代表关闭了。否则还是打开的状态。

window:是window对象的一个属性,代表了他自身
self:是window对象的一个属性,代表了他自身
window === window. window === window. self

screen属性:
代表了当前的屏幕。是一个对象
width:屏幕的像素宽度
height:屏幕的像素高度
colorDepth:屏幕的真彩色的位数
availWidth:浏览器可用宽度
availHeight:浏览器可用高度

screenX:浏览器对象距离屏幕左上角的水平距离(只读属性)
screenY:浏览器对象距离屏幕左上角的垂直距离(只读属性)

innerWidth:浏览器窗口的宽度。不包含边框,边框以内的窗口的宽度,包含滚动条(只读属性)
innerHeight:浏览器窗口的高度。不包含边框,边框以内的窗口的宽度,包含滚动条(只读属性)

outerWidth:浏览器的宽度,包括了浏览器的所有的内容在内。
outerHeight:浏览器的高度,包括了浏览器的所有的内容在内

scrollX:水平方向上的,页面卷到左边的距离(只读属性)
scrollY:垂直方向上的,页面卷到上边的距离(只读属性)

66、
外部js加载的默认顺序
从上到下,依次加载,边加载边执行
问题:如果引入的外部js文件比较大,而且还是网络文件。肯定会影响到后续代码的执行。

js加载的属性:
defer:延迟加载
作用:导致包含defer 属性的script 标签引用的外部的js代码,延迟加载。
在文档结构加载完毕之前加载。
使用defer的情形:
1:js代码和其他的js代码没有约束关联关系,相对比较独立。
2:代码是在load事件执行之后才会使用到的内容。

async:异步加载	(sync为同步加载)
当script标签中有async属性的时候,那么该标签引用的外部的文件,可以实现异步加载。
不会影响后续代码的加载和执行。
问题:多个异步script外部文件,没有办法办证这些文件加载完毕的顺序。
async使用的场景:
文件大,网络文件,文件加载完毕之后使用,没有和其他的文件有使用上的约束关系。

67、
回流:因为页面元素的尺寸、是否显示、插入元素、删除元素等操作,导致了页面结构布局需要重新计算调整,这个过程称为回流,也称为重排。

重绘:因为页面元素的外观、样式等导致了元素需要重新的绘制,结构没有发生改变。这个过程称为重绘。

1:发生回流一定会发生重绘。
2:回流至少会发生一次。第一次显示页面的时候。会发生一次。

为了提高页面的效率,要尽量少的发生回流和重绘。

导致回流和重绘发生的情形:
页面初次显示、字体大小、元素的尺寸、内容的变化、窗口大小的改变、添加删除元素。

避免回流和重绘反复发生的一些建议:
1:修改元素样式属性的时候,尽量一次完成,不要多次修改。使用CSSText替代 style.
2:批量处理对元素的添加删除操作。借助文档碎片。documentFragment
3:尽量使用 固定定位和觉得定位。fixed absolute。

文档碎片(文档片段):

documentFragment的特点和使用
特点:
1:documentFragment 对象是DOM中的第7种节点类型
2:documentFragment对象是内存中的一个对象。可以用来作为容器使用,用来保存若干个节点对象。将容器中的这些节点一次性的添加到文档中。提高效率,减少回流操作。
使用:
创建:document. createDocumentFragment()
添加子元素:fragment. appendChild

68、
正则
1:全称:正则表达式,regular expression
Java:regex
js:regexp
2:正则的概念
正则表达式是一种特殊的字符序列,由一般字符和一些具有特殊意义的字符
表述了一套字符序列的内容构成的规则。
3:正则的规则
①整体字符串的匹配,字符串是否匹配正则所描述的规则。
②子串的匹配和查找。
4:学习正则:
①学习正则中的特殊字符和含义和用法。
②正则是一种新的类型,RegExp。要学习这种新的类型的属性和方法。

正则的创建
     1:使用 /正则序列内容/[修饰符] 的字面量形式。
     var 正则变量 = /正则序列内容/[修饰符]
     2:使用构造函数
     var 正则变量 = new RegExp ("正则序列内容","修饰符")

test 方法的使用
1:该方法是 正则对象的实例方法
2:作用:用来检测实参的字符串中是否有子串满足当前规定的字符串的格式。
3:返回:如果存在,返回true 否则返回false。
4:语法:正则对象. test(字符串数据)


正则的构成
1:普通字符。0-9,a-z,A-Z等等。就代表了他自身的原本的含义。
2:特殊字符。又称为 【元字符 】。在正则中具有特殊的含义,不是原本的意思。

特殊字符的介绍:
1:定位符
     ^:定位的开始符号。限定了匹配的字符串的第一个字符的内容
     $:定位结束符号。限定了匹配的字符串的最后一个字符的内容
     如果正则表达式包含了开始符^和结束符$,那么意味着是整串的匹配。
2:数量词
     ?:规定了该符号出现在前面的字符出现的次数为0或者是1.
     *  :规定了该符号出现在前面的字符出现的次数为0到n次
     + :规定了该符号出现在前面的字符出现的次数为1到n次
     {n}:规定了该符号出现在前面的字符出现的次数为n次
     {m,n}:规定了该符号出现在前面的字符出现的次数为[m-n]次。两头包含
     {m,}:规定了该符号出现在前面的字符出现的次数为  m到无穷  次 包含m
3:字符集[ ]
     [abc]:中括号中所有的字符中的某一个字符。
     [a-z]:表示a-z之间的所有的字符中的某一个字符。闭区间
          -:在字符集中使用,称为 连字符
     [A-Z]:表示A-Z之间的所有的字符中的某一个字符。闭区间
     [0-9]:表示0-9之间的所有的字符中的某一个字符
     [0-9a-zA-Z]:表示三个区间的集合中的某一个字符
     [0-9a-zA-Z_]:标识符字符集合中的某一个字符。
     [^0-9]:表示0-9之外的所有的字符的集合中的某一个字符
          ^:在字符集中使用,称为 脱字符
4:预定义字符集 
     \d:等价于[0-9] 数组字符集
     \D:等价于[^0-9] 非字符集
     \s:代表了所有的空白字符的集合  (tab  空格)
     \S:代表了所有的非空白字符的集合
     \w:代表了标识符字符的集合  等价于[0-9a-zA-Z_]
     \W:代表了非标识符字符的集合
5:选择符号  | 
     从一组的多个选项中匹配某一个。
6:转义字符
     \?:代表?本身
     \*:代表*号
     \+:代表了+号
     \\:代表\符号
     \/:代表/符号
7:特殊符号
     . :代表了任意字符,\n\r除外
     \. :代表了. 这个字符
     [\u4e00-\u9fa5]:中文字符的区间。

69、
match:
从当前字符串对象中查找匹配的子串,并返回第一个匹配的子串的数组形式。,
使用字符串作为实参的缺点
1:只能匹配简单确定的模式的字符串
2:只能找到第一个满足查找内容的子字符串。

使用正则的好处
1:可以进行比较复杂模式的字符串的匹配
2:可以找到所有的满足规则的子串

split:
作用:使用指定的分隔符对当前字符串进行切割,返回切割的内容,以数组的形式返回。
该方法执行正则作为实参,使用正则所描述的字符串作为切割符进行切割。

replace:
作用:将当前字符串中的某些内容替换为指定的内容
使用字符串作为实参的问题
1:实现复杂
2:每次只能替换一个需要替换的内容

search:
作用:查找子串。从头到尾顺序搜索,找到满足要求的子串立即返回,返回子串的索引。
搜索不到返回-1
和indexOf的作用基本一致,只是该方法支持正则,indexOf不支持

修饰符:
g:global 全局搜索。
i:ignorecase 忽略大小写。

70、
正则的分组
给正则分组的意义:一旦给正则分组了,那么底层进行匹配的时候会保存每一分组所匹配到的内容。并可以根据RegExp. $组号 获得组匹配到的内容。
组号从1开始,依次递增。组可以嵌套使用。
组号的确定,根据向右的小括号的顺序来确定

正则的实例函数
test:
语法:正则对象. test(匹配的字符串)
作用:用来判断 当前正则对象所描述在字符串是否包含在实参字符串中
如果包含,返回true 否则false
可以进行子串的匹配,和整串的匹配。

exec:execute 执行的意思。
     作用:子串的匹配和查找	
     返回:查找的结果的数组,第一个满足要求的字符
     特点:正则要使用修饰符 g 表示全局搜索。每次调用 exec 方法都会记录下本次搜索结束的位置。
          下次调用exec 都会从上次结束的位置继续往后搜索,并返回搜索到的结果
          如果后续没有可以搜索的内容了,则返回null。
          如果该方法执行的结果返回是null,那么下次再次调用该方法,继续从头搜索。记录搜索的位置的变量被重置了

正则中的数量词的贪婪和懒惰模式
数量词分为两种模式:
1:贪婪模式:匹配的时候会尽可能多的去匹配字符 。直到匹配不成功为止。
2:懒惰模式:匹配的时候会尽可能多的去匹配字符 。匹配成功立即停止。
在贪婪模式的数量词后添加 ?以启动数量词的懒惰模式

71、
考量算法优劣的标准:
1:时间复杂度:随着问题规模的扩大,消耗的时间变化的趋势
2:空间复杂度:随着问题规模的扩大,消耗的空间变化的趋势

稳定排序:数列中相同的值排序前后的相对位置没有发生改变。
不稳定排序:数列中相同的值排序前后的相对位置可能发生改变。

八大排序
四大排序:
冒泡:前面有讲
选择:
     基本原理:将无序区中最小的元素和无序区的第一个元素互换位置。
          1:查找最小值,必须找到最小值的索引
          需要比较的趟数:长度-1
     实现:
          1:外层循环控制趟数
          2:内层循环控制本躺的无序区的最小元素索引的查找
          3:还要将无序区的最小值和无序区的第一个元素互换。 

插入:
     核心思想:将无序区的第一个元素,插入到有序区的合适的位置,插入之后,保证有序区依然有序。
     需要的趟数:长度-1
     外层循环控制趟数:长度-1
     内层循环本趟的合适的位置的查找和元素的移动
     问题:
          1:对带插入的无序区的第一个元素要备份。
          2:最后插入的位置??
          3:外层循环的次数通过长度控制,内层循环的停止的条件

快排:

二分搜索法:也称为 折半查找法
     作用:用来查找指定的数列中是否存在指定的值,返回查找的值的索引,和indexOf功能类似。
     二分搜索法前提:待搜索数列必须是有序的。效率很高。
     核心思想:通过不断的对带搜索区域不断的一分为二,来缩小带搜索区域的范围。

     需要两个变量来代表带搜索区域的开始和结束索引。
     low:低下标
     high:高下标
     mid:是low 和high 的中间的索引值
     获得mid 中间索引之后,用该索引的元素和带搜索的值key 进行比较。
     如果mid的值比key大,改变high 到mid-1
     如果mid的值比key小,改变low 到mid+1
     如果mid的值 === key 返回mid 

72、
XML:可扩展标记语言,是一种比较重度的存储和传输数据的一种格式。
JSON:轻量级的用于数据传输的数据格式。格式遵循了ECMAScript中的一个标准,所以js对该格式直接支持。在js中定义了JSON对象。用于操作json数据。
JSON:
作用:用于网络传输数据。
JSON本质上就是字符串。
主要由键值对构成,所有的键必须使用引号。他的值可以是js的任意类型,除了undefined 和 函数。

js对JSON是直接支持的,在js中有JSON对象,用来操作JSON字符串。	

JSON对象提供了两个工具函数。
JSON. stringify(obj):
     作用:将一个对象转换为JSON字符串
JSON. parse(jsonStr)
     作用:将一个JSON字符串还原为对象。

JSON的数据可以在程序中以字符串的形式存在,或者是单独存在的文件

73、
面向对象和面向过程
面向过程的编程思维:
将问题分解为若干个功能模块,然后让这些功能模块按照一定的顺序和逻辑执行。
将问题过程化
优点:对于简单的问题很容易实现。
缺点:对于业务逻辑比较复杂的问题,对于过程化的思维理顺整个过程是比较困难的。代码的复用性很差

面向对象的编程思维:
将问题抽象成若干个对象,然后让对象具有需要的功能和属性,通过对象之间的相互作用实现最终的需求。
缺点:对于简单的问题实现起来比过程化的要复杂。
优点:将问题中涉及到的对象去单独描述,每个对象和其他的对象的交互是有限的,逻辑相对简单。每个相对是比较独立的。代码的复用性更好。

面向对象就是创建不同的对象,让对象之间相互作用实现最终的需求。
两者不矛盾。面向对象是包含面向过程的。但是过程是通过对象来完成的。

自定义构造函数(模板)去创建对象。
定义构造函数的语法:
function 构造函数名(){
     this. 属性1 = value1;
     this. 属性2 = value2;
     this. 属性3 = value3;
     .........
}
上述的构造函数的问题:
     通过上述的构造函数创建的对象的属性和功能是一致的,我们希望对象之间是存在差异的。

构造函数名:就是一个方法的名字,但是作为构造函数的名字首字符需要大写。
     还要通过函数名能体现你要创建的对象的类型。
     构造函数中的属性:使用标识符即可。
     值:js支持的任意类型。

上述的构造函数的演变的版本
function 构造函数名(value1,value2,value3,........){
     this. 属性1 = value1;
     this. 属性2 = value2;
     this. 属性3 = value3;
     .........
}

74、
构造函数的特点:
1:定义构造函数的目的是为了通过它去创建若干个对象。
2:构造函数在创建对象的过程中充当了模板的角色。
3:创建出来的对象需要的属性应该在构造函数中去定义。
4:构造函数的首字符需要大写,构造函数的名字代表了应该创建的对象的类型。
5:构造函数创建对象的时候需要使用new 来调用。
6:构造函数中的this:
1:this. name 代表了创建好的对象。
2:构造函数中给属性绑定的函数中的this:代表了调用该函数的对象。

构造函数的执行过程:
1:向js引擎去申请一块堆内存,创建一个空对象(以原型对象为基础),并将该空对象赋值给this。
     this就代表了刚刚创建好的对象。
2:将实参的值赋值给形参。
3:给this 从上到下依次绑定属性。
4:所有的属性绑定完毕之后,对象初始化完毕了。
5:由new 关键字 将创建好并初始化完毕的对象的地址带回赋值给左边的变量。

构造函数和普通函数的区别:
1:语义上的区别
构造函数定义的初衷就是为了创建对象的,作为模板存在。
普通函数定义的初衷是为了实现某个功能,当然功能可能也是创建对象。

2:语法上的区别:
     如果我们希望某个函数作为构造函数使用,那么该函数就应该首字符大写。
     所有的js内置构造函数都遵循该规则。

     普通函数规范上首字符要求小写的。

3:使用的方式:
     构造函数使用new 来调用。
     普通函数直接调用。

4:构造函数的返回值是this。不需要使用return返回。
     如果在构造函数中显示使用return 返回数据,如果return的是基本数据类型,那么返回的还是默认的this。如果返回的是引用数据类型,那么实际返回的就是显示返回的数据,覆盖掉了返回的this。
     普通函数如果需要返回值的话必须使用return 返回数据。

5:在函数中的this区别
     构造函数中的this 代表了通过构造函数创建的对象。
     普通函数this 通常是代表了window对象。

保证构造函数使用new 来调用
1:在构造函数内添加"use strict" 启用函数内的代码严格模式。
再该模式下,this的值为undefined。给this绑定属性会报错。
2:判断this是否是Student类型的实例。如果不是就不是用new 来调用的。
3:在函数内使用new. target ,如果使用了new 调用 那么new. target就是当前函数。
如果没有使用new 调用,new. target 是undefined。

使用构造函数的优缺点
优点:
1:构造函数定义了一个模板,使用该模板,可以更方便快捷的创建若干个对象。而且创建的对象是有类型的。是自定义的类型。

缺点:
     通过构造函数创建的对象,每个对象都具有自己的私有属性的内存空间,对于对象的方法也是每个对象一份。对于不同的对象相同的方法,不能实现对象之间的共享,浪费了内存。

原型:
1:任何的函数都有一个属性:prototype。该属性指向了一个对象,该对象称为函数的原型对象,简称原型。
2:函数是具有唯一性的,所以任何函数的原型也是具有唯一性的。可以将需要对象共享的内容添加到原型中,可以实现对象对原型中添加内容的共享。
3:函数的原型对象中有一个属性:construction。该属性指向了构造函数。
4:通过构造函数可以创建任意个对象,这些对象中有一个隐藏的属性【prototype】
。该属性指向了构造函数的原型。大部分的浏览器都提供了一个供外部访问的属性__proto__来代表 隐藏的属性prototype【】通过该属性可以访问原型中的内容。
5:任何函数都是有原型对象的。但是只有构造函数的原型是有存在价值的,普通函数的原型对象对于我们来说是无用的。
6:原型也是对象,原型对象中也有__proto__属性,该属性指向原型对象的原型对象。任何对象都具有__proto__属性,指向了原型对象。
7:有原型对象中的__proto__属性连接起来的所有的原型对象,称为原型链。
8:原型链的顶端是Object构造函数的原型。相当于所有的对象都可以使用Object原型中的定义的内容。
9:Object构造函数的原型中__proto__属性值是null。
10:当一个对象访问一个属性的时候,会先从自己的私有属性中查找,如果私有属性不存在,就去__proto__属性指向的原型中去查找,如果还不存在,就去原型的原型中去找,就是沿着原型链向上的方向依次查找,如果Object的原型中还没有找到,那么就报错了。

     我们可以将需要共享的内容,添加到构造函数的原型对象中,通过构造函数创建的对象,就可以共享原型中的内容了。

如果私有属性和原型中存在相同的属性,优先访问自己的私有属性。

构造函数、原型对象、对象之间的关系
1:构造函数的prototype属性指向了函数的原型对象。
2:函数的原型对象的construction属性指向了构造函数。
3:构造函数创建了若干个对象。
4:被创建的__proto__属性指向了构造函数的原型对象。
对象可以使用原型链上定义的内容,原型链继承。

75、
new :js的关键字,用来调用构造函数创建对象的。
new关键字的作用:
1:用来申请内存创建空对象的。
2:让this指向刚刚创建好的空对象。
3:让当前创建好的对象的__proto__指向函数的原型。让对象可以使用原型中的内容。
4:将创建好的对象的首地址返回。让构造函数默认返回 this。

Object对象的原型对象的原型是null
Object对象的原型对象中定义了所有的对象可以使用的一些功能
Object. create(null);创建了一个空对象,并且创建的对象的原型是null。
对象的原型中保存什么内容?
对象共享的内容
如果在对象的原型中添加内容?
Student. prototype. name = “学生”
如何访问原型中的内容?
Student. prototype. name
obj. proto. name
obj. name ??可能存在覆盖,访问不到。

this总结:
1:在事件处理函数中的this代表了当前响应事件的元素对象。
2:this 代表了obj对象
3:this代表了window对象
function test(){
console. log(this)
}
4:this代表了window对象
console. log(this)
5:局部函数中的this代表了window对象。
function fn(){
var fn1 = function(){
console. log(this)
}
}
6:this 代表了创建的对象
function Person(name){
this. name = name;
}
7:函数内的this代表了调用study 函数的对象。
function Person(){

}
8:原型中函数中的this 代表了当前对象。也就是调用eat 函数的对象。
Person. prototype. eat = function(){
     console. log(this)
}

76、
js中的继承
继承:inheritance

js是基于原型的继承的语言:
     当创建一个对象的时候,该对象有一个属性__proto__指向了一个原型对象,该原型中包含了一些内容,可以供对象继承使用。所有的对象都从Object的原型中继承。

继承的概念:
     子对象可以直接使用访问父对象中的内容的过程。

子对象、子类型
父对象、父类型

父类型:树。子类型:杨树、槐树。。。。
父类型所描述的对象的范围更大,子类型描述的对象更加的具体。

继承的作用:
子类型可以复用父类型中的成员(属性+功能)。

借用构造函数继承
优点:通过借用父类型的规则函数实现了父类型中代码的复用。
缺点:
1:不能继承父类型构造函数原型中的内容。
2:使用instanceof 来测试,子对象 instanceof 父类型 结果为false。
当只有子类型的实例是父类型的对象的时候才能使用继承的关系。

原型链继承——第一种
1:创建父类型的实例,不需要传参
2:将子类型的原型指向父类型的实例。
3:修正:将子类型的原型的construction指向子类型的构造函数。
缺点:会导致子类型的对象的原型中存在父类型实例的私有属性。

原型链继承——第二种
1:创建一个对象,以父元素的原型为原型。
2:用创建的对象作为子类型的原型。
3:修正:将子类型的原型的construction指向子类型的构造函数。
4:在子类型实现原型链继承之后,才能在子类型的原型中添加需要的方法。

组合继承:借用构造函数继承+原型链继承。

instanceof:
作用:检测左边的对象是否是右边类型的实例。
左边是对象 右边是构造函数。
之前得出结论:
1:子类对象是父类型的实例。
2:任何对象都是Object 的实例。

深入理解:
作用:用来检测右边的构造函数的原型对象是否在左边的对象的原型链上。

构造函数的静态成员
Array 构造函数的原型中定义着 数组的实例对象可以访问的实例对象

Array. isArray():
     数组构造函数的一个静态函数,工具函数。用来检测实参是否是数组。

Number. MAX_VALUE:
     静态属性。

静态成员是属于类型的成员,不是实例的成员。
静态属性:类型的属性存在。通过 构造函数名. 属性 访问。
静态方法:类型中的工具方法存在。通过 构造函数. 方法名  访问。

每个静态成员具有唯一性的特点。在内存中是占有唯一的内存空间的。是依赖于构造函数对象的,不依赖实例对象。

静态成员和实例成员的区别:
1:使用方式:
     静态成员:【使用类型,构造函数】直接调用
     实例成员:使用对象()调用
2:语义:
     静态成员:依赖于类型、依赖于构造函数对象。不属于类型中具体的某个对象的。
     实例成员:依赖于任何一个实例对象的。和类型没有直接的关系。
3:内存:
     静态成员:依赖于构造函数,任何一个静态成员都只有一份;
     实例成员:依赖于实例对象的,所以没创建一个对象就会产生一份。(不包括原型中的内容。)(原型中定义的内容都是对象实例来访问的)。

Object的原型中定义的函数:
hasOwnProperty:用来判断实参是否是当前对象的私有属性。

如果一个属性存在于该对象内部,就是私有属性。
构造函数内定义的都是私有属性。原型中的不是私有属性。静态成员也不是私有属性。

Object的静态函数
Object. getOwnProPertyName(obj):获得实参的所有的私有属性。
Object. getPrototypeOf(obj):获得一个对象的原型对象。称为获得一个对象的原型对象的标准访问方式。
Object. setPrototypeOf(obj,Object. prototype):
将obj的__proto__指向第二个实参。
Object. freeze(obj):冻结实参对象。
Object. seal(obj):禁止扩展和删除实参对象中的内容。
Object. preventExtensions(obj):禁止扩展实参对象,不允许添加属性。

77、
in:用来判断key是否存在于对象中。
语法:key in obj
返回:true,false。
结论:对象的私有属性和原型中的内容,只要能被对象访问的内容都是true。 静态不行

78、
作用域:scope
变量或者函数可以被使用的范围。

主要存在两种作用域:
1:全局作用域
2:函数的局部作用域

作用域的作用:
规定了不同作用域下定义的内容可以被使用的范围。
不同的作用域下可以定义同名的变量。

作用域存在层次
     层次的结构:最外层是全局作用域-然后是函数的局部作用域-函数内的定义的函数的局部作用域。
     这样的层次结构决定了每一个层级的作用域,只能访问它所有的外部层级的作用域的内容以及本层级作用域的内容,不能访问内部层级作用域的内容。

作用域的这样的层级的关系就称为作用域链。

作用域链:一定是从全局作用域开始的。以当前执行的作用域为结束点。

作用域链的作用:
保证了在不同的作用域下【有权】【有序】的访问在不同的作用域下定义的内容。
在某个作用域下,只能访问当前作用域产生的作用域链中定义的内容。

当在任何的作用域下访问内容的时候,查找的过程:
先从当前作用域下查找,有直接访问。没有,向它的上一级作用域下查找。
依次类推,知道找到最外层的作用域 全局作用域,如果还没有找到就报错了。

在js代码执行的过程中,会不断的发生作用域的切换。
每当开始执行进入一个新的作用域的时候,会把当前的作用域作为一个节点保存。每个作用域节点中保存的是该作用域下定义的内容。当结束一个作用域的时候,将节点删除
作用域链:执行过程中保存下来的所有的作用域的节点组成的链
作用域第一个节点:全局作用域
作用域最后一个节点:当前作用域,当前执行的js代码所在的作用域。

作用域链的作用:可以保证在不同作用域下有权、有序的访问不同作用域下定义的内容。

79、
闭包:closure
概念:可以在函数外部访问的局部函数。
作用:
1:可以在函数的外部去访问函数内定义的局部变量。
2:可以将局部变量的生命周期延长。延长到闭包被销毁。
3:可以将局部变量作为对象的私有属性使用。
缺点:
1:因为闭包的存在,导致函数内的局部作用域中的变量一直保存在内存中,会占用内存。
2:闭包中保存的变量的值,每次闭包函数的使用,都会影响后续闭包函数的使用。

80、
设计模式:设计模式代表了最佳的实践

设计模式是针对某一类问题所提出的最佳的解决方案。

简单工厂模式:为了解决创建大量的对象。还降低了类型之间的耦合度。
单例设计模式(singleton):解决的问题是,如何针对一个类型,只能创建该类型唯一的一个实例对象。
观察者设计模式:observer
又称为发布订阅模式。
当某个对象和对个其他的对象有关联的时候,如果这个对象发生了状态的改变,如何更好的通知给其他的对象。

DOM2级事件处理程序使用的就是观察者设计模式。

81、
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

官网:http://jquery.com

目前 jQuery 最新的版本是 3.5.1,任何一个版本都提供了两个版本
1: compressed, production jQuery 压缩版,代码库中只有代码,发布产品的时候使用。体积比较小。
2: uncompressed, development jQuery 未压缩版本,开发时使用,可以参考jQuery的源代码。

我们使用的版本是一个兼容最好的版本 1.12.4

82、
原生的js的入口函数:
window. onload

jQuery的入口函数:
ready事件。

两者的区别:
1:window. onload 多次定义会覆盖 ready事件不会产生覆盖。
2:reayd事件是jQuery中定义的事件。onload 是原生js定义的事件。
ready 事件会先于 onload 执行

83、
的 介 绍 1 : j Q u e r y 是 一 个 构 造 函 数 。 的介绍 1:jQuery 是一个构造函数。 1jQuery 是jQuery的别名。$ 是 jQuery的构造函数。
2:可以用来选取页面的元素,获得页面元素的jQuery对象。
3:还可以用来类型的转换,将js对象转换为jQuery对象。

js对象和jQuery对象的互相转换
1:js对象到jQuery对象
语法:$(js对象)强转
2:jQuery对象到js对象
语法:jQuery对象 [下标]

84、
基础选择器
ID选择器:
$("#ID名"). css(“属性”,“属性值”)
类选择器:
$(". 类名"). css(“属性”,“属性值”)
元素选择器
$(“元素名称”). css(“属性”,“属性值”)
群组选择器
$("#ID名,. 类名"). css(“属性”,“属性值”)
后代选择器(空格)
$(“同css”). css(“属性”,“属性值”)
子代选择器(>)
$(“同css”). css(“属性”,“属性值”)
下一个兄弟元素(+)
$(“同css”). css(“属性”,“属性值”)
后面所有兄弟元素(~)
$(“同css”). css(“属性”,“属性值”)
全局选择器(
$("
"). css(“属性”,“属性值”)

85、
过滤选择器:对集合中的元素进行过滤筛选
容器中的第一个元素(: first),第一个ul中的第一个元素
$("").css(“属性”,“属性值”)
容器中的最后一个元素(: last),最后一个ul中的最后一个元素
$(“同css”). css(“属性”,“属性值”)
容器中指定类型的第一个元素(: first)
$(“ul li : first”). css(“属性”,“属性值”)
容器中指定类型的最后一个元素
$(“ul li : last”). css(“属性”,“属性值”)
容器中指定下标的元素 从0开始
$(“ul : eq(下标)”). css(“属性”,“属性值”)
容器中偶数下标的元素
$(“ul : even”). css(“属性”,“属性值”)
容器中奇数下标的元素
$(“ul : odd”). css(“属性”,“属性值”)
容器中下标大于n的所有的元素
$(“ul : =gt(下标)”). css(“属性”,“属性值”)
容器中下标小于n的所有元素
$(“ul : =lt(下标)”). css(“属性”,“属性值”)

86、
结构伪类选择器:对集合中的元素进行过滤筛选
第一个孩子元素 (first-child),每个的ul中的第一个孩子元素
$(“ul : first-child”). css(“属性”,“属性值”)
最后一个孩子元素(last-child),每个的ul中的最后一个孩子元素
$(“ul : last-child”). css(“属性”,“属性值”)
第n个孩子元素,下标从1开始。
$(“ul : nth-child(下标)”). css(“属性”,“属性值”)
奇数孩子下标
$(“ul : nth-child(even)”). css(“属性”,“属性值”)
偶数孩子下标
$(“ul : nth-child(odd)”). css(“属性”,“属性值”)
倒数第n个孩子的
$(“ul : nth-last-child(下标)”). css(“属性”,“属性值”)
第一个指定类型的元素
$(“ul p : first-of-type”). css(“属性”,“属性值”)
最后一个指定类型的元素
$(“ul p : last-of-type”). css(“属性”,“属性值”)
指定下标和指定元素的元素,下标从1开始
$(“ul p : nth-of-type(下标)”). css(“属性”,“属性值”)
指定逆序下标和指定元素的元素,下标从1开始
$(“ul p : nth-last-of-type(下标)”). css(“属性”,“属性值”)

87、
表单过滤选择器:
所有的input标签的元素
$(": input"). css(“属性”,“属性值”)
所有type 是text 的input
$(": text"). css(“属性”,“属性值”)
所有type 是password的input
$(": password"). css(“属性”,“属性值”)
所有type 是radio 的input
$(": radio"). css(“属性”,“属性值”)
所有type 是checkbox 的input
$(": checkbox"). css(“属性”,“属性值”)
所有type 是submit 的input
$(": submit"). css(“属性”,“属性值”)
所有type 是reset 的input
$(": reset"). css(“属性”,“属性值”)
所有type 是button。
$(": button"). css(“属性”,“属性值”)
所有选择的表单元素
$(": checked"). css(“属性”,“属性值”)
$(": selected"). css(“属性”,“属性值”)

88、
jQuery常用方法
html():
作用:和元素js中的元素dom属性 innerHTML 的作用一模一样。
获取和设置页面元素中的内容。设置的内容包含标签会生效。

text():
用法和作用和 innerText是一致的。而且不存在兼容性的问题
获取和设置元素中的文本内容,如果设置了标签,name标签不生效,作为普通文本显示。
如果是一个集合对象,那么会将集合对象中的内容进行隐式遍历

补充:上述的两个方法,没有参数是获取元素的内容,添加了参数是设置元素的内容。

val():
作用:和原生js中的表单元素的dom属性value 作用是一致的。
获取和设置表单元素中的内容。

prop():property
作用:用来操作元素的DOM属性。
如果添加的属性不是元素所具有的标签属性,那么是不会再元素上显示的。
对于自定义的属性,该属性和属性值会存在于对象上,不会以标签属性存在。
attr():attribute
作用:用来操作元素的标签属性。
对于自定义的属性,会作为自定义的标签属性存在。

建议:使用prop来实现对属性的获取和设置。

removeProp()
作用:删除元素的prop属性
1:对于自定义的标签属性,不能删除
2:内置的标签属性,属性名还在,属性值被设置为了undefined
removeAttr()
作用:删除元素的标签属性
将内置的和自定义的全部删除,包括属性名和属性值一并删除

上述的两个方法可以一次性删除多个方法,中间用空格删除。

addClass()
作用:设置元素的class属性的值
removeClass()
作用:删除元素的class属性的值
toggleClass()
作用:有这个class属性就删除,没有就添加

css():
获取和设置的css样式

对行内的外部的内部的样式提供了统一的访问接口。浏览器的兼容问题解决了。
样式的名称支持 中划线 or 驼峰命名

可以对元素一次性设置多个样式属性。使用对象来设置。

width():元素的css样式的宽度
height():元素的css样式的高度
innerWidth():包含内边距,padding
innerHeight():包含内边距,padding
outerWidth():包含边框,border
outerHeight() :包含边框,border

上述6个方法的返回值都是数值型。
上述的6个方法,可以通过传参来设置对应的宽度和高度。

scrollLeft():用于获得和设置水平方向滚动的距离
scrollTop():用于获得和设置垂直方向滚动的距离

89、
jQuery对象创建
语法:$(“创建的标签的内容”)
创建的标签的内容:可以是头标签(空元素),可以是对标签(可以设置内容),添加属性的对标签

内部添加元素的方法
append:将指定的元素尾部添加到当前容器中。
jQuery父元素对象. append(jQuery子元素对象 | 标签字符串)

appendTo:将当前jQuery元素尾部追加到指定的父元素中。
jQuery子元素对象. appendTo(jQuery父元素对象 | 选择器)

prepend:将指定的元素添加到当前容器中的头部

prependTo:将当前jQuery元素头部添加到指定的父元素中。

外部添加元素的方法:
after:将指定的元素添加到当前元素的后面。

insertAfter:将当前元素插入到指定元素的后面

before:将指定的元素插入到当前元素的前面

insertBefore:将当前元素插入到指定的元素前面。

总结:append、appendTo、prepend、prependTo、after、insertAfter、before、insertBefore都具有移动现有元素的方法

删除元素的方法:
empty:
清空指定的容器元素。
父元素. empty():清空父元素,子元素全部被删除。

remove:
删除当前元素
元素. remove():删除当前元素及其子元素。
将一个结果集中的某些元素删除,通过选择器过滤。

clone:
作用:元素的复制。
参数:可以接收一个Boolean值作为实参,true,深度复制:事件一并复制。
false:不复制事件,浅复制,后代元素一并复制。

parent:
获得当前元素的直接父元素的jQuery对象。
parents:
获得当前元素的所有的直接的和间接的父元素
parentUntil(ele):
获得当前元素和ele元素之间的所有的父元素,不包括ele

children:
获得当前元素的所有的子代元素
find(selector):从一个结果集中中过滤出指定选择器的内容。
从当前的元素中查找满足过滤条件的后代元素。

sibling():获得当前元素的所有的兄弟元素
next():当前元素的下一个兄弟元素
nextAll():当前元素的后面的所有的兄弟元素
nextUntil(ele):当前元素的后面的指定区间的兄弟元素,不包含两端
prev():当前元素的上一个兄弟元素
prevAll():当前元素的前面的所有的兄弟元素
prevUntil():当前元素的前面的指定区间的兄弟元素。

90、
结构过滤方法
first():获得结果集中的第一个元素
last():获得结果集中的最后一个元素。
eq(n):获得结果集中执行下标的元素。0序的
filter():对结果集进行选择器过滤。可以多个 中间用逗号隔开

其他方法:
addBack():将产生当前结果集的对象追加到当前结果集中,并返回。
end():返回在链式调用中,和当前对象不相同的最近的那个调用者对象。

91、
jQuery中的事件处理-1
callback:
语法:jQuery对象. 事件名称([外部数据],callback);

注意:
回调函数中的this 代表了当前元素对象,是js原生对象。
事件对象的捕获方式:使用回调函数的形参方式即可,并且解决了兼容问题。
对同一个事件多次绑定不会覆盖。
对于外部的数据,可以使用事件对象 e.data 来表示外部的数据。

jQuery中的事件处理-2
bind
语法:jQuery对象. bind(types,data,fn);

jQuery中的事件处理-3
代理:
delegate函数:
语法:父元素. delegate(“后代元素”,事件名称,[数据],fn)

jQuery中的事件处理-4
on:
语法:jQuery对象. on(types,selector,data,fn)

注意:
1:on可以替代bind实现更优的选择。
2:on可以替代代理
3:同一个事件多次绑定不会覆盖

jQuery中的事件处理-5
hover:
语法:jquery对象. hover(fn1,fn2)
fn1:当jQuery对象触发了mouseenter事件执行fn1
fn2:当jQuery对象触发了mouseleave事件执行fn2.

jQuery中的事件处理-6
one:用于对某个事件的单词事件的绑定,触发一次就删除了。
语法:jQuery对象. one(types,selector,data,fn)

jQuery中的事件的删除
unbind:删除指定的事件
undelegate:删除指定的事件
off:删除所有的事件,也可以删除指定的事件

92、
jQuery的事件对象的捕获
和原生的捕获的方式基本一致,使用事件处理函数的形参来接收产生的事件对象。
e 和 原生js中的e 基本是一致的,事件对象e 的用法和原生的基本一致。

事件对象的方法:
1:preventDefault 取消默认行为的
原生的js中的兼容实现:e. returnValue = false
2:stopPropagation:阻止事件冒泡
原生的js中的兼容实现:e. cancelBubble = true
使用jQuery中使用事件对象调用上面的方法,不需要考虑兼容问题了。

说明:事件处理函数中的this:是js原生对象。
e. target 和原生的一致
e. currentTarget 和 原生的一致

93、
动画
显示隐藏:
hide(delayTime,callback)
隐藏当前对象
show(delayTime,callback)
显示当前对象
toggle(delayTime,callback)
如果隐藏就显示,如果显示就隐藏

delayTime:动画持续时间,毫秒
callback:动画结束之后 执行的函数。

滑动
slideDown(delayTime,callback)
滑出当前对象
slideUp(delayTime,callback)
收起当前对象
slideToggle(delayTime,callback)
如果收起就下滑,如果下滑就收起

淡入淡出
fadeIn(delayTime,callback)
fadeOut(delayTime,callback)
fadeToggle(delayTime,callback)
fadeTo(delayTime,to,callback)
一旦调用,会影响其他的三个函数的边界透明度

自定义动画函数 animate
语法:jQuery对象. animate(styles,time,easing,callback)
styles:样式对象,只对数值型的样式敏感。
time:对象从当前样式变化到styles 样式下持续的事件,毫秒。
支持:fast slow
easing:样式过渡的变化的方式:
swing(慢快慢-默认)、linear(匀速)

动画结束函数:
stop(clearQueue,gotoEnd)
clearQueue:true:清空动画队列中的内容。false:不清空
clearEnd:true:让当前动画立即执行完毕。false:
false,false:立即结束当前动画,继续执行动画队列中的下一个动画
true,false:立即结束当前动画,并清空后续的动画。
false,true:立即让当前动画执行完毕,并执行后续的动画。
true,true:立即让当前动画执行完毕,并清空后续的东湖

jQuery遍历对象:
实例函数:job. each(function(index,ele){})
回调函数中的参数
index:被遍历的集合中的元素的索引,从0开始。
ele:被遍历的集合的元素,和index是对应的。ele是js的原生对象。
静态函数:$.each(obj,function(index,ele){})
回调函数中的参数
index:被遍历的集合中的元素的索引,从0开始。
ele:被遍历的集合的元素,和index是对应的。ele是js的原生对象。

.音乐
音频视频api–js

<audio src='' autoplay controls></audio>  <video ></video>
常用属性:
autoplay	自动播放
controls	显示控件
currentTime	返回当前音频/视频的播放时间
duration	返回当前音频/视频的总时长
ended		返回当前音频/视频是否播放结束
paused		暂停状态  暂停 true  false播放
src			音频/视频路径
volume		设置音量

常用事件:
oncanplay	在用户可以开始播放视频/音频(audio/video)时触发   视频/音频(audio/video)在加载过程中,触发的
ontimeupdate	当前音频/视频播放时间发生改变时触发   
object.addEventListener("timeupdate", myScript); function myScript(){ }
play()		播放
pause()		暂停

bug:臭虫的意思。在计算机科学中,代表程序中的错误。
debug:解决错误。调试错误

断点调试:breakpoint。让程序暂停的点。

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值