Javascript的学习
JavaScript的介绍
开始介绍我们的JavaScript，首先的话，这个的话，就是那个一个弱语言类型的脚本语言，就是一种编程语言，这个是我们的前端中的重要部分
我们的前端中的学习这个语言的前提就是实现我们的给计算机进行交流，我们使用的时候，就是实现最基本的那个动态的交互数据
我们的那个Javascript的话是有三个部分组成的:
ECMAScript(标准) + DOM(文档对象模型) + BOM(浏览器对象模型) 三个部分组成的
首先的话，就是JavaScript的话就是一种解析性语言，就是不用编译就直接执行，同时也是一种面向对象的语言
JS的写入的位置
<!--如果是写在了我们的html中，那么使用的时候就是写在script中的-->
<script type="text/javascrippt">
/* 开始写入我们的那个第一个js语句 */
alert("这个是我们的第一个JS语句，实现的就是弹出一个警告框")
/* 像我们的页面写入内容 */
doocument.write("Helo World")
/* 像我们的那个控制台写入信息 */
console.log("Hello World")
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
alert("Helo World");
document.write("Hello World");
console.log("Hello World");
</script>
</body>
</html>
JS编写位置1：内嵌式
我们的js代码是可以写入我们的那个网页标签中的
<script type="text/javascript">
js代码
</script>
JS编写位置2：行内式
<button onclick="alert("hello world")">点击出现提示框</button>
// 但是这种的话，我们的使用是十分少的，耦合高，不方便我们的维护
JS编写位置3：外链式
// 就是写入我们的那个外部的js文件中
// 但是如果我们想要使用的话，那就需要我们开始进行那个在html中引入
<script type="text/javascript" src="外部的js的文件路径"></script>
总结：我们的js代码的写入的位置是含有三种
1.行内式 2.内嵌式 3.外链式写法
对于我们的2而言，这个的实现就是那个：注意写的位置，有的时候写在html的上面，有的时候写在我们的html下面
但是对于我们的3而言，我们需要注意的是那个：就实现最后的那个基本的功能的话，我们需要现在外部写js代码，然后再实现基本的那个引入
注意我们的js代码是那个单线程语言，就是实现从上往下运行
JS的基础语法
JS的注释
/* */ 多行注释
// 单行注释
JS的字面量和变量
字面量就是一些不可变的量，其中的只值是不可以进行修改的
变量：就是一些可以进行修改的量，就是其中的值是可以进行修改的
在我们的那个开发中，我们的常用的就是那个常使用那个变量来进行存储我们的字面量
声明一个变量：(使用的那个声明的变量的关键字就是那个： var let const)
var 变量名;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 弹出框
alert("Helo World");
// 向网页中写入我们的内容
document.write("Hello World");
// 在控制台中输出内容
console.log("Hello World");
// var定义变量
var a = 10;
console.log(a);
// let来定义我们的那个变量
let b = 20;
console.log(b);
// const定义变量
const c = 30;
console.log(c);
</script>
</body>
</html>
JS的标识符
标识符的使用的话，就是体现在我们的那个:
1.变量名
2.函数名
3.属性名
首先这些的话，都是那个由我们自定义的，但是含有一些基本的那些规则
但是哈，这个都是由我们的后面是可以是一种经验的，莫得任何的讲解的必要
JS的基本数据类型
数据类型，就是我们那个字面量的数据类型
JS中的数据类型含有：
1.String 字符串类型
2.Number 数字类型
3.Boolean 布尔值
4.Null 空值
5.Undefined 未定义的数据
6.Object 对象类型
String Number Boolean Null Undefined Object 是我们的基本的数据类型
Object 是我们的引用数据类型
JS的字符串类型：String
字符串，就是使用引号(单引号 / 双引号)包裹起来的数据类型
var str = "hello";
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 字符串的数据类型
/*
* 注意我们的引号之间是可以实现包裹的，但是里面和外面的引号的话，不可以相同
* 同时如果想要实现内外的引号类型相同，那么，我们就可以使用后面的那个使用\来实现转义
* */
var str = "hello<br>";
document.write(str); // 同时我们还是可以使用console.log / alert来实现出现显示效果的
var str01 = "我想对你说:'我叫鞠志鸿'<br>";
document.write(str01);
var str02 = "我想对你说:"我叫鞠志鸿"";
document.write(str02);
</script>
</body>
</html>
JS的数值类型：Number
就是我们的那个字面量都是那个纯数字，这个就是我们的数值类型
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 数值类型
/*
* 在JS中，我们的那个所有的数字都是那个数值类型
* 浮点数(小数)，整数都是数值类型
* Number.MAX_VALUE 就是我们的那个JS可以表达的最大值
* 如果说我们JS的那个表示的数字超过了最大值，那么进行返回的是：Infinity
* 同时还有一个NaN 就是表示的我们的那个非数字的表示形式
* */
var num = 123;
document.write(num);
var num01 = Number.MAX_SAFE_INTEGER;
document.write(num01);
var num02 = Infinity;
document.write(num02);
var num03 = NaN;
document.write(num03);
console.log(typeof num03);
</script>
</body>
</html>
JS的布尔类型：Boolean
Boolean就是我们的那个布尔值，true / false
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 布尔类型
/*
*Boolean 就是用来判断，只有两个，true/ false 就是我们的真假
* 主要是用于进行我们的逻辑判断
*
* 注意，实际上在我们的boolean的数据类型中，不是之后那个真假
* 我们的内容为空或者说那个某些情况下也是为假的
* */
var bool = true;
console.log(bool);
console.log(typeof bool);
</script>
</body>
</html>
JS的空类型：Null
就是定义的变量的字面量是Null的数据，就是我们的Null，空值
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 空值的实现
/*
* Null
* 就是直接赋值为那个null,就是来表示一个为空的对象，返回的是那个object
* */
var nul = null;
console.log(nul);
console.log(typeof nul);
</script>
</body>
</html>
JS的未定义类型：Undefined
未定义的数据类型，就是那个创建了变量，但是没有进行那个赋值的数据，这个时候，就是表示的是那个未定义的数据类型
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 未定义数据类型
/*
* 首先我们的那个未定义的数据类型就是：
* 只声明变量，但是未进行初始化的
* */
var undef;
console.log(typeof undef)
</script>
</body>
</html>
JS检查类型：typeof
JS中的检查数据类型的方法，就是使用typeof 变量
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 数值类型Number
var num = 123;
console.log(typeof num);
// 字符串类型String
var str = "我爱你";
console.log(typeof str)
// 布尔类型boolean
var bool = true;
console.log(typeof bool);
// 空值 Null
var nul = null;
console.log(nul);
// 未定义数据类型
var undef;
console.log(typeof undef);
</script>
</body>
</html>
JS的基本数据类型间转换
数据类型之间的转换的话，具体的话就可以分为两种
JS转换数据为：String
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
* 开始数据类型之间的转换
* -> String
* 转换的方法：1.直接调用数据据的转换方法.toString()
* 但是这个方法对于我们的null 和 undefined是不可以实现转换的
* 2.可以直接调用我们的方法函数String() 使用方法函数的时候，是可以实现那个转换很多的数据类型的
* */
let num = 123;
console.log(typeof num);
let str = num.toString();
let str01 = String(num);
console.log(typeof str);
console.log(typeof str01);
</script>
</body>
</html>
JS数据转换为：Number
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
* ->Number
* 转换的方法有：
* 1.使用我们的方法函数Number()
* 但是注意，转换的时候，原本的那个数据就是那个纯数字的文本
* 如果不是那个纯数字的字符串，那么转换为的是NaN
* 空的值转换为的为0
* 还有其他的数据类型的转换，自己调试
*
* 2.转换方式2：
* 专门用来转换字符串的
* parseInt() 就是实现把我们的字符串转换为整数，当一遇到我们的那个非数字，直接停止转换
* parseFloat() 就是实现把我们的字符串转换为浮点数，当一遇到我们的那个非数字，直接停止转换
* 上面的方法，如果遇到了后面的那个非string类型的值，那么先转换为string，然后再进行转换
* */
let a = "123";
let num = Number(a);
console.log(typeof num);
let b = "";
let num01 = Number(b);
console.log(typeof num01);
let c = "123px";
let num02 = parseInt(c);
console.log(num02);
let num03 = num02+=10;
let c01 = num03 + "px";
document.write(c01);
</script>
</body>
</html>
JS数据转换为：Boolean
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
* ->Boolean
* 将其他的数据类型转换为我们的那个boolean的使用方法
* 就是直接使用我们的那个方法函数即可：Boolean()
* 1.Number -> Boolean
* 除了我们的那个0和NaN,其他的都是true
* 2.String -> Boolean
* 除了我们的空字符串，其他的都是true,注意，一个空格的话，也是一种内容
* 3.Null/Undefined -> Boolean
* 一直都是转换为的那个false
* 4.Object -> Boolean
* 都是转换为true
* */
let a = 123;
let bool = Boolean(a)
cosole.log(bool)
</script>
</body>
</html>
JS的运算符
运算符就是一些操作符，比如说我们的那个typeof 就是一个运算符
通过我们的运算符可以实现的就是那个获得最后的结果的一个玩意
JS的算术运算符
算术运算符就是用来进行那个计算的一个运算符的使用
+ 可以实现将我们的那个两个数据类型来实现相加并返回运算的结果
- 可以实现将我们的那个两个数据类型来实现相减并返回运算的结果
* 可以实现将我们的那个两个数据类型来实现相乘并返回运算的结果
/ 可以实现将我们的那个两个数据类型来实现相除并返回运算的结果
% 可以实现将我们的那个两个数据类型来实现相求模并返回运算的结果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
* 算术运算符
* + - * / %
* 1.注意事项：
* true —— 1 ； false —— 0
* 就是在我们的那个boolean类型的时候，我们的那个实现就是那个对应的相加
*
* 任何的数据类型 和 我们的那个 NaN 相互进行那个运算的时候，最后的值都是那个 NaN
* 在运算当中使用那个最后的那个 null 就是 0
* 两个字符串之间的+，就是进行的那个拼接为一个字符串可能
* 但是有的时候，两个字符串之间的那个相减的话，我们的 实现的效果就是隐式转换为数值类型进行计算
* 任何的数据类型和字符串进行那个 + 运算，都会转换为字符串后再进行那个拼接
*
* 任何的数据类型的和我们的那个空字符串，就可以实现转换为字符串类型
* */
let num = 1;
let num01 = 2;
// 加法运算符
let a = num + num01;
console.log(num);
// 减法运算符
let b = num - num01;
console.log(b);
// 乘法运算符
let c = num * num01;
console.log(c);
// 除法运算符
let d = num / num01;
console.log(d);
// 求模运算符
let e = num % num01;
console.log(e);
// bool类型之间的运算
let f = num + true;
console.log(f);
let g = num + false;
console.log(g);
let h = true + false;
console.log(h);
// 和NaN之间的运算
let aa = num + NaN;
console.log(aa);
// 和null之间的运算
let bb = num - null;
console.log(bb);
// 两个字符串之间的相加
let str01 = "123";
let str02 = "123";
console.log(str01 + str02);
console.log(str02 - str02);
// 开始隐式转换
let cc = num + "";
console.log(typeof cc);
</script>
</body>
</html>
JS的一元运算符
我们是可以通过我们的那个一元运算符来实现基本的那个转换数据为数值类型的
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
* 一元运算符
* 1.我们是可以通过一元运算符来实现将字符串类型转换为那个数值类型的
* 2.自增和自减
* 自增就是可以实现我们的本身的变量可以实现那个自己本身+1
* 前自增可以实现：先+1，再引用
* 后自增可以实现的是：先引用，再+1
* 这两个的区别的表现的区别的地方是：在表达式中的时候就会有所不同
* 单独使用的时候，这个的区别就不会区分出来，都是实现的那个+1
* */
let a = "12";
a = +a;
console.log(typeof a);
a = a++;
a = ++a;
</script>
</body>
</html>
JS的逻辑运算符
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
* 逻辑运算符
* --逻辑运算符的使用，就是实现的那个进行逻辑的运算
* ！实现的是对我们的值进行非运算 --- 就是实现的是我们对最后的boolean值进行取反
* && 实现是我们的与运算 --- 就是两个为真的才是true,否则就是false
* || 实现的是我们的或运算 --- 一个为真，那么就是true,否则就是false
* */
console.log(!1); // false
console.log(1 && 2) // true
console.log(1 && 0) // false
console.log(1 || 2) // true
console.log(0 || 2) // true
console.log(0 || 0) // false
</script>
</body>
</html><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
* 逻辑运算符
* --逻辑运算符的使用，就是实现的那个进行逻辑的运算
* ！实现的是对我们的值进行非运算 --- 就是实现的是我们对最后的boolean值进行取反
* && 实现是我们的与运算 --- 就是两个为真的才是true,否则就是false
* || 实现的是我们的或运算 --- 一个为真，那么就是true,否则就是false
* */
console.log(!1); // false
console.log(1 && 2) // true
console.log(1 && 0) // false
console.log(1 || 2) // true
console.log(0 || 2) // true
console.log(0 || 0) // false
</script>
</body>
</html>
JS的关系运算符
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
* 关系运算符
* 通过我们的关系运算符，我们就可以实现比较我们的两个值之间的大小关系，并且返回Boolean类型的值
* 关系成立那么就帆true / 如果关系是不成立的，那么就返回false
* -- > 大于符号
* -- < 小于符号
* -- >= 大于等于
* -- <= 小于等于
* -- == 等于 ---只是要求我们的那个数值相同即可
* -- === 全等于 --- 要求我们的实现的就是那个数据以及数据类型都要相同
*
* 注意事项：
* 1.如果一个数字和字符串进行比较，那么，字符串自动转换为那个数值类型
* 2.比较两个的字符串的时候，那么就是比较字符的字符编码，是一位一位来比较
* */
let a = 1;
let b = 2;
let c = "1";
console.log(a > b);
console.log(b < c);
let result;
result = a === c
console.log(result);
</script>
</body>
</html>
JS的三元运算符
// 首先的话，我们的那个三元运算符是那个：使用的是那个： 条件语句? 语句1 :语句2
let a = 10;
let b = 20;
let c = a > b ? a : b;
console.log(c);
JS的面向过程
JS的代码块
<script type="text/javascript">
//在我们的那个js中，使用我们的最后的那个{}包裹起来的代码，那么这个就叫那个代码块
/*
* js的代码块只具有那个分组的作用，没有其他的作用
*/
{
let a = 10;
alert("代码块1内容");
console.log("代码块2内容");
document.write("代码块3内容");
}
console.log(a);
</script>
JS的条件判断语句
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
/*
* 流程控制语句
* - JS的语句是从上往下一行一行的执行的，就是我们的那个单线程的语句
* - 通过我们的流程控制语句就可以实现通过某些的条件语句来实现基本的那个： 控制后面的那个流程的运行
* - 语句的分类：
* - - -条件判断语句
* - - -条件分支语句
* - - -循环语句
*
* 条件判断语句:
* - - 就是满足某种条件的时候，就执行内部的语句，否则就不执行语句
* - if语句
* - if...else语句的使用
* - if...else if...else语句的使用
* */
// if语句的使用
let a = 10;
if(a > 10){
console.log(a);
}
console.log(10);
// if...else语句的使用
let age = 20;
if(age > 18){
alert("你已经成年了");
}
else{
alert("你还没有成年")
}
// if...else if...else语句的使用
if(age > 14){
alert("你的岁数大于14");
}
else if(age >= 18){
alert("你已经成年了");
}
else{
alert("你太小了");
}
// 输入的提示框
let score = prompt("请输入小明的成绩:");
//注意，我们的这个是实现的那个弹出输入框，后面的话实现的是返回的是一个字符串
</script>
</body>
</html>
JS的条件分支语句
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 开始我们的条件分支语句
/*
* 基本的语法就是使用的那个：
* switch...case...break...default...break语句
* */
let num = prompt("请输入你喜欢的数字");
switch (parseInt(num)){
case 5:
alert("你喜欢的数字是5");
break;
case 10:
alert("你喜欢的数字的10")
break;
default:
alert("你喜欢的数字没有再列表内")
break
}
</script>
</body>
</html>
JS的循环语句
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// JS的循环语句开始
/*
* JS的循环语句含有两种：
* ---1.JS的for循环
* ---2.JS的while循环
* */
// 开始while循环语句
let sum = 0;
i = 0
while(i < 10){
sum += i;
i++;
}
console.log(sum);
// 开始我们for循环
for(let i = 0; i < 10; i++){
let sum = 0;
sum += i
}
console.log(sum);
</script>
</body>
</html>
<!--
注意我们的循环是可以实现基本的嵌套的功能的
就是我们的那个循环嵌套(嵌套循环)
-->
JS的终止语句
// 我们的终止语句就是使用了两个关键字break和continue
// break就是实现的基本的那个直接跳出最近的那个语句
// continue就是跳过下面语句的使用，来实现执行下层的语句
let i = 0;
while(true){
if(i > 5){
break;
}
else{
continue;
}
i++;
}
JS的引用数据类型
由于我们的那个基本的数据类型，只是可以用来表示单独的数据，不可以实现来表示多种的复合的数据类型
我们的引用数据类型就是那种Object,对象就是一种复合的数据类型，其中是可以存放保存多种的基本的数据类型
对象的分类：
1.内建对象： 就是我们的那个ES标准可以直接使用的
2.宿主对象： 有JS的环境提供的对象，目前来讲，这个是由我们的浏览器提供的
BOM 和 DOM
3.自定义对象：由开发人员创建的对象
JS的自定义对象
// 创建对象
/*
* 使用我们的new关键字来调用的函数，就是构造函数
* 构造函数就是一个用来专门创建对象的函数
*/
let obj = new Object();
// 向对象种添加属性 对象.属性名 = 属性值
obj.name = "孙悟空";
obj.gender = "男";
obj.age = 18;
console.log(obj);
// 读取对象种的属性， 对象名.属性名
console.log(obj.name);
console.log(obj.gender);
console.log(obj.age);
// 修改对象的属性值： 对象名.属性名 = 新的属性值
obj.name = "猪八戒";
console.log(obj.name)
// 删除属性 delete 对象名.属性名
delete obj.name
JS的对象字面量
// 使用对象字面量来创建对象
let obj = {
name:"孙悟空",
age:20,
gender:"男"
};
// 访问对象
console.log(obj.name)
// 修改属性
obj.name = "猪八戒";
console.log(obj.name);
// 删除属性
delete obj.name;
JS的函数
JS函数简介
函数的话，实际上也是一个对象
函数中是可以实现进行封装一些功能或者(功能)代码的
创建函数的方法1
// 创建一个函数对象,我们的功能代码是可以以我们的那个字符串的形式传入
let func = new Function("console.log("你好呀");");
// 开始调用函数
func();
console.log(typeof func);
创建函数的方法2
// 使用函数声明来创建一个函数
/*
*function 函数名([参数1， 参数2...]){
js代码
}
*
*/
function func(){
// js代码
console.log("这个是我的第二个函数")
}
// 调用函数
func();
创建函数的方法3
let func = function(){
// js代码
}
func();
JS的函数的参数
// 定义一个用来求得两个数之间的运算之间的函数
let a = parseFloat(prompt("请输入a的值:"));
let b = parseFloat(prompt("请输入b的值:"));
function func(a, b){
return a + b;
}
let c = func(a, b);
console.log(c);
JS的嵌套函数
function func(){
// 在函数的内部我们开始定义一个函数
function func01(){
return "我是一个嵌套函数";
}
// 调用函数
// return func01();
// 或者返回那个函数名也行
return func01;
}
let str = func(); // 使用一个参数来接收这个返回值
console.log(str);
JS的立即执行函数
(function(){
alert("我是一个func函数")
})();
// 一般的这种函数只能执行一次
(function(a, b){
return a + b;
})(10, 20);
JS的对象补充
let obj = new Object()
// 添加普通的属性
obj.name = "孙悟空";
obj.age = 500;
obj.gender = "男";
// 开始向对象添加那个方法
obj.showValue = function(){
console.log(obj.name);
console.log(obj.age);
console.log(obj.gender);
}
// 调用对象中的方法属性
obj.showValue();
// 这个就涉及了我们的那个面向对象的思维，我们的对象中的话，含有的属性是那个：普通的属性 + 普通的方法属性
// 开始我们的那个新的格式
let obj = {
name: "寻悟空";
age: 20;
gender: "畜生";
address: "三国演义";
}
// 开始通过我们的那个for...in 语句来实现基本的那个遍历对象
// 这个时候，我们的那个i是代表的我们的那个属性名
for(let i in obj){
console.log("属性名:" + n + ",属性值为:" + obj.n);
}
// 开始含有方法的内部创建函数
let obj = {
name:"孙悟空",
age:3,
gender:"男",
sayHello:function(){
console.log(obj.name, obj.age, obj.gender);
}
}
// 开始调用方法
obj.sayHello();
JS的作用域问题
/*
* JS中大的作用域
* 1.全局作用域
* 在全局作用域中，我们的那个是任何地方都是可以进行访问的
* 2.函数作用域
* 函数作用域就是写在函数中的东西都是那个函数作用域的，函数外面的是访问不到的
* 这个的话只是一个知识点，自己可以理解就行
* */
// 同时我们运行程序的时候，我们的打断点是必不可少的，打断点就是为了可以实现基本的那个改错，调试debug
JS的this的使用
this 的使用，就是可以实现指向不同的对象
1.使用this在函数中进行调用的时候，指向是我们的那个windows
2.使用this在对象的方法中进行调用的时候，指向的是我们的那个对象
JS的函数async
JS的回调函数
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
JS的工厂方法创建对象
JS的创建对象
/*
* 使用工厂方法创建对象
* 后面的实现的就是那个来解决重复性的代码的使用来实现创建对象
* 后面的话，就是实现批量的创建对象
* */
function createPerson(name, age, gender) {
// 开始创建一个新的对象
let obj = {}; // 或者 let obj = new Object();
// 开始创建我们的属性
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.sayHello = function(){
alert(this.name + " " + this.age + " " + this.gender);
}
return obj;
}
let person = createPerson("孙悟空", 18, "男");
// 注意我们使用那个工程模式来实现的创建的对象，对象的指向都是那个Object
// 这个时候就会导致区分不了那个是哪个，下面进行升级
JS的构造函数
// 使用那个构造函数就是为了区分每一个对象的指向区分
// 构造函数就是那个一个普通的函数.构造函数就需要我们使用new来进行构造
function Perosn(){
}
let person = new Person();
/*
* 开始我们的那个升级
* 构造函数的创建就是使用步骤：
* 1.创建一个对象
* 2.使用this
* 3.逐条执行语句
* 4.将创建的对象作为返回值进行返回
* */
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
this.showValue = function(){
console.log(this.name, this.age, this.gender)
}
}
// 开始new一个对象
let person = new Person("红红", 18, "男");
console.log(person instanceof Person); // 用于判断是否那个生产的对象instanceof
JS的构造函数升级
// 首先我们的上面的使用就是实现的时候，内部的方法，构建的多少次，那么，我们的那个最终的实现的效果就是构造了多少次方法
// 为了减少这个方法的构造次数，所以说，我们就要那个执行一些其他的书写格式
/*
* 开始我们的那个升级
* 构造函数的创建就是使用步骤：
* 1.创建一个对象
* 2.使用this
* 3.逐条执行语句
* 4.将创建的对象作为返回值进行返回
* */
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
this.showValue = func
}
// 这个时候，我们的调用的每一个对象的方法都是那个实现的是那个只一次
let func = function(){
console.log(this.name, this.age, this.gender)
}
// 开始new一个对象
let person = new Person("红红", 18, "男");
console.log(person instanceof Person); // 用于判断是否那个生产的对象instanceof
JS的原型对象
// 原型就是那个prototype
// 每一个函数创建的时候，都会有一个属性prototype
/*
prototype对应的就是一个原型对象
指向我们的原型对象，那么就要使用我们的方法：__proto__来实现访问属性
prototype使用的是那个类来访问
__proto__实现的就是那个使用对象来访问
*/
// 首先我们的上面的使用就是实现的时候，内部的方法，构建的多少次，那么，我们的那个最终的实现的效果就是构造了多少次方法
// 为了减少这个方法的构造次数，所以说，我们就要那个执行一些其他的书写格式
/*
* 开始我们的那个升级
* 构造函数的创建就是使用步骤：
* 1.创建一个对象
* 2.使用this
* 3.逐条执行语句
* 4.将创建的对象作为返回值进行返回
* */
function Person(name, age, gender){
this.name = name;
this.age = age;
this.gender = gender;
this.showValue = func
}
// 这个时候，我们的调用的每一个对象的方法都是那个实现的是那个只一次
// 函数命名于那个全局作用域中，污染了全局作用域的命名空间，并且不安全，所以又要那个开始升级
let func = function(){
console.log(this.name, this.age, this.gender)
}
// 开始new一个对象
let person = new Person("红红", 18, "男");
console.log(person instanceof Person); // 用于判断是否那个生产的对象instanceof
console.log(Person.prototype === person.__proto__)
// 我们开始向我们的Person中添加一个原型的属性a
Person.prototype.a = 123; // 这个时候，我们的对象中没有a，但是他去那个原型对象中寻找了
// 向我们类中添加那个原型的方法
Person.prototype.sayHello = function(){
alert("Hello world");
}
JS的垃圾回收
// 只要一个代码的运行多次后，就有可能导致垃圾过多，导致垃圾积累，程序的运行慢
// 当一个对象没有任何的那个来对其进行引用，所以说我们这个时候就要开始清理这个不用的推空间中的垃圾
// 在JS中现在是具有那个自动的清理垃圾的机制，自动在那个推空间中进行那个垃圾的回收
// 我们需要进行回收垃圾的时候，我们只需要对我们的那个不用使用的对象最直接设置为null即可
obj = null;
JS的数组
JS的内建数组
// 数组也是一种对象
// 数组——Array,开始通过Array来实现创建那个数组
// 创建数组
let array = new Array();
// 向数组中添加元素
array[0] = 10;
// 访问数组中的元素
console.log(array[0]);
// .length来实现获取长度,就是元素的个数
console.log(array.length);
JS的字面量创建数组
let arr = [];
console.log(arr.length);
// 使用字面量来创建数组的时候，可以实现直接向我们的添加元素的值
arr = [10, 20, 30, 40, 50]
console.log(arr.length);
console.log(arr[0]);
// 使用内置的对象也是可以实现的
let array = new Array(10, 20, 30);
// 首先的话，我们的数组的存储的数据的比那个对象的高
let arr = [];
JS的数组的四种方法
let arr = [1, 2, 3, 4];
// push()方法的使用，就是实现的那个向我们的数组的末尾添加一个或者多个元素，并且返回新的一个数组
let result = arr.push(5)
console.log(result); // 返回的是我们的数组的长度
console.log(arr);
// pop() 进行的是删除并且返回最后一个元素
let result01 = arr.pop()
console.log(arr);
console.log(result01)
// unshift的基本使用，就是实现我们的那个向数组开头进行添加一个或者多个元素，并且返回数组的长度，和那个push的基本使用相同
let result = arr.unshift(5)
console.log(result); // 返回的是我们的数组的长度
console.log(arr);
// shift() 删除并且返回第一个元素
let result01 = arr.shift()
console.log(arr);
console.log(result01)
JS的数组的遍历
// 遍历数组就是实现将我们的数组的元素进行那个取出来
let arr = [1, 2, 3, 4, 5]
// 开始我们的数组的遍历
for(let i = 0; i < arr.length; i++){
consolelog(arr[i]);
}
JS中的foreach的使用
// 我们是可以通过那个foreach来实现遍历数组的
// 就是在这个foreach中进行那个传入一个回调函数来实现的那个，数组中的长度是多少，那么这个数组就进行那个调用匿名函数几次
let arr = [1, 2, 3, 4, 5];
// arr.foreach(function)
arr.foreach(function(){
console.log("hello world")
})
// 同时我们的那个匿名函数的话，里面可以传入三个参数
/*
第一个参数：就是当前的正在遍历的元素的值
第二个参数：就是当前的正在进行操作的元素的索引
第三个参数：就是我们的正在遍历的数组
*/
arr.foreach(function(value，index, obj){
console.log(value, index, obj)
})
JS的slice和splice使用
let arr = [1, 2, 3, 4, 5];
// slice() 就是实现从一个已知的数组中进行返回那个选定的元素
// arrtobject.slice(start, end) 开始位置和结束位置,这个的话是不会影响原数组的
let arr01 = arr.slice(0, 2) // 包头不包尾，[1, 2]
console.log(arr01)
// splice() 就是实现的是先进行那个删除元素，并且向我们的数组中添加指定的元素，并且会那个影响原数组
// 开位置索引和那个删除个数，还有新的内容就是那个使用的需要进行替换的参数
arr.splice(0, 2， 23, 24)
console.log(arr)
// 开始我们的数组去重
function func(arr){
for(let i = 0; i < arr.length; i++){
for(let j = i + 1; j < arr.length; j++){
if(arr[i] === arr[j]){
arr.splice(j, 1);
j--;
}
}
}
}
// 上面进行封装的函数就可以实现数组去重的功能
JS的其他的方法使用
// 数组的cancat方法的使用，但是这个的话是不会对原数组造成影响的
// array1.concat(array2, array3, ..., arrayX)
var sedan = ["S60", "S90"];
var SUV = ["XC40", "XC60", "XC90"];
var Volvo = sedan.concat(SUV);
// join方法的使用，可以实现将我们的数组转换为那个字符串来使用
// array.join(separator)
// 默认的是使用我们的逗号，作为原本的那个连接符，但是我们是可以使用那个传入参数来实现的设置连接符的
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join("-");
// "Banana-Orange-Apple-Mango "
// reverse这个方法就是用来反转数组，对原数组是有那个影响的
arr.reverse();
console.log(arr);
// sort()就是实现对数组中的元素进行排序,对原数组是含有那个影响的
arr.sort();
console.log(arr);
// 同时如果说那个对我们的那个数字进行排序的话，默认的方法那个只对10以内的数字进行那个排序
// 对10以上的数字进行排序的话，那么我们需要的操作是里面传递一个匿名函数(回调函数)
// 下面的函数的回调函数的判断的话，就是如果返回的是一个那个大于0的值，那么就直接实现交换即可，否则就是不交换
// 开始升序排列
arr.sort(function(a, b){
return a - b;
})
// 开始降序排列
arr.sort(function(a, b){
return b -a;
})
// 完整的一个控制数组的那个排序的问题的函数
// 就是那个大于0的时候，就说明前面那个数字比我们的后面的那个数字是要大的，那么就直接换位置
// 否则就不换位置
// 就是如果想要实现那个升序，那个如果前面的那个数字是大于后面的那个数字的话，就直接返回我们的正式数
// 实现那个降序排列的话，那么就直接返回-1，就可以实现不交换位置
// 实现的就是那个升序排列的基本的代码
function func(arr){
arr.sort(function(a, b){
if(a > b){
return 1;
}else if(a < b){
return -1;
}else{
return 0;
}
})
}
// 开始实现降序排列的基本的代码
function func01(arr){
arr.sort(function(a, b){
if(a > b){
return -1;
}else if(a < b){
return 1;
}else{
return 0;
}
})
}
// 开始实现上面的代码的简化形式
// 实现升序排列
function func02(arr){
arr.sort(function(a, b){
return a - b;
})
}
// 实现那个降序的函数
function func03(arr){
arr.sort(function(a, b){
return b - a;
})
}
// 首先上面的一系列带代码就是通过了函数的封装后的代码形式，函数封装后就可以实现对数据的一种保护
// 这样的话，那么就是把数据放在了一个那个函数作用域中了，对数据起到了保护的作用
/*
首先的话我们的那个实现的话，外面是使用不了的
后面还要学习那个暴露模块的方法来实现基本的那个给外面进行使用
*/
JS的函数解密
JS的函数方法
// 函数的方法，首先的话，我们的函数也是一个对象
function func(){
console.log(this)
}
/*
两个函数对象的额方法，call和apply
首先这两个方法的话，我们是需要通过那个函数对象来进行调用的
一个函数的函数名就是对象
*/
/*
call和apply:都是可以实现函数的立即调用的
使用这两个方法的时候可以实现那个基本的一些将我们的对象和指定为第一个参数
就是将我们的那个一个对象作为那个第一个参数的时候，那么这个时候，我们的那个对象就可以实现将我们的对象作为函数的this
这两个就可以实现改变函数的this
同时如果那个想要实现基本的那个传入我们的那个后面的实参的话，那么就直接在对象的后面传入即可
相当于就是那个实现我们的第一个参数是我们需要进行的那个改变的this执行的对象，后面的参数就是那个一个函数需要的参数
call方法直接传入即可
但是apply的话就需要实现我们的当作一个数组进行传递才可以
*/
let obj = new Object()
func()
func.call(obj);
func.apply();
// ==========================================
function func02(a, b){
console.log(""hello world")
}
func02.call(obj, 2, 3)
func02.apply(obj, [2, 3])
JS的arguments使用
// 在调用函数的时候，浏览器都会直接传入两个隐函数
/*
1.函数的是上下文对象的this
2.封装实参的对象arguments
arguments是一个那个类数组对象，这个的话也是可以通过那个索引来操作
我们传入的那个实参都是可以在那个arguments中进行那个保存
arguments.length可以用来获取我们的实参的数量
arguments中含有一个那个属性，就是一个那个函数对象，.callee
*/
function func(){
console.log(arguments)
}
JS的内置对象
JS的Data对象
// JS中的Data对象的话，表示的是那个时间对象
// 创建一个对象
let date = new Date();
console.log(date) // 就可以获取我们的那个本地的时间
// 开始创建一个我们的指定的时间
// 时间的基本格式：月份/日期/年份 小时:分钟:秒数
let date01 = new Date(12/03/2016 11:10:30)
console.log(date01)
console.log(data.getDate()) // 用于进行获取日期的
console.log(date.getDay()) // 用于获取的得到那个周几
console.log(date.getMonth()) // 用于获取月份
console.log(data.getFullYear()) // 用于获取年的
console.log(date.getTime()) // 用于进行获取时间戳的用于获取的是那个毫秒的
console.log(date.now()) // 用于获取当前的时间戳
// 我们是可以使用那个时间戳来测试代码的性能速度
JS的Math对象
// JS中的那个Math内置对象的话，就是一个对象，这个是一个工具类里面进行分装那个数学运算的方法
// Math的话就是一个开箱即用一个内置的工具类。不用向上面的一样进行构造函数的方法
// 其中的话，我们的那个math是含有那个属性和方法的
console。log(Math.PI) // 就可以获得我们的那个圆周率
// .abs(number) 求取绝对值的方法
console.log(Math.abs(-1)) // 1
// .ceil() 向上取整
console.log(Math.ceil(1.4)) // 2
// .floor() 向下取整
console.log(Math.floor(1.6))
// round() 四舍五入
console.log(Math.round(1.5))
// random() 随机生成一个[0, 1)的随机数
console.log(Math.random())
// 生成一个0-10的随机数
console.log(Math.round(Math.random() * 10))
// 开始进行封装一个函数来表示我们的那个生1-6的随机数
function func(max, min){
return Math.round(Math.random() *(max - min) + min)
}
console.log(func(6, 1))
// max/min() 可以用来获取我们多个数字的最大/小值
JS的包装类
数据类型含有那个基本的数据类型和引用数据类型
包装类含有的三个包装类来实现我们的那个实现将我们的基本的数据类型转化为那个引用数据类型
String() / Number() / Boolean()
let num = new Number(3);
console.log(typeof num);
let str = new String("hello")
console.log(typeof str)
let bool = new Boolean(true)
console.log(typeof bool)
// 转换为那个对象后，那么我们就可以实现使用那个对象的一些方法
JS的包装类String方法
// 在底层中我们的字符串是使用那个字符数组来进行的保存的
let str = "hello world";
console.log(str.length); // 获取得到我们的那个字符串的长度
console.log(str[0]);
// .chatAt() 可以返回字符串中的指定位置的字符
console.log(str.charAt(2)) // 根据的就是那个使用的是哪个索引来实现的
// charCodeAt() 就是实现返回我们的那个指定字符的unicode字符编码
console.log(str.charCodeAt(3))
// fromCharcode() 可以根据根据我们的字符编码来实现获取字符，这个需要通过我们的构造函数来实现调用
console.log(String.fromCharCode(65))
// Indexof 可以实现检索字符串，就是可以实现我们的那个判断一个字符串是否含有一个字符，返回那个该字符的第一次出现的索引
// 不存在就直接返回-1，对应的方法还有那个LastIndexof,
// 同时这个的话我们进行使用的那个是返回相应的数组的，可以在后面进行添加一个索引来实现查找的位置
console,log(str.Indexof("h"))
// slice(截取功能) 和 splice(实现的是我们的那个增删改的功能) 的使用
// split 可以通过对应的字符来进行那个拆分字符串，返回一个数组
let strarr = ["axc,dfg,fsf,weer"]
console.log(strarr.split(","))
// toLowerCase 将我们的字符串转化为小写
// toUpperCase 将我们的字符串转换为大写
JS的正则表达式
// 使用正则表达式的时候，我们的基本的实现的就是那个使用匹配字符的方法，可以使用这个来实现我们的那个格式是否正确
// 我们使用这个就是为了实现来确定某种规则的，我们是可以使用那个检查一个字符串是否符合规则的，给计算机底层看的
// 开始创建一个正则表达式对象
// let reg = new RegExp(“正则表达式”, 匹配模式)
// 正则表达式的匹配方法一: .test();
// 下面的正则表达式就是表示的我们那个正则表达式是一个那个用来匹配一个字符中是否含有a
let reg = new RegExp("a");
console.log(reg.test("a"));
/*
i: 表示忽略大小写
g: 进行的是那个全局匹配
m: 执行那个多行匹配
这个就是我们的那个匹配规则
*/
JS的字面量表示正则
// 我们的创建正则表达式的简写符号就是那个 /正则表达式/匹配模式
let reg = /a/i;
console.log(reg.test("abcs"))
// 创建一个正则表达式来实现我们的那个一个正则表达式中是否含有那个abc
// | 这个时候就需要我们使用这个来实现基本的那个或者的意思
let reg2 = /a|b|c/i
console.log(reg2.test("asdfbc"))
// 创建一个正则表达式来实现我们的那个字符串中是否含有那个字母
// [a-z]就是表示的我们的那个小写字母
// [A-Z]就是我们的那个大写字母
// [0-9]就是任意的数字
// [A-z]就是实现的我们的那个任意的字母
let reg3 = /[a-z]/i
// 实现那个我们的那个匹配一个字符中是否含有那个abc 和 adc 和 aec
let reg4 = /a[bde]c/
// ^ 除了某某字符
let reg5 = /^ab/
// 通过我们的量词可以实现一个内容出现的次数{n}
let reg6 = /a{5}/
reg6 = /(ab){6}/
reg6 = /ab{3}c/; //abbbc
// 出现一个范围的区间
reg6 = /ab{1, 3}c/
// 同时我们的那个正则表达式中含有那个转移字符 \
JS的字符串和正则的相关方法
// split() 可以实现通过我们的最后的那个来实现将我们的字符串拆分
// 根据我们的那个的任意的字母进行拆
let str = "1d3s5f6d4"
str.split(/[A-z]/)
// search() 可以进行搜索我们的字符串中是否含有那个指定内容，返回的是第一个出现的索引
console.log(str.search(/[A-z]/))
// match() 可以实现对一个正则表达式进行实现将符合规则的内容进行返回，找到一个就不找了
// 默认的情况下就是可以实现我们的第一个符合规则的就直接返回
// 但是添加匹配模式为全局匹配就可以实现将我们的最后的那个进行返回
str.match(/[A-z]/g)
JS的常见的正则表达式
/*
手机号码
第一位：1
第二位：3-9
后面9位随意
*/
let reg = /^1[3-9][0-9]{9}$/
/*
电子邮件正则表达式
*/
reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/
JS的error模型
/*
就是使用的我们的那个语句：
try{
执行代码;
}
catch(error){
处理错误的代码;
}
finally{
无论如何都要执行的语句
}
*/
// 我们在那个出错的时候，我们是可以通过throw来实现那个抛出异常的
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "是空的";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x > 10) throw "太大";
if(x < 5) throw "太小";
}
catch(err) {
message.innerHTML = "错误：" + err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}
JS中的对json数据的处理
/*
首先先对json数据进行那个介绍：
json数据是一个那个轻量级的数据交换格式(数据序列化方式)
数据序列化格式还有：xml、protobuf，其中protobuf存储数据更为高效，在企业级项目中更常见
序列化就是实现将我们的数据转化为json格式的数据的过程
反序列化就是实现将我们的那个json数据转化为其他类型语言的方式
*/
// 开始实现序列化过程
// JavaScript 对象...：
var myObj = { "name":"Bill", "age":19, "city":"Seattle" };
// ...转换为 JSON：
var myJSON = JSON.stringify(myObj);
// 实现反序列化的过程
var myObj = JSON.parse(myJSON);
/*
序列化就是实现的：使用的关键字就是那个 .stringify(数据格式)
反序列化的实现就是使用的关键字就是那个： .parse(json数据)
首先上面的两种方法的实现都是需要使用那莪JSON本身来调用的
*/
// 存储数据：
myObj = { "name":"Bill", "age":19, "city":"Seattle" };
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);
// 取回数据：
text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;
JS的class
class Person{
// 开始通过构造器来生成属性
constructor(name, age){
this.name = name;
this.age = age;
}
// 开始添加方法
showValue(){
console.log(this.name, this.age);
}
// 同时我们还是具有那个静态方法的，属于每一个对象
static work(){
console.log("我是一个静态方法")
}
}
// 开始实现实例化一个对象
let person = new Person("红红", 18);
person.showValue();
/*
首先我们需要注意的是那个，我们的这些函数的话，你会发现，那个没有指定数据的基本类型
但是后面我们会学习那个typescript的
*/
class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return 'I have a ' + this.carname;
}
}
class Model extends Car {
constructor(brand, mod) {
super(brand);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model;
}
}
mycar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = mycar.show();
DOM的学习
DOM的作用就是实现我们的通过js来实现操作我们的网页
Document Object Model文档对象模型
DOM 初始事件Event
事件就是一个用来进行那个浏览器和窗口实现的一个交互的瞬间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
// 这个就是我们的一个入口函数
window.onload = function(){
// 开始实现我们的事件
document.getElementById("p").onclick = function(){
console.log("你好呀")
}
}
// 注意我们的这个script标签的使用的话，是需要注意那个位置的
</script>
<body>
<button id="p">点击</button>
</body>
<script></script>
</html>
DOM 查询
我们通过DOM查询是可以实现那个基本的获取元素节点的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
window.onload = function(){
// 下面的这些方法都是通过那莪document来实现调用的
// getElementById() 可以用来获取我们的那个id属性
document.getElementById("btn").onclick = function(){
// 单击事件
alert("我是单击事件");
}
// getElementsByTagName() 可以通过我们的那个元素的标签名来获取节点(伪数组)
document.getElementsByTagName("div")[0].onclick = function(){
alert("我也是单击事件");
// 如果说想要获取得到我们的那个元素中的属性的话，我们需要进行使用的就是那个.属性值
}
// getElementsByName() 可以通过我们的那个name属性来获取节点(伪数组)
document.getElementsByName("btn")[0].onmouseover = function(){
document.getElementsByTagName("div")[0].innerHTML = "你好呀"
}
}
</script>
<body>
<!-- 开始我们的那个获取元素节点的具体操作 -->
<div></div>
<button id="btn" name="btn">按钮</button>
</body>
</html>
DOM 获取元素的子节点
1.就是使用我们的那个来实现的一个说明
注意这个方法是通过那个元素节点实现的调用，上面的那些是通过的那个document进行的调用
getElementsByTagName() === 返回当前的节点的指定标签名的后代节点
childNodes 表示当前节点的所有被子节点
children 可以实现获取我们的子元素节点
firstChild 表示当前节点的第一个子节点
lastChild 表示当前节点的最后一个子节点
parentNode 表示获取我们的那个父节点
previouSibling 获取我们的前一个兄弟节点,可以实现获取空白的文本
previousElementSibling 获取的是我们的元素的前一兄弟节点
nextSibling 获取我们的那个后一个兄弟节点
nextElementSibling 就是可以实现获取后一个的元素节点
// 首先假设我们的那个节点是那个一大部分的一些那个ul组成，但是有一个ul的含有id名，ul
ul = docuemnt.getElementById("ul");
// 开始获取我们的那个含有id值为ul的ul下面的那个所有的子节点li
ul.getElementsByTagName("li")
// 开始返回这个所有子节点
ul.childNodes; // 这个不是获取的元素，获取的是我们的文本节点 + 元素节点
// children就不会获取我们的文本节点了，他只是进行获取的是哪个元素节点
ul.children;
// 另外两个自己测试
// 我们开始实习那封装一个函数来实现我们的那个基本的一些来获取我们的那个节点
// 第一个参数id属性值/ 第二个参数就是那个函数
// 下面的函数时实现我们的后面的那个单击事件的函数
function myClick(idStr, callback){
let btn = document.getElementById(idStr);
btn.onclick = callback;
}
// 开始实习那获取的父节点
myClick("btn", function(){
// 开始实现获取我们的最后的那个bj的父节点
let bj = document.getElementById("bj");
var pn = bj.parentNode;
console。log(pn.innerHTML) //注意我们的这里还是可以使用那个的，就是使用innerText
})
DOM 图片切换效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
// 行为部分
window.onload = function(){
// 首先先准备那个元素节点
let pre = document.getElementById("pre");
let next = document.getElementById("next");
let p = document.getElementsByTagName("p");
let img = document.getElementsByTagName("img")
// 开始准备那个图片数据
imageArr = ["01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg"]
// 准备标识符
let index = 0;
// 开始事件的处理
pre.onclick = function(){
index--;
if(index < 0){
index = imageArr.length - 1;
}
img.src = imageArr[index]
p[0].innerHTML = "共有" + imageArr.length + "张图片，当前的是第" + (index + 1) + "张图片"
}
next.onclick = function(){
index ++;
if(index > imageArr.length - 1){
index = 0;
}
img.src = imageArr[index];
p[0].innerHTML = "共有" + imageArr.length + "张图片，当前的是第" + (index + 1) + "张图片"
}
}
</script>
<body>
<!-- html结构部分 -->
<div>
<!-- 开始提示那个基本的图片信息 -->
<p>ni</p>
<img src="01.jpg" alt="这个是一张图片"><br>
<button id="pre">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
<!--注意我们的那个基本的CSS样式是没有进行书写的，后面有需要自行添加-->
<!--上面的代码就基本上实现了我们的那个切换图片的基本效果-->
DOM全选练习
// html结构就直接省略，
//全选按钮就是实现的是我们的点击button后，我们的那个直接全被选中
// 获取表单的节点
let btn = document.getElementById("btn");
// 获取那个多选框的节点，假设都含有那个items的name值
let items = document.getElementsByName("items")
btn.onclick = function(){
// 开始实现遍历数组
for(let i = 0; i < item.length; i++){
// 表单被选中的话就是实现我们的设置属性
// 通过设置我们的那个checked的值之后，我们就可以实现多选框是否选中
// true选中 / false未选中
items[i].checked = true;
}
}
// html结构就直接省略，
//全选按钮就是实现的是我们的点击button后，我们的那个直接全不选中
// 获取表单的节点
let btn = document.getElementById("btn");
// 获取那个多选框的节点，假设都含有那个items的name值
let items = document.getElementsByName("items")
btn.onclick = function(){
// 开始实现遍历数组
for(let i = 0; i < item.length; i++){
// 表单被选中的话就是实现我们的设置属性
// 通过设置我们的那个checked的值之后，我们就可以实现多选框是否选中
// true选中 / false未选中
items[i].checked = false;
}
}
// 开始使用基本的那个反选按钮
// 获取表单的节点
let btn = document.getElementById("btn");
// 获取那个多选框的节点，假设都含有那个items的name值
let items = document.getElementsByName("items")
btn.onclick = function(){
// 开始实现遍历数组
for(let i = 0; i < item.length; i++){
// 实现那个反选按钮的时候，我们的基本的单词就是那个先判断
if(items[i].checked){
items[i].checked = false;
}else{
items[i].checked = true;
}
// 或者说直接使用那个：items[i].checked = !items[i].checked
// 开或者说我们直接使用那个三元运算符来实现基本的功能
}
}
// 提交按钮
// 我们通过提交按钮来实现一个那个弹出框
// 获取表单的节点
let btn = document.getElementById("btn");
// 获取那个多选框的节点，假设都含有那个items的name值
let items = document.getElementsByName("items")
btn.onclick = function(){
// 开始实现遍历数组
for(let i = 0; i < item.length; i++){
if(items[i].checked){
alert(items[i].value);
}
}
}
// 开始实现那莪一个选那么全部都选中的多选框
let btn = document.getElementById("btn")
btn.onclick = function(){
for(let i = 0 ; i < items.length; i++){
if(this.checked){
items[i].checked = true;
}else{
items[i].checked = false;
}
// items[i].checked = this.checked;
}
}
DOM 查询补充
首先我们的前面的学习到的那个DOM查询的含有那个：
getElementById() 通过的Id值来进行的查询节点
getElementsByTagName() 通过我们的那个标签名来实现的查询，伪数组
getElementsByName() 通过我们的那个Name属性值来实现的查询，伪数组
// 开始实现获取body
document.getElementByTagName("body")[0];
document.body;
// 获取我们的html根标签
document.documentElemnt;
// 通过class来实现获取节点
document.getElementsByClassName();
// 开始使用根据css选择器来实现基本的那个选择节点
document.qyerySelector(".box div")
document.querySelectorAll("css选择器");
DOM 增删改查
createElement("标签名") 可以用来进行那个创建一个元素节点
createTextNode() 可以用来实现创建一个那个文本节点
============================================================
// 然后实现将我们的文本节点传入我们的元素节点中
// 注意我们的那个节点含有两种： 文本节点+元素节点
父节点.appendChild(子节点);
// 然后实现基本的那个添加到页面中即可,也是可以通过添加节点即可
insertBefore() 实现的是在父节点中的某一个节点的前面插入
父节点.insertBefore(新节点，就节点)
// replaceChild() 用来实现的替换子节点
// 注意，这个的话，还是通过那个父节点来实现的
// removeChild() 实现的是删除子节点
===================================================
子节点.parentNode.removeChild()
通过子节点来实现那个寻找得到那个父节点来删除子节点
扩展一哈那个如何阻止我们的那个防止a连接的跳转功能：
就是实现的那个：直接在我们的a连接的点击事件中添加代码段落:
return false;
注意我们到后面那个原生代码的时候，我们的重复的代码是可以抽取出来形成函数的
合理使用我们的那个全局作用域和函数作用域
首先我们的那个a链接的跳转问题的实现： 可以通过在事件的最后米娜提供一个那个return false
DOM 操作CSS
DOM style操作内联样式
JS的操作样式的的基本操作： 元素名.style.样式名 = 样式值
下面的操作都是那个在一个那个事件的操作中实现的
box01.style.width = "300px";
box01.style.backgroundColor = "red";
通过这种改变，我们通过的JS的修改的是就是内联样式
首先我们的样式是那个只修改我们的那个内联样式以及只是获取的我们的那个内联样式的值
DOM currentStyle修改样式表
使用这个就可以是实现基本对样式表中的样式实现修改
基本的操作： 元素.currentStyle.样式名 = 样式值
他实现就是那个获取我们的当前的正在显示样式，可以获取内联样式，还可以获取那个基本的那个行内样式
获取的九四那个生效的样式
box01.currentStyle.width = "300px";
但是这个只有ie支持
===========================================================================================
在其他的浏览器中，我们可以使用就是我们的那个getComputedStyle()来实现获取元素的样式
这个方法是我们的那个windows的方法，可以直接使用
首先他需要两个参数：
1.需要获取的样式的元素
2.可以传递一个伪元素，一般传入null
这个方法返回的只一个对象，对象中实现了封装了一些与元素
getComputedStyle(box01, null);
==============================================================================================
注意我们通过那个currentStyle和getComputedStyle() 方法获取的样式只是只读的，不可实现修改的操作
// 开始实现那个定义一个函数来实现基本的那个获取元素的样式
function getStyle(obj, name){
// 首先我们需要考虑需要那些参数来实现我们的函数功能体
// 第二个参数就是我们需要的样式名
//return getComputedStyle(obj, null)[name];
// 开始实现兼容ie
return obj.currentStyle[name]
}
// 然后我们实现获取元素的时候，就可以实现获取我们的那个样式
// 开始实现那个基本的一些那个兼容不同给他浏览器版本的控制
function getStyle(obj, name){
// if(window.getComputedStyle){
// return getComputedStyle(obj, null)[name];
// }else{
// return obj.currentStyle[name];
// }
// 或者使用下面的方法
// if(obj.currentStyle){
// return obj.currentStyle[name];
// }else{
// return getComputedStyle(obj, null)[name];
// }
// 还可以使用三元表达式
return window.getComputedStyle ? getComputedStyle(obj, null)[name] : obj.currentStyle[name];
}
DOM 其他样式
// 首先我们的html结构就是如下
/*
<button id="btn">按钮</button>
<div id="box">hello world</div>
*/
// 开始我们的行为的设计
var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onclick = function(){
/*
首先的就是的客户端的可见高度和宽度
clientWidth / clientHeight
通过这两个属性获取的值都是那个不带px，所有说，我们是可以实现直接计算
注意这两个属性是只读的，不可进行修改，只可以通过style来实现修改操作
具体来说，这两个属性获取的值是我们的 ： 内容区 + 内边距(padding)
*/
alert(box.clientWight, box.clientHeight);
/*
offsetWidth : 可以用来获取元素的整个的宽度(内容区 + 内边距(padding) + 外边距(margin))
offsetHeight : 可以用来获取元素的整个高度(内容区 + 内边距(padding) + 外边距(margin))
但是还是只读的
*/
alert(box.offsetWidth, box.offsetHeight);
/*
offsetParent： 实现获取的定位的父元素，结合那个position来使用的
*/
alert(box.offsetParent)
/*
offsetLeft: 当前的元素相对于其他的定位父元素的水平偏移量
offsetTop: 当前的元素相对于其他定位父元素的垂直偏移量
*/
alert(box.offsetLeft，box.offsetTop)
/*
scrollWidth可以实现获取整个元素的滚动宽度
scrollHeight 可以实现获取整个元素的滚动高度
scrollLeft 获取的是和定位父元素的水平偏移量
scrollTop 获取的是与定位父元素的垂直偏移量
*/
/*
scrollHeight - scrollTop = clientHeight 的时候，说明我们的滚动条拖到底部了
*/
}
DOM html-事件对象
// 实现的基本功能：在大的areaDiv的上面实现鼠标移动，从而来在那个showMsg中显示图标
// 开始实现我们的基本的功能
// 先实现获取我们的两个div信息
function getElement(obj){
return document.getElementById(obj)
}
var areaDiv = getElement("araeDiv");
var showMsg = getElement("showMsg");
// onmousemove 就是实现我们的鼠标移动事件
// 事件对象：当事件响应函数被触发时，浏览器就会实现将一个事件对象作为实参传递给响应函数
// 在事件对象中包含了很多的信息，鼠标的坐标， 键盘的控制，鼠标的滚动条的移动
areaDiv.onmousemove = function(event){
// 实现在showMsg中显示我们areaDiv中的坐标
/*
clientX 返回触发鼠标事件时，鼠标指针相对于当前窗口的水平坐标
clientY 返回触发鼠标事件时，鼠标指针相对于当前窗口的垂直坐标
*/
// showMsg.innerHTML = "x = " + event.clientX + ", y = " + event.clientY;
// 为了解决ie浏览器的兼容性问题，所以可以使用下面的操作
if(window.event){
showMsg.innerHTML = "x = " + window.event.clientX + ", y = " + window.event.clientY;
}else{
showMsg.innerHTML = "x = " + event.clientX + ", y = " + event.clientY;
}
}
<div id="areaDiv"></div>
<div id="showMsg"></div>
/*
开始设计样式，已经好久没有写过了
*/
#areaDiv{
width:600px;
height:200px;
border:1px solid black;
}
#areaDiv{
width:600px;
height:50px;
border:1px solid black;
}
<!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>
/*
开始设计样式，已经好久没有写过了
*/
#areaDiv{
width:600px;
height:200px;
border:1px solid black;
}
#showMsg{
width:600px;
height:50px;
border:1px solid black;
background-color: skyblue;
color:red;
}
</style>
</head>
<script>
window.onload = function(){
// 实现的基本功能：在大的areaDiv的上面实现鼠标移动，从而来在那个showMsg中显示图标
// 开始实现我们的基本的功能
let getElement = (obj)=>document.getElementById(obj)
// 先实现获取我们的两个div信息
var areaDiv = getElement("areaDiv")
var showMsg = getElement("showMsg")
// onmousemove 就是实现我们的鼠标移动事件
// 事件对象：当事件响应函数被触发时，浏览器就会实现将一个事件对象作为实参传递给响应函数
// 在事件对象中包含了很多的信息，鼠标的坐标， 键盘的控制，鼠标的滚动条的移动
areaDiv.onmousemove = function(event){
// 实现在showMsg中显示我们areaDiv中的坐标
/*
clientX 返回触发鼠标事件时，鼠标指针相对于当前窗口的水平坐标
clientY 返回触发鼠标事件时，鼠标指针相对于当前窗口的垂直坐标
*/
// showMsg.innerHTML = "x = " + event.clientX + ", y = " + event.clientY;
// 为了解决ie浏览器的兼容性问题，所以可以使用下面的操作
if(window.event){
showMsg.innerHTML = "x = " + window.event.clientX + ", y = " + window.event.clientY;
}else{
showMsg.innerHTML = "x = " + event.clientX + ", y = " + event.clientY;
}
}
}
</script>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>
盒子跟随鼠标移动
<!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>
/* 设计样式 */
#boxMove {
width: 100px;
height: 100px;
background-color: red;
position:absolute;
}
body{
height: 1000px;
}
</style>
</head>
<script>
window.onload = function(){
// 开始获取节点
var boxMove = document.getElementById("boxMove");
// 首先我们是不可以给我们的那个盒子进行那个绑定事件的，否则就会出错
document.onmousemove = function(event){
// 实现解决兼容性问题
event = event || window.event;
// 开始绑定鼠标的移动
/*
clientX
clientY
上面的两个属性是用来获取网页的一些指定的位置的定位的坐标的
就是实现获取的就是我们的可见窗口的坐标值
为了那个全面一点，所以说，我们需要的是实现使用最后的那个使用
*/
var x = event.clientX;
var y = event.clientY;
/*
scrollWidth可以实现获取整个元素的滚动宽度
scrollHeight 可以实现获取整个元素的滚动高度
scrollLeft 获取的是和定位父元素的水平偏移量
scrollTop 获取的是与定位父元素的垂直偏移量
*/
// 同时为了避免我们的那个滚动的影响，所以说我们是可以使用：
var scrollX = window.pageXOffset || document.documentElement.scrollLeft;
var srcollY = window.pageYOffset || document.documentElement.scrollTop;
// 开始实现设置盒子的位置
boxMove.style.left = (x - boxMove.offsetWidth/2 + scrollX) + "px";
boxMove.style.top = (y - boxMove.offsetHeight/2 + scrollY) + "px"
}
/*
注意我们随着滚动条的滚动，我们的最后的鼠标的坐标是那个： 鼠标在可见页面的位置(clientX) + 滚动条的相对偏移量(srcollLeft) 高度也是一样的
*/
}
</script>
<body>
<!-- 开始实现我们的功能：实现div跟随鼠标实现移动 -->
<div id="boxMove"></div>
</body>
</html>
DOM 事件的冒泡
<!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>
/* CSS样式的设计 */
#box01{
width: 100px;
height:100px;
background-color: yellowgreen;
cursor: pointer;
}
#box02{
width: 100px;
height: 50px;
background-color: aqua;
cursor: pointer;
}
body{
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<script>
// js行为的设计
window.onload = function(){
// 开始获取我们的元素节点
var box01 = document.getElementById("box01");
var box02 = document.getElementById("box02");
// 为我的小盒子绑定那个单击事件
box02.onclick = function(event){
event = event || window.event;
alert("我是span小盒子")
// 开始实现取消冒泡
event.cancelBubble = true;
}
// 为我们的那个div大盒子绑定单击事件
box01.onclick = function(event){
event = event || window.event;
confirm("我是div大盒子");
// 实现取消冒泡
event.cancelBubble = true;
}
// 为我们的body绑定单击事件
document.body.onclick = function(){
alert("我是body整体")
}
}
</script>
<body>
<!-- 实现的就是事件的冒泡(Bubble) -->
<!-- 冒泡就是会导致——点击span的时候，另外两个的都会执行
点击div的时候，我们的body也会执行
点击body的时候，只有body的会执行，应为body已经是那个最外层了
所以说这个时候，我们就要实现取消冒泡
-->
<div id="box01">
我是box01盒子<br>
<span id="box02">我是span小盒子</span>
</div>
</body>
</html>
DOM 事件的委派
<!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>
/* CSS样式的设计 */
</style>
</head>
<script>
window.onload = function(){
// js行为的设计
// 开始为你每一个超链接都绑定一个单击事件
var allA = document.getElementsByTagName("a");
var btn = document.getElementById("btn");
var items = document.getElementById("items")
// 我们这里添加的超链接都没有那个单击响应的功能
btn.onclick = function(){
// 创建一个li
var li = document.createElement("li");
// 下面的使用使用了模板字符串： `${模板字符串的内容}`
li.innerHTML = `<a href="javascript:;">超链接${allA.length + 1}</a>`
// 开始添加我们的元素
items.appendChild(li);
}
// 我们已经初步的实现了为每一个超链接都绑定了单击响应函数
// for(var i = 0; i < allA.length; i++){
// allA[i].onclick = function(){
// alert("我是" + this.innerHTML)
// }
// }
/*
事件的委派:
我们开始实现基本的只绑定一次就可以实现那个每一个都含有那个单击事件,新添加或者原有的
我们的简单的尝试就是可以使用那个给我们的元素绑定一个共有的 祖先元素来实现
*/
items.onclick = function(event){
event = event || window.event;
if(event.target){
alert(event.target.innerHTML)
}
}
}
</script>
<body>
<!-- html结构部分 -->
<button id="btn">添加超链接a</button>
<ul id="items">
<li><a href="javascript:;">超链接1</a></li>
<li><a href="javascript:;">超链接2</a></li>
<li><a href="javascript:;">超链接3</a></li>
</ul>
</body>
</html>
DOM 事件绑定
<!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>
/* CSS样式的设计 */
</style>
</head>
<script>
window.onload = function(){
// 点击按钮后,就直接实现弹出一段内容
var btn = document.getElementById("btn");
// 注意下面的我们的写法只可以实现对一个元素进行绑定事件,并且实现的时候是后面的覆盖前面的
// 获取的元素节点.事件 = function(){}
// btn.onclick = function(){
// alert(1);
// }
// btn.onclick = function(){
// alert(2);
// }
/*
绑定事件的方式还有: addEventListener()
参数1:事件的字符串,但是不要含有on
参数2:回调函数
参数3:是否在捕获阶段触发,一般都是false
*/
btn.addEventListener("click", function(){
alert(1);
}, false)
btn.addEventListener("click", function(){
alert(2);
}, false)
// 开始实现定义一个函数来实现基本的那个绑定函数
function bind(obj, eventStr, callback){
obj.addEventListener(eventStr, callback, false);
}
}
</script>
<body>
<button id="btn">按钮点击</button>
</body>
</html>
DOM 事件的传播
<!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>
/* CSS样式的设计 */
/* 个人感觉下面的样式配上下面的结构出来的东西还是蛮好看的哈 */
#box{
width: 300px;
height: 300px;
background-color: aqua;
}
#box01{
width: 200px;
height: 200px;
background-color: aquamarine;
}
#box02{
width: 100px;
height: 100px;
background-color: bisque;
}
</style>
</head>
<script>
window.onload = function(){
// 开始获取元素节点
var box = document.getElementById("box");
var box01 = document.getElementById("box01");
var box02 = document.getElementById("box02");
/*
事件的传播:
微软公司的传播:就是事件触发的时候,实现的就是有内向外实现的传播,
就是儿子有事情,那么先爸爸来实现处理,然后交给爷爷,逐级向上的
就是事件的冒泡
倒闭的网景公司:就是认为的是事件的传播是由外向内传播的
最后的实现就是:1.第一个阶段:事件的捕获阶段,在捕获阶段是从我们的祖先元素开始实现捕获,但是对事件实现捕获的时候,事件是不会触发的
2.第二个阶段:事件的目标阶段,事件获得目标元素,捕获结束开始在目标元素上,就直接开始事件的运行
3.第三个阶段:事件的冒泡阶段,事件从目标元素想祖先元素传递,一次触发在每一个阶段的事件
如果希望在我们的捕获阶段就触发事件,那么就可以将addEventListener中的第三个参数改为ture
一般情况下,都不会在捕获阶段来实现触发事件
*/
bind(box, "click", function(event){
// 开始阻止冒泡
event = event || window.event;
alert("box");
event.cancelBubble = true;
})
bind(box01, "click", function(event){
event = event || window.event;
alert("box1");
event.cancelBubble = true;
})
bind(box02, "click", function(event){
event = event || window.event;
alert("box2");
event.cancelBubble = true;
})
}
// 开始实现定义一个函数来实现基本的那个绑定函数
function bind(obj, eventStr, callback){
obj.addEventListener(eventStr, callback, false);
}
</script>
<body>
<div id="box">
<div id="box01">
<div id="box02"></div>
</div>
</div>
</body>
</html>
DOM 拖拽的实现
拖拽一：
实现的是，不管如何拖拽，鼠标的位置都在指定元素中心
<!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>
/* CSS样式的设计 */
/* 个人感觉下面的样式配上下面的结构出来的东西还是蛮好看的哈 */
#box{
width: 100px;
height: 100px;
background-color: aqua;
/* 开启绝对定位 */
position: absolute;
}
</style>
</head>
<script>
window.onload = function(){
// 开始实现可以随意的拖拽box这个盒子的元素
// 拖拽的意思就是电脑桌面的一些文件可以实现最易摆放位置
/*
实现拖拽的基本业务逻辑:
1.当鼠标在需要实现拖拽的元素上按下的时候,开始拖拽---onmousedown
2.在鼠标实现移动时.元素跟着鼠标一起移动---onmousemove
3.当鼠标松开时,被拖拽元素实现鼠标松开时候的操作---onmouseup
*/
var box = document.getElementById("box");
// 完成每一个阶段的事件绑定
// 第一个阶段
box.onmousedown = function(){
// 第二个阶段
document.onmousemove = function(event){
event = event || window.event;
// 获取鼠标的位置
var x = event.clientX;
var y = event.clientY;
var scrollX = window.pageXOffset || document.documentElement.scrollLeft;
var scrollY = window.pageYOffset || document.documentElement.scrollTop;
// 开始设置box位置
var left = (x + scrollX - box.clientHeight/2) + "px";
var top = (y + scrollY - box.clientWidth/2) + "px";
box.style.left = left;
box.style.top = top;
};
document.onmouseup = function(event){
// 第三个阶段
// 当鼠标实现离开的时候,需要使用设置取消鼠标移动事件为空
document.onmousemove = null;
// 同时最后还要实现基本的取消事件
document.onmouseup = null;
}
}
// 实现封装为一个函数
function control_move(obj){
obj.onmousedown = function(){
// 第二个阶段
document.onmousemove = function(event){
event = event || window.event;
// 获取鼠标的位置
var x = event.clientX;
var y = event.clientY;
var scrollX = window.pageXOffset || document.documentElement.scrollLeft;
var scrollY = window.pageYOffset || document.documentElement.scrollTop;
// 开始设置box位置
var left = (x + scrollX - box.clientHeight/2) + "px";
var top = (y + scrollY - box.clientWidth/2) + "px";
box.style.left = left;
box.style.top = top;
};
document.onmouseup = function(event){
// 第三个阶段
// 当鼠标实现离开的时候,需要使用设置取消鼠标移动事件为空
document.onmousemove = null;
// 同时最后还要实现基本的取消事件
document.onmouseup = null;
}
}
}
}
</script>
<body>
<div id="box"></div>
</body>
</html>
拖拽二：
实现的是，根据鼠标开始按下的时候的位置来实现指定盒子位置所处地方
<!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>
/* CSS样式的设计 */
/* 个人感觉下面的样式配上下面的结构出来的东西还是蛮好看的哈 */
#box{
width: 100px;
height: 100px;
background-color: aqua;
/* 开启绝对定位 */
position: absolute;
}
</style>
</head>
<script>
window.onload = function(){
// 开始实现可以随意的拖拽box这个盒子的元素
// 拖拽的意思就是电脑桌面的一些文件可以实现最易摆放位置
/*
实现拖拽的基本业务逻辑:
1.当鼠标在需要实现拖拽的元素上按下的时候,开始拖拽---onmousedown
2.在鼠标实现移动时.元素跟着鼠标一起移动---onmousemove
3.当鼠标松开时,被拖拽元素实现鼠标松开时候的操作---onmouseup
*/
var box = document.getElementById("box");
// 完成每一个阶段的事件绑定
// 第一个阶段
box.onmousedown = function(event){
// 第二个阶段
var X = event.clientX - box.offsetLeft;
var Y = event.clientY - box.offsetTop;
document.onmousemove = function(event){
event = event || window.event;
// 获取鼠标的位置
var x = event.clientX;
var y = event.clientY;
var scrollX = window.pageXOffset || document.documentElement.scrollLeft;
var scrollY = window.pageYOffset || document.documentElement.scrollTop;
// 开始设置box位置
var left = (x + scrollX - X) + "px";
var top = (y + scrollY - Y) + "px";
box.style.left = left;
box.style.top = top;
};
document.onmouseup = function(event){
// 第三个阶段
// 当鼠标实现离开的时候,需要使用设置取消鼠标移动事件为空
document.onmousemove = null;
// 同时最后还要实现基本的取消事件
document.onmouseup = null;
}
}
}
</script>
<body>
<div id="box"></div>
</body>
</html>
拖拽三：
<!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>
/* CSS样式的设计 */
/* 个人感觉下面的样式配上下面的结构出来的东西还是蛮好看的哈 */
#box{
width: 100px;
height: 100px;
background-color: aqua;
/* 开启绝对定位 */
position: absolute;
}
</style>
</head>
<script>
window.onload = function(){
// 开始实现可以随意的拖拽box这个盒子的元素
// 拖拽的意思就是电脑桌面的一些文件可以实现最易摆放位置
/*
实现拖拽的基本业务逻辑:
1.当鼠标在需要实现拖拽的元素上按下的时候,开始拖拽---onmousedown
2.在鼠标实现移动时.元素跟着鼠标一起移动---onmousemove
3.当鼠标松开时,被拖拽元素实现鼠标松开时候的操作---onmouseup
*/
var box = document.getElementById("box");
// 完成每一个阶段的事件绑定
// 第一个阶段
box.onmousedown = function(event){
// 第二个阶段
var X = event.clientX - box.offsetLeft;
var Y = event.clientY - box.offsetTop;
document.onmousemove = function(event){
event = event || window.event;
// 获取鼠标的位置
var x = event.clientX;
var y = event.clientY;
var scrollX = window.pageXOffset || document.documentElement.scrollLeft;
var scrollY = window.pageYOffset || document.documentElement.scrollTop;
// 开始设置box位置
var left = (x + scrollX - X) + "px";
var top = (y + scrollY - Y) + "px";
box.style.left = left;
box.style.top = top;
};
document.onmouseup = function(event){
// 第三个阶段
// 当鼠标实现离开的时候,需要使用设置取消鼠标移动事件为空
document.onmousemove = null;
// 同时最后还要实现基本的取消事件
document.onmouseup = null;
};
/*
当拖拽网页的文字内容时候,浏览器就会去搜索引擎中去搜索内容
这个就是浏览器的一种默认行为,如果想要实现取消,那么就可以直接通过return false 取消就可以了
*/
return false;
}
}
</script>
<body>
<div id="box"></div>
</body>
</html>
DOM 滚动事件
<!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>
/* CSS样式设计 */
#box01{
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<script>
// js行为设计
window.onload = function(){
// 开始获取元素节点
var box01 = document.getElementById("box01");
/*
物业要求:
当鼠标的滚轮向下滚动的时候,box01高度增加,反而亦之
*/
// 直接为box01绑定一个鼠标滚动事件
box01.onwheel = function(event){
// alert("滚了")
event = event || window.event;
// 可以获取得到鼠标滚轮滚动方向
var wd = event.wheelDelta || event.detail * -40 || event.deltaY;
// 向上滚动,就直接减小高度
if(wd > 0){
box01.style.height = box01.clientHeight - 10 + "px";
}
// 向下滚动,就直接增加高度
else{
box01.style.height = box01.clientHeight + 10 + "px";
}
// 当浏览器的页面中含有滚动条的时候,那么滑动滚轮的时候会出现页面也会滚动,这个属于是默认行为,要取消的
// return false;
event.preventDefault();
}
}
</script>
<body>
<!-- html结构设计 -->
<div id="box01"></div>
</body>
</html>
DOM 键盘事件
<!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>
</style>
</head>
<script>
/*
键盘事件常用的就只有两个: onkeydown / onkeyup / onkeypress
onkeydown 当用户正在按下键时，发生此事件---当onkeydown按键一直按着的时候,那么最后的实现的效果就是后面的事件就会连续被触发
onkeyup 当用户松开键时，发生此事件
onkeypress 当用户按了某个键时，发生此事件
[注意:这个是官方文档的描述]
一般的话,绑定键盘事件的是:可以获取焦点的对象或者说document
altKey / ctrlKey / shiftKey 三个事件
*/
window.onload = function(){
// document.onkeydown = function(event){
// // alert("按键被按下来");
// event = event || window.event;
// // 通过keyCode来获取按键的编码
// }
// document.onkeyup = function(){
// // confirm("确定取消?")
// }
// 实现获取input
var inputs = document.getElementsByTagName("input");
inputs[0].onkeydown = function(){
}
}
</script>
<body>
<input type="text">
</body>
</html>
实现通过键盘控制盒子的移动
<!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>
/* CSS样式设计 */
#box{
width: 100px;
height: 100px;
background-color: aquamarine;
position:absolute;
}
</style>
</head>
<script>
// js行为设计
// 开始绑定事件
var step = parseInt(prompt("请选择你的移动速度（像素）"), 10);
// 注意,我们的这里实现的是:只有当我们的输入后,才可以是实现显示页面,当我们学习了定时器后,就可以使用这个方法来实现基本的贪吃蛇的小游戏了
document.onkeydown = function(event){
event = event || window.event
// 开始读取我们的控制上下左右的键码
// console.log(event.keyCode);
//首先先获取事件
var box = document.getElementById("box");
// 开始考虑用户的体验
// 向上移动
if(event.keyCode === 38 || event.key === "ArrowUp" || event.key === "w" || event.key === "W"){
box.style.top = box.offsetTop - step + "px";
}
// 向下移动
else if(event.keyCode === 40 || event.key === "ArrowDown" || event.key === "s" || event.key === "S"){
box.style.top = box.offsetTop + step + "px";
}
// 向左移动
else if(event.keyCode === 37 || event.key === "ArrowLeft" || event.key === "a" || event.key === "A"){
box.style.left = box.offsetLeft - step + "px";
}
// 向右移动
else if(event.keyCode === 39 || event.key === "ArrowRight" || event.key === "d" || event.key === "D"){
box.style.left = box.offsetLeft + step + "px";
}
// 可以考虑实现基本的优化:尝试使用switch来实现基本的这个业务逻辑
}
</script>
<body>
<!-- html结构 -->
<div id="box"></div>
</body>
</html>
BOM window-事件对象
BOM 是浏览器对象模型 Brower Object Model
通过JS来实现操作我们的浏览器的
BOM对象：
Window——代表的就是整个浏览器的窗口，同时window也是网页中的全局对象
Navigator——代表的当前浏览器的信息，通过该对象可以实现识别不同的浏览器
Location——代表就是浏览器的地址栏信息，通过Location可以获取我们的地址栏信息，从而实现跳转页面
History——操作浏览器的历史记录，由于隐私原因，就会导致不可以实现浏览器的具体记录，只是控制前进和后退
Screen——代表的是用户屏幕信息，可以实现获取显示器的信息
这些对象都是通过我们的那个window的属性来实现的
BOM Navigator对象
// 由于历史原因，所以说，那个大部分属性都不可以用来识别浏览器的信息了
console.log(navigator.appName) // 基本上都是那个Netscape
/*
language 属性返回浏览器语言。
language 属性是只读的。
*/
console.log(navigator.language);
/*
如果浏览器在线，onLine 属性返回 true，否则返回 false。
onLine 属性是只读的。
*/
console.log(navigator.onLine);
/*
userAgent 属性返回浏览器发送给服务器的用户代理标头。
userAgent 属性是只读的。
返回的值包含有关浏览器名称、版本和平台的信息。
Web 规范建议浏览器应提供尽可能少的标头信息。永远不要假设这个属性在未来的浏览器中会保持不变。
*/
console.log(navigator.userAgent);
BOM History对象
// History —— 就是实现的是控制浏览器的翻页，向前向后倒退
history.length; // 实现返回的是我们的列表中的存在的url的长度
// back() 可以用来实现回退到上一个页面
history.back(); // 实现回退到上一个页面
// forward() 可以实现跳转到下一个页面
history.forward();
// go() 可以实现跳转到指定的页面，传入的是整数
/*
1 向前跳转一个页面
2 向后跳转两个页面
-1 向后跳转一个页面
-2 向后跳转两个页面
*/
history.go(-1);
BOM Location对象
// Location——代表就是浏览器的地址栏信息
console.log(window.location);
// 然后我们是可以使用最后的改变location的值来实现改变地址栏信息
location = "https://www.baidu.com/";
// assign() 实现加载新页面，用来实现跳转其他的页面，可以实现回退的，就是含有历史记录
location.assign("https://www.baidu.com/")
// reload() 实现重新加载页面
location.reload();
location.reload(true); // 实现强制清空缓存
// replace() 使用新的文档替换当前的文档，不会有历史记录
location.replace("https://www.baidu.com/")
BOM 定时器使用
<h1 id="h1">1</h1>
// alert() 警示窗口
// prompt() 输入窗口
// confirm() 是否确定窗口
/*
接下来使用的都是使用我们的定时器
*/
/*
setInterval() 周期性执行指定的代码: myInterval = setInterval(function, milliseconds);
clearInterval() 清除使用 setInterval() 设置的计时器: clearInterval(myInterval);
*/
// 下面实现的功能就是实现h1中的内容不断的切换
myInterval = setInterval(function(){
var h1 = document.getElementById("h1");
parseInt(h1.innerHTML)++;
if(parseInt(h1.innerHTML) >= 10){
clearInterval(myInterval);
}
}, 3000);
/*
setTimeout() 在经过指定的时间之后执行代码: myTimeout = setTimeout(function, milliseconds);
clearTimeout() 清除使用 setTimeout() 设置的计时器: clearTimeout(myTimeout);
*/
setInterval和setTimeout在JavaScript中都是用于处理时间的函数，但它们之间存在明显的区别，主要体现在以下几个方面：
触发时间和执行次数：
setTimeout是一次性的定时器。它在设定的延迟时间之后执行一次指定的函数，然后停止。
setInterval是重复性的定时器。它会以设定的时间间隔不断重复执行指定的函数，直到被clearInterval取消或页面关闭。
执行频率：
setTimeout只在指定的延迟后执行一次回调函数。
setInterval则是每隔指定的时间间隔就执行一次回调函数，直到被取消。
应用场景：
setTimeout通常用于需要延迟执行的场合，如动画效果的延迟、按钮的防抖等。
setInterval则常用于需要定时执行的场合，如轮播图的切换、时钟的更新等。
注意事项：
使用setInterval时，如果某个间隔中的代码执行时间超过了设置的间隔时间，就可能出现延迟，这可能会影响程序的性能和可靠性。
由于JavaScript是单线程的，如果setInterval中的任务执行时间过长，可能会阻塞其他代码的执行。
在使用setInterval时，如果不需要持续重复执行，可以考虑使用setTimeout并在回调函数内部再次调用setTimeout来实现类似的效果，以避免上述潜在问题。
总的来说，setTimeout和setInterval在JavaScript中各有其用途，选择哪一个取决于你的具体需求。
[来自ai的生成，感觉我的话，讲不清楚这个具体区别，所以说，这一段就是直接使用的ai{同时我们也要学会合理使用ai工具}]
实现基本的图片切换效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
window.onload = function(){
// 假设含有五张图片(注意只是讲解思路)
// 首先先定义一个数据来包含每一个图片的路径
var imgList = ["01.png", "02.png", "03.png", "04.png", "05.png"];
// 开始实现获取节点
var img = document.getElementsByTagName("img")[0];
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02")
// 注意index的标识一定要在全局作用域
var index = 0;
var myInterval; // 注意这里我们还没有学习let,所以说只能这里先实现定义
btn01.onclick = function(){
// 目前来说,我们每点击一个按钮,就会导致最后的加速
// 所以说在开启上一个定时器之前,我们还需要实现将上一个定时器清空
clearInterval(myInterval);
myInterval = setInterval(function(){
index++;
if(index >= imgList.length){
index = 0;
}
// index = index / imgList.length
img.src = imgList[index];
console.log(img.src);
}, 1000)
}
btn02.onclick = function(){
clearInterval(myInterval);
myInterval = null;
}
}
</script>
<body>
<!-- 开始实现基本的那个图片切换的效果 -->
<div>
<img src="01.png" alt="">
<button id="btn01">开始</button>
<button id="btn02">暂停</button>
</div>
</body>
</html>
实现div盒子的移动
<!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>
#box{
width: 100px;
height: 100px;
background-color: aquamarine;
/* 实现盒子一定一定要添加定位 */
position: absolute;
}
</style>
</head>
<script>
window.onload = function(){
// 先实现获取节点
var box = document.getElementById("box");
var step = parseInt(prompt("请选择你的移动速度（像素）"), 10);
var isMoving = true;
if(step < 10 || isNaN(step)){
step = 10;
}
var dir = 0;
var myInterval = setInterval(function(){
// clearInterval(myInterval);
if(dir === 38 || dir === "w" || dir === "W" || dir === "ArrowUp"){
box.style.top = box.offsetTop - step + "px";
}
else if( dir === 40 || dir === "ArrowDown" || dir === "s" || dir === "S"){
box.style.top = box.offsetTop + step + "px";
}
else if( dir === 37 || dir === "ArrowLeft" || dir === "a" || dir === "A"){
box.style.left = box.offsetLeft - step + "px";
}
else if( dir == 39 || dir === "ArrowRight" || dir === "d" || dir === "D"){
box.style.left = box.offsetLeft + step + "px";
}
}, 150);
// 绑定键盘按下事件
document.onkeydown = function(event){
event = event || window.event;
dir = event.keyCode || event.key;
console.log(dir);
}
}
// 上面的代码还可以实现优化
</script>
<body>
<div id="box"></div>
</body>
</html>
定时器的使用场景
定时器的使用场景
window.onload = function(){
// 首先先获取节点
var box = document.getElementById("box");
var btn = document.getElementById("btn");
var timer
// 点击我们的按钮之后，实现box的实现移动
btn.onclick = function(){
// 开始实现定时器的效果来实现动画的效果
clearInterval(timer);
timer = setInterval(function(){
var oldValue = parseInt(getStyle(box, "left"));
var newValue = oldVaue + 10;
if(newValue >= 100){
newValue = 100;
}
box.style.left = newValue + "px";
// 当元素移动到固定的位置的时候，就直接停止移动
if(newValue >= 100){
clearInterval(timer);
}
},10)
}
// 开始实现获取元素的样式的函数
function getStyle(obj, name){
if(window.getComputedStyle){
return getComputedStyle(obj, null)[name]
}else{
return obj.currentStyle[name]
}
}
}
提取为函数
var timer
/*
obj:需要执行动画的对象
speed: 移动的速度
target:执行动画的时候的目标位置
*/
function move(obj,speed,target){
var current = parseInt(getStyle(obj, "left"));
if(current > target){
speed = -speed;
}
clearInterval(timer);
timer = setInterval(function(){
var oldValue = parseInt(getStyle(obj, "left"));
var newValue = oldValue + speed;
if(speed > 0 && newValue > target || speed < 0 && newValue < target){
newValue = target;
}
obj.style.left = newValue + "px";
// 当元素移动到固定的位置的时候，就直接停止移动
if(newValue == target){
clearInterval(timer);
}
},10)
}
function getStyle(obj, name){
if(window.getComputedStyle){
return getComputedStyle(obj, null)[name]
}else{
return obj.currentStyle[name]
}
}
// var timer
/*
obj:需要执行动画的对象
attr: 需要执行动画的样式
speed: 移动的速度
target:执行动画的时候的目标位置
callback 动画执行完毕后执行的函数
*/
function move(obj,attr,speed,target,callback){
var current = parseInt(getStyle(obj, "left"));
if(current > target){
speed = -speed;
}
clearInterval(obj.timer);
// 用来为我们的每个对象保持属于自己的标识
obj.timer = setInterval(function(){
var oldValue = parseInt(getStyle(obj, attr));
var newValue = oldValue + speed;
if(speed > 0 && newValue > target || speed < 0 && newValue < target){
newValue = target;
}
obj.style[attr] = newValue + "px";
// 当元素移动到固定的位置的时候，就直接停止移动
if(newValue == target){
clearInterval(obj.timer);
if(callback){
callback();
}
}
},10)
}
function getStyle(obj, name){
if(window.getComputedStyle){
return getComputedStyle(obj, null)[name]
}else{
return obj.currentStyle[name]
}
}
轮播图的实现
<!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>
*{
padding:0;
margin: 0;
list-style: none;
}
/* 开始实现设计样式 */
.box{
width: 400px;
height: 225px;
border:5px solid skyblue;
margin:100px auto;
/* 实现将我们的超出部分清除 */
overflow: hidden;
position: relative;
}
/* 设置ul的样式 */
ul{
/* width: 2000px; */
height: 300px;
position:absolute;
/* left: -1200px; */
/* 图片的移动是通过400px为一个步长的 */
}
/* 设置图片链接的浮动 */
ul li img{
float: left;
}
#nav{
position:absolute;
bottom: 5px;
/* left: 140px; */
}
#nav a{
height: 16px;
width: 16px;
background-color:aqua;
float: left;
margin:0 10px 0 0;
/* width: 50px;
height: 50px; */
/* opacity: 0.5; */
}
/* 开始设计鼠标移到超链接的的效果 */
/* #nav a:hover{
opacity: 0.5;
} */
/* #div{
width: 100px;
height: 100px;
background-color: brown;
position: absolute;
} */
</style>
</head>
<script>
// var timer
/*
obj:需要执行动画的对象
attr: 需要执行动画的样式
speed: 移动的速度
target:执行动画的时候的目标位置
callback 动画执行完毕后执行的函数
*/
function getStyle(obj, name){
if(window.getComputedStyle){
return getComputedStyle(obj, null)[name]
}else{
return obj.currentStyle[name]
}
}
function move(obj,attr,speed,target,callback){
var current = parseInt(getStyle(obj, "left"));
if(current > target){
speed = -speed;
}
clearInterval(obj.timer);
// 用来为我们的每个对象保持属于自己的标识
obj.timer = setInterval(function(){
var oldValue = parseInt(getStyle(obj, attr));
var newValue = oldValue + speed;
if(speed > 0 && newValue > target || speed < 0 && newValue < target){
newValue = target;
}
obj.style[attr] = newValue + "px";
// 当元素移动到固定的位置的时候，就直接停止移动
if(newValue == target){
clearInterval(obj.timer);
if(callback){
callback();
}
}
},10)
}
window.onload = function(){
var imgList = document.getElementById("imgList");
// 开始获取页面中的所有的图片
var imgs = document.getElementsByTagName("img");
var nav = document.getElementById("nav");
// 实现动态设置我们的效果图
imgList.style.width = 450 * imgs.length + "px";
nav.style.left = (document.getElementsByClassName("box")[0].offsetWidth - nav.offsetWidth) / 2 + "px";
// alert(imgs[0].width)
// 开始实现轮播图的事件
var allA = document.getElementsByTagName("a");
// 默认的显示图片的索引
var index = 0;
var timer;
// 实现默认显示的效果
// allA[index].style.opacity = "0.5"
// 开始实现点击功能:点击超链接来得到第一张图片
// 首先注意的是:我们实现执行我们的for循环,然后再实现的一个那个实现里面的语句
for(var i = 0; i < allA.length; i++){
allA[i].index = i;
allA[i].onclick = function(){
// imgList.style.left = - (400 * this.index) + "px";
for(var j = 0; j < allA.length; j++){
allA[j].style.opacity = "1";
}
this.style.opacity = "0.5";
// 使用我们的mova函数来实现切换图片
move(imgList, "left", 5,-400*this.index, function(){
autoChange();
})
clearInterval(timer);
}
}
// 开始实现自动切换图片的函数
function autoChange(){
// 开启定时器实现定时切换图片
timer = setInterval(function(){
index++;
if(index >= imgs.length){
imgList.style.left = 0;
}
index = index % (allA.length + 1);
move(imgList, "left", 10, -400*index)
for(var j = 0; j < allA.length; j++){
allA[j].style.opacity = "1";
}
allA[index].style.opacity = "0.5"
}, 1000)
}
autoChange();
// document.onkeydown = function(){
// var mytimer = setTimeout(function(){
// autoChange();
// }, 1000);
// clearTimeout(mytimer)
// }
// autoChange();
// 对move函数的测试
// var btn = document.getElementById("btn");
// btn.onclick = function(){
// var div = document.getElementById("div");
// move(div, "left",20, 600)
// }
}
</script>
<body>
<!-- 开始实现我们的那个轮播图的效果 -->
<!-- 先设计轮播图的结构 -->
<div class="box">
<ul id="imgList">
<!-- 首先我们的这里只是模拟的有五张图片 -->
<li><img src="images/01.jpg" alt=""></li>
<li><img src="images/02.jpg" alt=""></li>
<li><img src="images/03.jpg" alt=""></li>
<li><img src="images/04.jpg" alt=""></li>
<li><img src="images/05.jpg" alt=""></li>
<li><img src="images/01.jpg" alt=""></li>
</ul>
<!-- 开始实现创建导航按钮 -->
<div id="nav">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
<!-- <button id="btn">按钮</button>
<div id="div"></div> -->
</body>
</html>
<!--这个轮播图还有问题，可以修改的私聊我：3137536916@qq.com/ 微信号：17323451211 / 谢谢各位掘金大佬-->
BOM 类的操作
就是通过我们的那个className来实现的
博主写不下去了，直接上官方文档https://www.w3school.com.cn/jsref/dom_obj_attributes.asp
