javascript基础

最新推荐文章于 2025-04-28 15:15:19 发布

threesevens

最新推荐文章于 2025-04-28 15:15:19 发布

阅读量589

点赞数 31

分类专栏：前端文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_61049754/article/details/144938071

版权

前端专栏收录该内容

5 篇文章

订阅专栏

一、js基础

1.js的helloworld

alert("helloworld")
document.write("helloworld")
console.log("helloworld")

2.js编写位置

<!-- 编写到标签的onclick属性中 -->
<button onclick="alert('helloworld')">hello</button>
<!-- 将js代码写在超链接的href属性中 -->
<a href="javascript:alert('hello')">hello</a>
<!-- 外部引入 -->
<script type="text/javascript" src="path"></script>
<!-- script标签 -->
<script type="text/javascript">
	something
</script>

3.基本语法

1.注释

// 单行注释
/*
	多行注释
*/

2.注意事项

JS严格区分大小写
JS中每一条语句以分号结尾
JS会忽略多个换行和空格

3.字面量与变量

/*
	字面量：不可改变的值，如1，2，3
	变量：用来保存字面量，且可以任意改变
*/

var a; // 声明变量
a = 1; // 为变量赋值
var b = 2 // 声明变量并赋值

4.标识符

/*
	在js中所有可以由我们自主命名的都可以称为标识符
	例如：变量名、函数名、属性名都属于标识符
	命名规则：
		1.标识符可以含有字母、数字、_、$
		2.标识符不能以数字开头
		3.标识符不能是ES中的关键字或保留字
		4.标识符一般采用驼峰命名法
*/

4.数据类型

//检查一个变量的类型
typeof 变量

1.String

/*
	String字符串
	-在JS中字符串需要使用引号引起来
	-使用单引号或双引号都可以，但不能混着用
	-引号不能嵌套，双引号里不能放双引号，单引号里不能放单引号
*/
str = "我是一个字符串";
/*
	可以使用转义字符\对特殊符号进行转义
	\" 表示 "
	\' 表示 '
	\n 表示 换行
	\t 表示 制表符
	\\ 表示 \
*/
str = "我说：\"今天天气真不错！\""；

2.Number

/* 
	在js中所有的数值都是Number类型
	-包括整数和浮点数
	
	js可以表示的数字最大值Number.MAX_VALUE
	若Number表示的数字超过了最大值，会返回一个Infinity（无穷）
	
	NaN表示Not A Number
*/

// JS进行浮点运算可能得到一个不精确的结果
console.log(0.1+0.2) // 输出为0.3000000000004

3.Boolean

/*
	Boolean 布尔值
	布尔值只有两个，用来做逻辑判断
	true 表示真
	false 表示假
*/

4.Null

// Null 类型的值只有一个，就是null，专门用来表示一个为空的对象

5.Undefined

// Undefined 类型的值只有一个，就是undefined 当声明一个变量，单并不给变量赋值时，它的值就是undefined

6.Object

//除以上五种数据类型外的值都是对象
//对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性

/*
	对象的分类
		1.内联对象
			由ES标准中定义的对象，在任何的ES的实现中都可以使用
		2.宿主对象
			由js的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
		3.自定义对象
			由开发人员自己创建的对象 
*/

// 创建对象
var obj = new Object()
// 也可以采用 var obj = {属性名:属性值,属性名:属性值}; 方式
// 在对象中添加属性：对象.属性名 = 属性值
obj.name = "张三"
obj.gender = "男"

// 获取对象中的属性：对象.属性名，读取不存在对象时，会返回undefined
console.log(obj.name)
    
// 修改对象的属性值：对象.属性名 = 新值
obj.gender = "女"

// 删除对象的属性 delete 对象.属性名
delete obj.gender

/*
	对象属性名没有特殊要求，但需要使用特殊的属性名，需要采用：对象['属性名'] = 属性值 的方式，获取时也需要这样
	对象属性值可以为任何数据类型，包括对象
*/

/*
	in 运算符
	可以判断一个对象中是否含义特点属性
	语法："属性名" in 对象
*/

/*
	枚举对象中的属性
	for(var 变量 in 对象){
		
	}
*/
for(var n in obj){
    // 属性名 n, 属性值 obj[n]
    console.log(n, obj[n]);
}

7.强制类型转换

/*
	将一个数据类型强制转换为其他的数据类型
*/

//----------------------------------------------
// 将其他数据类型转换为String
// 1.调用被转换数据类型的toString()方法，该方法会将转换的结果返回
var a = 123;
a = a.toString();
// 2.调用String函数
a = String(a);
//----------------------------------------------


