如果你能耐心看五遍,我想你会爱上JS

标题JS常备基础知识要点

JS的基本介绍
JS的定义
JS的组成

JS的优点

JS的运行位置
JS的运行方式
JS的编写
JS的注释
JS的命名规范

变量的类型
变量五大基本类型

引用类型

查看变量类型 typeof

运算符

JS弹框

程序设计的三大结构
顺序 switch

选择 if else
循环
while循环
do while循环
for循环

小案例:

函数
函数的定义
函数的使用位置
函数的分类
内置函数(系统函数,官方函数)
自定义函数(用户自定义的函数)
函数的使用
函数的形参和实参
回调函数
数组
数组的定义方式

操作数组的方法
插入元素、删除元素
常用操作方法

特殊操作方法
数组的遍历
for循环 (通过下标取值)
for in (通过下标取值)
for of (直接取出数组元素)
引用类型和值类型
数组的拷贝
欧几里得算法最小公倍数、最小公约数

String 字符串
字符串概念
字符串定义
字符串的使用
字符串操作方法
基本方法
常用方法
字符串的遍历
进制转换
对象
对象的使用
对象的创建

对象的结构
对象删除属性
this关键字
对象的遍历
Math对象

Date对象
创建时间对象
月份星期单词
获取时间内容
设置时间内容
this 关键字
定时器的创建(setInterval 计时器/setTimeout 延时器)
定时器的创建
定时器的清除

定时器的异步特性

BOM 浏览器对象模型

windows对象
windows属性
window方法
windows事件
DOM 文档对象模型
document的主要内容
页面可视宽高、实际宽高,滚动条距离

解决兼容问题

元素操作
获取DOM元素
新增元素
删除元素
替换元素
元素内容的操作

元素的属性操作
DOM节点

获取元素节点
循环绑定事件

元素的样式修改
行内样式

classList(用来操作class类)

样式表
元素宽高获取
元素样式宽高  width/height
元素内容宽高 clientWidth、clientHeight
元素实际宽高 offsetWidth、offsetHeight
获取元素与最近的定位父级的距离
事件
事件对象
事件的绑定方式
事件的移除
事件流 冒泡流/捕获流
事件的冒泡

阻止事件冒泡

事件的捕获
事件委托(代理)
表单事件
表单状态
键盘事件
鼠标事件
事件触发的位置
正则表达式
正则基础
创建正则
正则对象的方法
字符串方法使用正则
常用匹配符
常见正则表达式
ES6
严格模式

默认参数

字符串模板
箭头函数

ES6解构赋值
ES6扩展运算符(…arr)

JS的基本介绍

JS的定义
JS是一种直译式脚本语言,是一种弱类型,基于原型的语言
凡是不能独立执行需要依赖其他程序的,通常都叫做脚本,JS文件必须嵌入到HTML文件里才能执行,HTML文件必须在浏览器里执行

JS的组成
JS由ECMAscript,BOM,DOM三部分组成
ECMAScript:是一种由ECMA国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)
通过ECMA-262标准化的脚本程序设计语言。 这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,
所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展
BOM:(Browser Object Model)即浏览器对象模型,提供与浏览器交互的方法和接口(window)
DOM:(Document Object Model)即文档对象模型,提供访问和操作网页内容的方法和接口(document)

JS的优点
JS可以对页面进行渲染,让页面有行为。让页面动起来,与后台数据进行交互。JS是动态网页的核心,也是前端开发的核心

JS的运行位置
JS语言运行在JS引擎里,JS引擎也是浏览器重要的一部分,所以我们也能说JS运行在浏览器里

JS的运行方式
从上到下

JS的编写

JS的注释
//单行注释
/*多行注释 */

JS的命名规范
语法规定:
1.变量只能包含字母,下划线_,美元$,数字
2.变量不能以数字开头
3.变量不能用关键字和保留字

行业建议/要求:
1.需要见名知意
2.驼峰命名法

关键字和保留字
// ECMAScript关键字:
/*
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 class const export
*/

// ECMAScript保留字:
/*
abstract boolean byte char debugger
double enum extends final float goto implements
import int interface long native package private
protected public short static super synchronized
throws transient volatile
*/

变量的类型
变量五大基本类型
类型 取值 描述
number 1 整数
1.1 小数
NaN NaN
Infinity 无穷大
undefined undefined undefined
null null 空
string ‘abscs’ 字符串
booleanjiu true 正确
flase 错误

引用类型
类型 描述
object 对象
array 数组
function 函数

查看变量类型 typeof
console.log(typeof 1);//number
console.log(typeof 1.1);//number
console.log(typeof NaN);//number
console.log(typeof Infinity);//number

console.log(typeof undefined);//undefined

console.log(typeof ‘’);//string
console.log(typeof ‘lalal’);//string

console.log(typeof null);//object

console.log(typeof true);//true
console.log(typeof false);//false

小考点!!!!!!
// 小考点 typeof typeof
console.log(typeof typeof 10); // string

类型转换
强制转换

// number->string、boolean
console.log(String(100)); //字符串100
console.log(String(0)); //字符串0
console.log(String(NaN)); //字符串NaN
console.log(String(Infinity)); //字符串NaN

console.log(Boolean(100)); //true
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //flase
console.log(Boolean(Infinity)); //true


//string->number、boolean
console.log(Number('')); //0
console.log(Number('123')); //123
console.log(Number('123a')); //NaN
console.log(Boolean('')); //false

