第一章 js基础

1. js定义

js是基于对象和事件的解释性的编程语言

2. js组成

ES 语法标准 (ECMAScript) DOM 文档对象模型 (Document Object Model) BOM 浏览器对象模型 (Browser Object Model)

3. 输入输出语句

              // 1.警示框
                        alert(1234);
                        // 2.页面写入 可以任何内容
                        document.write(12345); //数字
                        document.write('<h1>标题</h1>'); //标签并渲染

                        // 3.控制台打印 可以任何内容
                        console.log(56); //数字
                        console.log('<h1>标题</h1>'); //直接打印

                        // 4.提示/输入框 有输入框和两个按钮 点确定返回输入框里的内容 点取消返回null;
                        var info = prompt('输入昵称');
                        console.log(info);

4. 变量

1.定义

装数据的容器

2.声明和赋值

先声明后赋值 var a; a = 10;

同时声明和赋值 var b = 10;

3.变量名规范

字母、数字、_、$组成不能数字开头不能是关键字保留字注意大小写

4.分类

全局变量：声明在函数外的变量哪里都可以用

局部变量：声明在函数内的变量只能在声明的那个函数里面用

5. 数据类型

1.分类

1.1简单数据类型/值类型

①undefined 变量初始值

②null 空

③boolean 布尔分为： (true真 false假)

④number 数字分为： (整数浮点数 NaN) 用isNaN()来判断是否是非数字返回布尔值

⑤string 字符串用引号引起来的字符串长度用length属性

1.2复杂数据类型/引用类型

①object 对象

②function 函数

2.检测

用typeof 数据来检测

检测结果：'undefined '、'boolean'、'number'、'string'、'object'、'function'

3.转换

3.1转换为字符串

①String(数据)

②数据.toString()

③数据 + '' 隐式转换

3.2转换为布尔值

①boolean(数据)

规律：undefined、null、false、0、NaN、空字符串''返回false 其余返回true

3.3转换为数字类型

①隐式转换/弱类型转换 (浏览器自动转换 - * /)

② parseInt(数据) 取整规律：数字、纯数字字符串、以数字开头的字符串取整数部分其余NaN

③ parseFloat(数据) 取浮点数规律：数字、纯数字字符串、以数字开头的字符串数字部分是整数就返回整数是浮点数就返回浮点数其余NaN

④ Number (数据) 取数字规律：数字纯数字字符串返回本身 null、false、空字符串、空格字符串返回0 true返回1 其余NaN

6. 浏览器内核 js引擎

7. 运算符

1.运算符优先级(口诀)

括号一元乘除余加减比较等不等且或条件后赋值

2.运算符分类及要点

2.1一元

！取反返回的结果为布尔值 ! Boolean(数据)

++ 自加 a++ 等价于 a = a + 1 ++在前先自加后赋值,++在后先赋值后自加

++
// var a = 5;//a:5
// var b = a++;//b:5  a:6
// var c = ++a;//a:7  c:7
// console.log(a);//7
// console.log(b);//5
// console.log(c);//7

--自减(与++同理)

// var a = 5;//a:5
// var b = a--;//b:5  a:4
// var c = --a;//a:3  c:3
// console.log(a);//3
// console.log(b);//5
// console.log(c);//3

2.2乘除余

乘除余有弱类型转换/隐式转换

余、模 % 结果一定是整数奇(数 % 2 == 1)偶(数 % 2 == 0)性、倍数判断

2.3加减

-会有弱类型转换/隐式转换

+一边有字符串就做连接符返回字符串

+只有两边都没有字符串才做加法运算有弱类型转换/隐式转换

2.4比较

、<、<=、>= 会有弱类型转换/隐式转换返回的结果为布尔值

2.5等不等

== != 相反 === !== 相反 ==只比较值 ===值和类型都相等才为真 NaN 只能用 isNaN()来判断 undefined、null、NaN和0比较都返回false 返回的结果为布尔值

NaN 转换比较特殊
// console.log(NaN == NaN);//false
// console.log(NaN === NaN);//false
// console.log(NaN > 0);//false
// console.log(NaN < 0);//false
// console.log(NaN == 0);//false
// console.log(isNaN(NaN));//true

2.6取反

!= true //等价于!(1 ==true) false

2.7并且 &&

并且 && 一假为假全真为真

// &&
// console.log(4 > 5 && 5);//false
// console.log(40 > 5 && 5 >2);//true
// console.log(40 > 5 && 5);//5
// console.log(1 && 0);//0
// console.log(0 && 1);//0
// console.log(5 && 1);//1
// console.log(1 && 5)//5

2.8或者 ||

或者 || 一真为真全假为假

||
// console.log(6 || 1);//6
// console.log(0 || 1);//1
// console.log(3 > 20 || 0);//0

2.9三元运算符

条件、三元条件 ? 条件为真执行的代码 : 条件为假执行的代码

?号后面放的是条件为真执行的代码冒号后面放的是条件为假执行的代码