//----------------------------------------------
// 将其他数据类型转换为Number
/* 
	1.使用Number()函数
		若是纯数字字符串，将其直接转换为数字
		若字符串中有非数字的内容，转换为NaN
		若字符串是一个空串或全为空格，转换为0
		若是true，转换为1
		若是false，转换为0
		若是null，转换为0
		若是undefined 转换为NaN
*/
var b = "123";
b = Number(b);
/*
	2.parseInt()  把一个字符串转换为一个整数
	  parseFloat() 把一个字符串转换为一个小数
*/
var c = "123.456";
parseInt(c); // 返回值为123
parseFloat(c); //返回值为123.456
//----------------------------------------------

// 将其他数据类型转换为Boolean
/* 
	调用Boolean()函数来将a转换为布尔值
		数字除了0和NaN是false，其他都是true
		字符串除了空串都是true
		null和undefined都是false
*/
var d = '1'
d = Boolean(d)

8.其他进制的数字

/* 16进制的数字以0X开头 */
a = 0x10;
/* 8进制的数字以0开头 */
a = 070;
/* 2进制的数字以0b开头*/
a = 0b10;

5.运算符

1.算术运算符

/*
	+ - * / % 运算
	当非Number数据运算时，会将其转换为数字计算。
	任何值和NaN进行计算，都为NaN
	
	特殊：使用+运算符时，若两个字符串相加，会将字符串拼接成一个新字符串
				任何值与字符串相加，都会将其转换为字符串然后再进行拼接
*/

2.自增与自减

/*
	自增 ++
		使变量在自身基础上加1
		分为a++ 和 ++a
		无论a++还是++a都会使原自变量的值加1
		但a++的值是自增以前的值（原变量的值）
		  ++a的值是自增后的值
*/
var a = 1;
a ++;  //此时a=2

/*
	自减 -
		使变量在自身基础上减1
		分为a-- 和 --a
		无论a--还是--a都会使原自变量的值减1
		但a--的值是自减以前的值（原变量的值）
		  --a的值是自减后的值
*/

3.逻辑运算符

/*
	!  非 用于对一个值进行非运算
	&& 与 对符号两侧的值进行与运算并返回结果，若两个值都为true，则返回后面的，否则返回靠前的false
	|| 或 对符号两侧的值进行或运算并返回结果，若第一个值为true，则返回第一个值，否则返回第二个值
*/

4.赋值运算符

/*
	= 将符号右侧的值赋给符号左侧的值
	a+=5 等价于 a = a + 5
	a-=5 等价于 a = a - 5
	a*=5 等价于 a = a * 5
	a/=5 等价于 a = a / 5
	a%=5 等价于 a = a % 5
*/

5.关系运算符

/*
	通过关系运算符比较两个值的大小关系，成立返回true，不成立返回false
	>
	<
	>=
	<=
	对于数字与非数字比较情况，会将其转换为数字再进行比较
	对与字符串比较情况，会比较字符串的编码
*/

6.相等运算符

/*
	
	使用==来进行相等运算 相等返回true，否则返回false
	使用!=来进行不相等运算 不相等返回true，否则返回false
	
	使用===来进行相等运算 相等返回true，否则返回false
	使用!==来进行不相等运算 不相等返回true，否则返回false
	
	区别：==和!=进行比较时，如果值的类型不同，会自动进行类型转换 而===和!==会比较类型，类型不同返回false
*/

7.条件运算符

/*
	语法：条件表达式?语句1:语句2;
	条件运算符在执行时
		若条件表达式值为true，执行语句1
		若条件表达式为false，执行语句2
*/

6.条件判断语句

/*
	使用条件判断语句可以在执行某个语句之前进行判断。如果条件成立才会执行语句，条件不成立则语句不执行
	-if语句
	-语法一：
		if(条件表达式)
			语句
		if语句在执行时，会对条件表达式进行求值判断，
		如果条件表达式的值为true，则执行if后的语句
		如果条件表达式的值为false，则不会执行if后的语句
		若if语句需要控制多条语句，采用：
		if(条件表达式)
		{
			语句
		}
*/
if(a > b){
   	a = b;
}

/*
		-语法二：
		if(条件表达式){
			语句
		}else{
			语句
		}
		if...else语句在执行时，会对条件表达式进行求值判断，
		如果条件表达式的值为true，则执行if后的语句
		如果条件表达式的值为false，则执行else后的语句
*/
if(a > b){
    a = b;
}
else{
    a = 0; 
}