console.log(Boolean('false')); //true
console.log(Boolean('true')); //true
console.log(Boolean('abcde')); //true



//boolean->number、string
console.log(Number(true)); //1
console.log(Number(false)); //0

console.log(String(true)); //true 字符串
console.log(String(false)); //false字符串


/*
特殊转换
*/

//undefined->string、boolean、number
console.log(String(undefined)); //字符串undefined
console.log(Boolean(undefined)); //false
console.log(Number(undefined)); //NaN

//null->string、boolean、number
console.log(String(null)); //字符串null
console.log(Boolean(null)); //false
console.log(Number(null)); //0

转换为number类型为0的值
null false ‘’(空串或者空格) ‘0’

转换为boolean类型为false的值
undefined NaN null 0(-0) ‘’ false

隐式类型转换
隐式类型转换 => 程序自己完成的类型转换
console.log(undefined + 10);
console.log(null + 10);
console.log(11 + ‘10’);

// 算术运算符
作为一个双目运算符,若+两边存在一个字符串,将另一个也转为字符串进行字符串拼接
其他情况下,不管双目还是单目,都转为数字类型

// 关系运算符
=、!:同时对比类型和值,两个都为真才返回真
==、!=: 基本类型中 undefined == null(true),null != 0(true) 剩余全部转成数字类型
字符串对比大小:从头至尾扫描逐个比较每个字符的unicode码,直到分出大小
其他情况下,两边均转为数字类型

数字的转换
方法名 使用方法 描述
parseInt parseInt(str) 取整,到第一个非数字字符
parseFloat parseFloat(str) 保留一个小数点
toFixed number.toFixed(2)保留两位小数 四舍五入保留小数位正值将数字转换为字符串位数不够补0
isNaN isNaN(num) 判断是否为NaN,只能使用此方法
精度丢失:浏览器计算浮点数运算时,浮点数的精度会丢失[ 0.1+0.2!=0.3 (true)]
精度丢失解决方式:
● 大数:Math.pow(2,53)
○ 2的53次幂
● 浮点数:先乘再除

运算符
基础运算符
运算符 符号 描述
赋值运算符 = a=1
= a=2(a=a*2)
/= a/=2(a=a/2)
+= a+=2(a=a+2)
-= a-=2(a=a-2)
%= a%=2(a=a%2)
关系运算符拿到的结果是一个boolean的值 > 大于
< 小于

= 大于等于
<= 小于等于
== 值相等
=== 值相等并且类型相等,恒等
!= 值不等
!== 值不等或者类型不等
逻辑运算符 || 或同假为假,遇真为假
&& 与同真为真,遇假为假
! 非转换布尔值
算数运算符 + 加


  • / 除
    % 求模、取余
    自增自减运算符 ++ 自增
    – 自减
    运算符优先级:算术运算符>逻辑关系运算符>逻辑与和逻辑或运算符>赋值运算符

JS弹框
方法名 返回值 描述
prompt(str) string 弹出输入框
alert(str) 弹出框
confirm(str) boolean 弹出确认框

程序设计的三大结构
顺序 switch
switch(表达式){
case 常量1:{
恒等于 “常量1” 进入};break;
case 常量2:{
恒等于 “常量2” 进入};break;
default:{
都不满足时进入};break;
}

选择 if else
if(判断条件){
条件正确执行;
}else{
条件错误执行;
}

循环

while循环
while(循环条件){
循环体;
}
do while循环
相对于while循环,会先执行一遍循环体,再判断循环条件
do{
循环体;
}while(循环条件);
for循环
for(循环变量;循环条件;变量改变){
循环体;
}

小案例:

  1. 判断闰年
    year % 400 == 0 || (year % 4 == 0 && year % 100 != 0
    var year = parseInt(prompt(“请输入一个年份”));
    if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) {
    console.log(year + “年,是闰年”);
    } else {
    console.log(year + “年,是平年”);
    }

  2. 判断学生成绩的等级。(分数随机)
    0-59不及格,60-69合格,70-79良好,80以上优秀

  3. 输入一个数判断正负和零。

  4. 输入年月日,判断是否正确。

  5. 输入年月日,计算当天是这一年的第几天。

函数
函数的好处:实现代码的复用
函数的定义
函数是可以完成特定的转换或者功能的代码块,函数是一种工具

函数的使用位置
函数可以在脚本的任意地方使用

函数的分类
内置函数(系统函数,官方函数)

自定义函数(用户自定义的函数)

函数的使用
// 无参函数的声明和调用
function fn() {
console.log(666)
}

fn();

// 有参函数声明和调用
function add(x, y) {
console.log(x + y)
}
add(10, 20);

// 返回值 return
function add1(x, y) {
return x + y;
}

函数的形参和实参
形参:函数声明时小括号里的参数,只是用来占位,可以改成任意变量名
实参:函数调用时括号内的参数是实参,不能随意更改,不同的实参传给函数可能会产生不同的结果

扩展!
arguments: 函数内部可以拿到函数调用的实参列表,类数组结构
// arguments: 函数内部可以拿到函数调用的实参列表,类数组结构
function add() {
console.log(arguments);
}
add(1, 2, 3, ‘abc’, true);

回调函数
将函数作为实参传入另一个函数
function fn1(fn){

}

数组
数组就是一组有序数据的集合,数组是一种数据类型
参数 描述
index 下标
lenght 长度