5 > 50 ? console.log('ok') : console.log('No') ;//No

第二章 js流程控制

1. 语法结构

1.二选一

(案例参考5.12代码)

方法1

if 如果的意思 else否则的意思

// if(条件){
//         条件为真执行A
// }
// else{
//         条件为假执行B
// }
// if有且仅有一个 else根据需要选写

方法2

条件 ? 条件为真执行的代码 : 条件为假执行的代码

2.多选一

(案例参考5.12代码)

方法1 多重if语法结构

if 如果的意思 else否则的意思

 1.多重if
// 语法结构：
// if (条件1){
//         条件1为真执行A
// }else if(条件2){
//         条件2为真执行B
// }else if(条件3){
//         条件3为真执行C
// }
// ....
// else{
//         以上条件都不满足执行Z
// }
// if有且仅有一个，else if 根据需要写，else根据需要选写(可以省略)

方法2 switch语法结构

2.switch  注意常量后面是:
// 语法结构
// switch(表达式){
// case 常量1:
// 表达式===常量1为真时执行A;
// break;//(结束的意思)

// case 常量2;
// 表达式===常量2为真执行B;
// break;//(结束的意思)

// ....
// default://(默认情况下的意思)
// 表达式和以上的常量都不相等执行Z
// break;
// }

2.循环

1.循环定义

满足条件的情况下重复执行

2.分类及语法结构

(案例参考5.13代码)

2.1 for循环

// for(初始条件;判断条件;迭代条件){
//         执行代码
// }

//参考案例
//在控制台打印1-10

// for(var i = 1;i <= 10;i++){
//         console.log(i);
// }

2.2 for...in循环

循环对象的属性

...待补充

2.3 while循环

