JavaScript
初识JavaScript
浏览器执行js简介【浏览器分成两个部分：渲染引擎和js引擎】
-
渲染引擎：
- 用来解析HTML和CSS，俗称内核，比如Chrome浏览器的bink，老版本的webkit。
-
js引擎：
- 也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8
-
浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript 语言归为脚本语言，会逐行解释执行。
js的组成：
-
ECMAScript
-
JavaScript语法
-
ECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。
- JavaScrip【网景公司】
- JScript【微软公司】
-
ECMAScript : ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
-
-
DOM
- 页面文档对象模型
- 文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
-
BOM
- 浏览器对象模型
- BOM(Browser Object Model，简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
js三种书写位置：
-
行内式
- 直接写在元素的内部。【】
- 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性），如: onclick
- 注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
- 可读性差，在html中编写JS大量代码时，不方便阅读;
- 引号易错，引号多层嵌套匹配时，非常容易弄混;
- 特殊情况下使用。
-
内嵌式
-
利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
-
引用外部JS文件的script标签中间不可以写代码
-
适合于JS代码量比较大的情况
JavaScript输入输出语句
-
alert(msg)
- 浏览器弹出警示框，展示给用户的。
-
console.log(msg)
- 浏览器控制台打印输出信息
-
prompt(info)
- 浏览器弹出输入框，用户可以输入
变量：
-
什么是变量：
- 白话:变量就是一个装东西的盒子。
- 通俗:变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。
-
变量在内存中的存储：
- 本质：变量是程序在内存中申请的一块用来存放数据的空间。
-
变量的使用：
-
申明变量
- //声明变量
var age; //声明一个名称为age的变量 - var是一个JS关键字，用来声明变量( variable变量的意思)。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
- age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
- //声明变量
-
赋值
- age = 10;//给age这个变量赋值为10
- = 用来把右边的值赋给左边的变量空间中此处代表赋值的意思
- 变量值是程序员保存到变量空间里的值
-
变量的初始化
- var age=18;//声明变量同时赋值为18
- 声明一个变量并赋值，我们称之为变量的初始化。
-
-
声明变量的特殊情况
-
var age ; console.log(age);
-
只声明不赋值
- undefined【未定义的】
-
-
console.log(age);
-
不声明不赋值，直接使用。
- 报错
-
-
age = 10;console.log(age);
-
不声明 只赋值
- 10
-
-
-
变量的命名规范
- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号($ )组成，如: usrAge, num01,_name
- 严格区分大小写。var app；和var App；是两个变量。
- 不能以数字开头。
- 不能是关键字、保留字。例如：var 、 for、while
- 变量名必须有意义。
- 遵循驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName
- 推荐翻译软件：有道 爱词霸
数据类型
-
为什么需要数据类型：
- 在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
-
变量的数据类型
-
变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
-
var age = 10; //这是一个数字型
var name = ‘林俊杰’； //这是一个字符串- 在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。
-
JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型。
- var x = 5； //x是数字
var x = ‘pole’; //x为字符串
- var x = 5； //x是数字
-
-
数据类型的分类：
-
简单数据类型（Number ，String，Boolean，Undefined，Null)【值类型∶简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型】 存放在栈内存中
-
Number
-
数字型，包含整型值和浮点型值，如21、0.21
- 默认值 0
-
数字型进制
-
八进制数字序列范围：0~7
- var num = 07； // 对应十进制的7
- var num2 = 019； //对应十进制的19
- var num3 = 08 ; // 对应十进制的8
-
十六进制序列范围：09以及AF
- var num = 0xA；
-
-
数字型范围
-
最大值
- Number.MAX_VALUE
-
最小值
- Number.MIN_VALUE
-
-
数字型三个特殊值
- infinity，代表无穷大，大于任何数值
- -infinity，代表无穷小，小于任何数值
- NaN，Not a number，代表一个非数值
-
isNaN() 用来判断一个变量是否为非数字的类型，返回true或者false。isNaN（x）
- x是数字，返回false
- x不是数字，返回true
-
-
Boolean
-
布尔值类型、如true、false。等价于1和0
- false
-
在类型中有一个函数叫做：Boolean( )
- 语法格式：
Boolean(数据) - Boolean()函数的作用是将非布尔类型转换成布尔类型
- 语法格式：
-
参与加法运算
- true的值为1
- false的值为0
-
-
String
-
字符串类型，如“张三”注意在js里面，字符串都带引号。
- " "
-
字符串型可以是引号中的任意文本，其语法为双引号"“和单引号””
- 因为HTML标签里面的属性使用的是双引号，JS这里更推荐使用单引号。
-
字符串引号嵌套
- JS可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双）
-
字符串转义字符，转义字符都是\开头的，要放到引号里面
-
\n
- 换行符，n是newline的意思
-
\
- 斜杠\
-
’
- ’ 单引号
-
"
- “ 双引号
-
\t
- tab 缩进
-
\b
- 空格 ，b是blank的意思
-
-
字符串长度
- 字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。
-
字符串拼接
- 多个字符串之间可以使用＋进行拼接，其拼接方式为字符串＋任何类型 = 拼接之后的新字符串。
- 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
-
- 号总结口诀: 数值相加，字符相连
-
常用函数
-
indexOf
- 获取指定字符串在当前字符串中第一次出现处的索引
-
lastIndexOf
- 获取指定字符串在当前字符串中最后一次出现处的索引
-
replace
- 替换
-
substr
- 截取子字符串
- substr(startIndex,length)
-
substring
-
截取子字符串
-
subing(startIndex,endIndex)
- 注意：不包含endIndex
-
-
toLowerCase
- 转换小写
-
toUpperCase
- 转换大写
-
split
- 拆分字符串
-
length
- 获取字符串长度
-
-
-
Undefined
-
var a; 声明了变量a但是没有给值，此时a = undefined
- undefined
-
undefined和数字相加，最后结果是NaN
-
-
Null
-
var a = null; 声明了变量a为空值。
- null
-
与数字相加时，返回的是原本的相加的数字。
-
typeof null 是一个“object"
-
-
-
复杂数据类型（object）
- 引用类型∶复杂数据类型，在存储时变量中存储的仅仅是地址(引用），因此叫做引用数据类型通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等
-
-
获取变量数据类型
-
typeof可用来获取检测变量的数据类型
-
typeod运算符的运算结果是以下6个字符串之一：注意字符串都是全部小写
- “undefined”
- “number”
- “string”
- “boolean”
- “object”
- “function”
-
-
prompt取过来的值是字符型的。
-
-
字面值
-
字面量是在源代码中一个固定值的表示法，通俗来说，就是字面值表示如何表达这个值。
-
数字字面量
- 1,23,54
-
字符串字面量
- ‘林俊杰’、“周杰伦”
-
布尔字面值
- true ，false
-
-
数据类型转换
-
使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。
-
通常使用的3种方式的转换：
-
转换为字符串类型
-
toString( )
- 转成字符串
- 变量.toString( )
-
String( )强制转换
- 转成字符串
- String(变量)
-
加号拼接字符串
- 和字符串拼接的结果都是字符串
-
-
转换为数字型
-
parseInt(string）函数
- 将string类型转换成整数数值型
-
parseFloat(string)函数
- 将string类型转换成浮点数数值型
-
Number( )强制转换函数
- 将string类型转换为数值型
-
.js.隐藏式转换（ - * / )
- 利用算术运算符隐式转换为数值型
-
-
转换为布尔型
-
boolean( )函数
- 其他类型转成布尔型
-
代表空、否定的值会被转换为false ,如""、0、NaN、 null、undefined
-
其余值都会被转换为true
-
-
-
解释型语言和编译型语言
- 计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成威机器语言的工具，被称为翻译器。
- 翻译器翻译的方式有两种:一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同
- 编译器是在代码执行之前进行编译，生成中间代码文件
- 解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)
标识符、关键字、保留字
-
标识符
- 就是指开发人员为变量、属性、函数、参数取得名字
- 标识符不能是关键字或保留字
-
关键字
- 关键字∶是指JS本身已经使用了的字，不能再用它们充当变量名、方法名。
- 包括: break、case、catch、continue、default、delete、do、else、finally、for、function、if、in.instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with等。
-
保留字
- 保留字:实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。
- 包括 : boolean、byte、char、class、const、debugger、double、enum、export、extends,fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public.short、static、suger. synchronized、 throws、transient.volatile等。
运算符
-
运算符( operator )也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。
-
算术运算符【算术运算符使用的符号，用于执行两个变量或值的算术运算】
-
- 加
-
-
减
-
-
- 乘
-
/
- 除
-
%
- 取余数（取模）
-
表达式和返回值
- 表达式∶是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合简单理解∶是由数字、运算符、变量等组成的式子
- 表达式最终都会有一个结果，返回给我们，我们成为返回值
-
-
递增和递减运算符
-
如果需要反复给数字变量添加或减去1，可以使用递增(++)和递减(-- ）运算符来完成。
-
在JavaScript中，递增(++ )和递减( --)既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。
-
注意:递增和递减运算符必须和变量配合使用。
-
递增运算符
-
前置递增运算符
- ++num前置递增，就是自加1，类似于num = num + 1，但是++num写起来更简单。
- 先自加1，后返回值
-
后置递增运算符
- num++后置递增，就是自加1，类似于num = num + 1，但是num++写起来更简单。
- 先返回原值，后自加1
-
前置自增和后置自增如果单独使用，效果是一样的。
-
与其他代码联用时，执行结果会不同。
-
-
-
比较运算符
-
概念︰比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值( true / false )作为比较运算的结果。
-
<
- 小于号
-
- 大于号
-
=
- 大于等于号【大于或者等于】
-
<=
- 小于等于号【小于或者等于】
-
==
- 判等号【会转型】
- 默认转换数据类型，会把字符串型的数据转换为数字型，只要求值相等就可以。
-
!=
- 不等号
-
=== !==
- 全等 要求值和数据类型都一致
-
-
逻辑运算符
-
概念∶逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断
-
&&
- “逻辑与”，简称“与” and
- 两侧都为true，结果才是true。只要有一侧为false，结果就为false。
-
||
- “逻辑或”，简称“或” or
- 两侧都为false，结果才是假 false。只要有一侧为true，结果就是true。
-
！
- “逻辑非” ，简称“非” not
- 逻辑非(!)也叫作取反符，用来取一个布尔值相反的值，如true的相反值是false
-
短路运算（逻辑中断）
-
当有多个表达式（值）时，左边的表达式可确定结果时，就不再继续运算右边的表达式的值。
-
逻辑中断逻辑与
- 语法 : 表达式1 && 表达式2
- 如果第一个表达式的值为真，则返回表达式2
- 如果第一个表达式的值为假，则返回表达式1
-
逻辑中断逻辑或
- 语法 : 表达式1 || 表达式2
- 如果第一个表达式的值为真，则返回表达式1
- 如果第一个表达式的值为假，则返回表达式2
-
-
-
赋值运算符
-
概念：用来把数据赋值给变量的运算符。
-
=
- 直接赋值
-
+=、-=
- 加、减一个数后在赋值
-
*=、/=、%=
- 乘、除、取模后在赋值
-
-
运算符优先级
- 一元运算符里面的逻辑非优先级很高
- 逻辑与比逻辑或优先级高
JavaScript流程控制
-
在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。
简单理解:流程控制就是来控制我们的代码按照什么结构顺序来执行 -
流程控制主要有三种结构：
-
顺序结构
- 顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。
-
分支结构
-
由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程)，从而得到不同的结果
-
JS语言中的分支结构语句
-
if语句
-
if的语法结构
- if （条件表达式）{
//执行语句
}
- if （条件表达式）{
-
执行思路：
- 如果if里面的条件表达式结果为真 true 则执行大括号里面的执行语句
- 如果if 条件表达式结果为假 则不执行大括号里面的语句则执行if 语句后面的代码
-
if else语句（双分支语句）
-
语法结构
- if （条件表达式）{
//执行语句
} else {
// 否则执行的代码
}
- if （条件表达式）{
-
执行思路：
- 如果表达式结果为真，那么执行if里面的执行语句
- 否则，执行else中的代码
-
-
if else if语句（多分支语句）
-
就是利用多个条件来选择不同的语句执行，得到不同的结果，多选一的过程。
-
语法结构：
- if（条件表达式1）{
// 语句1;
} else if（条件表达式2）{
//语句2；
} else if（条件表达式3）{
//语句3；
}
…
else {
//最后的语句；
}
- if（条件表达式1）{
-
执行思路：
- 如果条件表达式1，满足就执行语句1执行完毕后，退出整个if 分支语句
- 如果条件表达式1 不满足，则判断条件表达式2满足的话，执行语句2 以此类推
- 如果上面所有的条件表达式都不成立，则执行else里面的语句。
-
注意点：
- 多分支语句还是多选一，最后只能有一个语句执行
- else if 里面的条件理论上是可以任意多个的。
- else if 这两个单词之间是有空格的。
-
-
-
三元表达式
-
语法结构：
- 条件表达式 ？ 表达式1 ： 表达式2
-
执行思路：
- 如果条件表达式结果为真，则返回表达式1的值。
- 如果条件表达式结果为假，则返回表达式2的值。
-
-
switch语句
-
switch 语句也是多分支语句，也可以实现多选一
-
switch语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用switch。
-
语法结构
- switch（表达式）{
case value1：执行语句1；
break；
case value2：执行语句2；
break；
case value3：执行语句3；
break；
…
default:
执行最后的语句；
}
- switch（表达式）{
-
执行思路：
- 利用我们的表达式的值和 case后面的选项值相匹配如果匹配上，就执行该case里面的语句如果都没有匹配上，那么执行default里面的语句
-
注意点：
- 开发过程中，表达式通常写成变量。
- 表达式的值和case里面的值相匹配的时候是全等，必须是值和数据类型一致才可以
- break如果当前的case里面没有break，则不会退出switch，是继续执行下一个case。
-
-
-
-
循环结构
-
在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句
-
for循环
-
语法结构
- for(初始化变量；条件表达式；操作表达式){
//循环体
}
- for(初始化变量；条件表达式；操作表达式){
-
-
whlie循环
-
while语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环.
-
语法结构
- while （条件表达式）{
//循环体代码
}
- while （条件表达式）{
-
执行思路
- 先执行条件表达式，如果结果为true，则执行循环体代码；如果为false，则退出循环，执行后面代码。
- 执行循环体代码
- 循环体代码执行完毕后，程序会继续判断条件表达式；如条件仍为true，则会继续执行循环体，知道循环条件为false时，整个循环过程才会结束。
-
-
do…while循环
-
do… while语句其实是while语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。
-
语法结构
- do{
//循环体
} while（条件表达式）
- do{
-
-
continue 和break
-
continue关键字
- continue关键字用于立即跳出本次循环，继续下一次循环（本次循环体中continue之后的代码就会少执行一次)。
-
break关键字
- break关键字用于立即跳出整个循环（循环结束）
-
-
-
命名规范：
-
标识符命名规范
- 变量、函数的命名必须要有意义
- 变量的名称一般用名词
- 函数的名称一般用动词
-
操作符规范
- 操作符左右两侧各保留一个空格
-
单行注释规范
- // 单行注释前面有个空格
数组
-
数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。
-
数组的创建方式
-
利用new创建数组
- var 数组名 = new Array（）；
-
利用数组字面量创建数组
- var 数组名 = [ ] ;
- var 数组名 = [‘林俊杰’, ‘周杰伦’,‘王力宏’];
-
-
数组的索引
- 索引(下标)∶用来访问数组元素的序号(数组下标从О开始)。
- 数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名[索引l]”的形式来获取数组中的元素。
-
数组中新增元素
-
通过修改length长度新增数组元素
- 可以通过修改length长度来实现数组扩容的目的
- length属性是可读写的。
- 修改长度后，新增的就是声明变量未给值，默认值就是undefined。
-
通过修改数组索引新增数组元素
- 可以通过修改数组索引的方式追加数组元素
- 不能直接给数组名赋值，否则会覆盖掉以前的数据。
-
函数
-
函数就是封装了一段可以被重复执行调用的代码块 目的： 就是让大量代码重复使用
-
函数使用
-
声明函数
-
函数声明的两种方式
- function 函数名（）{
// 函数体
} - var 变量名 = function（）{
- function 函数名（）{
-
-
}；
- function声明函数的关键字，全部小写
- 函数是做某件事情，函数名一般是动词
- 函数不调用自己不执行
- 调用函数
- 函数名（）；
- 函数的封装
- 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
-
参数
-
参数的作用:在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。
-
函数的参数可以有，也可以没有，个数不限。
- 多个参数之间用逗号隔开
- 形参可以看做是不用声明的变量
-
形参
- 在声明函数的小括号里面是形参（形式上的参数）
-
实参
- 在函数调用的小括号里面是实参（实际的参数）
-
函数形参和实参的匹配问题
- 如果实参的个数和形参的个数一致，则正常输出结果
- 如果实参的个数多于形参的个数，会取到形参的个数
- 如果实参的个数小于形参的个数，多于的形参定义为undefined，最终的结果就是NaN
-
-
函数的返回值：return语句
-
有的时候，我们希望函数将值返回给调用者，此时通过使用return语句就可以实现
-
格式：
- function 函数名（）{
//函数体语句
return 需要返回的结果；
}
- function 函数名（）{
-
函数名（）；
- 我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名(）通过return实现的
- 只要函数遇到return 就把后面的结果返回给函数的调用者﹐函数名() = return后面的结果
- return后面的语句不再执行
- 函数如果有return，则返回的是return后面的值，如果函数没有return，则返回undefined
- return不仅可以退出循环，还能返回return语句中的值，同时还可以结束当前的函数体内的代码
-
arguments的使用
-
当我们不确定有多少个参数传递的时候，可以用arguments来获取。在JavaScript中,arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。
-
arguments展示形式是一个伪数组，因此可以进行遍历，伪数组具有的特点
- 具有length属性
- 按索引方式存储数据
- 不具有数组的push、pop等方法。
- 只有函数才有arguments对象，而且是每个函数都内置好了这个arguments
-
-
函数可以调用另外一个函数
- 因为每个函数都是独立的代码块，用于完成特殊任务，因此经常会用到函数相互调用的情况
-
在js中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖。
作用域
-
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高少程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
-
js的作用域（es6）之前
-
全局作用域
- 整个script标签，或者是一个单独的js文件
-
局部作用域（函数作用域）
- 在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用
-
-
变量作用域的分类
-
全局变量
- 在全局作用域下的变量，在全局下都可以使用
- 注意：如果在函数内部，没有声明直接赋值的变量也属于全局变量
-
局部变量
- 在局部作用域下的变量，在函数内部的变量就是局部变量
- 注意：函数的形参也可以看做是局部变量
-
从执行效率来看全局变量和局部变量
- 全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
- 局部变量，当程序执行完毕就会销毁，比较节约内存资源
-
-
作用域链
- 只要是代码，就至少有一个作用域
- 写在函数内部的局部作用域
- 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
- 内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构我们称为作用域链
预解析
-
JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步:预解析和代码执行。
-
js引擎会把js里面所有的var 还有function 提升到当前作用域的最前面
-
预解析分为
-
变量预解析（变量提升）
-
变量提升就是把所有的变量声明提升到当前的作用域的最前面，不提升赋值操作。
-
console.log(num);
var num = 10;- //相当于执行以下代码
var num;
console.log(num);
num = 10;
- //相当于执行以下代码
-
fun();
var fun = function(){
console.log( );
}- //相当于执行以下代码
var fun;
fun();
fun = function(){
console.log( );
}
- //相当于执行以下代码
-
-
函数预解析（函数提升）
- 函数提升就是把所有的函数声明提升到当前作用域的最前面，不调用函数
-
javascript中对象分为三种：
-
自定义对象
-
现实生活中∶万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。
-
在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
-
对象是由属性和方法组成的
- 属性：事物的特征，在对象中用属性来表示（常用名词）
- 方法：事物的行为，在对象中用方法来表示（常用动词）
-
创建对象的三种方式
-
利用字面值来创建对象
- var obj = { }; //创建了一个空的对象
- var obj = {
uame : ‘林俊杰’，
age : 37,
sex : ‘男’,
sayHi: function( ){
console.log(‘hi’);
}
} - 里面的属性或者方法我们采取键值对的形式 键 属性名 : 值
属性值 - 多个属性或者方法中间用逗号隔开的
- 方法冒号后面跟的是一个匿名函数
-
利用new Object创建对象
- var obj = new Object( ); //创建了一个空的对象
- 我们是利用“等号 =”赋值的方法，添加对象的属性和方法
- 每个属性和方法直接用分号结束
-
利用构造函数创建对象
-
构造函数∶是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
-
可以一次创建多个对象
-
语法格式：
- function 构造函数名（）{
this.属性 = 值；
this.方法 = function（）{}
}
new 构造函数名（）；
- function 构造函数名（）{
-
注意点：
- 构造函数名首字母要大写
- 构造函数不需要return，就可以返回结果
- 调用构造函数，必须使用new
- 属性和方法前面必须添加this
-
-
-
使用对象
-
调用对象的属性
- 对象名.属性名
- 对象名[ ‘属性名’ ]
-
调用属性的方法
- 对象名.方法名（）；
-
-
变量、属性、函数、方法的区别
-
变量
- 单独声明并赋值，使用的时候直接写变量名，单独存在
-
属性
- 在对象里面的不需要声明的，使用的时候必须是对象.属性
-
函数
- 函数是单独声明的，并且调用的。 函数名（）; 单独存在的
-
方法
- 方法∶对象里面的函数称为方法，方法不需要声明，使用“对象.方法名（）；”的方式就可以调用，方法用来描述该对象的行为和功能。
-
-
构造函数和对象
- 构造函数，如Stars0，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类( class )
- 创建对象，如new Stars0，特指某一个，通过new关键字创建对象的过程我们也称为对象实例化
-
new关键字
-
new关键字执行过程
- new 构造函数可以在内存中创建一个空的对象
- this 就会指向刚才创建的空对象
- 执行构造函数里面的代码，给这空对象添加属性和方法
- 返回这个对象（所以构造函数里面不需要return）
-
-
遍历对象
- for in 【for （变量
in 对象）{ }】 - for（var k in obj）{
console.log(k);// k 变量，输出得到的是属性名
console.log(obj[k]);} // obj[k] 得到的是属性值
}
- for in 【for （变量
-
-
内置对象
-
内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法)
-
内置对象最大的优点就是帮助我们快速开发
-
JavaScript提供了多个内置对象
-
Math
-
Math数学对象不是一个构造函数，所以不需要new来调用，而是直接使用里面的属性和方法既可
-
属性
- Math.PI //圆周率
-
方法
-
Math.floor() //向下取整
-
Math.ceil（） //向上取整
-
Math.round() //四舍五入版 就近取整 注意 .5特殊 结果是往大了取
-
Math.abs() //绝对值
- 隐式转换，会把字符串类型-1转换成数字型
-
Math.max() //最大值
-
Math.min() //最小值
-
Math.random（）
-
返回一个随机的小数 0=< x <1
-
想要得到两个数之间的随机整数，并且包含这两个整数
- Math.floor(Math.random() * (max - min + 1))+min;
-
-
-
-
Date
-
日期对象，是一个构造函数，必须使用new来调用创建我们的日期对象
-
没有参数，返回当前时间
- var now = new Date（）；
console.log(now);
- var now = new Date（）；
-
Date()构造函数的参数
- 如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写成newDate(‘2019-5-1’)或者new Date(‘2019/5/1’)
-
获取Date总的毫秒数（时间戳） 不是当前时间的毫秒数，二十距离1970年1月1号过了多少毫秒数
- var date = new Date();
console.log(date.valueOf));
console.log(date.getTime()); - var date1 = +new Date(); //+new Date() 返回的就是总的毫秒数
- console.log(Date.now());
- var date = new Date();
-
-
Array
-
创建数组的两种方式
-
利用数组字面量
- var arr = [1,2,3];
console.log(arr[0]);
- var arr = [1,2,3];
-
利用new Array（）
- var arr = new Array(); //创建了一个空的数组
var arr1 = new Array(2); //这个2代表数组的长度为2，里面有2个空的数组元素
var arr2 = new Array（2,4）； //等价于[2,3] 这样写代表里面有2个数组元素，是2和3
- var arr = new Array(); //创建了一个空的数组
-
-
检测是否为数组
- instanceof 运算符，它可以用来检测是否为数组
- Array.isArray(参数); H5新增的方法，ie9以上版本支持
-
添加删除数组元素的方法
-
数组排序
-
数组排序（冒泡排序）
- var arr = [1,3,2,4,5];
arr.sort(function(a,b){
return a-b; //升序的顺序
return b-a; //降序
}）;
- var arr = [1,3,2,4,5];
-
-
数组索引
-
数组转换为字符串
-
-
String
-
基本包装类型
- 基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
-
字符串的不可变性
- 指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间
-
根据字符返回位置
- 字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。
-
字符串操作方法
-
替换字符
- replace（‘被替换的字符’,‘替换为的字符’) 它只会替换第一个字符
-
字符转换为数组
- split（‘分隔符’)
-
-
大小写
- toUpperCase（） //转换大写
- toLowerCase（） //转换小写
-
-
-
-
浏览器对象
Web APIs
Js基础学习ECNAScript 基础语法为后面作铺垫，web APIs 是Js 的应用，大量使用Js 基础语法做交互效果
API和Web API
-
API
- APl ( Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。【API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能】
-
Web API
- Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
-
总结：
- 1.API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
- 2.Web API主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
- 3.WebAPI一般都有输入和输出（函数的传参和返回值），WebAPI很多都是方法（函数)
DOM
-
文档对象模型(Document Object Model，简称DOM ）)，是W3C组织推荐的处理可扩展标记语言(（HTML或者XML)的标准编程接口。
w3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式. -
DOM树
-
文档 : 一个页面就是一个文档，DOM中使用document表示
-
元素 : 页面中的所有标签都是元素，DOM中使用element表示
-
节点︰网页中的所有内容都是节点(标签、属性、文本、注释等），DOM中使用node表示
-
DOM把以上内容都看做是对象
-
-
获取元素
-
根据ID获取
- 使用getElementById()方法获取带有ID的元素对象
- get获得 element 元素 by 通过 驼峰命名法
- 参数 id是大小写敏感的字符串
- 返回的是一个元素对象
- console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法
-
根据标签名获取
-
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
- 返回的是获取过来元素对象的集合，以伪数组的形式存储的。
- 得到的元素对象是动态的
- 如果页面中只有一个这元素，返回的还是伪数组的形式
- 如果页面中没有这个元素，返回的是空的伪数组的形式
-
还可以获取某个元素（父元素）内部所有的指定标签名的子元素【element.getElementsByTagName(‘标签名’);】
- 注意：父元素必须是单个对象（必须指明是哪一个元素对象）.获取的时候不包括父元素自己。
-
-
通过HTML5新增的方法获取
- document.getElementsByClassName(‘类名’); //根据类名返回元素对象集合
- document.querySelector(‘选择器’); //根据指定选择器返回第一个元素对象 里面的选择器需要加符号 class需要加 . id需要加#
- document.querySelectorAll(‘选择器’); //根据指定选择器返回
-
特殊元素获取(body 、 html）
-
获取body元素
- document.body //返回body元素对象
-
获取html元素
- document.documentElement //返回html元素对象
-
-
-
事件基础
-
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
简单理解∶触发—响应机制。
网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。 -
事件是由三部分组成，也称事件三要素
-
事件源
- 事件被触发的对象
-
事件类型
-
如何触发，什么事件 比如
- 鼠标事件
-
-
事件处理程序
- 通过一个函数赋值的方式完成
-
-
执行事件的步骤
- 获取事件源
- 注册事件（绑定事件）
- 添加事件处理程序（采取函数赋值形式）
-
-
操作元素
-
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
-
改变普通元素内容
-
element.innerText
- 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
-
element.innerHTML
- 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
-
-
修改元素属性
- src、htef、title等
-
修改表单元素
- value、type、disabled等
-
修改元素样式
- style、className
-
-
节点操作
-
利用DOM提供的方法获取元素
- document.getElementById()
- document.getElementsByTagName()
- document.querySelector等
- 逻辑性不强，繁琐
-
利用节点层次级关系获取元素
- 利用父子兄关系获取元素
- 逻辑性强，但是兼容性稍差
-
节点概述
-
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。
HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素(节点）均可被修改，也可以创建或删除。 -
一般地，节点至少拥有nodeType(节点类型) 、nodeName(节点名称）和nodeValue(节点值）这三个基本属性。
- 元素节点 nodeType为1
- 属性节点 nodeType为2
- 文本节点 nodeType为3（文本节点包含文字、空格、换行等）
-
-
节点层级
-
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系
-
父节点
- node.parentNode
- 得到的是离元素最近的父级节点
如果找不到父节点就返回为 null
-
子节点
-
parentNode.childNodes(标准)
-
parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合
-
注意
- 返回值里面包含了所有的子节点，包括元素节点，文本节点等
- 如果只想要获得里面的元素节点，则需要专门处理
-
-
parentNode.children(非标准)
- parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回
- 虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
-
parentNode.firstChild
- firstChild返回第一个子节点，找不到则返回null，同样，也是包含所有的节点
- firstChild 第一个子节点 不管是文本节点还是元素节点
-
parentNode.lastChild
- lastChild返回最后一个子节点，找不到返回null，同样，也是包含所有的节点
-
parentNode.firstElementChild
- 返回第一个子元素节点，找不到则返回null
-
parentNode.lastElementChild
- 返回最后一个子元素节点，找不到则返回null
-
-
兄弟节点
-
node.nextSibling
- nextSibling返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。
-
node.previousSibling
- previousSibling 返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点
-
node.nextElementSibling
- nextElementsibling返回当前元素下一个兄弟元素节点，找不到则返回null。
-
node.previousElementSibling
- previousElementsibling返回当前元素上一个兄弟节点，找不到则返回null,
-
-
-
-
创建节点
-
documen.creatElement(‘tagName’)
- document.createElement()方法创建由tagName指定的HTM元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
-
-
添加节点
-
node.appendChild(child)
- node.appendchild()方法将一个节点添加呼到指定父节点的子节点列表末尾。类似于css里面的after伪元素。
- node父级 child是子级 后面追加元素，类似于数组中的push
-
node.insertBefore(child,指定元素)
- node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。类似于css里面的 before伪元素。
-
-
删除节点
-
node.removeChild(child)
- node.removeChild()方法从DOM中删除一个子节点，返回删除的节点。
-
-
复制节点（克隆节点）
-
node.cloneNode()
- node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
- 如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不可隆里面的子节点。
- 如果括号里面为true，则是深拷贝，复制节点本身以及里面所有的子节点
-
-
三种动态创建元素的区别
-
document.write()
- document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
-
element.innerHTML
- innerHTML是讲内容写入某个DOM节点，不会导致页面全部重绘
- innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍复杂
-
document.createElement( )
- createElement( )创建多个元素效率稍微低一点，但是结构更清楚
-
-
-
事件高级
-
注册事件（绑定事件）
-
给元素添加事件，称为注册事件或者绑定事件
-
注册事件的两种方式
-
传统方式
-
利用on开头的事件 onclick
-
-
btn.onclick = function(){}
-
特点：
- 注册事件的唯一性
- 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
-
-
方法监听注册方式
-
w3c标准推荐方式
-
addEventListener( )它是一个方法
-
enentTarget.addEventListener(type,listener[,useCapture])
- type:事件类型字符串，比如click、mouseover ，注意这里不要带on,必定加引号
- listener:事件处理函数，事件发生时，会调用该监听函数
- useCapture : 可选参数，是一个布尔值，默认是false。学完DOM事件流后，我们再进一步学习
-
eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
-
-
IE9之前的IE不支持此方式，可使用attachEvent( eventNameWithOn,callback)代替
- eventTarget.attachEvent ()方法将指定的监听器注册到eventrarget(目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。
- eventNamenWithOn : 事件类型字符串，比如onclick、onmouseover，这里要带on
- callback ： 事件处理函数，当目标触发事件时回调函数被调用
-
特点
- 同一个元素同一个事件可以注册多个监听器
- 按注册顺序依次执行
-
-
-
-
删除事件（解绑事件）
-
传统注册方式
- eventTarget.onclick = null;
-
方法监听注册方式
- eventTarget.removeEventListener(type,listener[,useCapture]); 【里面的函数调用，函数名就行，不需要调用加小括号】
- eventTarget.detachEvent(eventNameWithOn,callback);
-
-
DOM事件流
-
事件流描述是从页面中接收事件的顺序
-
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
-
DOM事件流分为3个阶段；
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
-
注意：
- JS代码只能执行捕获或者冒泡其中的一个阶段
- onclick和attachEvent只能得到冒泡阶段
- addEventListener(type，listener[，usecapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序;如果是 false(不写默认就是false )，表示在事件冒泡阶段调用事件处理程序。
- 实际开发中很少使用时间捕获，更关注事件冒泡
- 有些事件时没有冒泡，比如onblur、onfocus、onmouseenter、onmouseleave
-
-
事件对象
-
eventTarget.onclick = function(event){}
eventTarget.addEventListener(‘click’,function(event){})【这个event就是事件对象】- 这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去
- 但我们注册事件时，event对象就会被系统自动创建，并以此传递给事件监听器（事件处理函数）
-
官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置，鼠标按钮的状态
-
简单解释：事件发生后，跟事件相关的一系列信息数据的集合都被放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法
-
事件对象的兼容性方案
-
事件对象本身的获取存在兼容性问题
- 标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到
- 在IE6~8中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找。
-
解决
- e = e || window.event;
-
-
常见事件对象的属性和方法
-
e.target和this
- e.target 返回的是触发事件的对象（元素）
- this 返回的是绑定事件的对象（元素）
-
-
事件委托（代理、委托）
- 事件委托也称为事件代理，在jQuery里面称为事件委托
- 原理：不是每个子节点单独设置事件监听器，二十事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点
- 事件委托的作用：我们只操作了一次DOM，提高了程序的性能
-
常见的鼠标事件
-
禁止鼠标右键菜单
- contextmenu主要控制应该如何显示上下文菜单，主要用于程序取消默认的上下文菜单
- document.addEventListener(‘contextmenu’,function(e) {
e.preventDefault();
})
-
禁止鼠标选中（selectstart 开始选中）
- document.addEventListener(‘selectstart’,function(e){
e.preventDefault();
})
- document.addEventListener(‘selectstart’,function(e){
-
鼠标事件对象
- event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent和键盘事件对象KeybardEvent。
-
-
常见键盘事件
-
三个事件的执行顺序是：keydown–keypress–keyup
-
keyup和keydown事件不区分字母大小写
-
keypress事件区分字母大小写
-
keydown和keypress在文本框里面的特点，他们两个事件触发的时候，文字还没有落入文本框中。
-
-
-
BOM
-
什么是BOM
- BOM （ Browser Object Model ）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window.
- BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
- BOM缺乏标准，JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
-
BOM的构成
-
BOM比DOM更大，它包含DOM
-
window对象是浏览器的顶级对象它具有双重角色
-
它是JS访问浏览器窗口的一个接口。
-
它是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法。在调用的时候可以省略window，前面对话框都属于window对象方法，如alert（ ），prompt（）等
-
window下的一个特殊属性window.name
-
-
window对象的常见事件
-
窗口加载事件
-
window.onload = function() {} 或
window.addEventListener(‘load’,function (){});-
window.onload是窗口(页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。
-
注意
- 1.有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
- 2.window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。
- 如果使用addEventListener则没有限制
-
-
document.addEventListener(‘DOMContentLoaded’,function(){})
- DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等，IE9以上支持
- 如果页面的图片很多的话,从用户访问到onload触发可能需要较长的时间交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适。
-
-
调整窗口大小事件
-
window.onresize = function(){}
window.addEventListener(‘resize’,function(){});-
window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数
-
注意
- 只要窗口大小发生像素变化，就会触发这个事件
- 我们经常利用这个事件完成响应式布局，window.innerWidth当前屏幕的宽度
-
-
-
-
定时器
-
setTimeout（）
-
windo.setTimeout(调用函数，延迟的毫秒数);
- setTimeout0这个调用函数我们也称为回调函数callback
普通函数是按照代码顺序直接调用。
而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。
简单理解︰回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
以前我们讲的 element.οnclick=function(或者element.addEventListener(click" ,fn);里面的函数也是回调函数。
- setTimeout0这个调用函数我们也称为回调函数callback
-
setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数
-
注意
- window可以省略
- .这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名（）'三种形式。第三种不推荐
- 延迟的毫秒数省略默认是0，如果写，必须是毫秒。
- 因为定时器可能有很多，所以一般情况下给定时器赋值一个标识符。
-
停止setTimeout()定时器
-
window.clearTimeout(timeoutID)
-
clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器。
-
注意
- window可以省略
- 里面的参数就是定时器的标识符
-
-
-
setInterval（）
-
window.setInterval (回调函数,间隔的毫秒数);
-
setlnterval（）方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。
-
注意
- window可以省略
- .这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名（）'三种形式。第三种不推荐
- 延迟的毫秒数省略默认是0，如果写，必须是毫秒。
- 因为定时器可能有很多，所以一般情况下给定时器赋值一个标识符。
-
停止setInterval（）定时器
-
window.clearInterval(intervalID)
-
clearInterval()方法取消了先前通过调用setInterval()建立的定时器。
-
注意
- window可以省略
- 里面的参数就是定时器的标识符
-
-
-
-
JS执行机制
-
JS是单线程
- JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为Javascript这门脚本语言诞生的使命所致——JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。
- 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个多。这样所导致的问题是∶如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加毂阻塞的感觉。
-
同步和异步
-
同步
-
前一个任务结束后再执行后一个任务，程序的执行顺序于任务的排列顺序是一致的，同步的。
-
同步任务
- 同步任务都在主线程上执行，形成一个执行栈
-
-
异步
-
你在做一件事时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。
-
异步任务
-
JS的异步是通过回调函数实现的。
-
一般来说，异步任务有以下三种类型
- 普通事件，如click，resize等
- 资源加载，如load，error等
- 定时器，包括setInterval，setTimeout等
-
-
-
-
执行顺序
- 先执行执行栈中的同步任务
- 异步任务（回调函数）放入任务队列中
- 一旦执行栈中的所有同步任务执行完毕，系统就会一次读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
- 犹豫主线程不断的重复获得任务，执行任务，再获取任务，再执行，所以这种机制被称为事件循环（eventloop）
-
-
location对象
-
window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。
-
URL
-
统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
-
URL的一般语法格式
- protocol: / / host [ : port]/path/ [ ?query]#fragment
http: / / www .itcast.cn/index.html ?name=andy&age=18#link
- protocol: / / host [ : port]/path/ [ ?query]#fragment
-
-
location对象的属性
-
location对象的方法
-
location.assign 记录浏览历史，所以可以实现后退功能
-
location.replace（） 不记录浏览历史，所以不可以实现后退功能
-
-
-
navigator对象
- navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。
-
history对象
-
window对象给我们提供了一个history对象，于浏览器历史记录进行交互该对象包含用户（在浏览器窗口中）访问过的URL。
-
history对象方法
-
DOM和BOM
-
DOM
- 文档对象模型
- DOM就是把【文档】当做一个【对象】来看待
- DOM的顶级对象是document
- DOM主要学习的是操作页面元素
- DOM是W3C的标准规范
-
BOM
- 浏览器对象模型
- 把【浏览器】当做一个【对象】来看待
- BOM的顶级对象是Window
- BOM学习的是浏览器窗口交互的一些对象
- BOM是浏览器厂商在各自浏览器上定义的，兼容性较差
PC端网页特效
元素偏移量offset系列
-
offset概述
- offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小（宽度高度）
- 注意：返回的数值都不带单位
-
offset系列属性
-
offset和style区别
-
offset
- offset可以得到任意样式表中的样式值
- offset系列获得的数值是没有单位的
- offsetWidth包括padding+border+width
- offsetWidth等属性是只读属性，只能获取不能赋值
- 所以，我们想要获取元素大小位置，用offset更合适
-
style
- style只能得到行内样式表中的样式值
- sytle.width获得的是带有单位的字符串
- style.width获得不包含padding和border的值
- stylel.width是可读写属性，可以获取也可以赋值
- 所以，我们想要给元素更改值，则需要用style改变
-
元素可视区client系列
-
client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
-
client系列属性
元素滚动scroll系列
-
scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的代销，滚动距离等。
-
如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件。
-
scroll系列属性
三大系列大小对比
立即执行函数
-
不需要调用，立马能够自己执行的函数
-
立即执行函数最大的作用就是独立创建了一个作用域，里面所有的变量都是局部变量，不会有命名冲突的情况
-
写法
- （function() {})()
- (function(){}());
- 第二个小括号可以看做是调用函数
mouseenter和mouseover的区别
-
mouseenter鼠标事件
- 当鼠标移动到元素上时就会触发mouseenter事件
- 类似mouseover，差别是mouseover 鼠标经过自身盒子会触发，经过子盒还会触发，mouseenter 只会经过自身盒子触发
- mouseenter不会冒泡
- 跟mouseenter搭配 鼠标离开 mouseleave 同样不会冒泡
动画函数封装
-
动画实现原理
- 核心原理：通过定时器setInterval（）不断移动盒子位置
-
实现步骤
- 获得盒子当前位置
- 让盒子在当前位置加上一个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位，才能使用element.style.left
-
动画函数简单封装
- 注意函数需要传递2个参数，动画对象和移动到的距离
-
动画函数给不同元素记录不同的计时器
- 如果多个元素都使用这个动画函数，每次都要var声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。
- 核心原理:利用JS是一门动态语言，可以很方便的给当前对象添加属性。
-
缓动效果原理
-
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
-
思路
- 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
- 核心算法：（目标值-现在的位置）/ 10 做为每次移动的距离步长
- 停止的条件是：让当前盒子位置等于目标位置就停止定时器
-
-
动画函数添加回调函数
- 回调函数原理∶函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这译函数，这个过程就叫做回调。
- 回调函数写的位置，定时器结束的位置
-
动画函数封装到单独的js文件里面
- 因为以后经常使用这个动画函数，可以单独封装到一个js文件里面，使用的时候直接引用这个js文件即可。
-
子主题 8
常见网页特效案例
-
节流阀
-
防止轮播图按钮连续点击造成播放过快
-
节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
-
核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数
- 开始设置一个变量var flag = true;
lf(flag){flag = false; do something}关闭水龙头
利用回调函数动画执行完毕，flag = true打开水龙头
- 开始设置一个变量var flag = true;
-
移动端网页特效
触屏事件概述
-
移动端浏览器兼容性较好，我们不需要考虑以前S的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方。比如触屏事件touch (也称触摸事件），Android和IOS都有。
-
touch对象代表一个触摸点，触摸点可能是一根手指，也可能是一根触摸笔，触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作
-
常见的触屏事件
-
触摸事件对象（TouchEvent）
- TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等
- touchstart、touchmove、touchend三个事件都会各自有事件对象。
-
移动端拖动元素
-
touchstart、touchmove、touchend可以实现拖动元素
-
但是拖动元素需要当前手指的坐标，我们可以使用targetTouches[0]里面的pageX和pageY
-
实现原理
- 手指移动中，计算出手指移动的距离，然后用盒子原来的位置 + 手指移动的距离
- 手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置
-
实现过程
- 触摸元素touchstart ： 获取手指初始坐标，同时获得盒子原来的位置
- 移动手指touchmove：计算手指的滑动距离，并且移动盒子
- 离开手指touchend
- 注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault();
-
classList属性
-
classList属性是HTML5中新增的一个属性，返回元素的类名。IE10以上版本支持。该属性用于元素中添加，移除及切换CSS类。
-
添加类：
- element.classList.add(‘类名’);
- 是在后面追加类名不会覆盖以前的类名， 类名前面不需要 + .
-
移除类：
- element.classList.remove(‘类名’);
-
切换类：
- element.classList.toggle(‘类名’);
click延时解决方案
-
移动端click事件会有300ms的延时，原因是移动端屏幕双击会缩放（double tap to zoom）页面
-
解决方案
-
禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。
-
利用touch事件自己封装这个事件的解决300ms延迟。
-
原理：
- 当我们手指触摸屏幕，记录当前触摸事件
- 当我们手指离开屏幕，用离开的时候减去触摸时间
- 如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击
-
-
使用插件。fastclick插件解决300ms延迟。
-
插件
- JS插件是js文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。
- 特点:它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。
框架
- 框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。
本地存储
-
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
-
本地存储特征
-
数据存储在用户浏览器中
-
设置，读取方便，甚至页面刷新不丢失数据
-
容量较大，sessionStorage约5M、localStorage约20M
-
window.sessionStorage
-
生命周期为关闭浏览器窗口
-
在同一个窗口（页面）下数据可以共享
-
以键值对的形式存储使用
-
数据操作
-
存储数据：
- sessionStorage.setItem(key,value)
-
获取数据：
- sessionStorage.getItem(key)
-
删除数据：
- sessionStorage.removeItem(key)
-
删除所有数据：
- sessionStorage.clear()
-
-
-
window.localStorage
-
生命周期永久生效，除非手动删除，否则关闭页面也会存在
-
可以多窗口（页面）共享（同一浏览器可以共享）
-
以键值对的形式存储使用
-
数据操作
-
存储数据：
- localStorage.setItem(key,value)
-
获取数据：
- localStorage.getItem(key)
-
删除数据：
- localStorage.removeItem(key)
-
删除所有数据：
- localStorage.clear()
-
-
-
-
只能存储字符串，可以将对象JSON。stringify（）编码后存储
-
jQuery
JavaScript库
- 即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
- 简单理解∶就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数(方法)。
jQuery的概念
- jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“write Less , Do More”，即倡导写更少的代码，做更多的事情。
- j就是JavaScript ; Query查询;意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
- jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。
- 学习jQuery本质:就是学习调用这些函数(方法)。
jQuery出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。
jQuery的优点
- 轻量级。核心文件才即时kb，不会影响页面加载速度。
- 跨浏览器兼容，基本兼容了现在主流的浏览器。
- 链式编程，隐式迭代
- 对事件、样式、动画支持，大大简化了DOM操作
- 支持插件扩展开发，有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
- 免费、开源
jQuery的入口函数
-
$(function () {
…//此处是页面DOM加载完成的入口
)}; -
$(document).ready(function () {
…//此处是页面DOM加载完成的入口
)}; -
作用
- 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成 了封装。
- 相当于原生js中的DOMContentLoaded。
- 不同意原生js中的load事件时等页面文档，外部的js文件、css文件，图片加载完毕才执行内部代码。
jQuery的顶级对象$
- 是 j Q u e r y 的 别 称 ， 在 代 码 中 可 以 用 j Q u e r y 代 替 是jQuery的别称，在代码中可以用jQuery代替 是jQuery的别称，在代码中可以用jQuery代替,但一般为了方便，通常都直接使用$
- 是 j Q u e r y 的 顶 级 对 象 ， 相 当 于 原 生 J a v a S c r i p t 中 的 w i n d o w 。 把 元 素 利 用 是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用 是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用包装成Query对象，就可以调用jQuery的方法。
jQuery对象和DOM对象
-
用原生js获取的对象就是DOM对象
-
jQuery对象：用jQuery方式获取过来的对象是jQuery对象。
- 本质：通过$把DOM元素进行了包装
-
jQuery对象只能使用jQuery方法。DOM对象则使用原生的JavaScript属性和方法
-
jQuery对象与DOM对象可以相互转换的。
因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。-
DOM对象转换为jQuery对象：$(DOM对象)
-
jQuery对象转换为DOM对象（两种方式）
- $(‘div’)[index] index是索引号
- $(‘div’).get(index) index是索引号
-
常见API
-
jQuery选择器
-
原生js获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素同一标准。
-
$('‘选择器’) //里面选择器直接写css选择器即可，但是有加引号
-
jQuery层级选择器
-
隐式迭代（重要）
- 遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代。
- 简单理解∶给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
-
jQuery筛选选择器
-
-
jQuery样式操作
-
操作css方法【jQuery可以使用css方法来修改元素样式；也可以操作类，修改多个样式。】
-
参数只写属性名，则是返回属性值
- $(this).css(“color”);
-
参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
- $(this).css(“color”,“red”);
-
参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号，
- $(this).css({“color”:“white”," font-size":" 20px"});
-
-
设置类样式方法【jQuery可以使用css方法来修改元素样式；也可以操作类，修改多个样式。】
-
添加类
- $(“div" ).addClass(“current”");
-
移除类
- $(“div" ).removeClass(“current”");
-
切换类
- $(“div" ).toggleClass(“current”");
-
-
类操作与className区别
- 原生js中className会覆盖元素原先里面的类名。
jQuery里面类操作只是对指定类进行操作，不影响原先的类名。
- 原生js中className会覆盖元素原先里面的类名。
-
-
jQuery效果【jQuery封装了很多动画效果，常见的有】
-
显示隐藏
-
show()
- show([speed,[easing],[fn]])
-
hide()
- hide([speed,[easing],[fn]])
-
toggle()
- toggle([speed,[easing],[fn]])
-
-
滑动
-
slideDown()
- slideDown([speed],[easing],[fn])
-
slideUp()
- slideup([speed],[easing],[fn])
-
slideToggle()
- slideToggle([speed],[easing],[fn])
-
-
淡入淡出
-
fadeln()
- fadeIn([speed],[easing],[fn])
-
fadeOut()
- fadeOut([speed],[easing],[fn])
-
fadeToggle()
- fadeToggle([speed],[easing],[fn])
-
fadeTo()
- fadeTo([speed],o,[easing],[fn])
-
淡入淡出效果
-
渐进方式调整到指定的不透明度
- 子主题 1
-
效果参数
- opacity透明度必须写，取值0~1之间。
- speed :三种预定速度之一的字符串(“slow”,"normal”,or“fast”)或表示动画时长的毫秒数值(如∶1000)
- easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”".
- fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
-
-
-
自定义动画
-
animate()
-
animate(params,[speed],[easing],[fn])
-
参数
- (1)params:想要更改的样式属性，以对象形式传递，必须写，属性名可以不用带引号，如果是复合属性则需要采用驼峰命名法borderLeft。其余参数都可以省略。
- ( 2 ) speed :三种预定速度之一的字符串(“slow”,"normal”,or“fast”)或表示动画时长的毫秒数值(如∶1000)
- ( 3 ) easing : (Optional)用来指定切换效果，默认是“swing”，可用参数“linear”".
- ( 4 ) fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
-
-
-
事件切换
-
hover([over,]out)
- over:鼠标移到元素上要触发的函数(相当于mouseenter )
- out:鼠标移出元素要触发的函数(相当于mouseleave )
-
-
动画队列及其停止排队方法
-
动画或效果队列
- 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
-
停止排队
-
stop()
- stop()方法用于停止动画或效果
- 注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画
-
-
-
-
jQuery属性操作
-
设置或获取元素固有属性值prop()
-
所谓元素固有属性就是元素本身自带的属性，比如元素里面的href，比如元素里面的type。
-
获取属性语法
- prop(“属性”)
-
设置属性语法
- prop(“属性”,“属性值”)
-
-
设置或获取元素自定义属性值attr()
-
用户自己给元素添加的属性，我们称为自定义属性，比如给div添加index = “-1”
-
获取属性语法
- attr(“属性”) //类似原生getAttribute()
-
设置属性语法
- attr(“属性”,“属性值”) //类似原生setAttribute()
-
-
数据缓存data()
-
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。
-
附加数据语法
- data(“name”,“value”) //向被选元素附加元素
-
获取数据语法
- data(“name”) //向被选元素获取元素
-
同时，还可以读取HTML5自定义属性 data-index，得到的是数字型
-
-
-
jQuery内容文本值
-
主要针对元素的内容还有表单的值操作
-
普通元素内容html() （相当于原生innerHTML）
- html() //获取元素的内容
- html（“内容”） //设置元素的内容
-
普通元素文本内容text() （相当于原生innerText）
- text() //获取元素的文本内容
- text（“文本内容") //设置元素的文本内容
-
表单的值val() （相当于原生value）
- val() //获取元素的文本内容
- val（“文本内容") //设置元素的文本内容
-
-
jQuery元素操作
-
遍历元素
-
jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同操作，就需要用到遍历。
-
$ ( “div” ).each (function (index,domEle){ xxx;})
- each0方法遍历匹配的每一个元素。主要用DOM处理。each每一个
- 里面的回调函数有2个参数:index是每个元素的索引号; demEle是每个DOM元素对象，不是jquery对象
- 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象、$(domEle)
-
$.each(object , function (index, element) { xxx;})
- $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象。
- 里面的函数有2个参数，index是每个元素的索引号，element遍历内容
-
-
创建元素
-
$(“
- ”");
- 动态的创建了一个
-
-
添加元素
-
内部添加
-
element.append(“内容”)
- 把内容放入匹配元素内部最后面，类似原生appendChild
-
element.prepend(“内容”)
- 把内容放入匹配元素内部最前面
-
内部添加元素，生成之后，它们是父子关系
-
-
外部添加
-
element.after(“内容”)
- 把内容放入目标元素后面
-
element.before(“内容”)
- 把内容放入目标元素前面
-
外部添加元素，生成之后，它们是兄弟关系
-
-
-
删除元素
-
element.remove()
- 删除匹配的元素（本身）
-
element.empty()
- 删除匹配的元素集合中所有的子节点
-
element.html(“”)
- 清空匹配的元素内容
-
-
-
jQuery尺寸、位置操作
-
jQuery尺寸
- 以上参数为空，则是获取相应值，返回的是数字型
- 如果参数为数字，则是修改相应值
- 参数可以不必写单位
-
jQuery位置
-
offset()设置或获取元素偏移
- offset()方法设置或返回被选元素相当于文档的偏移坐标，跟父级没有关系。
- 该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离，offset(.left用于获取距离文档左侧的距离。
- 可以设置元素的偏移: offset(f top: 10, left: 30 );
-
position()获取元素偏移
- position()方法用于返回被选元素相当于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
- 这个方法只能获取不能设置偏移
-
scrollTopo/scrollLeft0设置或获取元素被卷去的头部和左侧
- scrollTop0方法设置或返回被选元素被卷去的头部。
-
-
jQuery事件
-
jQuery事件注册
-
单个事件注册
-
语法
- element .事件(function(){})
- $ (“div”).click(function (){事件处理程序})
-
其他事件和原生基本一致
- 比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等
-
-
-
jQuery事件处理
-
事件处理on()绑定事件
-
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
-
语法
- element.on(event,[selector],fn)
-
events:一个或多个用空格分隔的事件类型，如“click”或“可以down”
-
selector：元素的子元素选择器
-
优势：
-
可以绑定多个事件，多个处理事件处理程序
-
$(“div”).on({
mouseover:function(){},
mouseout:function(){},
click:function(){}
}); -
如果时间处理程序相同
- $(“div”).on(“mouseover mouseout”,function() {
$(this).toggleClass(“current”);
});
- $(“div”).on(“mouseover mouseout”,function() {
-
-
可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
- $ ( ‘ul’).on ( 'click" , ‘li’ , function ( ){
alert ( "hello wor1d! ');
});
- $ ( ‘ul’).on ( 'click" , ‘li’ , function ( ){
-
动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件
-
-
-
事件处理off()解绑事件
- off()方法可以移除通过on()方法添加的事件处理程序
- $ (“p”).off() //解绑p元素所有事件处理程序
- $(“p”). off( “click”) //解绑p元素上面的点击事件后面的 foo是侦听函数名
- $ (“ul”) .off(“click”，“li”); //解绑事件委托
- 如果有的事件只想触发一次，可以使用one()来绑定事件
-
自动触发事件trigger()
-
有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
-
元素.事件()
- 会触发元素的默认行为
-
元素.trigger(“事件”)
- 会触发元素的默认行为
-
元素.triggerHandler(“事件”)
- 不会触发元素的默认行为
-
-
-
jQuery事件对象
- 事件被触发，就会有事件对象的产生
- element.on (events, [selector] ,function (event) {})
- 阻止默认行为:event.preventDefaulit() 或者return false
- 阻止冒泡:event.stopPropagation()
jQuery其他方法导读
-
jQuery对象拷贝
-
如果想要把某个对象拷贝(合并）给另外一个对象使用，此时可以使用$.extend()方法
-
$.extend([deep[,target,object1,[objectN])
- deep:如果设为true为深拷贝，默认为false浅拷贝
- target：要拷贝的目标对象
- object1：待拷贝到第一个对象的对象
- objeN：待拷贝到第N个对象的对象
- 浅拷贝是把拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
- 深拷贝把里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并到一起。
-
-
jQuery多库共存
-
问题概述: jQuery使用 作 为 标 示 符 ， 随 着 j Q u e r y 的 流 行 , 其 他 j s 库 也 会 用 这 作为标示符，随着jQuery的流行,其他js库也会用这 作为标示符，随着jQuery的流行,其他js库也会用这作为标识符，这样一起使用会引起冲突。
-
客观需求: 需要一个解决方案，让jQuery和其他的js库不存在筷，可以同时存在，这就叫做多库共存。
-
jQuery解决方案：
- 1.把里面的$符号统一改为jQuery.比如jQuery(“div”)
-
- jQuery变量规定新的名称:$.noConflict() var xx = $.noConflict（）;
-
-
jQuery插件
-
jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成。
注意:这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件。 -
jQuery插件常用的网站：
- jQuery插件库：http://www.jq22.com/
- jQuery之家：http://www.htmleaf.com/
-
jQuery插件使用步骤：
- 引入相关文件。（jQuery文件和插件文件）
- 复制相关html，css，js（调用插件）
-
jQuery插件演示：
- 瀑布流
- .图片懒加载（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载)
当我们页面滑动到可视区域,再显示图片。
我们使用jquery插件库 EasyLazyload。注意，此时的js引入文件和js调用必须写到DOM元素(图片）最后面 - 全屏滚动（fullpage.js)
-
984
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