数组的定义方式
!!可指定数组长度,超过指定长度往后添加时会自动扩容
方法一:
/arr=[1,2,3]/
/数组长度3,index下标从0开始/
/可指定数组长度,会自动扩容
//var arr=new Array(10);
/
var arr=new Array();
arr[0]=1;
arr[1]=2;
arr[2]=3;

方法二:
/arr=[1,2,3]/
/数组长度3,index下标从0开始/
var arr=[];
var arr=[1,2,3];

操作数组的方法
插入元素、删除元素
方法名 返回值 描述
push(item[,item…]); 返回新数组的长度 向数组最后插入一个元素
pop() 返回被操作的元素 删除数组最后一个元素
unshift(item[,item…]) 返回新数组的长度 向数组最前面插入一个元素
shift() 返回被操作的元素 删除数组第一个元素

常用操作方法
方法名 返回值 描述
indexOf(item) 返回数组与参数对应的元素的下标 返回数组与参数对应的元素的下标
includes(item) 布尔值 判断数组中是否有元素匹配
join(string) 字符串 用指定符号拼接数组元素,返回字符串
concat(…arr) 数组 数组拼接,返回数组
splice(index,howmany[,item,…]) 被删除的元素组成的数组修改原数组 插入/删除元素
reverse() 逆序之后的数组修改原数组 反转数组的元素顺序
slice(startIndex,endIndex) 截取的数组 截取数组返回新数组,含头不含尾

特殊操作方法
// sort([function(a, b)]) 对数组的元素进行排序,默认按字符串升序排列(修改原数组,返回排序后的数组)
// forEach(function(currentValue, currentIndex, arr)) 数组每个元素都执行一次回调函数
// map(function(currentValue, currentIndex, arr)) 通过指定函数处理数组的每个元素,并返回处理后的数组
// filter(function(currentValue, currentIndex, arr)) 检测数值元素,并返回符合条件所有元素的数组
// some(function(currentValue, currentIndex, arr)) 检测数组元素中是否有元素符合指定条件
// every(function(currentValue, currentIndex, arr)) 检测数值元素的每个元素是否都符合条件
// reduce(function(total, currentValue, currentIndex, arr)) 将数组元素计算为一个值
数组的遍历
for循环 (通过下标取值)
var arr = [“a”, “b”, “c”];
console.log(“for============”);
for (var i = 0; i < arr.length; i++) {
console.log(i, arr[i]);
}
for in (通过下标取值)
var arr = [“a”, “b”, “c”];
console.log(“for in============”);
for (var i in arr) {
console.log(i, arr[i]);
}
for of (直接取出数组元素)
!!!不能通过该方法来修改数组元素,单纯取元素
var arr = [“a”, “b”, “c”];
console.log(“for of============”);
for (var value of arr) {
console.log(value);
}

引用类型和值类型
引用类型的赋值使用的是地址
// number(NaN Infinity) string boolean undefined null // 基本类型 值类型
// object array function // 引用类型
// 值类型
var num = 10;
var num1 = num;
num = 100;
console.log(num1); // 10

// 引用类型
var arr = [1, 2, 3];
var arr1 = arr;
arr.push(4);
arr1.push(5);
console.log(arr); // [1,2,3,4]
console.log(arr1); // [1,2,3,4]

数组的拷贝
// 浅拷贝 拷贝地址
var arr = [1, 2, 3];
var list = arr; // 取相同的地址
arr.push(4, 5, 6);
console.log(list);

// 深拷贝 产生新的地址
var arr = [1, 2, 3]; // 0x2345
var list = []; // 0x7889 新的地址
for (var i = 0; i < arr.length; i++) { // 复制内容
list[i] = arr[i];
}
arr.push(4, 5);
console.log(arr);
console.log(list);

欧几里得算法最小公倍数、最小公约数
// 写函数gcd(x, y)求x,y的最大公约数(欧几里得算法)
function gcd(x, y) {
return y ? gcd(y, x % y) : x;
}
console.log(“最大公约数===>” + gcd(10, 5));

// lcm(x, y)求x,y的最小公倍数
function lcm(x, y) {
    return x * y / gcd(x, y);
}
console.log("最小公倍数===>" + lcm(10, 5));

String 字符串
字符串概念
字符(Character)是各种文字和符号的总称,包括各国家文字、标点符号、图形符号、数字等。
字符集(Character set)是多个字符的集合,字符集种类较多,每个字符集包含的字符个数不同,常见字符集名称:
ASCII字符集、GB2312字符集、BIG5字符集、Unicode字符集等。
计算机要准确的处理各种字符集文字,就需要进行字符编码,以便计算机能够识别和存储各种文字。

字符串定义
/通过实例化方式创建/
var str=new String(“123”);
conlose.log(typeof str);//打印Object

/字面量定义/
var str1=“123”;
conlose.log(typeof str);//打印String
conlose.log(str===str1);//打印false

字符串的使用
// length
// index
// 字符串的取值 不可以赋值
// 字符串的增长
str[0] = ‘f’; // 不可以赋值

字符串操作方法
基本方法
方法名 返回值 描述
charAt(index) number 查找对应下标的字符
charCodeAt(index) string 查找字符串对应下标字符的Unicode码
String.fromCharCode(codeX[, codeX, …]) string 将unicode码还原成字符或字符串

