JavaScript学习笔记

语法基础

输入输出语句

 <script>
        //  弹出一个输入框
       prompt('请输入你的年龄');
    </script>

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

变量

1. 声明变量
2. 赋值

var age; //声明一个名称为age的变量

变量的初始化
var age = 18;

1. 更新变量，当一个变量被重新赋值之后，他原有的值就会被覆盖，变量以最后一次赋值为准。
2. 同时声明多个变量,只用一个var 变量之间用逗号隔开。

var age = 12,
    address = ksd,
    gz = 2000;

3. 只声明没赋值，输出 underined
4. 没声明没赋值，输出会报错
5. 不声明只赋值，可以使用，但不提倡。

数据类型

js是变量数据类型是在程序运行时才根据赋值才确认。
js是动态语言，变量的数据类型可以改变。

简单数据类型：number（数字型，整数小数都是）,string（字符串型）,boolean,underfined,null
复杂数据类型：object

数字型

1. 八进制
   在数字前面加0表示八进制，程序输出时会自动转换为十进制
2. 十六进制
   在数字前面加0x表示十六进制，程序输出时会自动转换为十进制
3. 数字型的三个特殊值
   Infinity : 表示无穷大
   -Infinity : 表示无穷小
   NaN :not a number 表示一个非数值

isNaN()这个方法用来判断一个变量是否为数字。是数字返回false,不是数字返回true。

字符串型

加了引号的都为字符串型，一般采用单引号
多个引号时，内外两个引号需要不同

字符串转义符

转义符	解释说明
\n	换行符，n为newline的意思
\\	斜杠\
\'	'单引号
\"	"双引号
\t	tab缩进
\b	空格

字符串长度 length()
字符串的拼接 + 只要有字符串和其他拼接，最后都为字符串
变量不能加" '，否则会变成字符串

布尔型

true表示真（1），flase表示假（0）。

获取变量的数据类型

typeof num;//num为某一变量

prompt取得的值都为字符串

数据类型的转换

转换为字符型

方式	说明	案例
变量.toString()	转成字符串
Sting(变量)	转成字符串
+字符串	和字符串拼接的结果都是字符串	隐式转换

转换为数字型

方式	说明	案例
parselnt(string)	将string类型转成整数数值型
parseFlaot(string)	将string类型转换为浮点型数值
Number()	将string类型转换为数字型
js隐式转换（* - /）	利用算数运算

转换为布尔型

方式	说明	案例
Boolean()	其他类型转换为bool型

代表空。否定的值会转换为false，如'',0,NaN,null,underfined
其余值都会被转换为true

运算符

算数运算符

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取余数（取模）

1. 加法运算符 + 如果两边都是字符串，则拼接字符串，如果是数字则相加。
2. 减法运算符 -
3. 乘法运算符 *
4. 除法运算符 /
5. 取余数运算符 %

表达式：数字运算符变量组成的式字
返回值：运算结果

递增递减运算符

运算符	描述
++i	前置自增运算符，先自增再返回值
i++	后置自增运算符，先返回原值再自增
–i	前置自减运算符，先自减再返回值
i–	后置自减运算符，先返回原值再自减

比较运算符

比较之后会返回boolean值

运算符	描述
==	等于，会默认转换数据类型，把字符串转为数字型
===	全等于，类型和值都相等
!=	不等于
!==	全不等于，类型和值都不相等
>	大于
<	小于
>=	大于等于
<=	小于等于

逻辑运算符

运算符	描述
&&	逻辑与，如果两边都是true，则返回true
||	逻辑或，如果两边都是false，则返回false
!	逻辑非，如果为true则返回false，如果为false则返回true

逻辑运算符的返回值都是boolean值

短路运算：
逻辑与：如果表达式1为真，结果返回表达式2的值，如果表达式1为假，结果返回表达式1的值。
逻辑或：如果表达式1为真，结果返回表达式1的值，如果表达式1为假，结果返回表达式2的值。

赋值运算符

运算符	描述
=	简单赋值，把右边的值赋给左边的变量
+=	加法赋值，把右边的值加给左边的变量，等于a=a+b
-=	减法赋值，把右边的值减给左边的变量，等于a=a-b
*=	乘法赋值，把右边的值乘给左边的变量，等于a=a*b
/=	除法赋值，把右边的值除给左边的变量，等于a=a/b
%=	取余数赋值，把右边的值取余给左边的变量，等于a=a%b
<<=	左移赋值，把右边的值左移给左边的变量，等于a=a<<b
>>=	右移赋值，把右边的值右移给左边的变量，等于a=a>>b
>>>=	无符号右移赋值，把右边的值无符号右移给左边的变量，等于a=a>>>b
&=	按位与赋值，把右边的值按位与给左边的变量，等于a=a&b
^=	按位异或赋值，把右边的值按位异或给左边的变量，等于a=a^b

流程控制

顺序结构

顺序结构就是程序从上到下依次执行的过程。

分支结构

分支结构就是程序根据条件进行分支执行的过程。

if 语句

if语句的语法结构

if(满足条件){
    //执行语句
}
//为假不执行大括号里面的代码

if else 语句

if else语句的语法结构

if(满足条件){
    //执行语句
}
else{//不满足条件执行语句
}

if else if 语句

if else if语句的语法结构