//初始条件
while(判断条件){
//         执行代码;
//         迭代条件;
// }

//参考案例
//在控制台打印1-10

// var i = 1;
// while(i <= 10){
//         console.log(i);
//         i++;
// }

2.4 do...while循环

先执行一次在判断条件

//初始条件
// do{
//         执行代码;
//         迭代条件;
// }
// while(判断条件)

//参考案例
//在控制台打印1-10

// var i = 1;
// do{
//         console.log(i);
//         i++;
// }
// while(i <= 10)

3.contince、break跳转语句

// continue 跳出本次 后面继续
// break 结束循环

4.双重循环

(案例参考5.13代码矩形倒三角正三角九九乘法表)

循环可以相互嵌套一般不超过3次常用2层外循环变量走1个内循环变量从头到尾走一遍

(外面走一次里面走一圈里面的循环走完或者条件不满足的时候会自动退出执行第二次外循环)

        1; // for(var i = 0;i < 2;i++){//外循环
//         for(var m = 0;m < 5;m++){//内循环
//                 console.log(m);
//         }
// }

// console.log(i)//2
// console.log(m)//5

第三章 js内置对象

1.数组

1.定义

用一个变量名存一系列的值(值可以是任意的数据类型)

2.分类

密集数组 [1,2,3,4,5,100] 常用

稀疏数组 [1,2,,,,,8]

3.数组元素的读取

数组元素的读取数组名[索引/下标] 索引是从0开始的整数二维数组元素读取元素数组名[索引/下标][索引/下标] 数组名[索引/下标]对应的没有值返回的是undefined

4.遍历/循环

读取数组中所有的元素

        //1.列举法

                console.log(arr[0]);
                console.log(arr[1]);
                console.log(arr[2]);
                console.log('------------');

                // 2.用for
                // 条件：开始条件  索引0
                //          判断条件  索引2  数组名.length 3
                //          迭代条件  上一次+1
                // 执行代码A：打印 数组名arr[索引]
 
                //索引 判断条件有= 
                for(var i = 0;i <= 2;i++){
                        console.log(arr[i]);
                }
                console.log('------------');



                // 用length 判断条件没有=  常用  变量的值可以在执行代码A里修改
                for(var i = 0;i <= 2;i++){
                        console.log(arr[i]);
                        // i = 0;//死循环
                }

                console.log{'-------------'};


                // 用for..in 常用 变量的值在执行代码A里修改无效
                for(var m in arr){
                        console.log(arr[m]);
                        // m = 0;
                }
                console.log('--------------');


                // 稀疏数组 for 对于没有值的元素返回undefined
                var arr2 = [1,,,,,4];
                for(var i = 0;i<arr2.length;i++){
                        console.log(arr2[i]);
                        // 给每个元素值加5
                        // arr2[i] += 5;
                }

                console.log('--------------');

                // 稀疏数组 for..in  只返回有值的元素
                for(var m in arr2){
                        console.log(arr2[m]);
                        arr2[m] += 5;

                }
                console.log(arr2);


                // 判断一个变量里存的是否是是一个数组
                console.log( typeof all);//object
                console.log( Array.isArray(all));//true

5.创建

5.1 var 数组名 = [];// 语法糖---字面量方法掌握

5.2 var 数组名 = new Array();//new 调用构造函数了解

用Array.isArray(数组名)来判断是否是一个数组返回的是布尔值

6.数组属性

数组属性length 表示数组长度数组名.length 长度是从1开始的整数可读可改

7.数组的方法

7.1 会改变原数组的方法（7个）

①数组名.pop() 删除末尾，只删除一个
                        
②数组名.push(添加的元素1,添加的元素2,添加的元素3...) 添加到末尾，1个或多个
                        
③数组名.shift() 删除开头，只删除一个
                        
④数组名.unshift(添加的元素1,添加的元素2,添加的元素3...) 添加在开头，1个或多个
                        
⑤数组名.splice(要增加的元素的索引,0,添加的元素1,添加的元素2,添加的元素3...); 增加元素到指定位置
数组名.splice(要删除的元素的索引,删除的个数); 删除指定位置的元素
数组名.splice(要改写的元素的索引,改写的个数,改写的元素1,改写的元素2,改写的元素3...); 改写指定位置的元素

⑥数组名.reverse()  倒序--翻转元素的顺序   清晨我上马 ----- 马上我晨清

⑦数组名.sort()  排序  -- 按照a-z顺序 先比较首位 首位相同比较第二位，以此类推
 数组名.sort(function(a,b){return a-b})  比较纯数字元素的数组
                                     //比较函数

7.2 不改变原数组的方法（5个）

①数组1名.concat(数组2,数组3.....)  合并数组元素  （注意拼接顺序） 返回新数组

②数组名.join('分隔符')  将数组中的元素用分隔符连接为一个字符串 分隔符不写默写是逗号   返回一个字符串

③数组名.slice(开始的索引,结束的索引)   截取数组某个部分，包前不包后,返回新数组

④ 数组名.indexOf(指定的元素，从哪里开始找)  查找指定元素的索引  返回 索引或 -1

⑤ 数组名.lastIndexOf(指定的元素，从哪里开始找)  从右往左找，找到了返回的索引是从左往右  返回 索引或 -1

2.字符串

1.定义

用引号引起来的文本是字符串

2.创建

2.1 构造函数

var str = new String('abc');

2.2 语法糖

var str = ‘得分23’

3.属性

length 字符串的长度修改无效

汉字字母空格特殊字符数字占一个长度

和数组length的比较都从1开始的正整数

不同点数组的length可以修改/重新赋值会影响数组字符串具有稳定性 length修改无效

// var s = 'dfdfdgf12';
// console.log(s.length);//9

// s.length = 2;//修改无效
// console.log(s.length);//9

4.方法(9个)

4.1 改变大小写(1种)

只对字母有效原字符串不变改变大小写后的字符串是新字符串整体改写

toUpperCase() 大写

toLowerCase() 小写

var str2 = str.toUpperCase();//大写 
var str3 = str.toLowerCase();//小写
console.log(str2);//'ABC';
console.log(str3);//'abc';

4.2截取字符字符串 (6种)

前三种掌握其他三种了解

4.2.1

字符串.charAt(索引号)

返回索引号对应的字符 1个返回最后的，中间的，都可以和length搭配使用

var str = 'abc4def'; 
str.charAt(0)//"a" 取任意位置的 
str.charAt(5)//"e" 取任意位置的 
str.charAt(str.length-1);//'f' 取末尾1个 
str.charAt(parseInt(str.length/2));//'4' 取中间1个

4.2.2

字符串.slice()

字符串.slice(开始索引，结束索引) 开始索引必写，结束索引选写，不写默认是原字符串的length,包前不包后

var str = '12abc'; 
str.slice(2,5)//'abc' 
str.slice(2)//'abc'

4.2.3

字符串.substring()

用法同slice(),区别是substring的参数不可以为负数，为负数时不报错但结果不可控，slice方法的结束索

引参数可以为负数，负数表示从末尾开始 (最好不用负数)

var str = 'm2abc'; 
console.log(str.slice(1,-1))//'2ab' 
console.log(str.substring(1,-1))//'m'结果不可控

4.2.4

字符串.substr()

字符串.substr(开始索引，子字符串的长度) 开始索引必写，可以为负数，负数表示从末尾开始，子字

符串的长度可选，不写默认是原字符串的length

var str = "abcde1234"; 
str.substr(1,4);//'bcde' 
str.substr(1);//'bcde1234'

4.2.5

字符串.substring()

用法同slice(),区别是substring的参数不可以为负数，为负数时不报错但结果不可控，slice方法的结束索

引参数可以为负数，负数表示从末尾开始

4.2.6

字符串.substr()

字符串.substr(开始索引，子字符串的长度) 开始索引必写，可以为负数，负数表示从末尾开始，子字

符串的长度可选，不写默认是原字符串的length

5.返回索引 (2种)

5.1 字符串.indexOf()

字符串.indexOf('指定字符/字符串',从哪个索引开始查找),第1个参数必写，第二个参数选写，不写默认

是0，返回值是第1个参数从第2个参数索引开始，找到的首次出现的这个字符/字符串的索引，没有找到

返回-1

5.2字符串.lastIndexOf()

字符串.lastIndexOf('指定字符/字符串',从哪个索引开始查找),第1个参数必写，第二个参数选写，不写默

认是length-1，返回值是第1个参数从第2个参数索引开始从后往前找，找到的首次出现的这个字符/字

符串的索引，没有找到返回-1

6.字符串.repeat(次数)

将字符串重复/复制指定次数，生成一个新字符串

7.字符串.split()

将字符串切割为一个数组，返回的数组可以使用数组的各种方法

8.字符串.trim()

去掉字符串首尾的空格，注意字符串中间的空格不会被去掉

3.对象

1.定义

对象是一个无序的由属性和方法组成的集合

属性和方法通称为键值对

属性：特征

方法：做什么/行为

2.创建对象的语法

对象用{}表示里面放键值对键和值之间用冒号隔开每队之间用逗号隔开

2.1 字面量方法---语法糖

var obj = { key1:zhi1, key2:zhi2, key3:zhi3 } console.log(obj);

2.2 new 调用构造函数

3.属性和方法的操作

3.1 增加属性、方法

对象名.属性/方法名 = 属性值/函数; 属性名是字符串，属性值根据需求可以是任意的数据类型

3.2 读取属性值

①对象名.属性名只能读取非纯数字的属性名 ②对象名['属性名'] 能读取所有的属性名

3.3 调用方法

对象名.方法名()

3.4 修改属性值--重新赋值

对象名.属性/方法名 = 新的属性值/函数;

5、删除属性、方法

delete 对象名.属性名/方法名属性删除后再读取返回undefined，方法删除后再调用会报错

4.遍历对象

(案例参考5.17代码01)

用for...in 循环

语法

for (变量 in 对象名字) {
         在此执行代码
        }
        
        语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。

例子
//   for (var k in obj) {
//       console.log(k);      这里的 k 是属性名、方法名
//       console.log(obj[k]); 这里的 obj[k] 是属性值
//   }

4.函数

1.定义

为了实现特定功能的代码块，可以重复调用

2.基本语法结构

1、函数声明
// function 函数名(参数){
//         代码块
// }
function声明函数的关键字，必须写，() {} 也必须写，小括号里的参数、函数名根据需求选写
// 2、函数调用 --- 函数只有调用之后才生效
// 函数名()

3.分类

3.1 有无函数名

①有/具名函数单独声明的函数必须写函数名

// 有/具名函数  -- 单独声明的函数
// function fn(){
//         console.log(111);
// }

// fn()

②匿名函数看到了 = 就可以省略函数名

// 匿名函数---函数表达式
// var f2 = function(){
//         console.log(222);
// }

// f2()

3.2 有无参数

(参考案例5.17代码02)

①带参函数 ②无参函数

3.3有无具体返回值 ①带返回值的函数看到关键字return ②不带返回值的函数

4.参数的要点

1、写在小括号里的内容叫参数
2、函数声明时的参数叫形参，本质是变量
3、函数调用时的参数叫实参，必须是确定的内容
4、传参方向：实参---> 形参
5、传参顺序：一一对应，保持一致
6、传参数量：尽量一样  实参多了没有影响 实参少了会出现undefined，也有可能出现顺序错误

5.返回值

函数的返回值默认是undefined
如果函数内有return关键字，就返回return后面的内容
return后面一般放一个值，如果需要返回多个值，就返回一个数组
return 有结束函数的作用，所以return下面的代码不执行，
return应该放在函数里的最后一行

6.总结是undefined的情况

①变量的初始值 ②对象的属性值的初始值 ③没有传实参的形参的初始值 ④函数的默认返回值

5.Math对象

1.定义

Math对象用于处理数学任务是内置对象对象分为：自定义对象和内置对象自定义对象：需要开发人员根据需求自己来创建的对象内置对象：js封装好可以直接使用的对象

常用的内置对象：Array数组 、String字符串、Math数学任务、Date日期时间

2.属性(1个)

Math.PI 圆周率

3.常用方法(9个)

3.1 取整

Math.floor( x ) 向下取整/下舍入

Math.ceil( x ) 向上取整/上舍入整数是本身负浮点数取整正浮点数取整加1 整数返回本身正浮点数取整数部分负浮点数取整数部分再加-1 或再减1

Math.round( x ) 四舍五入版就近取整注意 -3.5 结果是 -3 整数就返回本身浮点数就就近取整注意负数值越大越小 -1最大

// console.log(Math.round(-6.6));//-7 
// console.log(Math.round(-8.3));//-8

3.2 比大小

Math.max(x,y,z....) 求最大值

Math.min(x,y,z....) 求最小值

纯数字的字符串可以弱类型转换转成数字

布尔值可以弱类型转换转成数字

3.3 取随机数

Math.random() 获取范围在[0,1)内的随机值

// console.log(Math.random() * 10);//4.545101839845589
// console.log(parseInt(Math.random() * 10));//2 取整后随机

3.4 取绝对值

Math.abs( x ) 绝对值

3.5 求指数和平方根

Math.pow(x,y) 求x的y次方注意参数顺序

// console.log(Math.pow(3,4));//81
// console.log(Math.pow(-4,3));//-64
// console.log(Math.pow(-4,-3));//-0.015625  相当于-4的3次方 分之1

3.6 求x的平方根（正值）

// console.log(Math.sqrt(16));//4
// console.log(Math.sqrt(-16));//NaN
// console.log(Math.sqrt(8));//2.8284271247461903

6.Date对象

1.定义

处理日期和时间相关的内容

2.创建日期对象

var 变量名 =new Date(); 1.当前日期对象---不传参 2.指定时间的日期对象---传参

var today = new Date();//当前日期对象
// console.log(today);//Wed May 18 2022 09:54:58 GMT+0800 (中国标准时间)

var appoint = new Date('2022/5/18 12:00:00');
//指定时间的日期对象
console.log(appoint);

3.方法(8个)

(参考案例5.18 代码2)

记清楚单词取值范围含义方法返回的结果都是数字方法前面都要加对象名

3.1  getDate()     从 Date 对象返回              一个月中的某一天 (1 ~ 31)
3.2  getDay()      从 Date 对象返回              一周中的某一天 (0 ~ 6)
3.3  getMonth()    从 Date 对象返回              月份 (0 ~ 11)
3.4  getFullYear() 从 Date 对象以四位数字         返回年份
3.5  getHours()    返回 Date 对象的              小时 (0 ~ 23)
3.6  getMinutes()  返回 Date 对象的              分钟 (0 ~ 59)
3.7  getSeconds()  返回 Date 对象的              秒数 (0 ~ 59)
3.8  getMilliseconds()  返回 Date 对象的         毫秒(0 ~ 999)

3.9  getTime()  返回 1970 年 1 月 1 日至今的毫秒数 总毫秒数

4.定时器

(参考案例 5.18 代码6)

4.1 innerHTML 在页面中显示内容

4.2 setInterval定时器 (开启)

//开定时器 让时间动起来
// 参数调用这个定时器 1000是指每隔1000毫秒动一次
//var t = setInterval(clock,1000);

4.3 clearInterval 定时器 (关闭)

7.解题步骤

// 解题步骤：
// 1.分析html的结构(用什么标签)
// 2.布局及美化(写css)
// 3.分析js动效
// ①操作那些节点/标签 获取到他们
// ②添加什么事件 (怎么触发)
// ③事件处理函数(如何封装 实现什么功能)

8.Dom

1.定义

文档对象模型

2.Dom树

层级关系重点是标签节点/元素

3.获取标签节点

3.1js内置对象(6个)

1.1返回一个具体的节点

// document.getElementById('id');
// document.querySelector('css选择器');

1.2 返回集合/伪数组要获得具体的节点用集合名[索引]

// document.getElementsByTagName('标签名');
// element(父级节点).getElementsByTagName('标签名');
// document.getElementsByName('name名');
// document.querySelectorAll('css选择器');
// document.getElementsByClassName('类名');

3.2根据层级关系属性(5个)

// ①子节点.parentNode  获取父级节点及其祖先
// ②父节点.firstElementChild  获取第一个标签子节点
// ③父节点.lastElementChild 获取最后一个标签子节点
// ④弟节点.previousElementSibling  获取的是上一个兄节点
// ⑤兄节点.nextElementSibling  获取的是紧跟着弟节点

4.节点的内容样式属性的操作

4.1节点的内容

节点innerText 只获取/设置文本去除空格和换行

节点innerHTML 获取/设置文本标签都可以保留空格和换行

没有 = 是获取有 = 是设置

// var oDiv = document.querySelector('#box1');
// oDiv,innerHTML = '<strong>今天是：</strong> 2019';
// console.log(oDiv.innerHTML);//页面所有内容
// console.log(oDiv.innerText);//页面文本内容

4.2属性操作

1.方法：查看节点.getAttribute('属性名')

如何查看p标签上的title属性
console.log(oDiv.firstElementChild.title);
console.log(oDiv.firstElementChild.getAttribute('title'));

设置节点：setAttribute('属性名','属性值')

oDiv.firstElementChild.title = '啦啦啦啦';
console.log( oDiv.firstElementChild.title);

oDiv.firstElementChild.className = 'bot';
oDiv.firstElementChild.setAttribute('title','我改了哈哈哈哈');
console.log( oDiv.firstElementChild.getAttribute('title'));

setAttribute 添加/设置属性的意思

2.属性：

查看：节点.属性名

设置：节点.属性名 = '属性值'

给p标签添加红色的边框
oP.style.border = '3px solid red';
//单条样式

oP.style = `border:3px solid green;  
                        background-color:#ccc;`;
// 多条样式声明

添加类名 active
oP.className = 'active news hot';
//整体添加类名

oP.classList.add('active');
oP.classList.add('news');
oP.classList.add('hot');
// 分开添加类名

add的是添加的意思


1、操作style属性

元素对象.style.样式名 = '值'; 

元素对象.style = '样式名1：值1；样式名2：值2；样式名3：值3；......';

2、操作className属性

元素对象.className = 值; 

3、classList属性（方法里面的类名不要加点）

元素对象.classList.add（’类名’）；添加

元素对象.classList.remove（’类名’）; 移除

元素对象.classList.toggle（’类名’）;切换：如果classList中存在给定的类名，删除它，否则，添加它； 

元素对象.classList.contains( ‘类名’); 判断是否存在：确定元素中是否包含指定的类名，返回值为true 、false； 

元素对象.classList.replace('旧的类名', '新的类名') ；类名替换

5.节点操作

5.1 写入节点

5.1.1 写入内容

document.write('<标签名>')
在页面中写入 会覆盖之前的html结构 多个document.write相互不会覆盖 用的少

5.1.2写入内容

父节点.innerHTML = '<标签名>'
修改父节点里的内容 会覆盖父节点里原来的html结构 一般用于父节点里原本没有内容 用innerHTML来添加内容 用的多

5.1.3 写入内容

document.createElement('标签名');
创建一个空的标签 没有属性也没有内容 需要添加属性、内容 还需要用appendChild添加到父节点中 才能在页面看到

5.2克隆节点

节点.cloneNode()
要克隆的节点.cloneNode() ()里不传参，表示克隆节点本身，传true表示克隆节点及其后代  
克隆的得到的节点需要根据需求使用5.5 5.6添加到页面中

5.3添加节点

父节点.appendChild(子节点) 不加引号 
把子节点添加到父节点的末尾

5.4插入节点

父节点.insertBefore(要插入的节点，指定节点)   
在指定节点前插入新节点 插入的是兄节点

5.5清空节点

父节点.innerHTML或innerText = ''  清空父节点 父节点本身保留

5.6删除节点

5.6.1 删除节点

父节点.removeChild(要删除的子节点)  从父节点中删除指定的子节点

5.6.2 删除节点

节点.remove( )  删除节点本身以及里面的内容

5.7替换节点

父节点.replaceChild  (用来替换的节点，被替换的节点)

6.事件

你(行为)若触发我(事件)便执行

7.事件三要素

①事件源事件给那个节点对象 event.target ②事件类型给什么事件 event.type ③处理函数事件触发之后做什么一般是个匿名函数

8.执行步骤

①获取事件源 6+5
②添加事件类型  20
③封装处理函数  根据需求来封装

9.事件

9.1 鼠标事件(10个)

onclick 单击

ondblclick 双击

oncontextmenu 右键菜单

onmouseover 移入

onmouseout 移出

onmouseenter 进入

onmouseleave 离开

onmousedown 按下

onmouseup 松开

onmousemove 移动

9.2 键盘事件 (2个)

onkeydown 按键按下

onkeyup 按键松开

onkeypress 按键经过

9.3 表单事件 (3个)

onfocus   获取焦点 光标

onblur    失去焦点 光标

onchange  域的内容改变时触发 (失去焦点时 比较里面的内容和获得焦点时不一样 才会触发)

9.4 UI界面事件 (3个)

onload 图片或窗口加载

onresize 窗口或框架尺寸改变

onscroll 滚动条事件

10. 阻止默认行为

默认行为：浏览器自动执行的 a点击会跳转/刷新右键菜单

// oncontextmenu 点击右键菜单
document.oncontextmenu = function(e){
//阻止默认行为
// 写法一 一般写在函数内的第一行
// e.preventDefault();

// 拓展 写法二 写在函数的最后一行
        return false;
}

11. 事件流

11.1 定义

事件流：页面接受事件的顺序

11.2 分类

事件冒泡：浏览器默认从里往外

事件捕获：从外往里

11.3 阻止冒泡

// event.stopPropagation();

12. 事件监听

12.1 事件绑定的方式

1.节点.事件名 = 匿名函数

2.封装有名函数 行内调用

3.节点.addEventListener('事件名',处理函数,布尔值)
处理函数可以是匿名函数 也可以是有名函数的函数名(不要放调用函数的小括号)

12.2 封装事件监听和移除事件的函数 (addEventListener)

// 函数功能：绑定事件法3--事件监听
// 参数: target  节点对象           数据类型：对象
//       type   事件类型           数据类型：字符串 放事件名不加on
//       fn     处理函数           数据类型：函数
//       bol    事件是冒泡还是捕获   数据类型：布尔值  选参 放参数末尾
// 有无具体返回值 无

function addEventHandel(target,type,fn,bol){
        bol = bol || false;//如果传了就用传的实参 没有传就是默认值false即事件冒泡
        // if...else处理兼容
        if(target.addEventListener){
                target.addEventListener(type,fn,bol);
        }else{
                target.attachEvent('on' + type,fn)
        }
}

12.3 移除用事件监听绑定的事件 (removeEventListener)

// 参数: target  节点对象   数据类型：对象
//         type  事件类型  数据类型：字符串 放事件名不加on
//         fn    处理函数  数据类型：函数
//         bol   事件是冒泡还是捕获   数据类型：布尔值  选参 放参数末尾
// 有无具体返回值 无

function removeEventHandel(target,type,fn,bol){
        bol = bol || false;//如果传了就用传的实参 没有传就是默认值false即事件冒泡
        // if...else处理兼容
        if(target.removeEventListener){
                target.removeEventListener(type,fn,bol);
        }else{
                target.detachEvent('on' + type,fn)
        }
}

12.4 事件监听的优点

1.事件监听可以同一个节点上绑定同一个事件执行不同的函数其他方法都只能执行一个

2.可以移除用事件监听绑定的事件

13. 事件委托

13.1 定义

不给子元素注册事件给父元素注册事件把处理代码在父元素的事件中执行

13.2 原理

给父元素注册事件利用事件冒泡当子元素的事件触发会冒泡到父元素然后去控制相应的子元

素

13.3 代码


<ul id="list">
                        <li id="li1">我是111</li>
                        <li id="li2">我是222</li>
                        <li id="li3">我是333</li>
                </ul>

                <script type="text/javascript">
                        // 需求：点击那个li就让哪个li的内容打印到控制台

                        // 传统写法
                        // 1.获取节点
                        var li1 = document.getElementById('li1');
                        var li2 = document.getElementById('li2');
                        var li3 = document.getElementById('li3');
                        // console.log(li1,li2,li3);

                        // 2.添加点击事件
                        // li1.onclick = function(){
                        //         console.log(li1.innerHTML);//点击第一个li会打印第一个li的内容
                        // }
                        // li2.onclick = function(){
                        //         console.log(li2.innerHTML);//点击第一个li会打印第一个li的内容
                        // }
                        // li3.onclick = function(){
                        //         console.log(li3.innerHTML);//点击第一个li会打印第一个li的内容
                        // }

                        // 优化
                        var lis = document.getElementsByTagName('li');
                        // 循环每个li 加点击事件
                        console.time("a");//所用时间
                        for(var i = 0;i < lis.length;i++){
                                lis[i].onclick = function(){
                                        // 点击到谁就打印谁
                                        console.log(this.innerHTML);//this指当前对象
                                }
                        }
                        console.timeEnd("a");//所用时间

                        // // 需求：往ul内再添加一个节点
                        var list = document.getElementById('list');
                        // 创建标签
                        var li4 = document.createElement('li');
                        // 写入内容
                        li4.innerHTML = 'item4';
                        list.appendChild(li4);
                        // 注意：此时事件加在li上
                        // 但传统写法添加后的节点 并不会再次读取 所以第四个没有点击事件
                
                
                        // 事件委托的写法
                        // var list = document.getElementById('list');
                        // console.time("b");
                        // list.addEventListener('click',function(e){
                        //         console.log(e.target);//点那个 那个就是目标节点
                        //         console.log("事件委托的写法："+e.target.innerHTML);
                        // })
                        // console.timeEnd("b");

                        //  // 需求：往ul内再添加一个节点
                        //  var li4 = document.createElement('li');
                        //  li4.innerHTML = "item4";
                        //  list.appendChild(li4);

                         // 注意：此时事件加在document上 document是li的祖先元素
                </script>

9.Bom

1.定义

Bom 浏览器对象模型顶级对象是window

2.分类

1.包括3个部分 history对象--浏览历史

location对象--网址

document对象--文档

2.属性(了解)

innerHeight 返回窗口的文档显示区的高度

innerWidth 返回窗口的文档显示区的宽度。

3.方法

可以省略window

3.1弹窗(三种) alert() prompt() confirm() 会阻塞进程

alert('提示语')  警示框 只有确定按钮 点确定返回undefined  一般开发人员做验证 

prompt() 输入框 有确定和取消两个按钮 点确定返回输入框里填写的内容 点取消返回null 一般开发人员做输入处理

confirm('提示语')  确认框 有确定和取消两个按钮 点确定返回true 点取消返回false 一般和 选择/判断

3.2 计时定时器

开启

var t1 = setInterval(全局函数毫秒数)

var t2 = setTimeout(全局函数,毫秒数) 只会执行一次爆炸就没有了

关闭

clearInterval(t1)

clearTimeout(t2)

3.this指向

this 是一个关键字表示当前对象，谁调用它谁是当前对象

重点参考案例5.25 代码02

默认指向window的四种情况

1、默认情况下 指向window

2、直接调用函数，等价于window.fn()   this指向谁window

3、行内调用，等价于window.fn()   this指向谁window

4、匿名函数内直接调用函数，等价于window.fn()   this指向谁window

指向对象的四种情况

A、事件直接调用有名函数的函数名,this指向事件左边的对象

B、在匿名函数内直接使用this，this指向事件左边的对象

C、事件监听来绑定事件并调用有名函数的函数名，this指向事件监听方法左边的对象

D、调用封装好的事件监听的函数，来绑定事件并调用有名函数的函数名，this指向第1个参数目标对象

4.this和event比较

this指当前对象 event指事件对象 event.target指当前事件对象的目标对象

var oLis = document.querySelectorAll('.list>li');
var list = document.querySelectorAll('.list');
console.log(oLis);

// 给li加事件 this和event.target都指向同一个节点即事件左边的对象 此时只有一层 没有冒泡
oLis[0].onclick =function(){
        console.log('this',this);//li
        console.log('event.target',event.target);//li
}

// 给ul加事件  this 指向事件左边的对象  event.target 指向行为发生的哪个节点 有冒泡或事件委托
list.onclick =function(){
        console.log('this',this);//ul    this指向事件左边的对象
        console.log('event.target',event.target);//在ul里点击 指向ul  在li上点击指向li  
        //点击的行为在哪个节点上 就指向哪个节点 
}

5.location history document对象

URL 统一定位符统一的且在网上唯一的地址该地址就叫URL

由4部分组成：协议主机端口路径

1.location对象

属性：location.href 获取当前的完整URL
location.href = '指定页面的完整URL';跳转到指定页面

方法：location.reload() 刷新当前页面
location.replace('指定页面的完整URL');跳转到指定页面

2.history对象
方法：history.back() 后退 等价于 history.go(-1)
history.forward()   前进 等价于 history.go(1)

3.document对象
属性：document.URL 获取当前页面的完整URL
document.referrer  获取当前页面的来源页面的完整URL

10.正则表达式

1.定义

正则匹配字符串的内容或位置用于表单验证(内容分是否有以及数量)

2.创建

①//字面量方式 语法糖
var reg = /a/;
②//调用RegExp对象的构造函数创建
 var regexp = new RegExp('123');
 console.log(regexp); // /123/

3.检测

正则.test(要检测的内容) 返回布尔值

3-1
console.log(reg.test('china'));//true 'china'中有'a'
console.log(reg.test('china'));//false 'china'中有没有'A' 区分大小写 
如果写了修饰符i就不区分大小写
3-2
^以谁开头  $以谁结尾  根据需要添加或不添加  即有^又有$表示精准匹配
var rg = /^abc$/; // 正则表达式里面不需要加引号 不管是数字型还是字符串型
/abc/ 只要包含有abc这个字符串返回的都是true
console.log(rg.test('abc'));//true
console.log(rg.test('abcd'));//false
console.log(rg.test('abcabc'));//false
3-3
匹配内容 有没有
x|y 匹配x或者y 二选一 z|food  能匹配'z'或'food'

[ ] 匹配里面的任意一个 多选一

[^] 不匹配里面的任意一个
3-4匹配内容 有几次 见以下

4.验证表单的作用

表单验证案例见5.30代码2

①验证规范性减轻服务器的压力 ②验证思路给用户提示规范用户输入输完失去焦点时开始验证用正则用test验证内容用true 或 false 给相应的提示

前端-js初级笔记

第一章 js基础

1. js定义

2. js组成

3. 输入输出语句

4. 变量

1.定义

2.声明和赋值

3.变量名规范

5. 数据类型

1.分类

1.1简单数据类型/值类型

1.2复杂数据类型/引用类型

2.检测

用typeof 数据 来检测

3.转换

3.1转换为字符串

3.2转换为布尔值

3.3转换为数字类型

6. 浏览器内核 js引擎

7. 运算符

1.运算符优先级(口诀)

2.运算符分类及要点

2.1一元

2.2乘除余

2.3加减

2.4比较

2.5等不等

2.6取反

2.7并且 &&

2.8或者 ||

2.9三元运算符

第二章 js流程控制

1. 语法结构

1.二选一

2.多选一

2.循环

1.循环定义

2.分类及语法结构

2.1 for循环

2.2 for...in循环

2.3 while循环

2.4 do...while循环

3.contince、break跳转语句

4.双重循环

第三章 js内置对象

1.数组

1.定义

2.分类

3.数组元素的读取

4.遍历/循环

5.创建

6.数组属性

7.数组的方法

7.1 会改变原数组的方法 （7个）

7.2 不改变原数组的方法 （5个）

2.字符串

1.定义

2.创建

2.1 构造函数

2.2 语法糖

3.属性

4.方法(9个)

4.1 改变大小写(1种)

4.2截取字符字符串 (6种)

5.返回索引 (2种)

5.1 字符串.indexOf()

5.2字符串.lastIndexOf()

6.字符串.repeat(次数)

7.字符串.split()

8.字符串.trim()

3.对象

1.定义

2.创建对象的语法

2.1 字面量方法---语法糖

2.2 new 调用构造函数

3.属性和方法的操作

3.1 增加属性、方法

3.2 读取属性值

3.3 调用方法

用typeof 数据来检测

7.1 会改变原数组的方法（7个）

7.2 不改变原数组的方法（5个）

6.总结是undefined的情况

3.2根据层级关系属性(5个)

4.节点的内容样式属性的操作