常用方法
方法名 描述
indexOf(searchvalue[, start]) 返回某个指定的字符串值在字符串中首次出现的位置,找不到返回-1
includes(searchvalue[, start]) 判断字符串中是否包含某个字符串值,包含返回true,不包含返回false
substring([from, to]) 提取字符串中两个指定的索引号之间的字符,含头不含尾
replace(searchvalue, newvalue) 在字符串中查找匹配的子串,并替换与正则表达式匹配的子串
split(separator[, limit]) 把字符串分割为字符串数组
trim() 去除字符串首尾的空格
toLowerCase() 把字符串转换为小写
toUpperCase() 把字符串转换为大写
字符串的遍历
字符串的遍历和数组相似!
var str = ‘abcde’;

for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i))
}

/for in/
for(var i in str){
console.log(str.charAt(i))
}

/for of/
for(var value of str){
console.log(str.charAt(value))
}

进制转换
// 十进制转其它进制(2,8,16,36)
var num = 35;
console.log(num.toString(36));

// 其它进制转十进制 parseInt(string[, radix])
console.log(parseInt(‘1010’, 8))

对象
对象=属性+方法
对象的使用
对象的创建
var obj = new Object(); // 实例化对象
console.log(obj);
var obj = {} // 字面量创建
console.log(obj);

对象的结构
对象的结构
var obj=function(){
属性名: 属性值,
属性名: 属性值,
方法名:方法
}

属性获取
obj.属性名;
属性添加
obj.属性名=value;
对象删除属性
delete obj.属性名;
this关键字
var person = {
name: “张三”,
age: 18,
sex: ‘male’,
speak: function () { // 方法 => 描述事物的功能
// console.log(666);
console.log(‘我叫’ + this.name + ‘今年’ + this.age + ‘岁’)
}
}
对象的遍历
// 数组有序而对象无序
// for in

var obj = {
name: ‘占山’,
age: 10,
sex: ‘male’,
speak: function () {

}

}

console.log(obj.name);
console.log(obj[‘name’]);

for (var key in obj) {
console.log(key, obj[key]);
}
Math对象
API文档:http://www.w3school.com.cn/jsref/jsref_obj_math.asp
方法名 描述
Math.abs(x) 绝对值
Math.round(x) 四舍五入特殊:-x.5=>-x
Math.random() 随机数取值范围[0,1)
Math.min(x,y) 最小值
Math.max(x,y) 最大值
Math.pow(x,y) 求次方x时底数,y是指数
Math.ceil(x) 向上取整,天花板5.2 = >65.7 = >6-5.7=>5
Math.floor(x) 向下取整,地板5.2 = >55.7 = >5-5.7=>6
Math.PI 常数,π
扩展!!!!!
//取值范围为[m,n]的随机数
num = Math.round(Math.random() * Math.abs(n - m)) + Math.min(n, m);

Date对象
Date类型使用自CTU(Coordinated Universal Time,国际协调时间)1970年1月1日午夜(零时)开始经过的毫秒数来保存日期。Date类型保存的日期能够精确到1970年1月1日之前或之后的285616年。

创建时间对象
// 无参创建 当前时间
var date = new Date();
console.log(date);

// 传参创建
// 1.数字单参(ms)
var date = new Date(1000);
console.log(date);

// 2.数字多参(yyyy, MM, dd, hh, mm, ss);
// 如果用数字表示月份,那么数字从0开始
var date = new Date(2002, 10);
console.log(date);

// 3.字符串单参(“yyyy[]MM[]dd hh:mm:ss”) || (“MM[]dd[]yyyy hh:mm:ss”)
// [] : 代表 “空格”,"-","/","&","$", “@”, "", “#”, “=” 等等一系列的特殊符号
// 月份从1月开始
var date = new Date(‘2002/12/15 12:23:34’)
consoe.log(date);

// 4.Date 对象
var date=new Date(new Date());
月份星期单词
// month
// 学写月份的英语单词

// Jan uary
// Feb ruary
// Mar ch
// Apr il
// May
// Jun e
// Jul y
// Aug ust
// Sep tember
// Oct ober
// Nov ember
// Dec ember

// week
// 学写星期的英语单词
// Mon day
// Tue sday
// Wed nesday
// Thu rsday
// Fri day
// Sat urday
// Sun day

获取时间内容
方法名 描述
getFullYear() 获取年份
getMonth()  获取月份
getDate() 获取日(天)
 getDay()  获取星期0 - 6
getHours() 获取小时 
getMinutes() 获取分钟
getSeconds() 获取秒钟 
getTime() 获取毫秒数(时间戳)
Date.parse(“yyyyMMdd”) 获取指定时间的时间戳  (*可取值为 -||/)
设置时间内容
方法名 描述
setFullYear() 设置年份
setMonth() 设置月份
setDate() 设置日(天) 
setHours() 设置小时
setMinutes() 设置分钟
 setSeconds() 设置秒钟
setTime() 设置毫秒(时间戳) 
this 关键字

定时器的创建(setInterval 计时器/setTimeout 延时器)
定时器的创建
//延时器
var timeout = setTimeout(function() {
console.log(777)
clearTimeout(timeout);
}, 2000)
//定时器
var timer = setInterval(function () {
console.log(666);
}, 1000)

定时器的清除
clearInterval(timer);

定时器的异步特性
定时器回调的执行会脱离当前的执行顺序
var num = 10;
setTimeout(function () { // 定时器回调的执行会脱离当前的执行顺序
num = 100;
}, 0)
console.log(num); // 10