if(满足条件){
    //执行语句
}
else if(不满足上一个条件但满足该条件){
    //不满足第一个条件执行第二个条件
}
else if(不满足之前的条件但满足该条件){
    //不满足第一个条件执行第二个条件
}
else{//都不满足条件执行语句}

三元表达式

三元表达式的语法结构

条件?表达式1:表达式2
//如果条件为真则返回表达式1，否则返回表达式2

switch 语句

switch语句的语法结构

switch(表达式){
    case value1:
        //执行语句1
        break;
    case value2:
        //执行语句2
        break;
    ···
    default:    //当没有满足条件的case语句时执行
        //执行语句

}
//执行思路：先执行case语句，如果case语句的值等于表达式的值，则执行case语句下面的语句，直到遇到break语句为止。如果case语句的值不等于表达式的值，则继续执行下一个case语句，直到遇到default语句为止。如果case语句的值都不等于表达式的值，则执行default语句下面的语句。
//switch语句的表达式可以是任何类型，包括字符串、数字、布尔值等。
//表达式的数据类型和值都必须和case语句的值的类型和值保持一致才能执行
//如果case里面没有break语句，则执行完case下面的语句后，会继续执行下一个case下面的语句，直到遇到break语句为止。如果case里面有break语句，则执行完case下面的语句后，会跳出switch语句。

循环结构

for 循环

for循环的语法结构(通常和计数有关)

for(初始化语句;条件语句;更新语句){
    //执行语句
}
初始化语句：初始化变量，只执行一次
条件语句：判断循环是否继续，如果为真则继续循环，如果为假则结束循环
更新语句：更新变量，每次循环完执行一次

while 循环

while循环的语法结构(通常和条件有关)

while(条件语句){
    //执行语句
    //更新语句
}
//条件语句：判断循环是否继续，如果为真则继续循环，如果为假则结束循环
//里面应该还是需要更新语句，防止死循环

do while 循环

do while循环的语法结构(通常和条件有关)

do{
    //执行语句
}
while(条件语句);
//do while循环和while循环的区别是do while循环至少执行一次，while循环不一定执行一次。

continue 语句

continue语句的语法结构

for(初始化语句;条件语句;更新语句){
    if(条件){
        continue;
    }
}
//continue语句可以让程序跳过当前循环，继续执行下一次循环。

break 语句

break语句的语法结构

for(初始化语句;条件语句;更新语句){
    if(条件){
        break;
    }
}
//break语句可以让程序跳出当前循环，结束循环。

数组

数组的概念

数组是一组数据的集合，每个数据都有索引，索引从0开始。

数组的创建

js中创建数组的方式有两种
1.用new关键字创建数组

new Array();

2.利用数组字面量创建数组

var arr = [];

数组的索引

索引（下标）：用来访问数组中的元素的序号。从0开始。

var arr = [1,2,3,4,5];
console.log(arr[0]);//1  就可以得到数组中的第一个元素（下标为0的元素）

遍历数组

遍历数组的方式有两种
1.for循环

for(var i = 0;i < arr.length;i++){
    console.log(arr[i]);
}

2.forEach()方法

arr.forEach(function(item,index,array){
    console.log(item);//item为数组中的元素
    console.log(index);//index为数组中的索引
    console.log(array);/
    //array为数组本身
})

冒泡排序

冒泡排序是一种简单的排序算法，它的基本思想是
1.比较相邻的元素。如果第一个比第二个大，就交换他们两个。
2.对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。这步做完后，最后的元素会是最大的数。
3.针对所有的元素重复以上的步骤，除了最后一个。
4.持续每次对越来越少的元素重复上面的步骤1~3，直到没有任何一对数字需要比较。

function bubbleSort(arr){
    for(var i = 0;i < arr.length;i++){//外层循环控制比较的次数
        for(var j = 0;j < arr.length - i - 1;j++){//内层循环控制每次比较的次数
            if(arr[j] > arr[j + 1]){
                var temp = arr[j];
            }
        }
    }
    return arr;
}

函数

函数是程序中可以重复使用的代码块，函数可以接受参数，并返回结果。
函数的声明方式有两种
1.函数声明

function functionName(parameter1,parameter2,parameter3){
    //函数体
    return result;
    //return语句用来返回函数的结果
}

2.函数表达式

var functionName = function(parameter1,parameter2,parameter3){
    //函数体
    return result;
    //return语句用来返回函数的结果
}

agruments

arguments是函数的一个内置对象，它包含了函数的参数。里面存储了用户传入的所有参数。
是一个伪数组，可以通过索引访问其中的元素。但是没有真数组的一些方法，popp()，push()等。

function test(){    
    console.log(arguments) 
}

作用域

作用域是变量和函数的可访问范围，在js中，变量和函数有全局作用域和局部作用域。

全局作用域

整个script标签 或者是一个单独的js文件

局部作用域

函数内部定义的变量和函数，局部作用域

变量作用域

1.全局变量：在函数外定义的变量，是全局变量，可以在任何地方访问。如果在函数内部没有声明直接赋值的变量，这个变量也是全局变量。
2.局部变量：在函数内部定义的变量，局部变量，只能在函数内部访问。

作用域链

作用域链是js引擎在查找变量和函数时，从当前作用域开始，向上查找，直到找到全局作用域为止。

预解析

js引擎在解析js代码时，会先对变量和函数进行预解析，然后才会执行代码。
1.变量预解析：在函数内部定义的变量，会先被解析为undefined，然后在函数体中赋值。
2.函数预解析：在函数内部定义的函数，会先被解析为函数体，然后在函数体中赋值。
3.全局变量预解析：在函数外定义的变量，会先被解析为undefined，然后在函数体中赋值。
4.全局函数预解析：在函数外定义的函数，会先被解析为函数体，然后在函数体中赋值。
5.变量和函数的预解析顺序：先对函数进行预解析，再对变量进行预解析。
6.变量和函数的预解析作用域：全局变量和函数的预解析作用域是整个script标签或者一个单独的js文件，局部变量和函数的预解析作用域是函数内部。
7.变量和函数的预解析结果：全局变量和函数的预解析结果是undefined，局部变量和函数的预解析结果是函数体。

1.先预解析
2.再根据作用域链执行代码

对象

对象是js中一种数据类型，对象是由属性（外在表现，如颜色大小）和方法(行为，如吃饭睡觉等可以做的事情)组成的。

对象创建

1.对象字面量创建对象

var obj = { 
    uname: '张三',
    age: 18,
    sex: '男',
    eat: function(){
        console.log('吃饭');
    }
 };
//里面的属性或者方法采取键值对的形式，键是属性名，值是属性值。
//多个属性采用逗号隔开。
//方法冒号后面跟的是一个匿名函数。
//使用对象
//调用对象的属性  采取 对象名.属性名 的形式。
console.log(obj.uname);//张三
//调用对象的属性  采取 对象名[属性名] 的形式。
console.log(obj['uname']);//张三
//调用对象的方法  采取 对象名.方法名 的形式。
obj.eat();

变量和属性的相同：都是存储数据。
变量和属性的不同：
1.变量 单独声明并且赋值 使用的时候直接写变量名，单独存在
2.属性 在对象中不需要声明 使用的时候需要使用对象名.属性名

2.利用new object 创建对象

var obj = new Object();//创建了一个空对象
obj.uname = '张三';
obj.age = 18;
obj.sex = '男';
obj.eat = function(){
    console.log('吃饭');
}
//我们是利用等号 = 赋值的方法添加对象的属性和方法
//每个属性和方法之间用分号 隔开。

3.利用构造函数创建对象

//构造函数
function Person(uname,age,sex){
    this.uname = uname;
    this.age = age;
    this.sex = sex;
    this.eat = function(dish){
        console.log(dish);
    }
}
var obj = new Person('张三',18,'男');//创建了一个对象
obj.eat('吃饭');
console.log(obj.uname);

对象的遍历

1.for…in循环

for(var key in obj){
    console.log(key);//打印对象的属性名
    console.log(obj[key]);//打印对象的属性值
}

2.Object.keys()方法

var keys = Object.keys(obj);
for(var i = 0;i < keys.length;i++){
    console.log(keys[i]);//打印对象的属性名
    console.log(obj[keys[i]]);//打印对象的属性值

}

内置对象

内置对象是js引擎自带的对象，不需要引入外部文件，可以直接使用。
js引擎自带的几个对象有：自定义对象，内置对象，浏览器对象

内置对象：math，datee，string，array，regexp，error，json

math对象

 //math对象：math对象是js引擎自带的数学对象，里面封装了一些数学方法。
var num = Math.random();//生成一个0-1之间的随机数。其他方法可以查询js文档。
 

date对象

 //date对象：data对象是js引擎自带的时间对象，里面封装了一些时间方法。
var date = new Date();//生成一个当前时间的对象。其他方法可以查询js文档。
       console.log(data.getFullYear());
       console.log(data.getMonth()+1);//返回的月份小一个月  要加1
       console.log(data.getDate()); //返回的为几号
       console.log(data.getDay());//周日为0

var date1 = +new Date();//返回毫秒数（从1970年1月1日0时0分0秒0毫秒到当前时间的毫秒数）
console.log(date1);

倒计时案例
        function countdown(time){
            var nowTime = +new Date();//返回的为当前时间的总的毫秒数
            var inputTime = +new Date(time);//将输入的时间转化为毫秒数
            var time = inputTime - nowTime;//计算剩余的时间
            var d = Math.floor(time / 1000 / 60 / 60 / 24);//计算天
            var h = Math.floor(time / 1000 / 60 / 60 % 24);//计算小时
            var m = Math.floor(time / 1000 / 60 % 60);//计算分钟
            var s = Math.floor(time / 1000 % 60);//计算秒
            return d + '天' + h + '小时' + m + '分钟' + s + '秒';
        }
        console.log(countdown('2026-01-01 00:00:00'));

date对象和math对象不一样，他是一个构造函数，需要我们实例化之后才可以使用。

数组对象

数组
创建数组的方式

//1.利用数组字面量
var arr = [1,2,3];
console.log(arr[0]);

//2.利用new Array()
//var arr1 = new Array;创建了一个空数组
//var arr1 = new Array(2); //创建了一个长度为2的数组,有两个空元素
var arr1 = new Array(1,2,3);//创建了一个长度为3的数组，元素为1,2,3
console.log(arr1);

检测是否为数组

//instanceof  运算符
var arr = [];
var arr1 = {};
console.log(arr instanceof Array);//true
console.log(arr1 instanceof Array);//false
//Array.isArray(参数)
console.log(Array.isArray(arr));//true
console.log(Array.isArray(arr1));//false

翻转数组

function reverse(arr){
    if (arr instanceof Array){
        var newArr = [];
        for (var i = arr.length - 1; i >= 0; i--){
            newArr[arr.length] = arr[i];
        }
        return newArr;
    }else{
        return '请输入数组';
    }
}

添加或者删除数组元素

1. push() 在数组的末尾添加一个或者多个数组元素

 var arr = [1,2,3];
 arr.push(4);
 console.log(arr);//[1,2,3,4]
 //push 在末尾添加元素，参数直接写添加的元素，push完毕之后返回的结果是新数组的长度，

2.unshift() 在数组的开头添加一个或者多个数组元素

arr.unshift(0);
console.log(arr);//[0,1,2,3,4]
//unshift 在开头添加元素，参数直接写添加的元素，unshift完毕之后返回的结果是新数组的长度，

3.pop() 从数组的末尾删除一个数组元素

arr.pop();
console.log(arr);//[0,1,2,3]
//pop() 方法从数组的末尾删除一个元素，并返回该元素的值。

4.shift() 从数组的开头删除一个数组元素

arr.shift();
console.log(arr);//[1,2,3]
//shift() 方法从数组的开头删除一个元素，并返回该元素的值。

筛选数组案例

let arr = [1500,2000,1800,1700,3000];//筛选出大于2000的元素
var newArr = [];
for(var i = 0;i<arr.length;i++){
    if(arr[i]>2000){
        newArr.push(arr[i]);
    }
}
console.log(newArr);

翻转数组

let arr = [1,2,3,4,5,6,7,8,9,10];
arr.reverse();//[10,9,8,7,6,5,4,3,2,1]

冒泡排序

let arr1 = [2,25,4,3,47]:
arr1.sort(function(a,b){
    return a-b;//升序
    //return b-a;//降序
});
console.log(arr1);

数组索引方法
1.indexOf() 返回该数组的索引号，只返回第一个匹配元素的索引号，如果没有匹配的元素，则返回-1
2.lastIndexOf() 返回该数组的索引号，只返回最后一个匹配元素的索引号，如果没有匹配的元素，则返回-1 。相对于indexOf()，lastIndexOf()方法会从后向前搜索。

let arr = ['red’,‘green’,‘blue’,‘yellow’,'red'];
console.log(arr.indexOf('green'));//1
console.log(arr.lastIndexOf('red'));//4

数组去重

function unique(arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}
var demo = unique(['c', 'a', 'b', 'c', 'd', 'a', 'b']);
console.log(demo);//['c', 'a', 'b', 'd']

数组转换为字符串
1.toString() 将数组转换为字符串，并返回结果。

var arr = [1,2,3,4];
console.log(arr.toString());//1,2,3,4

2.join() 将数组转换为字符串，并返回结果。

var arr = [1,2,3,4];
console.log(arr.join('-'));//1-2-3-4

字符串对象

//基本包装类型
var str = 'hello';
console.log(str.length);//5
//对象和复杂数据类型才有 属性和方法 
//简单数据类型只有方法  但是为什么有length属性呢？
//基本包装类型 把简单数据类型包装为复杂数据类型
var temp = new String('hello'); //把简单数据类型包装为复杂数据类型
str = temp;//把临时变量的值给 str
temp = null; //销毁这个临时变量

字符串的不可变性

var str = 'hello';
console.log(str);//hello
str = 'world';
console.log(str);//world
//虽然这个时候str的值改变了，但是‘hello’这个字符串还是存在的，只是被覆盖了。str只是指向了新的字符串world。

字符串的所有方法都不会修改字符串本身，操作完成之后是返回一个新的字符串。

根据字符返回位置

1.indexof(‘要查询的元素’,查询开始的位置) 返回字符串中第一个匹配项的位置，如果没有匹配项，则返回-1。
2.lastIndexOf() 返回字符串中最后一个匹配项的位置，如果没有匹配项，则返回-1。

var str = 'hello world';
console.log(str.indexOf('o'));//4
console.log(str.indexOf('o',5));//7
console.log(str.lastIndexOf('o'));//7

案例 求某个字符出现的位置及次数

var str = 'absdjowodjjoop';
var index = str.indexOf('o');
var num = 0;
//console.log(index);
while(index != -1){
    console.log(index);
    num++;
    index = str.indexOf('o',index+1);
}
console.log(num);//4

根据位置返回字符
1.charAt(index)

str = 'andy';
console.log(str.charAt(0));//a
//遍历字符串
for(var i = 0;i < str.length;i++){
    console.log(str.charAt(i));
}

2.charCodeAt(index) 返回相应索引号的字符的ASCII码 目的：判断用户按下了哪个键

var str = 'andy';
console.log(str.charCodeAt(0));//97

3.str[index] h5 新增

var str = 'andy';
console.log(str[0]);//a

案例 统计出现次数最多的字符

//1.利用charrAt()方法遍历字符串
//2.把每个字符都储存给对象，如果对象没有该属性，就为1，如果存在了就+1
//3.遍历对象，得到最大值和该字符
var str = 'abcdbccbdaabb';
var obj = {};
for(var i = 0; i < str.length; i++){
    var chars = str.charAt(i);
    if(obj[chars]){
        obj[chars]++;

    }else{
        obj[chars] = 1;
    }
}
console.log(obj);

var max = 0;
var maxChar = '';
for(var key in obj){
    if(obj[key] > max){
        max = obj[key];
        maxChar = key;
    }
}
console.log(max);
console.log(maxChar);

字符串操作方法
1.concat() 连接字符串 等效于 + ，+更常用

var str = 'hello';
console.log(str.concat('world'));//helloworld

2.substr(start,length) 截取字符串 start:起始位置 length:截取长度

var str = 'hello world';
console.log(str.substr(0,5));//hello
console.log(str.substr(6));//world

3.replace(old,new) 替换字符串 old:要替换的字符串 new:替换的字符串 只会替换第一个字符

var str = 'hello world';
console.log(str.replace('world','javascript'));//hello javascript

4.split(‘分割符’) 字符串转数组

var str = 'hello,world';
console.log(str.split(','));//[ 'hello', 'world' ]

数据类型

数据类型分类

简单数据类型又叫基础数据类型或者值类型，复杂数据类型又叫做引用类型

值类型：在存储时变量中存储的是值本身
包括：number,string,boolean,null,undefined

引用类型：在存储时变量中存储的是内存地址
包括：object,array,function

堆和栈

1. 栈：数据结构中的栈，先进先出，简单数据类型存储在栈中
2. 堆：数据结构中的堆，先进后出，复杂数据类型的地址存储在栈中，地址指向堆中的数据

传参

简单数据类型：值传递，函数中修改不会影响原来的值
复杂数据类型：引用传递，函数中修改会改变原来的值

web apis阶段

API 和 WEB API

1. API：应用程序接口，是计算机程序设计语言中一个接口，一般为一些封装好的函数和数据，用来实现一些特定的功能。
2. WEB API：浏览器提供的API，是浏览器提供的一些接口，用来实现一些特定的功能。
   3.WEB API:一般有输入和输出（函数的传参和返回值）

DOM

DOM：Document Object Model 文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML和XML）的编程接口。

DOM树

DOM树：由节点（node）组成的树形结构，节点可以是元素节点、文本节点、属性节点、注释节点等。

DOM操作

获取元素

1.getElementById() 根据id获取元素对象

<div id="time">2025-7-7</div>
        <script>
        //1.因为我们文档是从上下加载的，所以得先有标签，因此我们script写到标签下面。
        //2.get 获得 element 元素 by 通过 驼峰命名法
        //3.id为大小写敏感的字符串
        var time = document.getElementById('time');
        console.log(time);
        //4.返回的为一个元素对象
        console.dir(time);
        //5.console.dir(time)可以查看元素对象的所有属性和方法

2.getElementsByTagName() 根据标签名获取元素对象,返回带有指定标签名的对象的集合

        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <script>
            //返回的为 获取过来的元素对象的集合，以伪数组的形式储存
            var lis = document.getElementsByTagName('li');
            console.log(lis);
            console.log(lis[0]);
            //如果页面中只有一个li 返回的还是为伪数组
            //如果页面中没有这个元素，则返回的空的伪数组的形式
            
        </script>

还可以获取某个元素（父元素）下的指定标签名的子元素
element.getElementsByTagName(‘tagName’)
父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己。

3.getElementsByClassName(‘className’) 根据类名获取元素对象

   <div class="box">盒子</div>
        <div class="box">盒子</div>
        <div id="nav">
            <ul>
                <li>首页</li>
                <li>产品</li>
            </ul>

        </div>
        <script>
        var boxs = document.getElementsByClassName("box");
        console.log(boxs); //返回

4.querySelector(‘selector’) 根据选择器返回第一个元素对象
其中的选择器一定要加符号，. 表示类名，# 表示id

     <div class="box">盒子1</div>
        <div class="box">盒子2</div>
        <div id="nav">
            <ul>
                <li>首页</li>
                <li>产品</li>
            </ul>

        </div>
        <script>
        var boxs = document.getElementsByClassName("box");
        console.log(boxs); //返回
        var fristbox = document.querySelector(".box")
        console.log(fristbox);
        var nav = document.querySelector("#nav");
        console.log(nav);
        var lis = nav.querySelector("li");
        console.log(lis);
        </script>

5.querySelectorAll(‘selector’) 根据选择器返回所有元素对象

        <div class="box">盒子1</div>
        <div class="box">盒子2</div>
        <div id="nav">
            <ul>
                <li>首页</li>
                <li>产品</li>
            </ul>

        </div>
        <script>
        var boxs = document.getElementsByClassName("box");
        console.log(boxs); //返回
        var fristbox = document.querySelector(".box")
        console.log(fristbox);
        var nav = document.querySelector("#nav");
        console.log(nav);
        var lis = nav.querySelector("li");
        console.log(lis);
        var allbox = document.querySelectorAll(".box");
        console.log(allbox);

获取特殊元素

获取boby 元素

document.body

<script>
        var body = document.body;
        console.log(body);
</script>

获取html 元素

document.documentElement

<script>
var html = document.documentElement;
console.log(html);
</script>

事件

触发响应的一种机制

事件三要素

事件源：事件发生时触发事件的元素
事件类型：事件发生时触发的事件类型
事件处理程序：事件发生时触发的事件处理程序

        <button id="btn">123</button>
        <script>
            //1.事件源 事件触发的对象
            var btn = document.getElementById('btn');
            //2.事件类型 如何触发 
            //3.事件处理程序 通过函数赋值的方式
            btn.onclick = function(){
                alert('123');
            }

        </script>

常见鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键
onmouseover	鼠标经过
onmouseout	鼠标离开
onfocus	获得鼠标焦点
onblur	失去鼠标焦点
onmousemove	鼠标在元素上移动
onmouseup	鼠标弹起
onmousedown	鼠标按下

操作元素

改变元素的内容

element.innerText 从起始位置到终止位置的内容，但是不包含html标签，同时空格和换行也会去掉
element.innerHTML 从起始位置到终止位置的内容，包含html标签，同时空格和换行也会保留
innerText和innerHTML的区别：
innerText：不能识别html标签，里面的标签文字会直接显示
innerHTML：可以识别html标签
这两个属性是可以读写的 可以获取元素内容，也可以设置元素内容

        <button>显示当前时间</button>
        <div>某个时间</div>
        <script>
            //当我们点击了按钮，div中的内容就会改变
            //1.获取元素
            var btn = document.querySelector('button');
            var div = document.querySelector('div');
            //2.绑定事件
            btn.onclick = function(){
                div.innerHTML = getDate();

            }
            function getDate(){
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth()+1;
                var day = date.getDate();
                var hour = date.getHours();
                var minute = date.getMinutes();
                var second = date.getSeconds();
                return year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
            }

        </script>

修改元素属性

        <button id="1">1</button>
        <button id="2">2</button> <br>
        <img src="img.123.png" alt title="2">
        <script>
            //修改元素属性
            //1.获取元素
            var b1 = document.getElementById('1');
            var b2 = document.getElementById('2');
            var img = document.querySelector('img');
            //注册时间
            b1.onclick = function(){
                img.src = 'hezi.jpg';
                img.title = '1';
            }
            b2.onclick = function(){
                img.src = 'img.123.png';
                img.title = '2';
            }
        </script>

分时间访问显示案例

        <img src="img.123.png" alt>
        <div>swh</div>
        <script>
            //根据系统时间的不同来显示不同的图片和语言
            //利用多分支语句设置不同图片
            //需要一个图片，根据时间修改图片需要修改元素的src属性
            //需要一个div元素，显示不同的文字
            //1.获取元素
            var img = document.querySelector('img');
            var div = document.querySelector('div');
            //2.获取系统时间
            var date = new Date();
            var hour = date.getHours();
            //3.判断时间
            if(hour>12){
                img.src = 'hezi.jpg';
                div.innerHTML = 'wsh';
            }else{
                img.src = 'img.123.png';
                div.innerHTML = 'swh';
            }
        </script>

修改表单元素

可以利用DOM操作以下表单元素
type value checked selected disabled

<button>按钮</button>
        <input type="text" value="请输入内容">
        <script>
            //1.获取元素
            var btn = document.querySelector('button');
            var input = document.querySelector('input');
            //2.绑定事件
            btn.onclick = function(){
                //input.innerHTML = '点击了';这个是普通盒子比如div里面的，对于表单元素不起作用
                input.value = '点击了';
                //如果需要禁用
                //btn.disabled = true;
                this.disabled = true;//也可以用this
            }
        </script>

修改样式

1.element.style 行内样式操作
2.element.className 类名样式操作 //适合样式比较多的时候
注意：
1.js中的样式采取驼峰命名法 比如：fontSize、backgroundColor
2.js修改style样式时，产生的是行内样式，css权重比较高
3.className 会直接覆盖原先的类名，如果想要保留原先类名则采用多类名选择器

               <style>
            div{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div></div>
        <script>
            var div = document.querySelector('div');
            div.onclick = function(){
                div.style.backgroundColor = 'blue';
                div.style.width = '200px';
            }
        </script>

排他思想

1.排他思想：就是让一个元素与其他的元素排他关系，只能让一个元素生效，其他元素失效

        <style>
            button{
                
                background-color: white;
            }
        </style>

    </head>
    <body>
        <button>1</button><button>2</button><button>3</button><button>4</button><button>5</button>
        <script>
            //获取元素
            var btns = document.getElementsByTagName('button');
            //btns得到的是一个伪数组
            for(var i = 0; i < btns.length; i++){
                btns[i].onclick = function(){
                    //this指向的是当前点击的按钮
                    //只有当前点击的按钮才会改变颜色
                    //要先把其他按钮颜色还原
                    for(var j = 0; j < btns.length; j++){
                        btns[j].style.backgroundColor = 'white';
                    }
                    this.style.backgroundColor = 'red';
                }
            }
        </script>

元素的属性值

1.获取元素属性值
element.getAttribute('属性名')
element.属性
2.修改元素属性值
element.setAttribute('属性名','属性值')
3.删除元素属性值
element.removeAttribute('属性名')

h5自定义属性

H5规定自定义属性data—开头作为属性名并且赋值
比如 <div data-index='1'></div>
或者使用js设置
element.setAttribute('data-index','1')

获取H5自定义属性
1.element.getAttribute('data-index')
2.element.dataset.index或者element.dataset['index']

dataset 是一个集合里面存放了所有data-开头的自定义属性

节点操作

一般节点拥有 节点名称：nodeName、节点类型：nodeType、节点值：nodeValue 这三个基本属性

元素节点：nodeType = 1
属性节点：nodeType = 2
文本节点：nodeType = 3（文本节点包括文字，空格，换行）

节点层级

最常见的为父子兄层级关系

1.父节点：parentNode //得到离元素最近的父节点，如果找不到返回null
2.子节点：childNodes //得到元素所有的子节点，包括文本节点，里面存放的是一个伪数组；如果只想获得元素节点，需要专门处理，一般不提倡。
3.children //得到元素所有的子元素节点，里面存放的是一个伪数组，里面存放的是元素节点，不包含文本节点，不包含注释节点，不包含属性节点
4.第一个子节点：firstChild //得到元素第一个子节点，无论是元素节点，文本节点，都返回
5.最后一个子节点：lastChild
6.firstElementChild //得到元素第一个子元素节点
7.lastElementChild
实际开发的写法：
children[i] i为第几个元素

兄弟节点
1.nextSibling //下一个兄弟节点，无论元素节点，文本节点，都返回
2.previousSibling //上一个兄弟节点，无论元素节点，文本节点，都返回
3.nextElementSibling //下一个兄弟元素节点
4.previousElementSibling //上一个兄弟元素节点

创建节点
1.document.createElement(‘div’) //创建元素节点
2.document.createTextNode(‘文本’) //创建文本节点
添加节点//给创建的节点定位
1.node.appendChild(element) //添加子节点
2.node.insertBefore(element,target) //在target之前插入element

文本框案例

<body>
        <textarea name id>123</textarea>
        <button>发布</button>
        <ul>
            <li>123</li>
        </ul>
        <script>
            var btn = document.querySelector('button');
            var text = document.querySelector('textarea');
            var ul = document.querySelector('ul');
            btn.onclick = function () { 
                if  (text.value.trim() == '') {
                    alert('请输入内容');
                    return;
                }else{
                   
                //创建元素
                var li = document.createElement('li');
                //赋值
                li.innerHTML = text.value;
                //添加元素
                ul.insertBefore(li,ul.children[0]);
            }}

            
        </script>

删除节点
1.node.removeChild(element) //删除子节点

删除评论案例

        <style>
          
            ul li a{
                float: right;
            }
        </style>

    </head>
    <body>
        <textarea name id>123</textarea>
        <button>发布</button>
        <ul>
            <li>123</li>
        </ul>
        <script>
            var btn = document.querySelector('button');
            var text = document.querySelector('textarea');
            var ul = document.querySelector('ul');
            btn.onclick = function () { 
                if  (text.value.trim() == '') {
                    alert('请输入内容');
                    return;
                }else{
                   
                //创建元素
                var li = document.createElement('li');
                //赋值
                li.innerHTML = text.value + "<a href='javascript:'>删除</a>";
                //添加元素
                ul.insertBefore(li,ul.children[0]);
                //删除元素
                var as = document.querySelectorAll('a');
                for (let i = 0; i < as.length; i++) {
                    as[i].onclick = function () { 
                        ul.removeChild(as[i].parentNode);
                    }
                }
            }}

            
        </script>

复制节点
1.node.cloneNode(true) //复制节点，true为深复制，false或者空为浅复制；又为拷贝节点。
浅拷贝：只复制了节点，没有复制节点里面的内容，比如文本节点，属性节点，子节点，子元素节点
深拷贝：复制了节点，并且复制了节点里面的内容，比如文本节点，属性节点，子节点，子元素节点

三种动态创建元素的区别

1. document.write() //document.write() 方法可把内容写入到 HTML 文档。是直接将内容写入到页面的内容流，但是文档流执行完毕之后调用，他会导致页面重绘，所以不建议使用。
2. document.createElement()
3. document.insertHTML() //大量拼接时耗时比较久

事件高级

事件绑定

1. 传统注册方式
   1. 利用on开头的事件，例如onclick
   2. <button onclick="alert('hello')"></button>
   3. btn.onclick = function() {alert('hello')}
   4. 特点：注册事件的唯一性
   5. 后面的处理函数会把前面的覆盖掉
2. 事件监听注册方式
   1. addEventListener()是一个方法
   2. IE9之前的浏览器不支持，可使用attachEvent()方法代替
   3. 特点：同一个元素同一个事件可以注册多个监听器
   4. 会按照注册顺序执行
   5. eventTarget.addEventListener(type, listener, useCapture)
   6. 参数：type: 事件类型（事件类型是字符串，必定加引号 而且不带on） listener: 事件处理函数 useCapture: 布尔值，是否使用捕获阶段

删除事件

1. eventTarget.removeEventListener(type, listener, useCapture)
2. detachEvent(type, listener)

DOM的事件流

事件流描述的是从页面中接收事件的顺序。
事件发生时 会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

1. 事件流分为三个阶段：捕获阶段、目标阶段、冒泡阶段

注意：
1.js代码中只能执行捕获或者冒泡其中的一个阶段
2.eventTarget.addEventListener(type, listener, useCapture)中的useCapture参数为true时，会执行捕获阶段，为false或者不写时，会执行冒泡阶段

事件对象

1. 事件对象：event //事件对象，保存了与事件相关的信息，写到我们监听函数的小括号里面，当形参来看
2. 事件对象只有有了事件才会存在，他是系统给我们自动创建的，不需要我们传递参数
3. 事件对象 是 我们事件一系列相关数据的集合 和事件相关的 比如 鼠标点击里面包含了鼠标的相关信息，鼠标坐标之类的
4. 事件对象可以自己命名 比如：event、evt、e

事件对象的常见属性及方法

事件对象属性方法	说明
event.target	返回触发事件的对象
event.srcElement	返回触发事件的对象 非标准 ie678使用
event.type	返回事件类型
event.cancelBubble	阻止冒泡
event.returnValue	阻止默认行为 ie678使用
event.preventDefault()	阻止默认行为
event.stopPropagation()	阻止冒泡

target 和 this 区别

1. target：事件冒泡过程中，当前正在处理的元素，就是事件触发的元素
2. this：事件处理函数中的this，指向的是事件处理函数所在的对象,即绑定的元素

e.target点击了那个元素，就返回那个元素；this 哪个元素绑定了这个点击事件，那么就返回谁
currentTarget：指向的是事件处理函数所在的对象,即绑定的元素，与this相似

阻止默认行为

//例如点击链接不跳转，点击提交不提交
 event.preventDefault()  
 //或者
 return false  //没有兼容性问题，并且return 后面的代码不会执行；并且只能阻止传统注册方式绑定的行为

阻止冒泡

event.cancelBubble = true
event.stopPropagation()
return false

事件委托

原理：不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

禁用右键菜单案例

document.addEventListener('contextmenu',function(e){
    e.preventDefault();
})

禁止鼠标选中案例

document.addEventListener('selectstart',function(e){
    e.preventDefault();
})

鼠标事件对象
MoseEvent

鼠标事件对象	说明
clientX	鼠标相对于可视窗口的X坐标
clientY	鼠标相对于可视窗口的Y坐标
screenX	鼠标相对于屏幕的X坐标
screenY	鼠标相对于屏幕的Y坐标
pageX	鼠标相对于文档的X坐标
pageY	鼠标相对于文档的Y坐标

键盘事件

键盘事件	说明
keyup	键盘弹起
keydown	键盘按下
keypress	键盘按下,但是不能识别功能键ctrl，shift等

三个事件的执行顺序

1. keydown
2. keypress
3. keyup

BOM

BOM：浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

DOM和BOM的对比

DOM	BOM
文档对象模型	浏览器对象模型
操作的是页面中的内容	操作的是浏览器窗口
DOM是把文档当作一个对象来看	BOM是把浏览器当作一个对象来看
DOM的顶级对象是document	BOM的顶级对象是window
w3c组织	不同厂商不一样 ，兼容性差

BOM的组成

window对象是浏览器的顶级对象，具有双重角色
1.是js访问浏览器窗口的接口
2.是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法
在调用时可以省略window，比如对话框：alert()、confirm()、prompt()等都属于window对象
window下的一个特殊属性window.name

window对象的常见事件

窗口加载事件

window.onload = function(){}
//或者
window.addEventListener('load',function(){})

widnow.onload是窗口页面加载事件，当文档内容完全加载完成后会触发该事件

注意：

1. 有了window.onload事件就可以把js代码写到页面元素上方，因为onload是等页面内容加载完毕再去执行处理函数
2. window.onload传统注册事件只能写一次，如果有多个，会执行最后一个
3. 如果使用addEventListener注册事件，可以写多次，会执行所有注册的事件处理函数

DOMContentLoaded事件：当DOM结构加载完毕，但是图片、样式、js等资源可能还没有加载完毕
当页面图片过多的时候用DOMContentLoaded会比window.onload更快

调整窗口大小事件

window.onresize = function(){}
window.addEventListener('resize',function(){})

window.onresize是调整窗口大小加载事件，当触发时就调用处理函数

window.innerWidth和window.innerHeight：获取窗口可视区域的宽高

定时器

setTimeout和setInterval都是定时器，都是异步执行，并且会返回一个定时器id，可以清除定时器
setTimeout(调用函数,[延迟的毫秒数]);
setInterval(调用函数,[间隔的毫秒数]);
页面中经常有很多定时器，一般会给定时器起不同的名字。

回调函数
需要等待时间，时间到了才去调用这个函数

清除定时器
clearTimeout(定时器id);

定时器之setInterval
setInterval(函数,[间隔的毫秒数]);
每隔一段时间就调用一次函数

倒计时案例

<style>
            .hour,
            .minute,
            .second {
                display: inline-block;
                width: 100px;
                height: 100px;
                border: 1px solid rgb(52, 20, 20);
                text-align: center;
                line-height: 100px;
            }

        </style>

    </head>
    <body>
        <div>
            <span class="hour">1</span>
            <span class="minute">2</span>
            <span class="second">3</span>
        </div>
        <script>
            var hour = document.querySelector('.hour');
            var minute = document.querySelector('.minute');
            var second = document.querySelector('.second');
            var imputTime = + new Date('2025-5-16 00:00:00');
            countDown;
            setInterval(countDown, 1000);
            function countDown() {
                var nowTime = + new Date();
                
                var time = imputTime - nowTime;
              
                var h = parseInt(time / 1000 / 60 / 60 % 24);
                var m = parseInt(time / 1000 / 60 % 60);
                var s = parseInt(time / 1000 % 60);
                
                h = h < 10 ? '0' + h : h;
                hour.innerHTML = h;
                m = m < 10 ? '0' + m : m;
                minute.innerHTML = m;
                s = s < 10 ? '0' + s : s;
                second.innerHTML = s;
                
            }
            </script>

this指向

this的指向在函数定义的时候是确认不了的，只有函数执行时，才能确定this的指向，一般情况下，this的最终指向为调用它的对象。

1.全局作用域或者普通函数中的this指向全局window对象
2.方法调用中谁调用指向谁
3.构造函数中this指向构造函数的实例

js执行机制

js是单线程

js是单线程，单线程是指一个时间只能处理一个任务，比如一个任务正在执行，那么其他任务只能等待。

同步：同步是指一个任务执行完毕，才会执行下一个任务，比如一个任务正在执行，那么其他任务只能等待。
异步：异步是指一个任务执行完毕，不会等待下一个任务，比如一个任务正在执行，那么其他任务可以继续执行。

同步任务：都放在主线程执行栈中，
异步任务：都放在消息队列中；
js的异步是通过回调函数实现的
1.普通函数：click，resize等
2.定时器：setTimeout，setInterval等
3.资源加载：load，error等

执行机制
1.先执行同步任务
2.把异步任务放到消息队列中
3.主线程清空执行栈，执行消息队列中的异步任务

location 对象

用于获取或者设置窗体的url，因为返回的是一个对象，所以称为location对象

URL：统一资源定位符，每一个网页都有一个URL，URL由协议、域名、端口、路径、文件名组成

url的一般语法格式为

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	协议，如http、https、ftp等
host	主机名，如www.itcast.cn
port	端口号，如80、8080等，默认为80
path	路径，如/index.html
query	查询字符串，如name=andy&age=18
fragment	片段，如#link

location对象属性	返回值
location.href	获取或设置当前页面的URL
location.host	返回主机（域名）
location.port	返回端口号 如果未填写 返回空字符串
location.pathname	返回路径名
location.search	返回参数
location.hash	返回片段

location对象的方法

location对象方法	返回值
location.assign()	加载新页面，和href一样，可以跳转到其他页面，记录浏览历史，可以实现后退功能
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载当前页面，相当于刷新按钮

navigator对象

该属性可以返回由客户机发送服务器的user-agent 头部的值

下面代码可以识别用户采用什么终端打开页面，实现跳转

if(navigator.userAgent.match(/iphone|ipad|ipod/i)){
    window.location.href = 'iphone.html';//手机
}else{
    window.location.href = 'other.html';//电脑
}

history对象

该对象可以返回用户上网的历史记录，比如用户访问的页面，访问的次数，访问的时间等

history对象	描述
history.back()	返回上一页
history.forward()	前进一页
history.go()	返回指定页面,如果为1、-1、0则返回上一页、下一页、当前页