/*
		-语法三：
		if(条件表达式){
			语句
		}else if(条件表达式){
			语句
		}else{
			语句
		}
		if...else if...else语句在执行时，会从上到下对条件表达式进行求值判断，
		如果条件表达式的值为true，则执行当前语句
		如果条件表达式的值为false，则继续向下判断
*/
if(a >= 80){
    console.log("优秀")
}else if(a >= 60){
    console.log("及格")
}else{
    console.log("不及格")
}

7.条件分组语句

/*
	语法：
		switch(条件表达式){
			case 表达式:
				语句...
				break;
			case 表达式:
				语句...
				break;
				.
				.
				.
			default:
				语句...
				break;
		}
	在执行语句时，会将case后的表达式的值与switch后的条件表达式的值进行全等比较，比较成功则执行该case下的代码,
*/
var num = 1;

switch(num){
    case 1:
        console.log("一");
        break;
    case 2:
        console.log("二");
        break;
    case 3:
        console.log("三");
        break;
    default:
        console.log("其他数字");
        break;
}

8.循环语句

通过循环语句，可以反复执行一段代码多次

1.while循环

/*
	语法：
        while(条件表达式){
            语句...
        }
	while语句在执行时，先对表达式进行求值，若值为true，则执行循环体，若值为false，则终止循环
*/
var a = 10;
while(a > 0){
    a--;
}

2.do…while循环

/*
	语法：
        do{
            语句...
        }while(条件表达式);
        
	do...while语句在执行时，先执行循环体，再先对表达式进行求值，若值为true，则继续执行循环体，若值为false，则终止循环
*/
var a = 10;
do{
    a--;
}while(a > 0);

3.for循环

/*
	语法：
        for(初始化表达式;条件表达式;更新表达式){
        	语句...
        }
        
	for循环在执行时，先执行初始化表达式初始化变量，再执行条件表达式，若值为true，则执行循环体，并执行更新表达式；若值为false，则终止循环 
*/
var sum = 0;
for(var a = 0; a < 10; a++)
{
    sum += a;
}

4.break和continue

/*
	break可用于跳出循环
	continue可用于跳过当前循环，执行下一次循环
*/

9.函数

1.基本使用

/*
	函数function
	-函数也是一个对象
	-函数可以封装一些功能，在需要时可以执行这些功能
*/

// 创建一个函数对象
// 可以将要封装的代码以字符串形式传递给构造函数(很少使用)
var fun = new Function("console.log('hello');");

// 封装到函数中的代码不会立即执行
// 函数中的代码会在调用函数时执行
// 调用函数语法：函数对象()
fun();

/*
	使用 函数声明 来创建一个函数
	function 函数名([形参1,形参2...]){
		语句
	}
*/
function fun2(){
    console.log('hello');
}
// 调用
fun2();

/*
	使用 函数表达式 来创建一个函数
	var 函数名 = function([形参1,形参2...]){
		语句
	};
*/
var fun3 = function(){
    console.log('hello');
};
fun3();

// 可以使用 return 值 来设置一个返回值，return会直接跳出函数，不会执行return后的语句
function sum(a, b){
    return a + b;
}

2.作用域

/*
	作用域指一个变量的作用的范围
	js中有两种作用域
	1.全局作用域
		-直接编写在script标签中的js代码，都在全局作用域
		-全局作用域在页面打开时创建，在页面关闭时销毁
		-在全局作用域中有一个全局对象window
		-在全局作用域中，创建的变量都会作为window对象的属性保存，创建的函数都会作为window对象的方法保存
		-全局作用域中的变量都是全局变量，在页面的任意部分都可以访问的到
	2.函数作用域
		-调用函数时创建函数作用域，函数执行完毕后，函数作用域销毁
		-每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的
		-在函数作用域中能访问到全局作用域，全局作用域不能访问到函数作用域的变量
*/

3.this

/*
	解析器在调用函数每次都会向函数内部传递一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象
	这个对象称为函数指向的 上下文对象，
	根据函数的调用方式不同，this会指向不同的对象
		1.以函数形式调用时，this永远都是window
		2.以方法的形式调用时，this就是调用方法的那个对象
		3.当以构造函数的形式调用时，this就是新创建的对象
		4.使用call和apply调用时，this是指定的那个对象
*/
function fun(){
    console.log(this.name);
}
var obj = {
    name: '张三',
    sayName: fun
};
var obj2 = {
    name: '李四',
    sayName: fun
};
var name = "全局name";

fun(); // 输出 全局name
obj.sayName() // 输出 张三
obj2.sayName() // 输出 李四

4.构造函数

/* 
	 构造函数默认首字母大写，需要使用new关键字调用
	 构造函数的执行流程：
	 	1.立即创建一个新的对象
	 	2.将新的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象
	 	3.逐行执行函数中的代码
	 	4.将新建的对象作为返回值返回
	 使用同一个构造函数创建的对象我们称为一个类，也将一个构造函数称为一个类
	 我们将通过一个构造函数创建的对象称为是该类的实例
*/
function Person(name, age, gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
}
var per = new Person("张三", 18, "男");