BOM 浏览器对象模型
// ECMAScript 解释器、翻译 兼容性:完全兼容
// BOM 浏览器对象 兼容性:不兼容(例如IE,谷歌,火狐,不可能兼容)
// DOM 文档对象 兼容性:部分不兼容

// BOM(Browser Object Model) 浏览器对象模型
// BOM是js的核心 window

windows对象
window对象就是浏览器内置的一个对象,表示浏览器中打开的窗口,不同的窗口不共用window
window&全局变量和函数
var a = 100;
window.a = 100;
function ab() {
console.log(666);
}
windows属性
属性名 描述
navigator 记录浏览器信息
history  记录浏览访问的历史信息
location 记录地址信息
document  文档对象
navigator
var str = window.navigator.userAgent;
console.log(str);
if(str.includes(‘Windows’)) {
alert(‘PC’)
}
if(str.includes(‘iPad’)) {
alert(‘iPad’)
}

属性名 描述
userAgent 设备信息浏览器用于HTTP请求的用户代理头的值 判断当前网页所处的环境
location
常用属性
属性名 描述
href 设置或者返回地址栏的地址
search 设置或者获取地址栏?后的参数数据
hash 设置或者获取地址栏#后的参数数据
常用方法
方法名 描述
replace() 用新的文档替代当前文档,覆盖当前history
assign() 用新的文档替代当前文档,产生history
reload() 刷新页面
history
方法名/属性名 描述
length 当前窗口的历史记录长度
forward() 页面前进
back() 页面后退
 go(step)  页面跳转
window方法
方法名 描述
open(url) 打开新页面
close() 关闭当前页面
windows事件
事件名 描述
onclick 点击触发
onload 在页面完全载入后(包括图片、css文件等等)时触发此事件  
onscroll 在页面发生滚动(鼠标或者滚动条)时触发此事件
onresize 可视区域窗口大小发生变化时触发此事件
DOM 文档对象模型
当浏览器载入HTML文档, 它就会成为document对象
document对象是HTML文档的根节点,document对象使我们可以从脚本中对HTML页面中的所有元素进行访问
document的主要内容
//根节点
documentElement
//头部
head
/页面标题(可以改写)/
title
/页面内容/
body

console.log(document.documentElement);//打印根节点
console.log(document.body);//打印页面内容
document.body.style.color = “purple”;//修改页面内容文字颜色
document.body.style.background = “pink”;//修改页面背景
console.log(document.title);//打印页面标题
document.title = “nonono”;//修改页面标题
获取或设置根元素的内容垂直(水平)滚动的距离
console.log(document.head);//打印头部
页面可视宽高、实际宽高,滚动条距离
document.documentElement.属性名

属性名 描述
clientWidth 获取浏览器可视窗口的宽度
clientHeight 获取浏览器可视窗口的高度
scrollWidth 获取页面的实际宽度
scrollHeight 获取页面的实际高度
scrollTop 获取或设置根元素的内容垂直滚动的距离
scrollLeft 获取或设置根元素的内容水平滚动的距离
/可视化窗口大小改变打印可视化窗口的宽高/
window.onresize = function() {
console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
}
console.log(document.documentElement.scrollWidth, document.documentElement.scrollHeight);
/滚动条滚动,打印下滚动距离和向右滚动距离/向
window.onscroll = function() {
console.log(document.documentElement.scrollTop, document.documentElement.scrollLeft);
}

解决兼容问题
// documentElement || body 兼容
var root=document.documentElement ||document.body

动态打印滚动条位置
window.onscroll = function () {
var root = document.documentElement || document.body;
console.log(root.scrollTop);
}

元素操作
获取DOM元素
document.方法名

方法名 描述
getElementById(str) 获取指定ID的元素
getElementsByClassName(str) 通过class类的值获取元素 (IE8以下该方法无法使用) 元素集合,类数组结构
getElementsByTagName(str) 通过标签名获取   元素集合,类数组结构
getElementByName(str) 通过name属性值获取 (不是所有的标签都有name值,低版本的浏览器会有兼容问题,不推荐使用) 元素集合,类数组结构
ES6新增
方法名 描述
querySelector() 获取符合条件的元素中的第一个元素
querySelectorAll() 获取符合条件的所有元素的集合

新增元素
方法名 描述
document.creatElement(str) 新建元素对象
parentEle.appendChild(newELe) 在末尾插入新元素
parentEle.insertBefore(newELe,childEle) 在指定的子元素前插入新元素
ele.innerHtml() 修改元素内容,带标签,因此可以插入新元素

var oDiv = document.createElement(‘div’);
oContainer.appendChild(oDiv);
oContainer.insertBefore(oDiv, oContent);

删除元素
方法名 描述
parentEle.removeChild(childEle) 删除指定的子元素
ele.remove() 删除自己

oSp.remove();
oContainer.removeChild(oContent);
替换元素
var oP = document.createElement(‘p’);
oP.innerText = ‘我是新来的’;
oP.style.color = ‘red’;

var oContainer = document.getElementById(‘container’);
var oHead = document.getElementById(‘head’);
// var oFooter = document.getElementById(‘footer’);

oContainer.replaceChild(oP, oHead);
// oContainer.replaceChild(oFooter, oHead);

方法名 描述
parentEle.replaceChild(newEle,oldEle); 替换指定子元素

元素内容的操作
//ele.属性
var oInput = document.getElementById(‘input’);
console.log(oInput.value);

