admin管理员组文章数量:1588266
js
js基础
ECMAScript
-
ECMAScript 是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广
泛,它往往被称为 JavaScript 或 JScript,但实际上后两者是 ECMAScript 语言的实现和扩展。 -
ECMAScript:ECMAScript 规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。
-
更多参看MDN: https://developer.mozilla/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview
-
js书写位置
-
- 行内式 JS
可以将单行或少量 JS 代码写在HTML标签的事件属性中(以 on 开头的属性),如:onclick
注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
可读性差, 在html中编写JS大量代码时,不方便阅读;
引号易错,引号多层嵌套匹配时,非常容易弄混;
特殊情况下使用
- 行内式 JS
-
- 内嵌 JS
-
可以将多行JS代码写到
利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
引用外部 JS文件的 script 标签中间不可以写代码
适合于JS 代码量比较大的情况
-
变量
-
var age = 18;
age = 81; // 最后的结果就是81因为18 被覆盖掉了 -
同时声明多个变量时,只需要写一个 var, 多个变量名之间使用英文逗号隔开。
var age = 10, name = ‘zs’, sex = 2; -
变量名规范
- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能 以数字开头。 18age 是错误的
不能 是关键字、保留字。例如:var、for、while
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。 myFirstName
推荐翻译网站: 有道 爱词霸
- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:usrAge, num01, _name
-
变量类型
-
JavaScript 拥有动态类型,同时也意味着相同的变量可用作不同的类型:
var x = 6; // x 为数字
var x = “Bill”; // x 为字符串- 不使用var声明变量的时候,变量是全局对象(window对象)属性,在全局中使用var声明变量是全局变量,windows属性可以删除,变量不可删除
-
简单数据类型 (Number,String,Boolean,Undefined,Null)
-
简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型。 值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型
string ,number,boolean,undefined,null -
Number
-
JavaScript 数字类型既可以用来保存整数值,也可以保存小数(浮点数)。
var age = 21; // 整数
var Age = 21.3747; // 小数 -
// 1.八进制数字序列范围:0~7
var num1 = 07; // 对应十进制的7
var num2 = 019; // 对应十进制的19
var num3 = 08; // 对应十进制的8
// 2.十六进制数字序列范围:09以及AF
var num = 0xA;- 现阶段我们只需要记住,在JS中八进制前面加0,十六进制前面加 0x
-
JavaScript中数值的最大和最小值
alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324 -
- 数字型三个特殊值
alert(Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN
Infinity ,代表无穷大,大于任何数值
-Infinity ,代表无穷小,小于任何数值
NaN ,Not a number,代表一个非数值
- 数字型三个特殊值
-
isNaN()
用来判断一个变量是否为非数字的类型,返回 true 或者 false
-
-
string
-
字符串型可以是引号中的任意文本,其语法为 双引号 “” 和 单引号’’
var strMsg = “我爱北京天安门~”; // 使用双引号表示字符串
var strMsg2 = ‘我爱吃猪蹄~’; // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子; // 报错,没使用引号,会被认为是js代码,但js没有这些语法 -
HTML 标签里面的属性使用的是双引号,JS 这里我们更推荐使用单引号。
-
类似HTML里面的特殊字符,字符串中也有特殊字符,我们称之为转义符。
转义符都是 \ 开头的,常用的转义符及其说明如下: -
字符串长度
- var strMsg = “我是帅气多金的程序猿!”;
alert(strMsg.length); // 显示 11
- var strMsg = “我是帅气多金的程序猿!”;
-
字符串拼接
- 多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串
- 多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
-
字符串索引下标
-
-
布尔型 Boolean
- console.log(true + 1); // 2
console.log(false + 1); // 1
- console.log(true + 1); // 2
-
Undefined 和 Null
- var variable;
console.log(variable); // undefined
console.log(‘你好’ + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN - var vari = null;
console.log(‘你好’ + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1
- var variable;
-
-
复杂数据类型 (object)
引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型
通过 new 关键字创建的对象(系统对象、自定义对象),如 Object、Array、Date等-
数组
-
var 数组名 = new Array() ;
var arr = new Array(); // 创建一个新的空数组 -
//1. 使用数组字面量方式创建空的数组
var 数组名 = [];
//2. 使用数组字面量方式创建带初始值的数组
var 数组名 = [‘小白’,‘小黑’,‘大黄’,‘瑞奇’];- 数组的字面量是方括号 [ ]
声明数组并赋值称为数组的初始化
这种字面量方式也是我们以后最多使用的方式
- 数组的字面量是方括号 [ ]
-
数组中可以存放任意类型的数据,例如字符串,数字,布尔值等。
var arrStus = [‘小白’,12,true,28.9]; -
数组的索引
- // 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);
- // 定义数组
-
数组的长度
- 数组名.length
-
数组中新增元素
-
通过修改 length 长度新增数组元素
- var arr = [‘red’, ‘green’, ‘blue’, ‘pink’];
arr.length = 7;
console.log(arr);
console.log(arr[4]);
console.log(arr[5]);
console.log(arr[6]);
- var arr = [‘red’, ‘green’, ‘blue’, ‘pink’];
-
通过修改数组索引新增数组元素
- var arr = [‘red’, ‘green’, ‘blue’, ‘pink’];
arr[4] = ‘hotpink’;
console.log(arr);
- var arr = [‘red’, ‘green’, ‘blue’, ‘pink’];
-
-
-
-
typeof 可用来获取检测变量的数据类型
var num = 18;
console.log(typeof num) // 结果 number- null 类型是object
- 字面量
字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。 数字字面量:8, 9, 10
字符串字面量:‘黑马程序员’, “大前端” 布尔字面量:true,false
-
数据类型转换
-
toString()
- var a = 1 ; a.toString()
-
String
- 强制转换String(a)
-
三种转换方式,我们更喜欢用第三种加号拼接字符串转换方式, 这一种方式也称之为隐式转换。
-
数字转换
- 浮点数也是属于number类型
-
转换为布尔型
- 代表空、否定的值会被转换为 false ,如 ‘’、0、NaN、null、undefined
其余值都会被转换为 true
console.log(Boolean(’’)); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(‘小白’)); // true
console.log(Boolean(12)); // true
- 代表空、否定的值会被转换为 false ,如 ‘’、0、NaN、null、undefined
-
-
-
-
运算符
-
表达式
- 表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
简单理解:是由数字、运算符、变量等组成的式子
表达式最终都会有一个结果,返回给我们,我们成为返回值
- 表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
-
算数运算符
- % 返回除法的余数 9%2=1
- 浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。
var result = 0.1 + 0.2; // 结果不是 0.3,而是:0.30000000000000004
console.log(0.07 * 100); // 结果不是 7, 而是:7.000000000000001 - 所以:不要直接判断两个浮点数是否相等 !
-
递增和递减运算符
-
如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减( – )运算符来完成。
-
递增和递减运算符必须和变量配合使用。
-
前置递增运算符
- 使用口诀:先自加,后运算
var num = 10;
alert(++num + 10); // 21
- 使用口诀:先自加,后运算
-
后置递增运算符
- 使用口诀:先运算,后自加
var num = 10;
alert(10 + num++); // 20
- 使用口诀:先运算,后自加
-
开发时,大多使用后置递增/减,并且代码独占一行,例如:num++; 或者 num–;
-
-
比较运算符
-
等于 ==
- 只要值相等
- console.log(18 == ‘18’);
-
全等
- 要两边数据类型和值相等
- console.log(18 === ‘18’);
-
-
逻辑运算符
-
概念:逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。后面开发中经常用于多个条件的判断
-
&& 等于 and
- 两边都是 true才返回 true,否则返回 false
-
|| 等于 or
- 只要有一边true返回ture
-
! 等于 not
- 对条件取反
-
短路运算(逻辑中断)
- 短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;
- 逻辑与 语法: 表达式1 && 表达式2 如果第一个表达式的值为真,则返回表达式2 如果第一个表达式的值为假,则返回表达式1
console.log( 123 && 456 ); // 456
console.log( 0 && 456 ); // 0
console.log( 123 && 456&& 789 ); // 789
-
逻辑中断(短路操作)
- 逻辑或 语法: 表达式1 || 表达式2 如果第一个表达式的值为真,则返回表达式1 如果第一个表达式的值为假,则返回表达式2
console.log( 123 || 456 ); // 123
console.log( 0 || 456 ); // 456
console.log( 123 || 456 || 789 ); // 123
- 逻辑或 语法: 表达式1 || 表达式2 如果第一个表达式的值为真,则返回表达式1 如果第一个表达式的值为假,则返回表达式2
-
-
赋值运算符
- var age = 10;
age += 5; // 相当于 age = age + 5;
age -= 5; // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;
- var age = 10;
-
运算符优先级
- 一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高
- 一元运算符里面的逻辑非优先级很高
-
-
流程控制
-
顺序结构
- 代码的先后顺序,依次执行
-
分支结构
-
if 语句
-
- 语法结构
// 条件成立执行代码,否则什么也不做
if (条件表达式) {
// 条件成立执行的代码语句
}
- 语法结构
-
-
if else语句(双分支语句)
-
- 语法结构
// 条件成立 执行 if 里面代码,否则执行else 里面的代码
if (条件表达式) {
// [如果] 条件成立执行的代码
} else {
// [否则] 执行的代码
}
- 语法结构
-
-
if else if 语句(多分支语句)
- // 适合于检查多重条件。
if (条件表达式1) {
语句1;
} else if (条件表达式2) {
语句2;
} else if (条件表达式3) {
语句3;
…
} else {
// 上述条件都不成立执行此处代码
}
- // 适合于检查多重条件。
-
三元表达式
-
- 语法结构
表达式1 ? 表达式2 : 表达式3;
- 表达式1为真,返回表达式2,为假返回表达式3
- 语法结构
-
简单理解: 就类似于 if else (双分支) 的简写
-
-
分支流程控制 switch 语句
- switch( 表达式 ){
case value1:
// 表达式 等于 value1 时要执行的代码
break;
case value2:
// 表达式 等于 value2 时要执行的代码
break;
default:
// 表达式 不等于任何一个 value 时要执行的代码
} - 没有break会执行从匹配的case开始的代码
- switch 表达式的值会与结构中的 case 的值做比较
- 在匹配全等(===)
- 与if lese if 优势,switch 用于比较确定值,比如一个变量的值,if用于范围
- switch 条件判断成功后,就直接去执行,而if有几次条件就会判断几次
- switch使用分支较多,if else 适用分支少的时候
- switch( 表达式 ){
-
-
循环结构
-
for 循环
- 1 语法结构
for 循环主要用于把某些代码循环若干次,通常跟计数有关系。其语法结构如下:
for(初始化变量; 条件表达式; 操作表达式 ){
//循环体
}
- 1 语法结构
-
while循环
- while (条件表达式) {
// 循环体代码
} - 可以判断条件复杂的表达式
- while (条件表达式) {
-
do while 循环
- do {
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式); - 现执行一次,再判断是否执行
- 会少执行一次循环体
- do {
-
continue 关键字用于立即跳出本次循环,继续下一次循环
-
break 关键字用于立即跳出整个循环(循环结束)
-
-
-
函数
-
函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
-
函数声明
-
自定义函数
- 声明函数
// 声明函数
function 函数名() {
//函数体代码
} - function 是声明函数的关键字,必须小写
- 由于函数一般是为了实现某个功能才定义的, 所以通常我们将函数名命名为动词,比如 getSum
- 声明函数
-
匿名函数
- // 这是函数表达式写法,匿名函数后面跟分号结束
var fn = function(){…};
// 调用的方式,函数调用必须写到函数体下面
fn() - 因为函数没有名字,所以也被称为匿名函数
- 这个fn 里面存储的是一个函数
- 函数表达式方式原理跟声明变量方式是一致的
- 函数调用的代码必须写到函数体后面
- // 这是函数表达式写法,匿名函数后面跟分号结束
-
-
函数调用
- // 调用函数
函数名(); // 通过调用函数名来执行函数体代码
- // 调用函数
-
函数封装
- 函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口
-
函数的参数
-
在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为形参
- function 函数名(形参1, 形参2 , 形参3…) { // 可以定义任意多的参数,用逗号分隔
// 函数体
}
- function 函数名(形参1, 形参2 , 形参3…) { // 可以定义任意多的参数,用逗号分隔
-
同样也需要传递相应的参数,这些参数被称为实参。
-
函数形参和实参个数不匹配问题
- function sum(num1, num2) {
console.log(num1 + num2);
}
sum(100, 200); // 形参和实参个数相等,输出正确结果
- function sum(num1, num2) {
-
-
sum(200); // 实参个数少于形参,多的形参定义为undefined,结果为NaN
- sum(100, 400, 500, 700); // 实参个数多于形参,只取到形参的个数
- 函数的返回值
- // 声明函数
function 函数名(){
…
return 需要返回的值;
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值
- 在使用 return 语句时,函数会停止执行,并返回指定的值
如果函数没有 return ,返回的值是 undefined
- return 只能返回一个值。如果用逗号隔开多个值,以最后一个为准。
- arguments的使用
- 当我们不确定有多少个参数传递的时候,可以用 arguments 来获取
- 所有函数都内置了一个 arguments 对象,arguments 对象中存储了传递的所有实参
- arguments展示形式是一个伪数组,因此可以进行遍历。伪数组具有以下特点:
具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法
- function maxValue() {
var max = arguments[0];
for (var i = 0; i < arguments.length; i++) {
if (max < arguments[i]) {
max = arguments[i];
}
}
return max;
}
console.log(maxValue(2, 4, 5, 9));
console.log(maxValue(12, 4, 9));
- 函数可以调用另外一个函数
- 支持函数式编程
- 立即执行函数
- (function() {})() 或者 (function(){}())
- 主要作用: 创建一个独立的作用域。 避免了命名冲突问题
- 动画函数
- 核心原理:通过定时器 setInterval() 不断移动盒子位置。
- 实现步骤:
-
获得盒子当前位置
-
让盒子在当前位置加上1个移动距离
-
利用定时器不断重复这个操作
-
加一个结束定时器的条件
-
注意此元素需要添加定位,才能使用element.style.left
-
移动盒子前提,盒子是可以使用top和left属性,也就是绝对定位和固定定位
-
动画函数简单封装
注意函数需要传递2个参数,动画对象和移动到的距离。 -
动画函数给不同元素记录不同定时器
如果多个元素都使用这个动画函数,每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器(自
己专门用自己的定时器)。
核心原理:利用 JS 是一门动态语言,可以很方便的给当前对象添加属性。 -
缓动效果原理
-
步骤
- 缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来
- 思路:
-
- 让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。
-
- 核心算法: (目标值 - 现在的位置 ) / 10 做为每次移动的距离 步长
-
- 停止的条件是: 让当前盒子位置等于目标位置就停止定时器
-
- 注意步长值需要取整
-
动画函数多个目标值之间移动
- 可以让动画函数从 800 移动到 500。
当我们点击按钮时候,判断步长是正值还是负值
- 可以让动画函数从 800 移动到 500。
-
-
-
-
如果是正值,则步长 往大了取整
-
如果是负值,则步长 向小了取整
-
无缝滚动
-
③ 图片无缝滚动原理
④ 把ul 第一个li 复制一份,放到ul 的最后面
⑤ 当图片滚动到克隆的最后一张图片时, 让ul 快速的、不做动画的跳到最左侧: left 为0 ⑥ 同时num 赋值为0,可以从新开始滚动图片了 -
节流阀
-
子主题 1
- 防止轮播图按钮连续点击造成播放过快。
- 节流阀目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发。
- 核心实现思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数。
- 开始设置一个变量 var flag = true;
- If(flag) {flag = false; do something} 关闭水龙头
- 利用回调函数 动画执行完毕, flag = true 打开水龙头
-
-
-
-
作用域
-
一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这
个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。 -
JavaScript(es6前)中的作用域有两种:
-
块作用域由 { } 包括。
-
全局作用域
- 作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。
- 在函数外部定义的变量,全局变量,任何地方都可调用
- 特殊情况下,在函数内不使用 var 声明的变量也是全局变量(不建议使用)
- 全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存
-
局部作用域
- 作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。
- 在函数内部定义的变量,局部变量,只能函数内部使用
- 函数的形参实际上就是局部变量
- 只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被
销毁,因此更节省内存空间
-
-
JS 没有块级作用域(es6之前)
- 在其他编程语言中(如 java、c#等),在 if 语句、循环语句中创建的变量,仅仅只能在本 if 语句、本循
环语句中使用 - Js中没有块级作用域(在ES6之前)。
- if(true){
var num = 123;
console.log(123); //123
}
console.log(123); //123
- 在其他编程语言中(如 java、c#等),在 if 语句、循环语句中创建的变量,仅仅只能在本 if 语句、本循
-
作用域链
- 只要是代码,就至少有一个作用域
- 如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
- 根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称 作作用域链
- function f1() {
var num = 123;
function f2() {
console.log( num );
}
f2();
}
var num = 456;
f1(); - 采取就近原则的方式来查找变量最终的值。
-
-
预解析
-
在当前作用域下, JS 代码执行之前,浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义
-
学习预解析能够让我们知道为什么在变量声明之前
访问变量的值是 undefined,为什么在函数声明之前就可以调用函数。 -
变量预解析(变量提升)
-
变量的声明会被提升到当前作用域的最上面,变量的赋值不会提升。
- console.log(num); // 结果是多少?
var num = 10; // ?
- console.log(num); // 结果是多少?
-
-
函数预解析(函数提升)
- 函数的声明会被提升到当前作用域的最上面,但是不会调用函数。
-
-
对象Object
-
无序的
-
在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。
-
对象是由属性和方法组成的。
- 属性:事物的特征,在对象中用属性来表示(常用名词)
方法:事物的行为,在对象中用方法来表示(常用动词)
- 属性:事物的特征,在对象中用属性来表示(常用名词)
-
分类
-
自定义对象
-
内置对象
-
Math对象
-
Math 对象不是构造函数,它具有数学常数和函数的属性和方法
-
Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值 -
随机数方法 random()
- random() 方法可以随机返回一个小数,其取值范围是 [0,1),左闭右开 0 <= x < 1
-
-
日期对象
-
Date 对象和 Math 对象不一样,他是一个构造函数,所以我们需要实例化后才能使用
Date 实例用来处理日期和时间 -
- 获取当前时间必须实例化
var now = new Date();
console.log(now);
- 获取当前时间必须实例化
-
Date() 构造函数的参数
如果括号里面有时间,就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’,可以写成new Date(‘2019-5-1’)
或者 new Date(‘2019/5/1’) -
方法
-
获取总毫秒数
- // 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf())
console.log(date.getTime())
// 2. 简单写可以这么做
var now = + new Date();
// 3. HTML5中提供的方法,有兼容性问题
var now = Date.now();
- // 实例化Date对象
-
-
数组对象
-
instanceof 运算符,可以判断一个对象是否属于某种类型
Array.isArray()用于判断一个对象是否为数组,isArray() 是 HTML5 中提供的方法- var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false
- var arr = [1, 23];
-
添加删除数组元素的方法
-
数组排序
-
reverse
- 无参数,倒序数组,返回新数据组
-
sort
- var arr = [1, 64, 9, 6];
arr.sort(function(a, b) {
return b - a; // 降a序
// return a - b; // 升序
});
console.log(arr);
- var arr = [1, 64, 9, 6];
-
-
数组索引
- indexOf() 返回第一个符合的索引
- lastIndexOf() 返回最后一个符合的索引
-
数组转字符串
-
课下查询
-
-
字符串对象
-
基本包装类型
为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。
基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。 -
// 下面代码有什么问题?
var str = ‘andy’;
console.log(str.length);- 按道理基本数据类型是没有属性和方法的,而对象才有属性和方法,因为 js 会把基本数据类型包装为复杂数据类型,其执行过程如下 :
// 1. 生成临时变量,把简单类型包装为复杂数据类型
var temp = new String(‘andy’);
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null; - js 会把基本数据类型包装为复杂数据类型
- 按道理基本数据类型是没有属性和方法的,而对象才有属性和方法,因为 js 会把基本数据类型包装为复杂数据类型,其执行过程如下 :
-
字符串的不可变
- 指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。
- var str = ‘abc’;
str = ‘hello’;
// 当重新给 str 赋值的时候,常量’abc’不会被修改,依然在内存中
// 重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变
// 由于字符串的不可变,在大量拼接字符串的时候会有效率问题
var str = ‘’;
for (var i = 0; i < 100000; i++) {
str += i;
}
console.log(str); // 这个结果需要花费大量时间来显示,因为需要不断的开辟新的空间
-
查找
- indexOf()
- lastIndexOf()
-
根据位置返回字符串
-
字符串方法
-
replace() 方法用于在字符串中用一些字符替换另一些字符。
其使用格式如下:
replace(被替换的字符串, 要替换为的字符串); -
split()方法用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。
例如下面代码:
var str = ‘a,b,c,d’;
console.log(str.split(’,’)); // 返回的是一个数组 [a, b, c, d] -
toUpperCase() //转换大写
toLowerCase() //转换小写
-
-
-
浏览器对象
- 浏览器对象属于我们JS 独有的, 我们JS API 讲解
-
-
创建对象的三种方式
-
利用字面量创建对象
- { } 里面采取键值对的形式表示
键:相当于属性名
值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等) - var star = {
name : ‘pink’,
age : 18,
sex : ‘男’,
sayHi : function(){
alert(‘大家好啊~’);
}
};
- { } 里面采取键值对的形式表示
-
利用 new Object 创建对象
- 跟我们前面学的 new Array() 原理一致
- var andy = new Obect();
andy.name = ‘pink’;
andy.age = 18;
andy.sex = ‘男’;
andy.sayHi = function(){
alert(‘大家好啊~’);
}
-
利用构造函数创建对象
-
构造函数 :是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面
-
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.sayHi = function() {
alert(‘我的名字叫:’ + this.name + ‘,年龄:’ + this.age + ‘,性别:’ + this.sex);
} }
var bigbai = new Person(‘大白’, 100, ‘男’);
var smallbai = new Person(‘小白’, 21, ‘男’);
console.log(bigbai.name);
console.log(smallbai.name); -
注意
-
- 构造函数约定首字母大写。
-
- 函数内的属性和方法前面需要添加 this ,表示当前对象的属性和方法。
-
- 构造函数中不需要 return 返回结果。
-
- 当我们创建对象的时候,必须用 new 来调用构造函数。
-
-
new 在执行时会做四件事情:
-
- 在内存中创建一个新的空对象。
-
- 让 this 指向这个新的对象。
-
- 执行构造函数里面的代码,给这个新对象添加属性和方法。
-
- 返回这个新对象(所以构造函数里面不需要return)。
-
-
-
-
对象的调用
- 对象里面的属性调用 : 对象.属性名 console.log(star.name) // 调用名字属性
- 对象里面属性的另一种调用方式 : 对象[‘属性名’],必须加引号 console.log(star[‘name’]) // 调用名字属性
- 对象里面的方法调用:对象.方法名() ,注意这个方法名字后面一定加括号
-
遍历对象属性
-
其语法如下:
for (变量 in 对象名字) {
// 在此执行代码
}- for (var k in obj) {
console.log(k); // 这里的 k 是属性名
console.log(obj[k]); // 这里的 obj[k] 是属性值
}
- for (var k in obj) {
-
-
Web API
Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。
- API 是为我们程序员提供的一个接口,帮助我们实现某种功能,我们会使用就可以了,不必纠结内部如何实现
- Web API 主要是针对于浏览器提供的接口,主要针对于浏览器做交互效果。
- Web API 一般都有输入和输出(函数的传参和返回值),Web API 很多都是方法(函数)
- 学习 Web API 可以结合前面学习内置对象方法的思路学习
-
DOM ——文档对象模
-
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。
通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等) -
DOM 树
-
获取页面元素
-
根据 ID 获取
- 语法:document.getElementById(id)
作用:根据ID获取元素对象
参数:id值,区分大小写的字符串
返回值:元素对象 或 null - 使用 console.dir() 可以打印我们获取的元素对象,更好的查看对象里面的属性和方法。
- 语法:document.getElementById(id)
-
根据标签名获取
-
语法:document.getElementsByTagName(‘标签名’) 或者 element.getElementsByTagName(‘标签名’)
作用:根据标签名获取元素对象
参数:标签名
返回值:元素对象集合(伪数组,数组元素是元素对象)
- 知否知否,应是等你好久11
- 知否知否,应是等你好久22
- 知否知否,应是等你好久33
- 知否知否,应是等你好久44
- 知否知否,应是等你好久55
- 生僻字
- 生僻字
- 生僻字
- 生僻字
- 生僻字
-
- 因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历。
-
注意:getElementsByTagName()获取到是动态集合,即:当页面增加了标签,这个集合中也就增加了元素。
-
- 如果获取不到元素,则返回为空的伪数组(因为获取不到对象)
-
还可以获取某个元素(父元素)内部所有指定标签名的子元素.
element.getElementsByTagName(‘标签名’);
注意:父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。
-
-
通过 HTML5 新增的方法获取
-
- document.getElementsByClassName(‘类名’);// 根据类名返回元素对象集合
-
-
-
-
document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象
-
document.querySelectorAll(‘选择器’); // 根据指定选择器返回
-
注意:
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(’#nav’);-
特殊元素获取
- 获取body元素
-
-
-
doucumnet.body // 返回body元素对象
- 获取html元素
-
document.documentElement // 返回html元素对象
-
事件
-
JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为。
简单理解: 触发— 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件,例如,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。 -
事件三要素
-
- 事件源 (谁)
-
-
-
-
事件类型 (什么事件)
-
事件处理程序 (做啥)
<body> <button id="btn">唐伯虎</button> <script> // 点击一个按钮,弹出对话框 // 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素 //(1) 事件源 事件被触发的对象 谁 按钮 var btn = document.getElementById('btn'); //(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下 //(3) 事件处理程序 通过一个函数赋值的方式 完成 btn.onclick = function() { alert('点秋香'); } </script> </body>
-
事件高级
-
注册事件或者绑定事件
- 传统注册方式 方法监听注册方式
-
利用 on 开头的事件 onclick
<button οnclick=“alert(‘hi~’)”>
btn.onclick = function() {}
特点: 注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数,最
后注册的处理函数将会覆盖前面注册的处理函数- 传统方式绑定多个实践会覆盖前面的事件处理函数 - 方法监听注册方式
w3c 标准 推荐方式
addEventListener() 它是一个方法
IE9 之前的 IE 不支持此方法,可使attachEvent() 代替
特点:同一个元素同一个事件可以注册多个监听器
按注册顺序依次执行- 事件监听 button>传统注册事件</button> <button>方法监听注册事件</button> <button>ie9 attachEvent</button> <script> var btns = document.querySelectorAll('button'); // 1. 传统方式注册事件 btns[0].onclick = function() { alert('hi'); } btns[0].onclick = function() { alert('hao a u'); } // 2. 事件侦听注册事件 addEventListener // (1) 里面的事件类型是字符串 必定加引号 而且不带on // (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序) btns[1].addEventListener('click', function() { alert(22); }) btns[1].addEventListener('click', function() { alert(33); }) // 3. attachEvent ie9以前的版本支持 btns[2].attachEvent('onclick', function() { alert(11); }) - #### addEventListener()事件监听(IE9以后支持)
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lc9jn8FR-1610384771431)(images/1551165364122.png)]
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数
- 该方法接收三个参数:
type:事件类型字符串,比如 click 、mouseover ,注意这里不要带 on
listener:事件处理函数,事件发生时,会调用该监听函数
useCapture:可选参数,是一个布尔值,默认是 false。学完 DOM 事件流后,我们再进一步学习
- attachEvent 事件监听方式
eventTarget.attachEvent(eventNameWithOn, callback)
eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget(目标对象) 上,当该对象触
发指定的事件时,指定的回调函数就会被执行。
- 该方法接收两个参数:
eventNameWithOn:事件类型字符串,比如 onclick 、onmouseover ,这里要带 on
callback: 事件处理函数,当目标触发事件时回调函数被调用
注意:IE8 及早期版本支持
- 注册事件兼容性解决方案
- function addEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持 addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.attachEvent) {
element.attachEvent(‘on’ + eventName, fn);
} else {
// 相当于 element.onclick = fn;
element[‘on’ + eventName] = fn;
}
兼容性处理的原则: 首先照顾大多数浏览器,再处理特殊浏览器
- 删除事件的方式
- 1. 传统注册方式
eventTarget.onclick = null;
- 2. 方法监听注册方式
① eventTarget.removeEventListener(type, listener[, useCapture]);
② eventTarget.detachEvent(eventNameWithOn, callback);
- 删除事件兼容性解决方案
- function removeEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持 removeEventListener 方法
if (element.removeEventListener) {
element.removeEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.detachEvent) {
element.detachEvent(‘on’ + eventName, fn);
} else {
element[‘on’ + eventName] = null;
}
- DOM事件流
- 事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流。
比如我们给一个div 注册了点击事件:
DOM 事件流分为3个阶段:
-
捕获阶段
-
当前目标阶段
-
冒泡阶段
-
事件冒泡: IE 最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点的过程。
-
事件捕获: 网景最早提出,由 DOM 最顶层节点开始,然后逐级向下传播到到最具体的元素接收的过程。
-
注意
-
- JS 代码中只能执行捕获或者冒泡其中的一个阶段。
-
- onclick 和 attachEvent 只能得到冒泡阶段。
-
- addEventListener(type, listener[, useCapture])第三个参数如果是 true,表示在事件捕获阶段调用事件处理程序;如果是 false(不写默认就是false),表示在事件冒泡阶段调用事件处理
程序
- addEventListener(type, listener[, useCapture])第三个参数如果是 true,表示在事件捕获阶段调用事件处理程序;如果是 false(不写默认就是false),表示在事件冒泡阶段调用事件处理
-
- 实际开发中我们很少使用事件捕获,我们更关注事件冒泡。
-
- 有些事件是没有冒泡的,比如 onblur、onfocus、onmouseenter、onmouseleave
-
- 事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙的做某些事件,我们后面讲解。
-
-
事件对象
-
eventTarget.onclick = function(event) {}
eventTarget.addEventListener(‘click’, function(event) {})
// 这个 event 就是事件对象,我们还喜欢的写成 e 或者 evt- 这个 event 是个形参,系统帮我们设定为事件对象,不需要传递实参过去。
当我们注册事件时, event 对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数)
- 这个 event 是个形参,系统帮我们设定为事件对象,不需要传递实参过去。
-
简单理解:事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event,它有很多属性和方法。
- 比如:
-
-
-
-
-
谁绑定了这个事件。
-
鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。
-
键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。
-
事件对象的兼容性方案
- 事件对象本身的获取存在兼容问题:
-
-
标准浏览器中是浏览器给方法传递的参数,只需要定义形参 e 就可以获取到。
-
在 IE6~8 中,浏览器不会给方法传递参数,如果需要的话,需要到 window.event 中获取查找。
解决:
e = e || window.event;- <div>123</div>
- 事件对象的常见属性和方法 - - this 是事件绑定的元素(绑定这个事件处理函数元素) 。
-
e.target 是事件触发的元素。
- 常情况下terget 和 this是一致的,
但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行),
这时候this指向的是父元素,因为它是绑定事件的元素对象,
而target指向的是子元素,因为他是触发事件的那个具体元素对象。
- 阻止默认行为<a href="http://www.baidu">百度</a> <script> // 2. 阻止默认行为 让链接不跳转 var a = document.querySelector('a'); a.addEventListener('click', function(e) { e.preventDefault(); // dom 标准写法 }); // 3. 传统的注册方式 a.onclick = function(e) { // 普通浏览器 e.preventDefault(); 方法 e.preventDefault(); // 低版本浏览器 ie678 returnValue 属性 e.returnValue = false; // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 return false; } </script> - 阻止事件冒泡 - 标准写法:利用事件对象里面的 stopPropagation()方法
e.stopPropagation()
- 非标准写法:IE 6-8 利用事件对象 cancelBubble 属性
e.cancelBubble = true;
- 阻止事件冒泡的兼容性解决方案- if(e && e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}- 事件委托(代理、委派) - 事件委托也称为事件代理, 在 jQuery 里面称为事件委派。 - 事件委托的原理
不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
以上案例:给 ul 注册点击事件,然后利用事件对象的 target 来找到当前点击的 li,因为点击 li,事件会冒泡到 ul 上,
ul 有注册事件,就会触发事件监听器。
- 事件委托的作用
我们只操作了一次 DOM ,提高了程序的性能。- 鼠标对象 - 1.禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
2.禁止鼠标选中(selectstart 开始选中)
document.addEventListener(‘contextmenu’, function(e) {
e.preventDefault();
})
document.addEventListener(‘selectstart’, function(e) {
e.preventDefault();
})
- 属性方法- - mouseenter 和mouseover的区别
mouseenter 鼠标事件
当鼠标移动到元素上时就会触发 mouseenter 事件
类似 mouseover,它们两者之间的差别是
mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。 mouseenter 只会经过自身盒子触发
之所以这样,就是因为mouseenter不会冒泡
跟mouseenter搭配 鼠标离开 mouseleave 同样不会冒泡- 键盘事件 - 注意: onkeydown 和 onkeyup 不区分字母大小写,onkeypress 区分字母大小写。 - 键盘事件对象 - // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键 if (e.keyCode === 65) { alert('您按下的a键'); - - 触屏事件 - 动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动
端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。
- 触摸事件对象(TouchEvent)- TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多
个触点,使开发者可以检测触点的移动,触点的增加和减少,等等
touchstart、touchmove、touchend 三个事件都会各自有事件对象。
触摸事件对象重点我们看三个常见对象列表- 移动端拖动元素 - 1. touchstart、touchmove、touchend 可以实现拖动元素
-
但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY
-
移动端拖动的原理: 手指移动中,计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
-
手指移动的距离: 手指滑动中的位置 减去 手指刚开始触摸的位置
拖动元素三步曲:
(1) 触摸元素 touchstart: 获取手指初始坐标,同时获得盒子原来的位置
(2) 移动手指 touchmove: 计算手指的滑动距离,并且移动盒子
(3) 离开手指 touchend:
注意: 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();- 移动端 click 事件会有 300ms 的延时,原因是移动端屏幕双击会缩放(double tap to zoom) 页面。 - 解决方案:
1. 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。
- 2.利用touch事件自己封装这个事件解决300ms 延迟。
原理就是:
- 当我们手指触摸屏幕,记录当前触摸时间
- 当我们手指离开屏幕, 用离开的时间减去触摸的时间
- 如果时间小于150ms,并且没有滑动过屏幕, 那么我们就定义为点击
代码如下:
- //封装tap,解决click 300ms 延时
function tap (obj, callback) {
var isMove = false;
var startTime = 0; // 记录触摸时候的时间变量
obj.addEventListener(‘touchstart’, function (e) {
startTime = Date.now(); // 记录触摸时间
});
obj.addEventListener(‘touchmove’, function (e) {
isMove = true; // 看看是否有滑动,有滑动算拖拽,不算点击
});
obj.addEventListener(‘touchend’, function (e) {
if (!isMove && (Date.now() - startTime) < 150) { // 如果手指触摸和离开时间小于150ms 算点击
callback && callback(); // 执行回调函数
}
isMove = false; // 取反 重置
startTime = 0;
});
}
//调用
tap(div, function(){ // 执行代码 });
- load 事件
- 下面三种情况都会刷新页面都会触发 load 事件。
-
a标签的超链接
-
F5或者刷新按钮(强制刷新)
-
前进后退按钮
但是 火狐中,有个特点,有个“往返缓存”,这个缓存中不仅保存着页面数据,还保存了DOM和JavaScript的
状态;实际上是将整个页面都保存在了内存里。
所以此时后退按钮不能刷新页面。
此时可以使用 pageshow事件来触发。,这个事件在页面显示时触发,无论页面是否来自缓存。在重新加载页
面中,pageshow会在load事件触发后触发;根据事件对象中的persisted来判断是否是缓存中的页面触发的
pageshow事件,注意这个事件给window添加。-
操作元素
-
JavaScript 的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内
容 、属性等。注意以下都是属性 -
改变元素内容
-
element.innerText
从起始位置到终止位置的内容,- 但它去除 html 标签, 同时空格和换行也会去掉
-
element.innerHTML
起始位置到终止位置的全部内容,- 包括 html 标签,同时保留空格和换行
-
-
常用元素的属性操作
-
- innerText、innerHTML 改变元素内容
-
-
-
-
src、href
-
id、alt、title
-
class属性特殊,className才能操作
-
表单元素的属性操作
-
利用 DOM 可以操作如下表单元素的属性:
type、value、checked、selected、disabled -
classList 属性
- classList属性是HTML5新增的一个属性,返回元素的类名。但是ie10以上版本支持。
-
-
-
该属性用于在元素中添加,移除及切换 CSS 类。有以下方法
- 添加类:
element.classList.add(’类名’);
- 移除类:
element.classList.remove(’类名’);
- 切换类:
element.classList.toggle(’类名’);
- 轻易做到开关灯案例
- 样式属性操作
- 我们可以通过 JS 修改元素的大小、颜色、位置等样式。
-
element.style 行内样式操作
-
element.className 类名样式操作
- 注意:
1.JS 里面的样式采取驼峰命名法 比如 fontSize、backgroundColor
2.JS 修改 style 样式操作,产生的是行内样式,CSS 权重比较高-
通过操作className属性
-
排他操作
- 子主题 2
-
- 所有元素全部清除样式(干掉其他人)
-
- 注意:
-
给当前元素设置样式 (留下我自己)
-
注意顺序不能颠倒,首先干掉其他人,再设置自己
button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> // 1. 获取所有按钮元素 var btns = document.getElementsByTagName('button'); // btns得到的是伪数组 里面的每一个元素 btns[i] for (var i = 0; i < btns.length; i++) { btns[i].onclick = function() { // (1) 我们先把所有的按钮背景颜色去掉 干掉所有人 for (var i = 0; i < btns.length; i++) { btns[i].style.backgroundColor = ''; } // (2) 然后才让当前的元素背景颜色为pink 留下我自己 this.style.backgroundColor = 'pink'; } } </script>
-
属性值
-
- 获取属性值
- element.属性 获取属性值。
-
element.getAttribute(‘属性’);
- 区别:
element.属性 获取内置属性值(元素本身自带的属性)
element.getAttribute(‘属性’); 主要获得自定义的属性 (标准) 我们程序员自定义的属性- 2. 设置属性值 - element.属性 = ‘值’ 设置内置属性值。
element.setAttribute(‘属性’, ‘值’);
- 区别:
element.属性 设置内置属性值 element.setAttribute(‘属性’); 主要设置自定义的属性 (标准)
- 3. 移出属性 - element.removeAttribute('属性'); - H5自定义属性 - 自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。 - 有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性 - H5规定自定义属性data-开头做为属性名并且赋值。 - 比如 <div data-index=“1”></div>
或者使用 JS 设置
element.setAttribute(‘data-index’, 2)- 获取H5自定义属性 - 1. 兼容性获取 element.getAttribute(‘data-index’);
-
-
H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持
- <div getTime="20" data-index="2" data-list-name="andy"></div>
-
操作节点
-
网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示。都可以修改创建任何一个节点。
-
nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3 (文本节点包含文字、空格、换行等)
- 我们在实际开发中,节点操作主要操作的是元素节点
-
节点层级
-
利用 DOM 树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。
-
父级节点
- 父级节点
-
-
node.parentNode
parentNode 属性可返回某节点的父节点,注意是最近的一个父节点
如果指定的节点没有父节点则返回 null- 子节点 - 所有子节点 - 1. parentNode.childNodes(标准)
parentNode.childNodes 返回包含指定节点的子节点的集合,该集合为即时更新的集合。
- 注意:返回值里面包含了所有的子节点,包括元素节点,文本节点等。
如果只想要获得里面的元素节点,则需要专门处理。 所以我们一般不提倡使用childNodes- 子节点 - 2. parentNode.children(非标准)
parentNode.children 是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返
回 (这个是我们重点掌握的)
- 虽然children 是一个非标准,但是得到了各个浏览器的支持,因此我们可以放心使用
- parentNode.firstChild
firstChild 返回第一个子节点,找不到则返回null。同样,也是包含所有的节点。
- parentNode.lastChild
lastChild 返回最后一个子节点,找不到则返回null。同样,也是包含所有的节点。
- parentNode.firstElementChild
firstElementChild 返回第一个子元素节点,找不到则返回null。
- parentNode.lastElementChild
lastElementChild 返回最后一个子元素节点,找不到则返回null。- 兄弟节点 - 1. node.nextSibling
nextSibling 返回当前元素的下一个兄弟元素节点,找不到则返回null。同样,也是包含所有的节点。
- 2. node.previousSibling
previousSibling 返回当前元素上一个兄弟元素节点,找不到则返回null。同样,也是包含所有的节点。
- 3. node.nextElementSibling
nextElementSibling 返回当前元素下一个兄弟元素节点,找不到则返回null。
- 4. node.previousElementSibling
previousElementSibling 返回当前元素上一个兄弟节点,找不到则返回null。- 创建节点 - document.createElement('tagName')
document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在,
是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。- 添加节点 - 1. node.appendChild(child)
node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的after 伪元素。
- 2. node.insertBefore(child, 指定元素)
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。- 删除节点 - node.removeChild(child)
node.removeChild() 方法从 DOM 中删除一个子节点,返回删除的节点。
- 复制节点 - node.cloneNode()
node.cloneNode() 方法返回调用该方法的节点的一个副本。
- 注意: -
-
如果括号参数为空或者为 false ,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。
-
如果括号参数为 true ,则是深度拷贝,会复制节点本身以及里面所有的子节点。
-
替换节点
-
parentNode.replaceChild(newChild, oldChild);
用指定的节点替换当前节点的一个子节点,并返回被替换掉的节点。-
总结
-
创建元素总结
- document.write()
innerHTML
document.createElement()
区别
- document.write()
-
-
-
-
-
document.write 是直接将内容写入页面的内容流,会导致页面全部重绘
-
innerHTML 是将内容写入某个 DOM 节点,不会导致页面全部重绘
-
innerHTML 复制节点的时候,不会复制原先节点的事件,会存在内存泄露问题
-
如果页面创建元素很多,建议使用 innerHTML 因其效率更高(不要拼接字符串,采取数组形式拼接)
-
如果页面创建元素较少,建议使用 createElement()
总结:不同浏览器下,innerHTML 效率要比 creatElement 高- 元素偏移量 offset 系列 - offset 翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 - 获得元素距离带有定位父元素的位置
获得元素自身的大小(宽度高度) 注意: 返回的数值都不带单位
- 子主题 3- 元素可视区 client 系列 - client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列
的相关属性可以动态的得到该元素的边框大小、元素大小等。
- 属性方法- 子主题 1 - 元素 scroll 系列属性 - scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 - scrollheight 返回的是内容实际的高度,而clientheight 返回的是盒子不包含边框,超出的部分,不会显示 - 如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏
掉的高度,我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件
- 如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏
掉的高度,我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件
- ③ 页面被卷去的头部:可以通过window.pageYOffset 获得 如果是被卷去的左侧 window.pageXOffset
④ 注意,元素被卷去的头部是 element.scrollTop , 如果是页面被卷去的头部 则是 window.pageYOffset
⑤ 其实这个值 可以通过盒子的 offsetTop 可以得到,如果大于等于这个值,就可以让盒子固定定位了- 页面被卷去的头部兼容性解决方案
需要注意的是,页面被卷去的头部,有兼容性问题,因此被卷去的头部通常有如下几种写法:
-
声明了 DTD,使用 document.documentElement.scrollTop
-
未声明 DTD,使用 document.body.scrollTop
-
新方法 window.pageYOffset 和 window.pageXOffset,IE9 开始支持
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
使用的时候 getScroll().left
-
BOM ——浏览器对象模型
-
BOM (Browser Object Model,简称BOM) 是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行
互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。- BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
- 浏览器对象模型
把「浏览器」当做一个「对象」来看待
BOM 的顶级对象是 window
BOM 学习的是浏览器窗口交互的一些对象
BOM 是浏览器厂商在各自浏览器上定义的,兼容性较差
-
BOM 的构成
-
window 对象
-
- 它是 JS 访问浏览器窗口的一个接口。
-
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。在调用的时候可以省略 window,前面学习的对话框都属于 window 对象方法,如 alert()、prompt() 等。
-
注意:window下的一个特殊属性 window.name
-
window 对象的常见事件
-
窗口加载事件
window.onload = function(){}
或者
window.addEventListener(“load”,function(){});- window.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS
文件等), 就调用的处理函数。
注意:
- window.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS
-
-
-
-
-
有了 window.onload 就可以把 JS 代码写到页面元素的上方,因为 onload 是等页面内容全部加载完毕, 再去执行处理函数。
-
window.onload 传统注册事件方式 只能写一次,如果有多个,会以最后一个 window.onload 为准。
-
如果使用 addEventListener 则没有限制
-
窗口加载事件
document.addEventListener(‘DOMContentLoaded’,function(){})
DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。- 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现,必然影响用
户的体验,此时用 DOMContentLoaded 事件比较合适。
- 调整窗口大小事件
window.onresize = function(){}
window.addEventListener(“resize”,function(){});- window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
注意:
-
-
只要窗口大小发生像素变化,就会触发这个事件。
-
我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度
-
定时器
-
setTimeout()
- window.setTimeout(调用函数, [延迟的毫秒数]);
setTimeout() 方法用于设置一个定时器,该定时器在定时器到期后执行调用函数。
注意:
- window.setTimeout(调用函数, [延迟的毫秒数]);
-
-
-
window 可以省略。
-
这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
-
延迟的毫秒数省略默认是 0,如果写,必须是毫秒。
-
因为定时器可能有很多,所以我们经常给定时器赋值一个标识符
- setTimeout() 这个调用函数我们也称为回调函数 callback
普通函数是按照代码顺序直接调用。
而这个函数,需要等待时间,时间到了才去调用这个函数,因此称为回调函数。
简单理解: 回调,就是回头调用的意思。上一件事干完,再回头再调用这个函数。
以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的 函数也是回调函数
- 停止 setTimeout() 定时器
window.clearTimeout(timeoutID)
clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。
注意: -
window 可以省略。
-
里面的参数就是定时器的标识符 。
-
setInterval()
-
setInterval() 定时器
window.setInterval(回调函数, [间隔的毫秒数]);
setInterval() 方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。- 注意:
-
-
-
window 可以省略。
-
这个调用函数可以直接写函数,或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
-
间隔的毫秒数省略默认是 0,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数。
4.因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。 5. 第一次执行也是间隔毫秒数之后执行,之后每隔毫秒数就执行一次。- this指向问题 - this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象。 - 指向 - 1. 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window) - 2. 方法调用中谁调用this指向谁 - 3. 构造函数中this指向构造函数的实例 - location 对象 - window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL,并且可以用于解析 URL 。 因为
这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象。
- URL 的一般语法格式为:
protocol://host[:port]/path/[?query]#fragment
http://www.itcast/index.html?name=andy&age=18#link
- 属性- 重点记住: href 和 search href是整个url search是?XXXXXX部分。 - 方法 - - navigator 对象 - navigator 对象包含有关浏览器的信息,它有很多属性,我们最常用的是 userAgent,该属性可以返回由客
户机发送服务器的 user-agent 头部的值
- 下列前端代码可知道是那些用户登陆的if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = “”; //手机
} else {
window.location.href = “”; //电脑
}- history对象 - window对象给我们提供了一个 history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。 - - JS 执行机制 - js语言一大特点就是单线程,同一事件只能执行一件事 - 单线程导致的问题就是后面的任务等待前面任务完成,如果前面任务很耗时(比如读取网络数据),后面任务不得不一直等待!!
为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程,但是子线程完全受主线程控制。于是,JS 中出现了同步任务和异步任务。
- 同步任务
- 同步任务都在主线程上执行,形成一个执行栈
- 异步任务
- JS 的异步是通过回调函数实现的。
一般而言,异步任务有以下三种类型: 1、普通事件,如 click、resize 等 2、资源加载,如 load、error 等 3、定时器,包括 setInterval、setTimeout 等
异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)。
- 子主题 1
- 不进入主线程、而进入”任务队列”的任务,当主线程中的任务运行完了,才会从”任务队列”取出异步任务放入主线程执行。
- 事件循环
- 1. 先执行执行栈中的同步任务。 2. 异步任务(回调函数)放入任务队列中。
- 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行
- 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop)
jQuery
JavaScript 库
-
即 library在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show等
-
对原生js代码进行了封装
-
常见的JavaScript 库 jQuery
Prototype
YUI
Dojo
Ext JS
移动端的zepto- 这些库都是对原生 JavaScript 的封装,内部都是用 JavaScript 实现的,
jQuery 的概念
- jQuery 是一个快速、简洁的 JavaScript 库,设计的宗旨是“write Less,Do More”,
- jQuery 封装了 JavaScript 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
jQuery 出现的目的,提高开发效率。
jQuery 的优点
- 轻量级。核心文件才几十kb,不会影响页面加载速度
跨浏览器兼容。基本兼容了现在主流的浏览器
链式编程、隐式迭代
对事件、样式、动画支持,大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件,例如:
树形菜单、日期控件、轮播图等 免费、开源
jQuery 的基本使用
- 2.1 jQuery 的下载
官网地址: https://jquery/
版本: 1x :兼容 IE 678 等低版本浏览器, 官网不再更新
2x :不兼容 IE 678 等低版本浏览器, 官网不再更新
3x :不兼容 IE 678 等低版本浏览器, 是官方主要更新维护的版本
各个版本的下载:https://code.jquery/ -
- 引入 jQuery 文件
- 使用即可
-
jQuery 的入口函数
- $(function () {
… // 此处是页面 DOM 加载完成的入口
}) ; - $(document).ready(function(){
… // 此处是页面DOM加载完成的入口
}); -
- 等着 DOM 结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery 帮我们完成了封装。
- $(function () {
- 相当于原生 js 中的 DOMContentLoaded。
- 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
-
jQuery 的顶级对象 $
- 1.$ 是 jQuery 的别称,代码中可以使用 jQuery 代替 $,但一般为了方便,通常都直接使用 $ 。
2.$ 是jQuery 的顶级对象, 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象,就可以调用jQuery 的方法。
- 1.$ 是 jQuery 的别称,代码中可以使用 jQuery 代替 $,但一般为了方便,通常都直接使用 $ 。
-
jQuery 对象和 DOM 对象
-
- 用原生 JS 获取来的对象就是 DOM 对象
-
- jQuery 方法获取的元素就是 jQuery 对象。
- jQuery 对象本质是: 利用$对DOM 对象包装后产生的对象(伪数组形式存储)。
注意:
只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法。-
DOM 对象与 jQuery 对象之间是可以相互转换的。
因为原生js 比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用-
- DOM 对象转换为 jQuery 对象: $(DOM对象)
$(‘div’)
- DOM 对象转换为 jQuery 对象: $(DOM对象)
-
- jQuery 对象转换为 DOM 对象(两种方式)
$(‘div’) [index] index 是索引号
$(‘div’) .get(index) index 是索引号
- jQuery 对象转换为 DOM 对象(两种方式)
-
-
## jQuery 选择器
-
选择器获取的都是伪元组,ID选择器也一样
-
原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准。
-
基础选择器
- $(“选择器”) // 里面选择器直接写 CSS 选择器即可,但是要加引号
-
jQuery 层级选择器
- 与css选择器一样
-
筛选选择器
- 子主题 1
-
其他选择器
- 子主题 1
jQuery 设置样式
-
方法1: 操作 css 方法
jQuery 可以使用 css 方法来修改简单元素样式; 也可以操作类,修改多个样式。
常用以下三种形式 :
- // 1.参数只写属性名,则是返回属性值
var strColor = $(this).css(‘color’);
// 2. 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css(’‘color’’, ‘‘red’’);
// 3. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开, 属性可以不用加引号
$(this).css({ “color”:“white”,“font-size”:“20px”});
- 参数可以是对象
-
方法2: 设置类样式方法
作用等同于以前的 classList,可以操作类样式, 注意操作类里面的参数不要加点。
常用的三种设置类样式方法:
- // 1.添加类
$(“div”).addClass(“current”);
// 2.删除类
$(“div”).removeClass(“current”);
// 3.切换类
$(“div”).toggleClass(“current”);
- 注意:
- 设置类样式方法比较适合样式多时操作,可以弥补css()的不足。
- 原生 JS 中 className 会覆盖元素原先里面的类名,jQuery 里面类操作只是对指定类进行操作,不影响原先的类名。
-
jQuery 里面的排他思想
- // 想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
- // 想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。
-
设置的是行内样式
隐式迭代
- / 遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代。
// 简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。
$(‘div’).hide(); // 页面中所有的div全部隐藏,不用循环操作
链式编程
- 链式编程是为了节省代码量,看起来更优雅。
$(this).css(‘color’, ‘red’).sibling().css(‘color’, ‘’);
jQuery 效果
-
显示隐藏:show() / hide() / toggle() ;
-
- 显示语法规范
show([speed,[easing],[fn]])
- 显示语法规范
-
- 隐藏语法规范
hide([speed,[easing],[fn]])
- 隐藏语法规范
-
- 切换语法规范
toggle([speed,[easing],[fn]])
- 切换语法规范
- (1)参数都可以省略, 无动画直接显示。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。 (3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
-
-
划入画出:slideDown() / slideUp() / slideToggle() ;
- 下滑效果语法规范
slideDown([speed,[easing],[fn]]) - 上滑效果语法规范
slideUp([speed,[easing],[fn]]) - 滑动切换效果语法规范
slideToggle([speed,[easing],[fn]]) - (1)参数都可以省略。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。 (3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次
- 下滑效果语法规范
-
淡入淡出:fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
-
淡入效果语法规范
fadeIn([speed,[easing],[fn]]) -
淡出效果语法规范
fadeOut([speed,[easing],[fn]]) -
淡入淡出切换效果语法规范
fadeToggle([speed,[easing],[fn]]) -
渐进方式调整到指定的不透明度
fadeTo([[speed],opacity,[easing],[fn]])- (1)opacity 透明度必须写,取值 0~1 之间。
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。必须写
(3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。
- (1)opacity 透明度必须写,取值 0~1 之间。
-
-
自定义动画:animate() ;
-
语法
animate(params,[speed],[easing],[fn]) -
(1)params: 想要更改的样式属性,以对象形式传递,必须写。 属性名可以不用带引号, 如果是复合属性则需要采
取驼峰命名法 borderLeft。其余参数都可以省略。 -
(2)speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)。 (3)easing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”。
(4)fn: 回调函数,在动画完成时执行的函数,每个元素执行一次。 -
停止动画排队
- 动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。
-
停止动画排队的方法为:stop() ;
- stop() 方法用于停止动画或效果。
- stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画。
总结: 每次使用动画之前,先调用 stop() ,在调用动画。
-
事件切换
hover([over,]out)- (1)over:鼠标移到元素上要触发的函数(相当于mouseenter) (2)out:鼠标移出元素要触发的函数(相当于mouseleave) (3)如果只写一个函数,则鼠标经过和离开都会触发它
jQuery 属性操作
-
设置或获取元素固有属性值 prop()
-
- 获取属性语法
prop(’‘属性’’)
- 获取属性语法
-
- 设置属性语法
prop(’‘属性’’, ‘‘属性值’’)- 注意:prop() 除了普通属性操作,更适合操作表单属性:disabled / checked / selected 等。
-
设置或获取元素自定义属性值 attr()
-
- 获取属性语法
attr(’‘属性’’) // 类似原生 getAttribute()
- 获取属性语法
-
- 设置属性语法
attr(’‘属性’’, ‘‘属性值’’) // 类似原生 setAttribute()
-
数据缓存 data()
- data() 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构。一旦页面刷新,之前存放的数据都将被移除
-
- 附加数据语法
data(’‘name’’,’‘value’’) // 向被选元素附加数据
- 附加数据语法
- 获取数据语法
date(’‘name’’) // 向被选元素获取数据- 注意:同时,还可以读取 HTML5 自定义属性 data-index ,得到的是数字型。
- 数据缓存 data() 这个里面的数据是存放在元素的内存里面,页面上看不到
jQuery 文本属性值
-
- 普通元素内容 html()( 相当于原生inner HTML)
- html() // 获取元素的内容
html(’‘内容’’) // 设置元素的内容
-
普通元素文本内容 text() (相当与原生 innerText)
- text() // 获取元素的文本内容
text(’‘文本内容’’) // 设置元素的文本内容
- text() // 获取元素的文本内容
-
表单的值 val()( 相当于原生value)
- val() // 获取表单的值
val(’‘内容’’) // 设置表单的值
- val() // 获取表单的值
jQuery 元素操作
- jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作,就需要用到遍历。
语法1: $(“div”).each(function (index, domEle) { xxx; }) -
- each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
- 里面的回调函数有2个参数: index 是每个元素的索引号; demEle 是每个DOM元素对象,不是jquery对象
- 所以要想使用jquery方法,需要给这个dom元素转换为jquery对象 $(domEle)
-
遍历元素
- 语法2: $.each(object,function (index, element) { xxx; })
-
- $.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
-
- 里面的函数有2个参数: index 是每个元素的索引号; element 遍历内容
-
创建元素
- 语法:
$(’’ - ’’);
动态的创建了一个
- 语法:
-
添加元素
- element.append(’‘内容’’)
把内容放入匹配元素内部最后面,类似原生 appendChild。 - element.prepend(’‘内容’’)
把内容放入匹配元素内部最前面。 - 外部添加
element.after(’‘内容’’) // 把内容放入目标元素后面
element.before(’‘内容’’) // 把内容放入目标元素前面 - ① 内部添加元素,生成之后,它们是父子关系。
② 外部添加元素,生成之后,他们是兄弟关系。
- element.append(’‘内容’’)
-
删除元素
- 删除元素
element.remove() // 删除匹配的元素(本身)
element.empty() // 删除匹配的元素集合中所有的子节点
element.html(’’’’) // 清空匹配的元素内容 - ① remove 删除元素本身。
② empt() 和 html(’’’’) 作用等价,都可以删除元素里面的内容,只不过 html 还可以设置内容。
- 删除元素
jQuery 尺寸、位置操作
-
jQuery 尺寸
- 以上参数为空,则是获取相应值,返回的是数字型。
如果参数为数字,则是修改相应值。 参数可以不必写单位。 - css(‘height’)获取的是字符串带有单位
- 以上参数为空,则是获取相应值,返回的是数字型。
-
jQuery 位置操作
-
- offset() 设置或获取元素偏移
-
① offset() 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。
-
② 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离,offset().left 用于获取距离文档左侧的距离。
-
③ 可以设置元素的偏移:offset({ top: 10, left: 30 });
-
- position() 获取元素偏移
- ① position() 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准
- ② 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离,position().left 用于获取距离定位父级左侧的距离
- ③ 该方法只能获取。
-
- scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
- ① scrollTop() 方法设置或返回被选元素被卷去的头部。 。
- ② 不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部
-
返回顶部
- ① 核心原理: 使用animate动画返回顶部。
- ② animate动画函数里面有个scrollTop 属性,可以设置位置
- ③ 但是是元素做动画,因此 $(“body,html”).animate({scrollTop: 0})
-
jQuery事件
-
单个事件注册
- 语法:
element.事件(function(){})
$(“div”).click(function(){ 事件处理程序 })
其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
- 语法:
-
多个事件处理注册
-
语法:
element.on(events,[selector],fn)-
- events:一个或多个用空格分隔的事件类型,如"click"或"keydown" 。
-
-
-
selector: 元素的子元素选择器 。
-
fn:回调函数 即绑定在元素身上的侦听函数。
-
可以绑定多个事件,多个处理事件处理程序。
$(“div”).on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
});- 参数对象
-
如果事件处理程序相同
$(“div”).on(“mouseover mouseout”, function() {
$(this).toggleClass(“current”);
}); -
可以事件委派操作 。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。
$(‘ul’).on(‘click’, ‘li’, function() {
alert(‘hello world!’);
})- 在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派,最新版本的请用on替代他们。
-
动态创建的元素,click() 没有办法绑定事件, on() 可以给动态生成的元素绑定事件
$(“div").on(“click”,”p”, function(){
alert(“俺可以给动态生成的元素绑定事件”)
});
-
-
one() 但是它只能触发事件一次
- $(“p”).one(“click”, function() {
alert(11);
})
- $(“p”).one(“click”, function() {
-
事件处理 off() 解绑事件
- off() 方法可以移除通过 on() 方法添加的事件处理程序。
$(“p”).off() // 解绑p元素所有事件处理程序
$(“p”).off( “click”) // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$(“ul”).off(“click”, “li”); // 解绑事件委托
- off() 方法可以移除通过 on() 方法添加的事件处理程序。
-
自动触发事件 trigger()
-
比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发
-
element.click() // 第一种简写形式
element.trigger(“type”) // 第二种自动触发模式- $(“p”).on(“click”, function () {
alert(“hi~”);
});
$(“p”).trigger(“click”); // 此时自动触发点击事件,不需要鼠标点击
- $(“p”).on(“click”, function () {
-
element.triggerHandler(type) // 第三种自动触发模式
triggerHandler模式不会触发元素的默认行为,这是和前面两种的区别。
-
-
jQuery 事件对象
- 事件被触发,就会有事件对象的产生。
element.on(events,[selector],function(event) {})
阻止默认行为:event.preventDefault() 或者 return false
阻止冒泡: event.stopPropagation()
- 事件被触发,就会有事件对象的产生。
jQuery 拷贝对象
-
如果想要把某个对象拷贝(合并) 给另外一个对象使用,此时可以使用 $.extend() 方法
-
$.extend([deep], target, object1, [objectN])
-
- deep: 如果设为true 为深拷贝, 默认为false 浅拷贝
-
-
target: 要拷贝的目标对象
-
object1:待拷贝到第一个对象的对象。
-
objectN:待拷贝到第N个对象的对象。
-
浅拷贝目标对象引用的被拷贝的对象地址,修改目标对象会影响被拷贝对象。
-
深拷贝,前面加true, 完全克隆,修改目标对象不会影响被拷贝对象。
jQuery 多库共存
- 让jQuery 和其他的js库不存在冲突,可以同时存在,这就叫做多库共存
- jQuery 解决方案:
- 把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(’‘div’’)
- jQuery 变量规定新的名称:$.noConflict() var xx = $.noConflict();
jQuery 插件
- jQuery 插件常用的网站:
- jQuery 插件库 http://www.jq22/
- jQuery 之家 http://www.htmleaf/
- 懒加载插件
- 瀑布流插件
- 全屏滚动插件
js高级
类class
-
语法
- / 1. 创建类 class 创建一个 明星类
class Star {
// 类的共有属性放到 constructor 里面
constructor(name, age) {
this.name = name;
this.age = age;
}
}
// 2. 利用类创建对象 new
var ldh = new Star(‘刘德华’, 18);
console.log(ldh); - 创建实例使用new关键字,与构造函数一样。var a = new A ()
- 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象
- constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数
- / 1. 创建类 class 创建一个 明星类
-
类继承
- // 父类
class Father{
}
- // 父类
// 子类继承父类
class Son extends Father {
}
- 调用父类构造函数,使用super()
- constructor(x, y) {
super(x, y); //使用super调用了父类中的构造函数
}
- super 必须在子类this之前调用
-
注意点
- 1.共有属性和方法,写在constructor里面
- 2.里面的方法书写不需要逗号
-
- this指向问题,在构造函数里,this都是指向对象,自定义方法里都是指向调用的对象
构造函数和原型
-
ES6之前,没有class关键字来创建类,js使用构造函数和原型对象来模拟面对对象
-
语法
-
function Person(name,age){
this.name = name;
this.age = age;
}
var obj = new Person(‘zs’,12); -
其他创建对象方式
- var object = {}
- var object = new Object()
-
-
成员
-
实例成员
-
在构造函数内部创建出来的成员,只有对象可以访问
- function Star(uname, age) {
this.uname = uname;
this.age = age;
this.sing = function() {
console.log(‘我会唱歌’);
}
}
var ldh = new Star(‘刘德华’, 18);
console.log(ldh.uname);//实例成员只能通过实例化的对象来访问
- function Star(uname, age) {
-
-
静态成员
-
由构造函数绑定的成员,只有构造函数可以访问
- function Star(uname, age) {
this.uname = uname;
this.age = age;
this.sing = function() {
console.log(‘我会唱歌’);
}
}
Star.sex = ‘男’;
var ldh = new Star(‘刘德华’, 18);
console.log(Star.sex);//静态成员只能通过构造函数来访问
- function Star(uname, age) {
-
-
-
原型
-
为了节省内存,让多个对象共用一个方法
-
构造函数原型prototype
- 每个构造函数创建的时候,自动会有个prototype属性,绑定的是一个对象
- 在这个对象中,书写的所有方法,构造函数创建的对象中,共享这些方法。
-
对象原型__proto__
- 每个对象创建的时候,都会自动获得一个属性__proto__,这个属性指向构造函数原型,prototype可以认为等价于__proto__
- 所有对象可以使用构造函数原型的方法
- 这个属性一般都不会修改,只是用来指向的
-
constructor属性
- 主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数
- 构造函数原型与对象原型,都会有constructor属性,称为构造函数,这个属性指向创建这个原型的构造函数
- 如果给构造函数原型赋值一个对象,需要在对象里添加这个属性,指回构造函数,赋值对象的话,没有这个属性,原型不知道该指向谁,也就找不到方法调用了
-
三角关系
-
原型链
- 当访问一个对象属性或方法时,会先看自身对象有没有这个属性,如果没有,就在__proto__指向的原型对象,看有没有这些属性,如果还没有,就在__proto__原型对象中的__proto__原型对象中查找,就这样一层一层往上找,直到找到属性为止,找不到,返回null。
-
this指向问题
- this指向我们都知道,谁调用,指向谁,因为都是实例调用方法,所以都指向实例对象
-
通过原型为数组扩展内置方法
- Array.prototype.sum = function() {
var sum = 0;
for (var i = 0; i < this.length; i++) {
sum += this[i];
}
return sum;
};
//此时数组对象中已经存在sum()方法了 可以始终 数组.sum()进行数据的求
- Array.prototype.sum = function() {
-
-
继承
-
es6之前没有提供继承方法extends,但是可以使用call方法和原型继承,来实现
-
call
-
一种函数调用方法,可以改变this指向,在子构造构造函数中,使用call方法调用父构造函数,就可以继承父构造函数的属性
// 1. 父构造函数
function Father(uname, age) {
// this 指向父构造函数的对象实例
this.uname = uname;
this.age = age;
}
// 2 .子构造函数
function Son(uname, age, score) {
// this 指向子构造函数的对象实例
3.使用call方式实现子继承父的属性
Father.call(this, uname, age);
this.score = score;
}
var son = new Son(‘刘德华’, 18, 100);
console.log(son); -
function fn(x, y) {
console.log(this);
console.log(x + y);
}
var o = {
name: ‘andy’
};
fn.call(o, 1, 2);//调用了函数此时的this指向了对象o,
-
-
原型继承
-
让子构造函数的原型对象等于父构造函数构成的对象,就可以通过原型链的方式,来继承父类的共有方法,也不会影响子类添加新的方法
// 1. 父构造函数
function Father(uname, age) {
// this 指向父构造函数的对象实例
this.uname = uname;
this.age = age;
}
Father.prototype.money = function() {
console.log(100000);
};
// 2 .子构造函数
function Son(uname, age, score) {
// this 指向子构造函数的对象实例
Father.call(this, uname, age);
this.score = score;
}
// Son.prototype = Father.prototype; 这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化
Son.prototype = new Father();
// 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
Son.prototype.constructor = Son;
// 这个是子构造函数专门的方法
Son.prototype.exam = function() {
console.log(‘孩子要考试’);}
var son = new Son(‘刘德华’, 18, 100);
console.log(son); -
关键点是:记得要把子类构造函数原型对象属性constructor指向子构造函数,因为是赋值父类构造对象,里面的指向是父构造函数
-
-
ES5新增方法
-
1.数组方法forEach遍历数组
- arr.forEach(function(value, index, array) {
//参数一是:数组元素
//参数二是:数组元素的索引
//参数三是:当前的数组
})
//相当于数组遍历的 for循环 没有返回值
- arr.forEach(function(value, index, array) {
-
2数组方法filter过滤数组
- var arr = [12, 66, 4, 88, 3, 7];
var newArr = arr.filter(function(value, index,array) {
//参数一是:数组元素
//参数二是:数组元素的索引
//参数三是:当前的数组
return value >= 20;
});
console.log(newArr);//[66,88] //返回值是一个新数组
- var arr = [12, 66, 4, 88, 3, 7];
-
3数组方法some
- some 查找数组中是否有满足条件的元素
var arr = [10, 30, 4];
var flag = arr.some(function(value,index,array) {
//参数一是:数组元素
//参数二是:数组元素的索引
//参数三是:当前的数组
return value < 3;
});
console.log(flag);//false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环
- some 查找数组中是否有满足条件的元素
-
4.trim方法去除字符串两端的空格
- var str = ’ hello ’
console.log(str.trim()) //hello 去除两端空格
var str1 = ’ he l l o ’
console.log(str.trim()) //he l l o 去除两端空格
- var str = ’ hello ’
-
5.获取对象的属性名
- var obj = {
id: 1,
pname: ‘小米’,
price: 1999,
num: 2000
};
var result = Object.keys(obj)
console.log(result)//[id,pname,price,num]
- var obj = {
-
6.Object.defineProperty
- Object.defineProperty设置或修改对象中的属性
- Object.defineProperty(对象,修改或新增的属性名,{
value:修改或新增的属性的值,
writable:true/false,//如果值为false 不允许修改这个属性值
enumerable: false,//enumerable 如果值为false 则不允许遍历
configurable: false //configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性
})
函数进阶
-
函数定义方式
-
1.匿名函数
- var fn = function(){}
-
2.命名关键字
- function fn(){}
-
3.构造函数声明Function()
- var f = new Function(‘a’, ‘b’, ‘console.log(a + b)’);
f(1, 2);
- var f = new Function(‘a’, ‘b’, ‘console.log(a + b)’);
-
var fn = new Function(‘参数1’,‘参数2’…, ‘函数体’)
注意
/*Function 里面参数都必须是字符串格式
第三种方式执行效率低,也不方便书写,因此较少使用
所有函数都是 Function 的实例(对象)
函数也属于对象
*/
-
函数的调用
- /* 1. 普通函数 */
function fn() {
console.log(‘人生的巅峰’);
}
fn(); - /* 2. 对象的方法 */
var o = {
sayHi: function() {
console.log(‘人生的巅峰’);
}
}
o.sayHi(); - /* 3. 构造函数*/
function Star() {};
new Star(); - /* 4. 绑定事件函数*/
btn.onclick = function() {}; // 点击了按钮就可以调用这个函数 - /* 5. 定时器函数*/
setInterval(function() {}, 1000); 这个函数是定时器自动1秒钟调用一次 - /* 6. 立即执行函数(自调用函数)*/
(function() {
console.log(‘人生的巅峰’);
})();
- /* 1. 普通函数 */
-
this
-
函数内部的this指向
- 1.普通函数 this是window对象
- 2.对象函数 this是对象
- 3.构造函数 this 是实例对象
- 4.绑定事件函数 this是事件源对象
- 5.定时函数 this是window对象
- 6.立即执行函数 this是window对象
-
改变函数内部 this 指向
-
call
-
调用函数,改变this指向指定对象
var o = {
name: ‘andy’
}
function fn(a, b) {
console.log(this);
console.log(a+b)
};
fn(1,2)// 此时的this指向的是window 运行结果为3
fn.call(o,1,2)//此时的this指向的是对象o,参数使用逗号隔开,运行结果为3
-
-
apply
-
调用函数,改变this指向指定对象,参数是数组
var o = {
name: ‘andy’
}
function fn(a, b) {
console.log(this);
console.log(a+b)
};
fn()// 此时的this指向的是window 运行结果为3
fn.apply(o,[1,2])//此时的this指向的是对象o,参数使用数组传递 运行结果为3 -
应用,可以用Math.max()这个方法求最大值。
- var max = Math.max.apply(Math,arr)
-
-
bind
-
返回原函数拷贝,改变this指向,不执行
var o = {
name: ‘andy’
};function fn(a, b) {
console.log(this);
console.log(a + b);
};
var f = fn.bind(o, 1, 2); //此处的f是bind返回的新函数
f();//调用新函数 this指向的是对象o 参数使用逗号隔开
-
-
-
-
严格模式
JavaScript 除了提供正常模式外,还提供了严格模式(strict mode)
JavaScript变体的一种方式,即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持,旧版本浏览器中会被忽略。
严格模式对正常的 JavaScript 语义做了一些更改:
1.消除了 Javascript 语法的一些不合理、不严谨之处,减少了一些怪异行为。
2.消除代码运行的一些不安全之处,保证代码运行的安全。
3.提高编译器效率,增加运行速度。
4.禁用了在 ECMAScript 的未来版本中可能会定义的一些语法,为未来新版本的 Javascript 做好铺垫。比如一些保留字如:class,enum,export, extends, import, super 不能做变量名-
开启严格模式“use strict”; (或 ‘use strict’; )
-
脚本严格模式
-
有的 script 脚本是严格模式,有的 script 脚本是正常模式,这样不利于文件合并,所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他
script 脚本文件。(function (){
//在当前的这个自调用函数中有开启严格模式,当前函数之外还是普通模式
“use strict”;
var num = 10;
function fn() {}
})();
//或者
-
-
函数严格模式
- 给某个函数开启严格模式,需要把“use strict”; (或 ‘use strict’; ) 声明放在函数体所有语句之前。
-
严格模式中的变化
‘use strict’
num = 10console.log(num)//严格模式后使用未声明的变量
var num2 = 1;
delete num2;//严格模式不允许删除变量
function fn() {
console.log(this); // 严格模式下全局作用域中函数中的 this 是 undefined
}fn();
function Star() {
this.sex = ‘男’;
}
// Star();严格模式下,如果 构造函数不加new调用, this 指向的是undefined 如果给他赋值则 会报错.
var ldh = new Star();console.log(ldh.sex);
setTimeout(function() {
console.log(this); //严格模式下,定时器 this 还是指向 window
}, 2000);- 1.不允许使用未声明变量
- 2.不允许删除变量
- 3.构造函数不加new调用,this指向undefined
- 4.普通函数this指向unde
- 5.定时器还是指向window
-
-
函数进阶
-
高阶函数
- 函数可以作为参数和返回值
-
闭包
-
在一个函数内部,有权调用另一个函数作用域中的变量
function fn1(){ // fn1 就是闭包函数
var num = 10;
function fn2(){
console.log(num); // 10
}
fn2()
}
fn1(); -
作用:延伸变量作用范围
function fn() {
var num = 10;
function fun() {
console.log(num);
}
return fun;
}
var f = fn();
f();
-
-
递归
-
在一个函数内部,再调用自身
-
应用
-
1.求阶乘
/利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * …n
function fn(n) {
if (n == 1) { //结束条件
return 1;
}
return n * fn(n - 1);
}
console.log(fn(3));
-
-
-
拷贝
-
浅拷贝
-
只负责表层数据,深层的数据复制不到,比如属性是一个对象,就只复制对象的地址,原对象修改这个对象属性,新复制的对象也会跟着改变
// 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.
// 深拷贝拷贝多层, 每一级别的数据都会拷贝.
var obj = {
id: 1,
name: ‘andy’,
msg: {
age: 18
}
};
var o = {};
// for (var k in obj) {
// // k 是属性名 obj[k] 属性值
// o[k] = obj[k];
// }
// console.log(o);
// o.msg.age = 20;
// console.log(obj);console.log(’--------------’);
Object.assign(o, obj);
console.log(o);
o.msg.age = 20;
console.log(obj);
-
-
深拷贝
-
会把对象每一层的数据都给复制,原理是使用递归,不断递归到属性值为数值型,然后复制,返回。
// 深拷贝拷贝多层, 每一级别的数据都会拷贝.
var obj = {
id: 1,
name: ‘andy’,
msg: {
age: 18
},
color: [‘pink’, ‘red’]
};
var o = {};
// 封装函数
function deepCopy(newobj, oldobj) {
for (var k in oldobj) {
// 判断我们的属性值属于那种数据类型
// 1. 获取属性值 oldobj[k]
var item = oldobj[k];
// 2. 判断这个值是否是数组
if (item instanceof Array) {
newobj[k] = [];
deepCopy(newobj[k], item)
} else if (item instanceof Object) {
// 3. 判断这个值是否是对象
newobj[k] = {};
deepCopy(newobj[k], item)
} else {
// 4. 属于简单数据类型
newobj[k] = item;
}}
}
deepCopy(o, obj);
console.log(o);var arr = [];
console.log(arr instanceof Object);
o.msg.age = 20;
console.log(obj);
-
-
-
js正则表达式
-
1.创建
-
- 通过调用 RegExp 对象的构造函数创建
var 变量名 = new RegExp(/表达式/);
- 通过调用 RegExp 对象的构造函数创建
-
- 通过字面量创建
var 变量名 = /表达式/;
- 通过字面量创建
-
-
2.使用
- test() 正则对象方法,用于检测字符串是否符合该规则,该对象会返回 true 或 false,其参数是测试字符串。
regexObj.test(str) - replace 替换
stringObject.replace(regexp/substr,replacement) - match 查找
stringObject.match(regexp/substr)
- test() 正则对象方法,用于检测字符串是否符合该规则,该对象会返回 true 或 false,其参数是测试字符串。
-
3.正则表达式参数
-
/表达式/[switch]
switch(也称为修饰符) 按照什么样的模式来匹配. 有三种值:- g:全局匹配
i:忽略大小写
gi:全局匹配 + 忽略大小写
- g:全局匹配
-
es6
-
概述
- ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。
- ES6 实际上是一个泛指,泛指 ES2015 及后续的版本。
- 每一次标准的诞生都意味着语言的完善,功能的加强。JavaScript语言本身也有一些令人不满意的地方。
变量提升特性增加了程序运行时的不可预测性
语法过于松散,实现相同的功能,不同的人可能会写出不同的代码
-
ES6 的新增语法
-
let
-
let声明的变量只在所处于的块级有效
- if (true) {
let a = 10; }
console.log(a) // a is not defined - 注意:使用let关键字声明的变量才具有块级作用域,使用var声明的变量不具备块级作用域特性。
- if (true) {
-
不存在变量提升
- console.log(a); // a is not defined
let a = 20;
- console.log(a); // a is not defined
-
暂时性死区
- var tmp = 123;
if (true) {
tmp = ‘abc’;
let tmp;
}
- var tmp = 123;
-
-
const
-
作用:声明常量,常量就是值(内存地址)不能变化的量。
-
具有块级作用域
- if (true) {
const a = 10; }
console.log(a) // a is not defined
- if (true) {
-
声明常量时必须赋值
- const PI; // Missing initializer in const declaration
-
常量赋值后,值不能修改
- const PI = 3.14;
PI = 100; // Assignment to constant variable.
const ary = [100, 200];
ary[0] = ‘a’;
ary[1] = ‘b’;
console.log(ary); // [‘a’, ‘b’];
ary = [‘a’, ‘b’]; // Assignment to constant variable.
- const PI = 3.14;
-
-
let、const、var 的区别
-
- 使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象。 2. 使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升。 3. 使用 const 声明的是常量,在后面出现的代码中不能再修改该常量的值。
-
-
解构赋值
-
ES6中允许从数组中提取值,按照对应位置,对变量赋值。对象也可以实现解构。
-
数组解构
- let [a, b, c] = [1, 2, 3];
console.log(a)
console.log(b)
console.log© - 如果解构不成功,变量的值为undefined。
let [foo] = [];
let [bar, foo] = [1]
- let [a, b, c] = [1, 2, 3];
-
对象解构
- let person = { name: ‘zhangsan’, age: 20 };
let { name, age } = person;
console.log(name); // ‘zhangsan’
console.log(age); // 20 - let {name: myName, age: myAge} = person; // myName myAge 属于别名
console.log(myName); // ‘zhangsan’
console.log(myAge); // 20
- let person = { name: ‘zhangsan’, age: 20 };
-
-
箭头函数
-
ES6中新增的定义函数的方式。
- () => {}
const fn = () => {}
- () => {}
-
函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号
- function sum(num1, num2) {
return num1 + num2; }
const sum = (num1, num2) => num1 + num2;
- function sum(num1, num2) {
-
如果形参只有一个,可以省略小括号
- function fn (v) {
return v; }
const fn = v => v;
- function fn (v) {
-
箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this。
- const obj = { name: ‘张三’}
function fn () {
console.log(this);
return () => {
console.log(this)
} }
const resFn = fn.call(obj);
resFn();
- const obj = { name: ‘张三’}
-
-
剩余参数
-
剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
- function sum (first, …args) {
console.log(first); // 10
console.log(args); // [20, 30]
}
sum(10, 20, 30)
- function sum (first, …args) {
-
剩余参数和解构配合使用
- let students = [‘wangwu’, ‘zhangsan’, ‘lisi’];
let [s1, …s2] = students;
console.log(s1); // ‘wangwu’
console.log(s2); // [‘zhangsan’, ‘lisi’]
- let students = [‘wangwu’, ‘zhangsan’, ‘lisi’];
-
-
ES6 的内置对象扩展
-
Array
-
Array 的扩展方法
-
扩展运算符(展开语法)
- 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。
let ary = [1, 2, 3];
…ary // 1, 2, 3
console.log(…ary); // 1 2 3
console.log(1, 2, 3)
- 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。
-
扩展运算符可以应用于合并数组。
// 方法一
let ary1 = [1, 2, 3];
let ary2 = [3, 4, 5];
let ary3 = […ary1, …ary2];
// 方法二
ary1.push(…ary2); -
将类数组或可遍历对象转换为真正的数组
let oDivs = document.getElementsByTagName(‘div’);
oDivs = […oDivs];
-
-
构造函数方法:Array.from()
-
将类数组或可遍历对象转换为真正的数组
let arrayLike = {
‘0’: ‘a’,
‘1’: ‘b’,
‘2’: ‘c’,
length: 3
};
let arr2 = Array.from(arrayLike); // [‘a’, ‘b’, ‘c’] -
方法还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
let arrayLike = {
“0”: 1,
“1”: 2,
“length”: 2
}
let newAry = Array.from(aryLike, item => item *2)
-
-
find()
-
用于找出第一个符合条件的数组成员,如果没有找到返回undefined
let ary = [{
id: 1,
name: '张三‘
}, {
id: 2,
name: '李四‘
}];
let target = ary.find((item, index) => item.id == 2);
-
-
findIndex()
-
用于找出第一个符合条件的数组成员的位置,如果没有找到返回-1
let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9);
console.log(index); // 2
-
-
includes()
-
表示某个数组是否包含给定的值,返回布尔值。
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
-
-
-
String 的扩展方法
-
模板字符串
-
ES6新增的创建字符串的方式,使用反引号定义。
let name =zhangsan
; -
模板字符串中可以解析变量。
- let name = ‘张三’;
let sayHello =hello,my name is ${name}
; // hello, my name is zhangsan
- let name = ‘张三’;
-
模板字符串中可以换行
- let result = {
name: ‘zhangsan’,
age: 20,
sex: ‘男’ }
let html = `
r e s u l t . n a m e < / s p a n > < s p a n > {result.name}</span> <span> result.name</span><span>{result.age}
${result.sex} `;
- let result = {
-
在模板字符串中可以调用函数。
- const sayHello = function () {
return ‘哈哈哈哈 追不到我吧 我就是这么强大’;
};
let greet =${sayHello()} 哈哈哈哈
;
console.log(greet); // 哈哈哈哈 追不到我吧 我就是这么强大 哈哈哈哈
- const sayHello = function () {
-
-
实例方法:startsWith() 和 endsWith()
-
startsWith():表示参数字符串是否在原字符串的头部,返回布尔值
endsWith():表示参数字符串是否在原字符串的尾部,返回布尔值let str = ‘Hello world!’;
str.startsWith(‘Hello’) // true
str.endsWith(’!’) // true
-
-
实例方法:repeat()
- repeat方法表示将原字符串重复n次,返回一个新字符串。
‘x’.repeat(3) // “xxx”
‘hello’.repeat(2) // “hellohello”
- repeat方法表示将原字符串重复n次,返回一个新字符串。
-
-
Set 数据结构
-
ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。
-
Set本身是一个构造函数,用来生成 Set 数据结构。
const s = new Set(); -
Set函数可以接受一个数组作为参数,用来初始化。
const set = new Set([1, 2, 3, 4, 4]); -
实例方法
-
add(value):添加某个值,返回 Set 结构本身
delete(value):删除某个值,返回一个布尔值,表示删除是否成功
has(value):返回一个布尔值,表示该值是否为 Set 的成员
clear():清除所有成员,没有返回值- const s = new Set();
s.add(1).add(2).add(3); // 向 set 结构中添加值
s.delete(2) // 删除 set 结构中的2值
s.has(1) // 表示 set 结构中是否有1这个值 返回布尔值
s.clear() // 清除 set 结构中的所有值
- const s = new Set();
-
-
遍历
- Set 结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值。
s.forEach(value => console.log(value))
- Set 结构的实例与数组一样,也拥有forEach方法,用于对每个成员执行某种操作,没有返回值。
-
-
-
插件
JS 插件是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件。
特点:它一般是为了解决某个问题而专门存在,其功能单一,并且比较小。
我们以前写的animate.js 也算一个最简单的插件
移动端常用插件
-
fastclick 插件解决 300ms 延迟。 使用延时
GitHub官网地址: https://github/ftlabs/fastclick- if (‘addEventListener’ in document) {
document.addEventListener(‘DOMContentLoaded’, function() {
FastClick.attach(document.body);
}, false);
}
- if (‘addEventListener’ in document) {
-
Swiper 插件
- 中文官网地址: https://www.swiper/
- 引入插件相关文件。
- 按照规定语法使用
- superslide: http://www.superslide2/
- iscroll: https://github/cubiq/iscroll
插件的使用总结
-
- 确认插件实现的功能
- 去官网查看使用说明
- 下载插件
- 打开demo实例文件,查看需要引入的相关文件,并且引入
- 复制demo实例文件中的结构html,样式css以及js代码
数据可视化
- echarts插件
本文标签:
版权声明:本文标题:2021-01-12 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728025977a1142672.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论