// 使用instancof可以检查一个对象是否是一个类的实例
console.log(per instancof Person);

5.原型对象

/*
	原型prototype
	我们创建的每一个函数，解析器都会向函数中添加一个prototype属性
		这个属性对应一个原型对象
	如果函数作为普通函数，调用prototype没有任何作用
	当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，
		指向该构造函数的原型对象，我们可以通过__proto__来访问该属性
	原型对象就相对于一个公共区域，所有同一个类的实例都可以访问到这个原型对象
	我们可以将对象中共有的内容统一设置到原型对象中
	
	当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有直接使用，
	如果没有则会去原型对象中寻找，如果找到直接使用

*/

function Person(name, age, gender){
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
var per = new Person("张三", 18, "男");
// 向Person的原型中添加学校
Person.prototype.school = "希望小学";
// 向Person的原型中添加一个方法
Person.prototype.sayName = function(){
    alert(this.name);
};

per.sayName();

6.函数对象的方法

/*
	call() 和 apply()
	 - 这两个方法都是函数对象的方法，需要通过函数对象调用
	 - 当对函数调用call() 和 apply() 都会调用函数执行
	 - 在调用call() 和 apply()可以将第一个对象指定为第一个参数
	 	此时这个对象会成为函数执行时的this
	 - call()方法可以将实参在对象之后依次传递
	 - apply()方法需要将实参封装到一个数组中统一传递
*/

7.arguments

/*
	arguments和this一样，是调用函数时浏览器传递的隐含的参数
	arguments是一个类数组对象，它可以通过索引来操作数据，也可以获取长度
	在调用函数时，我们传递的实参都会封装到arguments中保存
	arguments.length可以用来获取实参的长度
	也可以使用arguments[n]来使用实参
	arguments中有一个属性callee，这个属性指向我们使用的函数对象
*/

10.数组

1.数组简介

// 数组（Array）也是一个对象，采用索引方式来存储一些数据

// 创建数组
var arr = new Array();
// 或使用 var arr = [];
// 可以创建时指定数组中的值
//var arr1 = [1. 2. 3. 4];

// 向数组中添加：arr[索引] = 值
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;

// 获取数组的值：arr[索引]
var a = arr[0];

// 获取数组的长度 arr.length，可以直接对arr.length的值进行修改。
var length = arr.length;

2.数组的常用方法

var arr = [“张三", "李四"];

// push()  向数组末尾添加一个或多个元素，并返回数组的新长度
arr.push("王五", "赵六");

// pop() 删除数组的最后一个元素，并返回被删除元素
arr.pop();

// unshift() 向数组开头添加一个或多个元素，并返回新的数组长度
arr.unshift("小明");

// shift() 删除数组的第一个元素，并返回被删除元素
arr.shift();

/* 
	slice() 
	可以从数组截取指定元素（不会影响原数组）。
	参数：
		-截取开始的索引（包括），
		-截取结束的索引（不包括）,
		 若不写该参数，会截取从开始索引往后的所有元素。索引可以传递负值，-n表示倒数第n个
	返回值为被截取的数组
*/
arr.slice(0, 2);

/*
	splice()
	可以删除数组中的指定元素
	参数：
		-第一个：开始的索引，
		-第二个：删除的数量,
		-第三个及以后：传递一些新的元素插入开始索引后面
	返回值为被删除的数组
*/

3.数组的遍历

var arr = [1, 2, 3];

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

/* 
	forEach() 方法
	需要一个函数作为参数，
	函数中有三个参数，
	第一个参数为正在遍历的元素，
	第二个参数为正在遍历元素的索引
	第三个参数为正则遍历的数组
*/
arr.forEach(function(value, index, obj){
	console.log(value);
})

4.其他方法

// concat() 连接两个或多个数组并将结果返回
res  = arr.concat(arr1, arr2);
// join()  将数组转换为字符串，默认以','隔开，若指定参数，则参数会作为连接符
res = arr.join("-");
// reverse() 用于翻转数组，会直接翻转原数组
arr.reverse();
// sort() 用于对数组进行排序，默认按Unicode编码排序。可以在sort中添加一个回调函数来制定排序规则
arr.sort(function(a, b){
    // 如果返回大于0的值，元素会交换位置；反之不会交换
    return a - b;
});

11.常用类

1.Date

// Date对象用于表示时间

// 如果直接使用构造函数，则会封装当前代码执行时间
var d = new Date();

// 创建一个指定的时间对象
// 需要在构造函数中传递一个表示时间的字符串作为参数
// 格式： 月份/日/年 时:分:秒
var d2 = new Date("12/9/2024 12:12:12")

// getDate() 判断当前日期是几日
var date = d2.getDate();

// getDay() 判断当前是周几，返回一个0-6的值，0是周日，1是周一...
var day = d2.getDay();

// getMonth() 获取当前月份，返回一个0-11的值，0是一月，1是二月...
var month = d2.getMonth();

// getFullYear() 获取当前年份
var year = d2.getFullYear();

// getHours() 获取小时
var hours = d2.getHours();

// getMinutes() 获取分钟
var minutes = d2.getMinutes();

// getSeconds() 获取秒
var seconds = d2.getSeconds();

// getTime() 获取当前日期的时间戳
var time = d2.getTime();

2.Math

// Math封装了属性运算相关的属性和方法

// Math.PI 表示圆周率
// Math.abs(x) 计算x的绝对值
// Math.ceil(x) 计算对x的向上取整
// Math.floor(x) 计算x向下取整
// Math.round(x) 计算x四舍五入
// Math.random() 用来生成一个0-1的随机数
// Math.max(a,b,c,d...) 获取多个数的最大值
// Math.min(a,b,c,d...) 获取多个数的最小值
// Math.pow(x, y) 获取x的y次幂
// Math.sqrt() 开平方

3.String

// 在底层，字符串是以字符数组的形式保存的
s1 = "abc";
// length 可以用来获取字符串的长度
s1.length
// charAt()  可以返回字符串中指定位置的字符
s1.charAt(1);
// charCodeAt() 获取指定位置字符的字符编码（Unicode编码）
s1.charCodeAt(0);
// String.formCharCode() 根据字符编码获取字符
String.formCharCode(72)
// concat() 用于连接多个字符串
s1.concat("abc", "bc");
/* indexOf() 
	可以检索一个字符串中是否含有指定内容。若存在，则返回该字符第一次出现索引，没有找到则返回-1
	可以指定第二个参数，指定开始查找的索引
   lastindexOf()
	与indexOf类似，不过是从后往前找
*/
s1.indexOf("b");
s1.lastindexOf("b");

// slice() 从字符串中截取指定内容 有一个 substring()基本与其类似，但不能接受负数
s1.slice(0, 2);

// substr() 从字符串中截取内容，第一个参数为开始索引，第二个参数为长度
s1.substr(0, 2);

// split() 可以将字符串拆分为一个数组。需要一个字符串作为参数来拆分字符串
split(“)
// toUpperCase() 将字符串转换为大写
// toLowerCase() 将字符串转换为小写

12.正则表达式

1.正则表达式的简介

/*
	正则表达式用来检查一个字符串是否符合规则，
	或者将字符串中符合规则的内容提取
*/


// 创建正则表达式的对象
/*
	语法：
	 var 变量 = new RegExp("正则表达式", "匹配模式");
	 匹配方式可以是 i：忽略大小写  g：全局匹配模式
*/
var reg = new RegExp("a"); //用于检查一个字符串是否含有a
// 正则表达式的方法
/*
	test()
	- 使用这个方法可以检查一个字符串是否符合正则表达式的规则
		如果符合返回true，否则返回false
*/
var res = reg.test("abc");

2.简单正则表达式

/*
	使用字面量来创建正则表达式
	 语法： var 变量 = /正则表达式/匹配模式
*/
var reg = /a/i;

// 检查字符串里面是否含有a或b
var reg = /a|b/;  // 使用 | 表示或者

/*
	[]里的内容也是或的关系
	[ab] == a|b
	[a-z] 任意小写字母
	[A-Z] 任意大写字母
	[A-z] 任意字母
*/
var reg = [ab];

// 检查一个字符串里面是否含有abc 或 adc 或 aec
var reg = /abc|adc|aec/;
var reg = /a[bde]c/;

/*
	[^ ] 除了
*/
var reg = /[^ab]/  // 除了ab以外的字符
var reg = /[^0-9]/ // 除了数字以外的字符

3.字符串与正则表达式相关的方法

/*
    split()
    -可以将字符串拆分为一个数组，也可以传递一个正则表达式作为参数
*/
var str = "1a2b3c4d5e6f7";
var res = str.split(/[A-z]/);
console.log(res);
/*
    search()
    -可以搜索字符串中是否含有指定内容
    -存在返回第一次出现索引，不存在返回-1
    -也可以接受一个正则表达式作为参数
*/
str = "hello abc hello adc";
res = str.search(/a[bd]c/)
console.log(res);
/*
    match()
    -可以根据正则表达式从字符串中将符合条件的内容提取出来
    -默认情况下match只含找到第一个符合要求的内容，找到后停止检索
        可以将正则表达式设为全局匹配模式
    -match()会返回一个数组
*/
str = "1a2b3c4d5e6f7";
res = str.match(/[A-z]/g)
console.log(res);

/*
    replace()
    -可以将字符串中内容替换成新的内容，需要两个参数 被替换的内容 新的内容
*/
res = str.replace(/[A-z]/g, "")
console.log(res);

4.正则表达式语法

/*
    量词
    -设置一个内容出现的次数
    -只对它前面的一个内容生效
    - {n} 正好出现3次
    - {a, b} 出现a到b次
    - {m, } 出现m次以上
    - + 至少1个，相当于{1, }
    - * 0个或多个，相当于{0, }
    - ? 0个或1个， 相当于{0, 1}
*/
var reg = /a{3}/;  // 匹配3个a
reg = /(ab){3}/;   // 匹配3个ab
reg = /ab{3,}/;    // 匹配3个以上的b
reg = /ab+c/;      // 匹配1个以上的b

/*
    检查一个字符串中是否以a开头
    ^ 表示开头
    $ 表示结尾
*/
reg = /^a/;  // 匹配开头的a
reg = /a$/;  // 匹配结尾的a
reg = /^a$/; // 匹配一个既是开头也是结尾的a
reg = /^a|a$/; // 匹配开头的a或结尾的a

/*
    检查一个字符串是否有.
     . 表示任意字符
     在正则表达式中，使用\作为转义字符
     \. 表示.
     \\ 表示\
*/
var reg = /\./;

/*
    \w  任意字母，数字，_
    \W  除了字母，数字，_
    \d  任意数字
    \D  除了数字
    \s  空格
    \S  除了空格
    \b  单词边界（分割两个单词）
    \B  除了单词边界
*/

13.DOM

1.简单的DOM操作

// 浏览器提供了一个名为document的对象，这个对象是一个window属性
<button id="btn">我是一个按钮</button>
<script type="text/javascript">
    // 获取按钮对象
    var btn = document.getElementById("btn");
	// 修改按钮内容
    btn.innerHTML = "btn";
</script>

2.dom查询

1.获取元素节点

通过document对象调用

getElementById() 通过id属性获取一个元素节点对象
getElementsByTagName() 通过标签名获取一组元素节点对象
getElementsByName() 通过name属性获取一组元素节点对象
getElementsByClassName() 通过class属性值获取一组元素节点对象

2.获取元素节点的子节点

通过具体的元素节点调用

getElementsByTagName() 返回当前节点的指定标签名后代节点
childNodes 表示当前节点的所有子节点
firstChild 表示当前节点的第一个子节点
lastChild 表示当前节点的最后一个子节点

3.获取父节点和兄弟节点

通过具体的节点调用

parentNode 表示当前节点的父节点
previousSibling 表示当前节点的前一个兄弟节点
nextSibling 表示当前节点的后一个兄弟节点

4.其他方法和属性

body document的属性，保存body的引用
documentElement document的属性，保存html根标签
all document的属性，表示页面中所有元素
querySelector() document的方法，可以根据css选择器来查询一个元素对象，只会返回一个值
quertSelectorAll() document的方法，可以根据css选择器来查询一个元素对象，以数组形式返回所有值

3.全选练习

<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox"/> 全选/全不选
<br/>
<input type="checkbox" name="items" value="足球"/> 足球
<input type="checkbox" name="items" value="篮球"/> 篮球
<input type="checkbox" name="items" value="羽毛球"/> 羽毛球
<input type="checkbox" name="items" value="乒乓球"/> 乒乓球
<br/>
<input type="button" id="checkedAllBtn" value="全 选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="checkedRevBtn" value="反 选"/>
<input type="button" id="sendBtn" value="提 交"/>
</form>
<script>

// 获取四个多选框
var items = document.getElementsByName("items");
var checkedAllBox = document.getElementById("checkedAllBox");

// 完成全选功能，根据id为按钮绑定函数
var checkedAllBtn = document.getElementById('checkedAllBtn');
checkedAllBtn.onclick = function(){
    for(var i = 0; i < items.length; i++)
    {
        // 将多选框设置为选中
        items[i].checked = true;
    }
    checkedAllBox.checked = true;
};

// 全不选
var checkedNoBtn = document.getElementById('checkedNoBtn');
checkedNoBtn.onclick = function(){

    for(var i = 0; i < items.length; i++)
    {
        // 将多选框设置为不选中
        items[i].checked = false;
    }
    checkedAllBox.checked = false;
};

// 反选
var checkedRevBtn = document.getElementById('checkedRevBtn');
checkedRevBtn.onclick = function(){
    checkedAllBox.checked = true;
    for(var i = 0; i < items.length; i++)
    {
        // 将多选框取反
        items[i].checked = !items[i].checked;
        if(!items[i].checked)
        {
            checkedAllBox.checked = false;
        }
    }


};

// 提交
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
    for(var i = 0; i < items.length; i++)
    {
        if(items[i].checked)
        {
            alert(items[i].value);
        }
    }
};

// checkedAllBox

checkedAllBox.onclick = function(){
    for(var i = 0; i < items.length; i++)
    {
        items[i].checked = this.checked;
    }
};

// 四个多选框
for(var i = 0; i < items.length; i++)
{
    items[i].onclick = function(){
        checkedAllBox.checked = true;
        for(var j = 0; j < items.length; j++)
        {
            if(!items[j].checked)
            {
                checkedAllBox.checked = false;
                break;
            }
        }
    }
}
</script>

4.dom增删改

/*
	document.createElement()
	- 用于创建一个元素节点对象
	- 需要一个标签名作为参数，将会根据该标签创建元素节点对象
*/
var li = document.createElement("li");

/*
	document.createTextNode()
	- 用于创建一个文本对象
	- 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
*/
var whText = document.createTextNode("武汉");

/*
	appendChild()
	- 向一个父节点中添加一个新的子节点
	- 用法：父节点.appendChild(子节点)
*/
li.appendChild(whText);

/*
	insertBefore()
	- 可以在指定的子节点前插入新的子节点
	- 用法：父节点.insertBefore(新节点，旧节点)
*/
father.insertBefore(li, bj);

/*
	replaceChild()
	- 可以使用指定的子节点替换已有的子节点
	- 用法：父节点.replaceChild(新节点,旧节点)
*/
father.replaceChild(li, bj);

/*
	removeChild()
	- 可以删除一个子节点
	语法：父节点.removeChild(子节点)
		子节点.parentNode.removeChild(子节点)
*/
father.removeChild(li);

/*
	innerHTML
	- 获取元素内的HTML代码，也可以对其进行赋值
*/

5.修改样式

1.基础语法

// 元素.style.样式名 = 样式值
// 当css的样式名中有-号，需要将这种样式名修改为驼峰命名法
box1.style.height = "200px";

2.修改class

box1,className = 'b2';

2.获取元素当前样式

// getComputedStyle() 用于获取元素当前样式，是window的方法，可以直接使用
// 需要两个参数 第一个是要获取样式的元素；第二个可以传递一个伪元素，一般都传null

3.其他样式相关属性

// clientWidth   获取元素的可见宽度，返回的是数字，包括内容区和内边距
// clientHeight  获取元素的可见高度，返回的是数字，包括内容区和内边距
// offsetWidth   获取元素的整个宽度，返回的是数字，包括内容区和内边距和边框
// offsetHeight	 获取元素的整个高度，返回的是数字，包括内容区和内边距和边框
// offsetParent  可以用来获取当前元素的开启定位的父元素，若所有祖先都没有开启定位，返回body
// offsetLeft    当前元素相对于其父元素的水平偏移量
// offsetTop     当前元素相对于其父元素的垂直偏移量
// scrollWidth   可以获取整个滚动区的宽度
// scrollHeight  可以获取整个滚动区的高度
// scrollLeft    可以获取水平滚动条滚动的距离
// scrollTop	 可以获取垂直滚动条滚动的距离

14.事件

/*
	常用事件：
	 - onclick 点击事件
	 - onload 进入页面事件
	 - onunload 退出页面事件
	 - onchange 常结合输入字段的验证使用
	 - onmouseover 鼠标移入事件
	 - onmouseout 鼠标移出事件
	 - onmousemove 鼠标在元素中移动时触发
*/

1.事件对象

// 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，
// 对象函数中封装了当前事件相关的一切信息，比如鼠标的坐标、键盘哪个按键被按下，鼠标滚轮滚动的方向等

// 常用属性
/*
	clientX 获取鼠标指针的水平坐标
	clientY 获取鼠标指针的垂直坐标
	pageX   获取鼠标指针相对当前页面的水平坐标
	pageY	获取鼠标指针相对当前页面的垂直坐标
	target  获取触发事件对象
*/
var x = event.clientX; // event为事件对象
var y = event.clientY;

2.事件冒泡

所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先的相同事件也会被触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function(){
            var s1 = document.getElementById("s1");
            s1.onclick = function(){
                alert("span");
            };

            var box1 = document.getElementById("box1");
            box1.onclick = function(){
                alert("box1");
            };

            document.body.onclick = function(){
                alert("body");
            };
        };
    </script>
</head>
<body>

    <div id="box1">
        box1
        <span id="s1">span</span>
    </div>
</body>
</html>

可以采用event.cancelBubble=false; 来取消冒泡

3.事件委派

事件委派是指将事件统一绑定给元素的共同祖先，这样后代元素上的事件触发时，会自动冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。

这样可以减少事件绑定的次数

4.事件绑定

// 方法一
/*
	使用 对象.事件=函数 的形式绑定响应函数
	- 它只能同时为一个元素的一个事件绑定一个响应函数
	- 它不能绑定多个，若绑定多个，则后面绑定的会自动覆盖前面的
*/

// 方法二
/*
	addEventListener()
	- 通过这个方法可以为元素绑定事件
	- 参数：
		1.事件的字符串形式，不要on
		2.回调函数，当事件触发时会调用该函数
		3.是否在捕获阶段触发事件，传递一个布尔值，一般为false
*/
btn.addEventListener("click", function(){
    alert("1");
}, false);

5.事件传播

捕获阶段：在捕获阶段时从最外层的祖先元素向目标事件进行捕获，但是默认此时不会触发事件。
目标阶段：事件捕获到目标元素，捕获结束开始在目标上触发事件。
冒泡阶段：事件从目标元素向它的祖先依次传递，依次触发祖先元素上的事件

6.滚轮相关事件

 // onmousewheel  鼠标滚轮滚动的事件，会在滚轮滚动时触发
 box.onmousewheel = function(event){
     event.whellDelta // 这个值只区分正负，正为向下滚，负为向上滚
     
     return false;  // 滚轮滚动时，若浏览器有滚动条，但不想让其滚动，可返回false取消默认行为
 };

7.键盘事件

// 键盘事件一般绑定给一些可以获取焦点对象或者是document
/*
	onkeydown 
		-按键被按下
		-若按住不松手，事件会一直触发
	onkeyup
		-键盘松开
*/
document.onkeydown = function(event){
    event.key   // 可获取按下的健
};
document.onkeyup = function(event){
    
};

15.BOM

/*
	BOM
	- 浏览器对象模型
	- BOM可以使我们通过JS来操作浏览器
	- 在BOM中为我们提供了一组对象，用来完成对浏览器的操作
	- 部分BOM对象
		Window
		- 代表整个浏览器的窗口，同时也是网页中的全局对象
		Navigator
		- 代表当前浏览器的信息，通过该对象可以识别不同浏览器
		- userAgent 属性，获取浏览器信息
		Location
		- 代表当前浏览器的地址栏信息，通过location可以获取地址栏信息或者操作浏览器跳转页面
		- 封装浏览器地址栏信息，直接打印则会获取到地址栏信息
		- 当修改属性值时，浏览器会跳转到修改后的路径
		History
		- 代表浏览器的历史记录，可操作浏览器向前或向后翻页
		- length 属性，获取当前访问的链接数量
		- back() 方法，回退到上一个页面
		- forward() 方法，前进到下一个页面
		- go() 方法，跳转到指定页面
		Screen
		- 代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息
		
	这些对象在浏览器都是通过window对象的属性保存的，也可以直接使用
*/

14.定时器

1.简单使用

/*
	setInterval()
	- 定时调用
	- 可以将一个函数，每隔一段时间执行一次
	- 参数：
		1.回调函数，该函数会每隔一段时间被调用一次
		2.每次调用间隔的时间，单位是毫秒
	- 返回值
		返回一个Number类型的数据
		用来作为定时器的唯一标识
*/
var timer = setInterval(function(){
    // dosomething
}, 1000);

2.关闭定时器

clearInterval(timer);

3.延时调用

/*
	延时利用
	 延时调用一个函数不马上执行，而是隔一段时间以后执行，而且只会执行一次
*/
var timer = setTimeout(function(){
    // dosomething
}, 1000);

15.json

/*
	为了方便不同语言数据的交互，引入json
	json是一个特殊格式的字符串
	json分类：
	 	1.对象{}
	 	2.数组[]
	json中允许的值：
		1.字符串
		2.数字
		3.布尔值
		4.null
		5.对象
		6.数组
*/
// 在js中，有一个叫JSON的工具类，可以将json转换为js对象
/*
	JSON.parse()
		- 可以将json字符串转换为js对象
		- 需要一个json字符串作为参数，会将该字符串转换为js对象
*/

/*
	JSON.stringify()
		- 可以将一个JS对象转换为JSON字符串
		- 需要一个js对象作为参数，返回一个JSON对象
*/