属性 描述
innerText 获取和设置非表单元素的文本内容
innerHTML 获取和设置非表单元素的标签内容内容中的标签可以渲染到页面
value 获取和设置表单元素的内容

元素的属性操作
getAttribute, setAttribute, removeAttribute获取元素所有属性

获取元素所有属性
var oImg = document.getElementById(‘img’);
console.log(oImg.attributes);

属性名 描述
attributes 获取元素所有属性
操作固有属性
// ele.attribute 元素.属性
//ele[“attribute”] 可以接收字符串变量

//获取固有属性
console.log(oImg[‘id’]);
console.log(oImg.src);
//修改固有属性
oImg.src = ‘adsadas’;

操作自定义属性
方法名 描述
getAttribute(“属性名”) 获得自定义属性
setAttribute(“属性名”,“值”) 设置自定义属性
removeAttribute(“属性名”) 删除自定义属性

特殊属性操作(表单元素属性)
属性名 参数 表单标签 描述
disabled boolean button 禁用
checked boolean input-checkbox 多选框、单选框选中
selected boolean select-option 下拉菜单选中
多选、全选-案例


<div>
    <input type="checkbox" name="" id="checkbox222">
    <div> <button id="btn" disabled>提交</button>
    </div>
</div>
DOM节点 // 在HTML DOM(Document Object Model)中, 每个东西都是节点 // 所有 HTML 元素都是元素节点 // 所有 HTML 属性都是属性节点 // 插入到 HTML 元素文本是文本节点 // 注释是注释节点 // ...

// 节点的分类
// 元素节点(Element) -> 1 (重点)
// 属性节点(Attr) -> 2
// 文本节点(Text) -> 3
// 注释节点(Comment) -> 8
// 文档节点(Document) -> 9
// 文档类型节点(DocumentType) -> 10
// 文档片段节点(DocumentFragment) -> 11

// nodeType: 查询节点种类,返回值是数字
// nodeValue: 获取(文本)节点的文本内容
// nodeName: 返回node节点名称(#text,注释,标签…)

// 元素节点
var oDemo = document.querySelector(’#ul’);
console.log(oDemo.nodeType); // 1
console.log(oDemo.nodeValue); // null
console.log(oDemo.nodeName); // UL
获取元素节点
属性值 描述
firstChild 第一个子节点
lastChild 最后一个子节点
nextSibling 下一个兄弟节点
previousSibling 上一个兄弟节点

属性值 描述
parentNode 父元素节点
children 子元素节点
firstElementChild 第一个子元素节点
lastElementChild 最后一个子元素节点
nextElementSibling 下一个兄弟元素节点
previousElementSibling 上一个兄弟元素节点
循环绑定事件
// 点击li打印颜色和下标

var oLis = document.querySelectorAll(‘li’);

for (var i = 0; i < oLis.length; i++) {
// console.log(i);
// oLis[i].setAttribute(‘data-index’, i); // 将i当作下标和li标签进行一个绑定

oLis[i].index = i;    // 将i当作下标和li标签进行一个绑定

oLis[i].onclick = function () {
  // console.log(this.getAttribute('data-index'));
  console.log(this.index);
  console.log(this.innerText);
}

}

元素的样式修改
行内样式
// 获取行内样式
console.log(oDiv.style.fontSize);
console.log(oDiv.style.background);

/在行内样式更改/
ele.style.property = value; 样式的修改
/cssText会覆盖行内样式,因此使用+=/
elem.style.cssText+=’’

classList(用来操作class类)
方法名 描述
add(className); 添加class属性
remove(className) 删除class属性值
replace(className) 替换class属性值

样式表
var obj = getComputedStyle(oDiv) // 现代浏览器
console.log(obj[‘border’]);
console.log(obj[‘background-color’]);
兼容!!!
function getStyle(ele, property) {
if (ele.currentStyle) {
// 低版本的ie
return ele.currentStyle[property];
} else {
// 现代浏览器
return
}
}

元素宽高获取
元素样式宽高  width/height
console.log(getComputedStyle(small)[‘width’], getComputedStyle(small)[‘height’])

元素内容宽高 clientWidth、clientHeight
// 元素内容宽高(clientWidth, clientHeight) padding + width/height
console.log(small.clientWidth, small.clientHeight);

元素实际宽高 offsetWidth、offsetHeight
// 元素实际宽高(offsetWidth, offsetHeith) border + padding + width/height
console.log(small.offsetWidth, small.offsetHeight);

获取元素与最近的定位父级的距离
// 获取元素与最近的定位父级的距离(如果没有定位父级则是到body的距离)
// offsetTop: 当前元素 上边框 外边缘 到 最近的已定位父级 上边框 内边缘的 距离
// offsetLeft: 当前元素 左边框 外边缘 到 最近的已定位父级 左边框 内边缘的 距离
console.log(small.offsetTop, small.offsetLeft);

事件
// 什么是事件: 事件是发生后并得到程序处理的操作
// 事件的三要素: 事件源(名词),事件(动作),事件处理程序(函数)
// 事件绑定的基本结构
// 绑定点击事件
// ele.on事件 = function () {

// }

事件对象
// 事件在发生的同时,浏览器会给出一个记录事件发生信息的对象,这个对象叫做事件对象(event对象)
// 在事件函数内部通过window下的event可以拿到事件对象(低版本IE)
// 事件处理函数的第一个参数可以拿到事件对象(现代浏览器)
// 兼容写法

document.onmousedown = function (e) {
// console.log(e);
// console.log(window.event);
var ev = window.event || e; // 兼容获取事件对象
console.log(ev);
}

事件的绑定方式
oDiv1.onclick = function () {
console.log(666);
}

oDiv1.addEventListener(‘click’, function () {
console.log(999);
})

addEvent(oDiv2, ‘click’, function () {
console.log(777)
})
function addEvent(ele, type, fn) {
if (ele.attachEvent) {
ele.attachEvent(‘on’ + type, fn);
} else {
ele.addEventListener(type, fn);
}
}
事件的移除
// js代码绑定(事件属性)移除 false || null
// 事件监听移除 removeEventListener || detachEvent
// 事件移除函数 removeEvent(ele, type, fn)

oDiv.onclick = null;

oDiv.removeEventListener(‘click’, fn); // 要想移除事件监听,创建监听时必须使用命名函数

removeEvent(oDiv, ‘click’, fn);
function removeEvent(ele, type, fn) { // fn必须是命名函数
if (ele.detachEvent) {
ele.detachEvent(‘on’ + type, fn);
} else {
ele.removeEventListener(type, fn);
}
}

事件流 冒泡流/捕获流

  1. 什么是事件流:事件流描述的是从页面中接受事件的顺序
  2. 但有意思的是,微软(IE)和网景(Netscape)开发团队居然提出了两个截然相反的事件流概念,IE的事件流是事件冒泡流(event bubbling),
    而Netscape的事件流是事件捕获流(event capturing)
  3. 事件捕获:事件捕获流的思想是不太具体的DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事件
  4. 事件冒泡:IE提出的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点
  5. IE提出的是冒泡流,而网景提出的是捕获流,后来在W3C组织的统一之下,JS支持了冒泡流和捕获流,但是目前低版本的IE浏览器还是只能支持冒泡流
    (IE6,IE7,IE8均只支持冒泡流),所以为了能够兼容更多的浏览器,建议大家使用冒泡流。
  6. 事件流包含的三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段

事件的冒泡
var oInner = document.querySelector(’.inner’);
var oContainer = document.querySelector(’.container’);
//打印
//我在里面
//我在外面
oInner.onclick = function () {
console.log(‘我在里面’);
}
oContainer.onclick = function() {
console.log(‘我在外面’);
}

阻止事件冒泡
var ev = event || e;
if (ev.stopPropagation) {
ev.stopPropagation(); // 现代浏览器阻止事件冒泡
} else {
ev.cancelBubble = true; // 低版本IE阻止事件冒泡
}

事件的捕获
var oContainer = document.querySelector(’.container’);
var oInner = document.querySelector(’.inner’);
//打印
//我在外面
//我在里面
oContainer.addEventListener(‘click’, function () {
console.log(‘我在外面’);
}, true); // 第三个参数表示是否在事件捕获阶段执行事件处理函数,true表示是,默认值为false

oInner.addEventListener(‘click’, function () {
console.log(‘我在里面’);
}, true)
事件委托(代理)
在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能
1.每个函数都是对象,都会占用内存。内存中的对象越多,性能就越差
2.必须事先指定所有事件处理程序而导致的DOM访问次数增多,会延迟整个页面的交互就绪时间

对"事件处理程序过多"问题的解决方案就是事件委托。
1.可以对未生成的DOM绑定事件
2.事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件

onsubmit
onfocus 文本框聚焦
onblur 文本框失焦
onchange 文本框内容发生变化(失焦状态)
oninput 文本框输入内容发生变化(聚焦状态)
focus()
blur()
表单事件
事件名 描述
onsubmit  表单提交
onfocus 文本框聚焦
onblur 文本框失焦
onchange  文本框内容发生变化(失焦状态)
oninput  文本框输入内容发生变化(聚焦状态)
表单状态
函数 描述
  focus() 聚焦状态
  blur() 失焦状态
键盘事件
/*
获取键盘的键值 keyCode || which
组合键 ctrlKey、altKey、shiftKey
*/
input.onkeydown = function (e) {
var ev = event || e;
var keyCode = ev.keyCode || ev.which;
if(keyCode == 13 && ev.ctrlKey && ev.altKey) {
console.log(input.value);
}
}

事件 描述
onkeydown 按键按下
onkeyup 按键抬起
onkeypress 按键按下抬起
鼠标事件
/*
onclick(点击) ondblclick(双击) onmousedown(鼠标按钮被按下) onmouseup(鼠标按钮松开)
onmouseenter(鼠标移入) onmouseleave(鼠标移出) // 不支持冒泡
onmouseover(鼠标移入) onmouseout(鼠标移出) // 支持冒泡
onmousemove(鼠标移动)
button属性 左键 0 中键1 右键2
*/

事件触发的位置
/*
clientX、clientY
鼠标相对于浏览器窗口可视区域的X,Y坐标,可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
pageX、pageY
鼠标相对于文档的X,Y坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。
offsetX、offsetY
鼠标相对于事件源的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。
*/
正则表达式
正则基础
// 正则表达式其实就是一种规则,其实把正则称作规则表达式更为恰当
// 正则表达式作用于字符串 查找 替换 检测等等操作

// 常见的正则内容
// 数字的集合 [0-9] 表示0到9的任意一个数字 => (0|1|2|…|9)
// 字母的集合 [a-zA-Z] 表示任意一个字母

// 特殊符号 ^表示开头
// $表示结尾
// *表示0次或多次
// +表示一次或多次
// ?表示0次或1次
// [0-9]{n}表示次数 表示0到9出现n次
// [0-9]{n,m} 表示0到9出现最少n次 最多m次
// a|b 表示或者是a或者是b

// i表示不区分大小写 g表示全匹配

创建正则
// pattern 模式字符串
// attributes 修饰符 ‘g’ || ‘i’

// 实例化正则对象 new RegExp(pattern[, attributes])
var reg = new RegExp(‘abc’, ‘ig’); // 字符串 => 正则
console.log(reg);
// 字面量声明 /pattern/attributes
var res = /abc/gi;
console.log(res);

正则对象的方法

方法名 返回值 描述
正则对象.test(字符串) boolean 验证字符串是否符合规则
正则对象.exec(字符串) 返回数组||null 查找字符串内是否包含符合规则的字符串只会查找一项
字符串方法使用正则
方法名 描述
replace(正则对象,替换的字符串) 替换,替换匹配到的数据  默认替换一个
match(正则对象) 匹配,获取匹配数组     默认匹配一项  匹配不到返回null
search(正则对象) 查找,查找匹配数据    返回首次出现的下标匹配不上就是-1
常用匹配符
// \d 匹配一个数字字符,等价于[0-9]
// \D 匹配一个非数字字符,等价于[^0-9]

// \w 匹配一个可以组成单词(变量)的字符(包括字母,数字,下划线)
// 如[\w]匹配"$5.98"中的5,等价于[a-zA-Z0-9_]
// \W 匹配一个不可以组成单词的字符
// 如[\W]匹配" 5.98 " 中 的 5.98"中的 5.98",等价于[^a-zA-Z0-9_]

// \s 匹配一个空白字符,等价于[\n\r\f\t\v]
// \S 匹配一个非空白字符,等价于[^\n\f\r\t\v]
常见正则表达式
// 检查邮政编码 // 共6位数字,第一位不能为0
var reg = /1\d{5}$/

// 检查文件压缩包 // xxx.zip||xxx.gz||xxx.rar
var reg = /^\w+.(zip|gz|rar)$/

// 电子邮件 xxxxx@xxxx.xxxx xxx@xx.xx.xx
var reg = /^\w+@\w+(.\w+)+$/

// 手机号(1开头任意数字) 1(3|5|7|8|4)\d{9}
var reg = /^1\d{10}KaTeX parse error: Undefined control sequence: \d at position 23: … reg = /^1[1-9]\̲d̲{9}/

// 身份证 // 42 22 42 19660101 5810 // 421087 19890101 121X
var reg = /^\d{6}(19|20)\d{2}\d{4}\d{3}[\dX]$/i

// 匹配中文 [\u4e00-\u9fa5]
var reg = /2{2,4}$/;

// 账户名只能使用数字字母_KaTeX parse error: Expected group after '_' at position 41: …reg = /^[a-zA-Z_̲][\w ] 5 , 14 ]{5,14} ]5,14/

// 删除多余空格
// 删除所有的空格
// 删除前后的空格
var str = ’ asdasdasd adsa asdssd ’
console.log(str.replace(/\s+/g, ’ '));
console.log(str.replace(/\s+/g, ‘’));
console.log(str.replace(/^\s+|\s+$/g, ‘’));

ES6
严格模式
// 开启严格模式 ‘use strict’;

  1. 严格模式中声明变量不能省略var(let)关键字
  2. 函数使用建议加上函数的所有者
  3. 重名错误(不允许同名参数存在) add(num1, num2, num2)

默认参数
//原始默认参数设置
function add(x, y) { // ES5默认值
var y = y || 0;
var x = x || 0;
console.log(x + y);
}
// ES6默认值
function add(x = 0, y = 0) {
console.log(x + y)
}

字符串模板
//可以带变量,通过 el表达式 ${变量名}
var html = <ul> <li></li> <li></li> <li></li> <li></li> </ul>

箭头函数
// 箭头函数
// 缩略写法
// 不存在arguments

function fn() { // 具名 命名

}
console.log(fn);
var fn = function () { // 匿名

}
var fn = () => {

}

var add = () => {
console.log(arguments); // 不存在arguments
}

ES6解构赋值
//1.变量交换
var a = 10;
var b = 20;
var [a, b] = [b, a];

//数组解构
var [a, b, c] = [10, 20, 30];
console.log(a, b, c);//打印10,20,30

//对象解构
//对象同名解构
var { name, age } = {
name: ‘张三’,
age: 18
};
console.log(name, age);//打印张三,18

ES6扩展运算符(…arr)
// …
// 数组扩展解构
// 对象扩展解构
var [a, …b] = [1, 2]; // 聚合用 数据结构一致
console.log(a, b);
var obj = {
name: 111,
age: 222,
sex: 333
}
var { name, sex, …rest } = obj;
console.log(name, rest);

// 扩展运算符使用案例:
// 复制数组 // 单独使用 作 分散
var arr = [1, 2, 3, 4];
var arr1 = […arr];
console.log(arr1);

// 合并数组
var arr1 = [1, 2, 3, 4];
var arr2 = [5, 6, 7, 8];
var arr = arr1.concat(arr2);
var arr = […arr1, …arr2];
console.log(arr);

// 求数组的最大值
var arr = [21, 424, 5, 23, 1];
console.log(Math.max(…arr))


  1. 1-9 ↩︎

  2. \u4e00-\u9fa5 ↩︎

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页