壹
01.HelloWorld-输出语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
一个完整的JavaScript实现包含了三个部分:ECMAScript、DOM、BOM.
JS的特点
1.解释性语言
2.类似于C和Java的语法结构
3.动态语言
4.基于原型的面向对象
*/
/*
三个输出语句:
控制浏览器弹出一个警告框
alert:警告
*/
alert("第一行JS代码")
/*
让计算机在页面中输出一个内容
document:文档
document.write()可以向body中输出一个内容
*/
document.write("你好!!");
/*
向控制台输出一个内容
console.log()的作用是向控制台输出一个内容
*/
console.log("How are you?");
</script>
</head>
<body>
</body>
</html>
02.JS编写位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--
可以将js代码编写到外部js文件中,然后通过script标签引入
写到外部文件中可以在不同的页面中同时引用,也可以利用到浏览器的缓存机制,推荐使用的方式
-->
<!-- script标签一旦用于引用外部文件了,就不能再编写代码了,即使编写了浏览器也会忽略
如果需要则可再创建一个新的script标签用于编写内部代码
-->
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
<!--
可以将js代码编写到script标签中
<script type="text/javascript">
alert("写在标签中")
</script>
-->
</head>
<body>
<!--
可以将JS代码写到标签的onclick属性中
当点击按钮时,JS代码才会执行
虽然可以写在标签的属性中,但他们属于结构与行为耦合,不方便
使用,不推荐使用
-->
<button onclick="alert('Who are you?')">Click me!</button>
<!--
可以将js代码写在超链接的href属性中,这样当点击超链接时,
会执行js代码
-->
<a href="javascript:alert('I am fine!');">点我</a>
<a href="javascript:;">原地跳转,无反应</a>
</body>
</html>
script.js:
alert("写在外部js文件中");
03.JS基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03.JS基本语法</title>
<script type="text/javascript">
/*
JS注释:
多行注释,注释中的内容不会被执行,但是可以在源代码中查看
vscode中多行注释:alt+shift+a
*/
// 单行注释
/*
1.JS中严格区分大小写!!!!!
2.Js中每一条语句以分号结尾!!!!!
- 如果不写分号,浏览器会自动添加,但是会消耗一些系统资源
而且有些时候,浏览器会加错分号,所以在开发中分号必须写
3.JS会忽略多个空格和换行,所以可以利用空格和换行对代码进行格式化
*/
</script>
</head>
<body>
</body>
</html>
04.字面量和变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字面量和变量</title>
<script type="text/javascript">
/*
字面量:都是一些不可改变来的值
比如,1 2 3 4 5
字面量都是可以直接使用,但是一般不会直接使用字面量
*/
// alert(12345);
/*
变量:变量可以用来保存字面量,而且变量的值是可以任意改变的
变量更加方便使用,所以开发中都是通过变量保存一个字面量,
很少直接使用字面量
可以通过变量对字面量进行描述
x=12345
*/
// 声明变量
// 在JS中使用var关键字来声明一个变量
var a;
// 为变量赋值
a = 123;
a = 1;
// 声明和赋值同时进行
var b = 2;
alert(b);
</script>
</head>
<body>
</body>
</html>
05.标识符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标识符</title>
<script type="text/javascript">
/*
标识符
- 在JS中所有的可以由我们自主命名的都可以称为是标识符
- 例如:变量名、函数名、属性名都属于标识符
- 命名一个标识符时需要遵守如下的规则:
1.标识符中可以含有字母、数字、_、$
var a_1_$ = 123;
2.标识符不能以数字开头
3.标识符不能是ES中的关键字或保留字
4.标识符一般都采用驼峰命名法
- 首字母小写,其后每个单词的开头字母大写,其余字母小写
- JS底层保存标识符时实际上是采用的Unicode编码,
所以理论上讲,所有的utf-8中含有的内容都可以作为标识符
var 你好 = 123;
*/
</script>
</head>
<body>
</body>
</html>
06.数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据类型</title>
<script type="text/javascript">
/*
数据类型指的就是字面量的类型
JS中一共有六种数据类型:
String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Object 对象
String、Number、Boolean、Null、Undefined属于基本数据类型
而Object属于引用数据类型
*/
</script>
</head>
<body>
</body>
</html>
07.String字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String字符串</title>
<script type="text/javascript">
/*
String字符串
- 在JS中字符串需要使用引号引起来
- 使用双引号或单引号都可以,但是不要混着用
- 引号不能嵌套,双引号内不能放双引号,单引号内不能放单引号
*/
str = '我说:"今天天气真不错!"';
/*
在字符串中可以使用\作为转义字符,
当表示一些特殊符号时可以使用\进行转义
\" 表示 "
\' 表示 '
\n 表示 换行
\t 表示 制表符
\\ 表示 \ 打印两个\,需要四个\
*/
str = "我说:\"今天\t天气真不错!\""
</script>
</head>
<body>
</body>
</html>
08.Boolean布尔值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Boolean布尔值</title>
<script type="text/javascript">
/*
Boolean 布尔值
布尔值只有两个
true
- 表示真
false
- 表示假
使用typeof检查一个布尔值时,会返回boolean
*/
</script>
</head>
<body>
</body>
</html>
09.Number数值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number数值</title>
<script type="text/javascript">
/*
在JS中所有的数值都是Number类型
包括整数和浮点数
JS中可以表示的数字的最大值:
Number.MAX_VALUE
1.7976931348623157e+308
Number.MIN_VALUE 大于零的最小值
5e-324
如果使用Number表示的数字超过了最大值,则会返回一个
Infinity 表示正无穷
-Infinity 表示负无穷
使用typeof检查Infinity也会返回Number
NaN 是一个特殊的数字,表示Not A Number
计算"123" * "23";会返回NaN
使用typeof检查NaN也会返回Number
*/
var a = 123;
a = 12.23;
console.log(a);
//数字1234
var b = 1234;
//字符串1234
var c = "1234";
/*
可以使用运算符typeof
来检查一个变量的类型
语法:typeof 变量
*/
console.log(typeof a);
console.log(typeof c);
console.log(Number.MAX_VALUE)
console.log(Number.MAX_VALUE * Number.MAX_VALUE)
/*
在JS中整数的运算基本可以保证精确
*/
var d = 1233 + 223;
/*
如果使用JS进行浮点运算,可能得到一个不精确的结果
不要使用JS进行对精确度要求较高的运算
*/
var e = 0.1 + 0.2;
</script>
</head>
<body>
</body>
</html>
10.Null和Undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Null和Undefined</title>
<script type="text/javascript">
/*
Null类型的值只有一个,就是null
null这个值专门用来表示一个为空的对象
使用typeof检查一个null值时,会返回object
Undefined类型的值只有一个,就undefined
当声明一个变量,但是不给变量赋值时,它的值就是undefined
使用typeof检查一个undefined时也会返回undefined
*/
</script>
</head>
<body>
</body>
</html>
11.强制类型转换String
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>强制类型转换</title>
<script type="text/javascript">
/*
强制类型转换
- 指将一个数据类型强制转换为其他的数据类型
- 类型转换主要指,将其他的数据类型,转换为
String Number Boolean
*/
/*
1.将其他的数据类型转换为String
方式一:
- 调用被转换数据类型的toString()方法
- 该方法不会影响到原变量,它会将转换的结果返回
- 注意:null和undefined这两个值没有toString()方法,
如果调用他们的toString方法,会报错
方式二:
- 调用String()函数,并将被转换的数据作为参数传递给函数
- 使用String()函数做强制类型转换时,
对于Number和Boolean实际上就是调用的toString()方法
但是对于null和undefined,就不会调用toString()方法,
他会将null 直接转换为"null",
将undefined 直接转换为 "undefined"
*/
var a = 123;
//调用a的toString()方法
//调用xxx的yyy()方法,就是xxx.yyy()
a = a.toString();
a = true;
a = a.toString();
a = null;
//a = a.toString(); //报错
a = undefined;
//a = a.toString(); //报错
a = 123;
//调用String()函数,来将a转换为字符串
a = String(a);
a = null;
a = String(a);
a = undefined;
a = String(a);
console.log(typeof a);
console.log(a);
</script>
</head>
<body>
</body>
</html>
12.转换为Number
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>转换为Number</title>
<script type="text/javascript">
/*
将其他的数据类型转换为Number
方式一:
使用Number()函数
- 字符串 --> 数字
1.如果是纯数字的字符串,则直接将其转换为数字
2.如果字符串中有非数字的内容,则转换为NaN
3.如果字符串是一个空串或者是一个全是空格的字符串,则转换为0
- 布尔值 --> 数字
true 转成 1
false 转成 0
- null --> 数字 0
- undefined --> 数字 NaN
方式二:
- 这种方式专门用来对付字符串
- parseInt() 把一个字符串转换为一个整数
- parseFloat() 把一个字符串转换为一个浮点数
*/
var a = "123";
//调用Number()函数来将a转换为Number类型
a = Number(a);
a = true;
a = Number(a);
a = null;
a = Number(a);
a = "123px";
//调用parseInt()函数将a转换为Number
//parseInt()可以将一个字符串中的有效的整数内容取出来,
//然后转换为Number,从左至右选择,遇到非整数的类型即停止
a = parseInt(a);
a = "123.34px";
//parseFloat()作用和parseInt()类似,不同的是它可以获得有效的小数
a = parseFloat(a);// --> 123.34
/*
如果对非String使用parseInt()或parseFloat(),
他会先将其转换为String 然后再操作
*/
a = true;
a = parseInt(a);// --> NaN
console.log(typeof a);
console.log(a);
</script>
</head>
<body>
</body>
</html>
13.其他的进制的数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>其他的进制的数字</title>
<script type="text/javascript">
/*
在JS中,如果需要表示16进制的数字,则需要以0x开头
如果需要表示8进制的数字,则需要以0开头
如果需要表示2进制的数字,则需要以0b开头,
但不是所有的浏览器都支持
*/
//16进制
a = 0x10;//-->16
//八进制
a = 070;//-->56
//像 "070"这种字符串,有些浏览器会当成8进制解析,有些会当成10进制解析
a = "070";
//可以在parseInt()中传递第二个参数,来指定数字的进制
a = parseInt(a,10);
console.log(typeof a);
console.log(a);
</script>
</head>
<body>
</body>
</html>
14.转换为Boolean
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>转换为Boolean</title>
<script type="text/javascript">
/*
将其他的数据类型转换成Boolean
- 使用Boolean()函数
- 数字--> 布尔
- 除了0和NaN,其余的都是true
- 字符串 --> 布尔
- 除了空串,其余的都是true
- null和undefined都会转换为false
- 对象也会转换为true
- 隐式类型转换:
- 为任意的数据类型做两次非运算,即可将其转换为布尔值
- 例子:
var a = "hello";
a = !!a;//true
*/
var a = 123; //true
a = -123; //true
a = 0; //false
a = Infinity; //true
a = NaN; //false
//调用Boolean()函数来将a转换为布尔值
a = Boolean(a);
a = "";
a = Boolean(a);//false
a = null;
a = Boolean(a);//false
a = undefined;
a = Boolean(a);//false
console.log(typeof a);
console.log(a);
</script>
</head>
<body>
</body>
</html>
15.运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>运算符</title>
<script type="text/javascript">
/*
运算符也叫操作符
通过运算符可以对一个或多个值进行运算,并获取运算结果
比如:typeof就是运算符,可以用来获取一个值的类型
它会将该值的类型以字符串的形式返回
算数运算符
当对非Number类型的值进行运算时,会将这些值转换为Number,然后再运算
任何值和NaN做运算都得NaN
+:对两个值进行加法运算,并将结果返回
- 如果对两个字符串进行加法运算,则会将两个字符串拼接为一个字符串,并返回
- 任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作
-
*
/
%:取模运算(取余数)
*/
var a = true + 1;//2
a = true + false;//1
a = 2 + null;//2
a = 2 + NaN;//NaN
a = "123" + "456";//"123456"
a = "a"+
"b"+
"c"+
"d";//abcd
a = 123 + "1";//1231
a = true + "hello";//truehello
console.log(a);
//任何值和字符串相加都会转换为字符串,并作拼串操作
/*
可以利用这一特点,来将一个任意的数据类型转换为String
只需要为任意的数据类型加一个 "" 即可将其转换为String,
这是一种隐式的类型转换,由浏览器自动完成,实际上也是调用String()函数
*/
var b = 123;
b = b + "";
b = null;
b = b + null;//"null"
var c = 111;
c = c + "";
/* 任何值做 - * / 运算都会自动转换为Number
可以利用这一特点做隐式的类型转换,
可以通过为一个值 -0 *1 /1 来将其转换为Number
*/
c = 9 % 3;//0
c = 9 % 4;//1
c = 9 % 5;//4
console.log("c = "+ c)
</script>
</head>
<body>
</body>
</html>
16.一元运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一元运算符</title>
<script type="text/javascript">
/* 一元运算符,只需要一个操作数
+ 正号
正号不会对数字产生任何影响
- 负号
负号可以对数字进行符号的取反
- 对于非Number类型的值,
会将其先转换为Number,然后再运算
- 可以对一个其他的数据类型使用 + ,来将其转换为number
他的原理和Number()函数一样
*/
var a = 123;
a = -a;//-123
a = true;
a = -a;//-1
a = 1 + + "2" + 3;//6
console.log(a);
</script>
</head>
<body>
</body>
</html>
17.自增和自减
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自增和自减</title>
<script type="text/javascript">
/* 自增 ++
- 通过自增可以使变量在自身的基础上增加1
- 对于一个变量自增以后,原变量的值会立即自增1
- 自增分两种: 后++(a++)和 前++(++a)
无论是a++ 还是 ++a 都会立即使原变量的值自增1
不同的是 a++ 和 ++a 的值不同
a++的值等于原变量的值(自增前的值)
++a的值等于原变量新值(自增后的值)
*/
var a = 1;
document.write("a:"+a + "</br>");
// document.write("++a:"+ ++a + "</br>");
document.write("a++:"+ a++ + "</br>");
document.write("a:"+a);
</script>
</head>
<body>
</body>
</html>
18.逻辑运算符-布尔值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>逻辑运算符</title>
<script type="text/javascript">
/* JS中提供了三种逻辑运算符
! 非
- !可以用来对一个值进行非运算
- 非运算就是指对一个布尔值进行取反操作
true变false,false变true
- 如果对非布尔值进行运算,则会将其转换为布尔值,然后再取反
所以可以利用该特点,来将一个其他的数据类型转换为布尔值
可以为一个任意数据类型取两次反,来将其转换为布尔值,
原理和Boolean()函数一样
&& 与
- && 可以对符号两侧的值进行与运算并返回结果
- 运算规则
- 两个值中只要有一个值为false就返回false,
只有两个值都为true时,才会返回true
- JS中的“与”属于短路的与,如果第一个值为false,则不会再看第二个值
|| 或
- ||可以对符号两侧的值进行或运算并返回结果
- 运算规则:
- 两个值中只要有一个true,就返回true,
如果两个值都为false,才返回false
- JS中的“或”属于短路的或,
如果第一个值为true,则不会看第二个值
*/
var a = true;
//对a进行非运算
a = !a;
console.log("a = "+a);//a = false
//如果两个值都是true,则返回true
var b = true && true;
//只要有一个false,就返回false
b = true && false;
b = false && true;
b = false && false;
console.log(b);
//第一个值为true,会检查第二个值
true && alert("hello world!");
//第一个值为false,不会检查第二个值
false && alert("hello!");
//两个都是false,则返回false
b = false || false;
//只要有一个true,就返回true
b = true || false;
b = false || true;
b = true || true;
//第一个值为false,则会检查第二个值
false || alert("hello!");
//第一个值为true,则不再检查第二个值
true || alert("world!");
</script>
</head>
<body>
</body>
</html>
19.逻辑运算符-非布尔值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>逻辑运算符-非布尔值</title>
<script type="text/javascript">
/* && || 非布尔值的情况
- 对于非布尔值进行与 或运算时,
会先将其转换为布尔值,然后再运算,并且返回原值
- 与运算:
- 如果第一个值为true,则必然返回第二个值
- 如果第一个值为false,则直接返回第一个值
- 或运算
- 如果第一个值为true,则直接返回第一个值
- 如果第一个值为false,则返回第二个值
*/
//true && true
//与运算:如果两个值都为true,则返回后边的
var a = 1 && 2;//2
//与运算:如果两个值中有false,则返回靠前的false
//false && true
a = 0 && 2;//0
a = 2 && 0;//0
//false && false
a = NaN && 0;//NaN
a = 0 && NaN;//0
//true || true
//如果第一个值为true,则直接返回第一个值
a = 2 || 1;//2
a = 2 || NaN;//2
//如果第一个值为false,则直接返回第二个值
a = NaN || 1;//1
a = NaN || 0;//0
</script>
</head>
<body>
</body>
</html>
20.赋值运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>赋值运算符</title>
<script type="text/javascript">
/* =
- 可以将符号右侧的值赋值给符号左侧的变量
+=
- 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
*/
</script>
</head>
<body>
</body>
</html>
21.关系运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关系运算符</title>
<script type="text/javascript">
/* 通过关系运算符可以比较两个值之间的大小关系,
如果关系成立 它会返回true,如果关系不成立则返回false
> 大于号
- 判断符号左侧的值是否大于右侧的
- 如果关系成立,返回true,如果关系不成立则返回false
>=
<
<=
非数值的情况
- 对于非数值进行比较时,会将其转换为数字然后再比较
- 如果符号两侧的值都是字符串时,不会将其转换为数字进行比较,
而会分别比较字符串中字符的Unicode编码*/
var a = 5 > 10;//false
1 > true;//false
1 >= true;//true
1 > "0";//true
10 > null;//true
//任何值和NaN作任何比较都是false
10 < "hello";//false
true > false;//true
//如果比较的是两个字符串型的数字,可能会得到不可预期的结果
//注意: 在比较两个字符串型的数字时,一定一定要转型!!!
"1" < "5";//true
"11" < "5";//true
//比较两个字符串时,比较的是字符串的字符编码
//比较字符编码时是一位一位进行比较
//如果两位一样,则比较下一位,所以借用它来对英文进行排序
"a" < "b";//true
//比较中文时没有意义
"戒" > "我";//true
</script>
</head>
<body>
</body>
</html>
22.编码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>编码</title>
<script type="text/javascript">
/* 在字符串中使用转义字符输出Unicode编码
\u四位编码
*/
alert("\u2620");
document.write("\u2620");
</script>
</head>
<body>
<!-- 在网页中使用Unicode编码
&#编码; 这里的编码需要的是10进制
-->
<h1 style="font-size: 200px;">☠</h1>
<h1 style="font-size: 200px;">⚀</h1>
</body>
</html>
23.相等运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相等运算符</title>
<script type="text/javascript">
/* 相等运算符用来比较两个值是否相等,
如果相等会返回true,否则返回false
使用 == 来做相等运算
- 当使用 == 来比较两个值时,如果值的类型不同,
则会自动进行类型转换,将其转换为相同的类型,
然后再比较
不相等
使用 != 来做不相等运算
- 不相等也会对变量进行自动的类型转换,如果转换后相等也会返回false
===
全等
- 用来判断两个值是否全等,和相等类似,不同的是
它不会做自动的类型转换
如果两个值的类型不同,直接返回false
!==
不全等
- 和不等类似,不同的是它不会做自动的类型转换
如果两个值的类型不同,直接返回true
*/
console.log(1 == 1);//true
var a = 10;
console.log(a == 4);//false
console.log("1" == 1);//true
true == "1";//true
null == 0;//false
/* undefined 衍生自 null,
所以这两个值做相等判断时,会返回true
*/
undefined == null;//true
/* NaN 不和9任何值相等,包括它本身 */
NaN == NaN;//false
var b = NaN;
/* 判断b的值是否是NaN
可以通过 isNaN()函数来判断一个值是否是NaN
如果该值是NaN则返回true,否则返回false
*/
console.log(isNaN(b));//true
10 != 5;//true
"abcd" != "abcd";//false
"1" != 1;//false
"123" == 123;//true
"123" === 123;//false
"1" != 1;//false
"1" !== 1;//true
</script>
</head>
<body>
</body>
</html>
24.条件运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件运算符</title>
<script type="text/javascript">
/* 条件运算符 也叫 三元运算符
语法:
条件表达式?语句1:语句2;
- 执行的流程:
条件运算符在执行时,首先对条件表达式进行求值,
如果该值为true,则执行语句1,并返回执行结果
如果该值为false,则执行语句2,并返回执行结果
如果条件表达式的求值结果是一个非布尔值,
会将其转换为布尔值然后再运算
*/
var a = 10;
var b = 20;
var c = 50;
a > b ? alert("a大") : alert("b大");//b大
var max =a > b ? a : b;//max = 20
max = a > b ? (a > c ? a : c) : (b > c ? b : c); //max:50
</script>
</head>
<body>
</body>
</html>
25.运算符的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>运算符的优先级</title>
<script type="text/javascript">
/* , 运算符
使用,可以分割多个语句,一般可以在声明多个变量时使用,
*/
var a = 1 , b = 2 , c = 3;
/* JS中运算符也有优先级,
比如: 先乘除 后加减
在js中有一个运算符优先级的表,
在表中越靠上优先级越高,优先级越高越优先计算,
如果优先级一样,则从左往右计算
运算符的优先级表:
. [] new
()
++ --
! ~ +(单目) -(单目) typeof void delete
+(双目) -(双目)
<< >> >>>
< <= > >=
== !== ===
&
^
|
&&
||
?:
= += -= *= /= %= <<= >>= >>>= &= ^= |=
,
如果遇到优先级不清楚,可以使用()来改变优先级
*/
</script>
</head>
<body>
</body>
</html>
26.代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代码块</title>
<script type="text/javascript">
/* 程序是由一条一条语句构成的
语句是按照自上向下的舒徐一条一条执行的
在JS中可以使用{}来为语句进行分组
同一个{}中的语句称为是一组语句,
它们要么都执行,要么都不执行
一个{}中的语句也称为一个代码块
在代码块的后边不用再编写;了!!!
JS中的代码块,只具有分组的作用,没有其他的用途
代码块内的内容,在外部是完全可见的
*/
{
var a = 10;
}
console.log(a);//10
</script>
</head>
<body>
</body>
</html>
贰
01.流程控制语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流程控制语句</title>
<script type="text/javascript">
/* 流程控制语句
- 在JS中的程序是从上到下一行一行执行的
- 通过流程控制语句可以控制程序执行流程,
使程序可以根据一定的条件来选择执行
- 语句的分类:
1.条件判断语句
2.条件分支语句
3.循环语句
条件判断语句:
- 使用条件判断语句可以在执行某个语句之前进行判断,
如果条件成立才会执行语句,条件不成立则语句不执行。
- if语句
- 语法1:
if(条件表达式){
语句...
}
- if语句在执行时,会先对条件表达式进行求值判断,
如果条件表达式的值为true,则执行if后的语句
如果条件表达式的值为false,则不会执行if后的语句
if语句只能控制紧随其后的那个语句,
如果希望if语句可以控制多条语句,
可以将这些语句统一放到代码块中
*/
var a = 11;
if (a > 10){
alert("a > 10");
alert("hello world");
}
a = 15;
if (a > 10 && a <= 20){
alert("a > 10 并且 a <= 20");
}
</script>
</head>
<body>
</body>
</html>
02.if语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>if语句</title>
<script type="text/javascript">
/*
条件判断语句:
- 使用条件判断语句可以在执行某个语句之前进行判断,
如果条件成立才会执行语句,条件不成立则语句不执行。
- if语句
- 语法1:
if(条件表达式){
语句...
}
- if语句在执行时,会先对条件表达式进行求值判断,
如果条件表达式的值为true,则执行if后的语句
如果条件表达式的值为false,则不会执行if后的语句
if语句只能控制紧随其后的那个语句,
如果希望if语句可以控制多条语句,
可以将这些语句统一放到代码块中
- 语法2:
if(条件表达式){
语句...
}else{
语句...
}
if...else... 语句
当该语句执行时,会先对if后的条件表达式进行求值判断,
如果该值为true,则执行if后的语句
如果该值为false,则执行else后的语句
- 语法3:
if(条件表达式){
语句...
}else if(条件表达式){
语句...
}else if{
语句...
}else{
语句...
}
if...else if...else
当该语句执行时,会从上到下依次对条件表达式进行求值判断,
如果值为true,则执行当前语句
如果值为false,则继续向下判断
如果所有的条件都不满足,则执行最后一个else后的语句
该语句中,只会有一个代码块被执行,一旦代码块执行了,则直接结束语句
*/
var a = 11;
if (a > 10){
alert("a > 10");
alert("hello world");
}
a = 15;
if (a > 10 && a <= 20){
alert("a > 10 并且 a <= 20");
}
if (a >10){
alert("true");
}else{
alert("false");
}
</script>
</head>
<body>
</body>
</html>
03.if练习-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>if练习-1</title>
<script type="text/javascript">
/* 从键盘输入小明的期末成绩:
当成绩为100时,'奖励一辆BMW'
当成绩为[80 - 90]时,‘奖励一台iPhone’
当成绩为【60 - 80】时,‘奖励一本参考书’
其他时,什么奖励都没有
*/
/* 从键盘输入
prompt()可以弹出一个提示框,该提示框会带有一个文本框,
用户可以在文本框中输入一段内容,该函数需要一个字符串作为参数,
该字符串会作为提示框的提示文字
用户输入的内容将会作为函数的返回值返回,可以定义一个变量来接受该内容
*/
// 将prompt放入到一个循环中
while (true){
var score = prompt("请输入小明的期末成绩");
if (score >= 0 && score <= 100) {
break;
}
alert("请输入有效的分数!!!");
}
// 判断值是否合法
if (score > 100 || score < 0 || isNaN(score)){
alert("不合法值");
}else{
if(score == 100){
alert("奖励一辆BMW");
}else if(score >= 80){
alert("奖励一台iPhone");
}else if(score >= 60){
alert("奖励一本参考书");
}else{
alert("棍子一根~~~");
}
}
</script>
</head>
<body>
</body>
</html>
04.if练习-2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>if练习-2</title>
<script type="text/javascript">
/* 由键盘输入三个整数分别存入变量num1、num2、num3,
对它们进行排序,并且从小到大输出
*/
//获取用户输入的三个数:
/* prompt()函数的返回值是String类型的 */
var num1 = +prompt("请输入第一个数:");
var num2 = +prompt("请输入第二个数:");
var num3 = +prompt("请输入第三个数:");
if(num1 < num2 && num1 < num3){
//num1最小
if(num2 < num3){
//num1 num2 num3
alert(num1+","+num2+","+num3);
}else{
//num1 num3 num2
alert(num1+","+num3+","+num2);
}
}else if(num2 < num1 && num2 < num3){
//num2最小
if(num1 < num3){
//num2 num1 num3
alert(num2+","+num1+","+num3);
}else{
//num2 num3 num1
alert(num2+","+num3+","+num1);
}
}else{
//num3最小
if(num1 < num2){
//num3 num1 num2
alert(num3+","+num1+","+num2);
}else{
//num3 num2 num1
alert(num3+","+num2+","+num1);
}
}
</script>
</head>
<body>
</body>
</html>
05.条件分支语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件分支语句</title>
<script type="text/javascript">
/* 条件分支语句 也叫 switch语句
语法:
switch(条件表达式){
case 表达式:
语句...
break;
case 表达式:
语句...
break;
default:
语句...
break;
}
执行流程:
switch...case...语句
在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较
如果比较结果为true,则从当前case处开始执行代码
如果比较结果为false,则继续向下比较
如果所有的比较结果都为false,则只执行default后的语句
*/
//根据num的值,输出对应的中文
var a = 1;
/* if(num == 1){
console.log("壹");
}else if(num == 2){
console.log("贰");
}else if(num == 3){
console.log("叁");
} */
var num = 1;
switch(num){
case 1:
console.log("壹");
//使用break可以退出switch语句
break;
case 2:
console.log("贰");
break;
case 3:
console.log("叁");
break;
default:
console.log("非法数字~~~");
break;
}
/* 对于成绩大于60的,输出合格,低于60的,输出不合格 */
var score = 99;
switch(parseInt(score/10)){
case 10:
case 9:
case 8:
case 7:
case 6:
console.log("合格");
break;
default:
console.log("不合格");
break;
}
switch(true){
case score >= 60:
console.log("合格");
break;
default:
console.log("不合格");
break;
}
</script>
</head>
<body>
</body>
</html>
06.循环语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环语句</title>
<script type="text/javascript">
/* 向页面中输出连续的数字 */
// var a = 1;
// document.write(a++ +"<br />");
// document.write(a++ +"<br />");
// document.write(a++ +"<br />");
/* 循环语句:
通过循环语句可以反复的执行一段代码多次
while 循环
- 语法:
while(条件表达式){
语句...
}
- while语句在执行时,
先对条件表达式进行求值判断,
如果值为true,则执行循环体,
循环体执行完毕以后,继续对表达式进行判断
如果为true,则继续执行循环体,以此类推
如果值为false,则终止循环
do...while循环
- 语法:
do{
语句...
}while(条件表达式);
- 执行流程:
do...while语句在执行时,会先执行循环体,
循环体执行完毕以后,会对while后的条件表达式进行判断,
如果结果为true,则继续执行循环体,执行完毕继续判断 以此类推
如果结果为false,则终止循环
实际上这两个语句功能类似,不同的是while是先判断后执行,
而do...while会先执行后判断
do...while可以保证循环体至少执行依次,
而while不能
*/
var n = 1;
//向这种将条件表达式写死为true的循环,叫做死循环
//该循环不会停止,除非浏览器关闭,死循环在开发中慎用
// 可以使用break来退出循环
while(true){
// console.log(n++);
document.write(n++ + "<br />");
// 判断n是否是10
if(n == 10){
//退出循环
break;
}
}
// 创建一个循环,需要三个步骤:
// 1.初始化一个变量
var i = 0;
// 2.在循环中设置一个条件表达式
while(i < 10){
// document.write(i);
//3.定义一个更新表达式,每次更新初始化变量
// i++;
document.write(i++ + "<br />");
}
</script>
</head>
<body>
</body>
</html>
07.while练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>while练习</title>
<script type="text/javascript">
/* 假如投资的年利率为5%,试求从1000块增长到5000块,需要花费多少年 */
// 当前的钱数
var money = 1000;
// 定义一个计数器
var count = 0;
while (money < 5000){
money *= 1.05;
count++;
}
document.write(count);
</script>
</head>
<body>
</body>
</html>
08.for循环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>for循环</title>
<script type="text/javascript">
/* for语句,也是一个循环语句,也称为for循环
在for循环中,提供了专门的位置用来放三个表达式:
1.初始化表达式
2.条件表达式
3.更新表达式
语法:
for(初始化表达式;条件表达式;更新表达式){
语句...
}
*/
for(var i = 0;i < 10;i++){
alert(i);
}
// for循环中的三个部分都可以省略,也可以写在外部
var a = 0;
for(;i<10;){
alert(i++);
}
// 死循环
// for(;;){
// alert("hello");
// }
</script>
</head>
<body>
</body>
</html>
09.for循环练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>for循环</title>
<script type="text/javascript">
// 打印1-100之间所有奇数之和
var sum = 0;
for(var i = 1;i<=100;i++){
if(i%2!=0){
sum=sum+i;
}
}
document.write(sum);
// 打印1-100之间所有7的倍数的个数及总和
sum = 0;
var count = 0;
for(var i = 1;i<=100;i++){
if(i%7==0){
sum+=i;
}
}
</script>
</head>
<body>
</body>
</html>
10.水仙花数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水仙花数</title>
<script type="text/javascript">
/* 水仙花数是指一个三位数,它的每个位上的数字的3次幂之和等于它本身。
例如:1^3+5^3+3^3=153
请打印所有的水仙花数
*/
for(var i = 100;i<1000;i++){
// 获取i的百位 十位 个位的数字
// 获取百位数字
var bai = parseInt(i/100);
// 获取十位数字
var shi = parseInt((i-bai*100)/10);
// 获取个位数字
var ge = i % 10;
// 判断i是否是水仙花数
if(bai*bai*bai + shi*shi*shi + ge*ge*ge == i){
document.write(i+"<br />");
}
// document.write(i+"<br />");
}
</script>
</head>
<body>
</body>
</html>
11.for循环练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>for循环练习</title>
<script type="text/javascript">
/* 在页面中接收一个用户输入的数字,并判断该数是否是质数
质数: 只能被1和它自身整除的数,1不是质数也不是合数,质数必须是大于1的自然数。
*/
var num = prompt("请输入一个大于1的整数:");
// 判断输入值的合法性
if(num <= 1){
alert("该值不合法!!!");
}else{
// 创建一个变量来保存当前的数的状态
// 默认当前num是质数
var flag = true;
// 判断num是否是质数
// 获取2-num之间的数
for(var i = 2;i<num;i++){
// 判断num是否能被i整除
if(num % i == 0){
// 如果num能被i整除,则说明num一定不是质数
// 设置flag为false
flag = false;
}
}
// 如果num是质数则输出
if(flag){
alert(num + "是质数!!!");
}else{
alert(num+"不是质数!!!");
}
}
</script>
</head>
<body>
</body>
</html>
12.嵌套的for循环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套的for循环</title>
<script type="text/javascript">
// 打印5*5的矩形
for(var i = 0;i<5;i++){
for(var j = 0;j<5;j++){
document.write("* ");
}
document.write("<br />");
}
// 打印三角形
for(var i = 0;i<5;i++){
for(var j = 0;j<i+1;j++){
document.write("* ");
}
document.write("<br />");
}
// 打印倒三角形
for(var i = 0;i<5;i++){
for(var j = 0;j<5-i;j++){
document.write("* ");
}
document.write("<br />");
}
</script>
</head>
<body>
</body>
</html>
13.打印九九乘法表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>打印九九乘法表</title>
<script type="text/javascript">
// 打印九九乘法表
// 创建外层循环,用来控制乘法表的高度
for(var i = 1;i <= 9;i++){
// 创建内层循环来控制图形的宽度
for(var j = 1;j<=i;j++){
document.write("<span>"+j+"*"+i+"="+i*j+"</span>");
}
document.write("<br />");
}
</script>
<style type="text/css">
span{
display: inline-block;
width: 80px;
}
</style>
</head>
<body>
</body>
</html>
14.for嵌套-质数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>质数</title>
<script type="text/javascript">
// 打印1-100之间所有的质数
// 测试如下程序的性能:
// 在程序执行前,开启计时器
// console.time("计时器的名字")可以用来开启一个计时器
// 它需要一个字符串作为参数,这个字符串将会作为计时器的标识
console.time("test");
// 打印2-100之间所有的数
for(var i = 2;i<=10000;i++){
var flag = true;
for(var j=2;j<=Math.sqrt(i);j++){
if(i%j==0){
flag=false;
// 一旦进入判断,则证明i不可能是质数了,此时循环再执行已经没有任何意义了
// 可使用break来结束循环
break;
}
}
if(flag){
document.write(i + "<br />");
}
}
// 终止计时器
// console.timeEnd()用来停止一个计时器,需要一个计时器的名字作为参数
console.timeEnd("test");
// Math.sqrt()计算开方
var q = Math.sqrt(4);
document.write(q);
</script>
</head>
<body>
</body>
</html>
15.break和continue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>break和continue</title>
<script type="text/javascript">
/* break关键字可以用来退出switch或循环语句
不能在if语句中使用break和continue
break关键字 会立即终止离它最近的那个循环语句
*/
for(var i = 0;i<5;i++){
console.log(i);
if(i==2){
break;
}
}
/* 可以为循环语句创建一个label,来识别当前的循环
label:循环语句
使用break语句时,可以在break后跟着一个label,
这样break将会结束指定的循环,而不是最近的
*/
outer:
for(var i = 0;i<5;i++){
console.log("@外层循环"+i);
for(var j=0;j<5;j++){
break outer;
console.log("内层循环:"+j);
}
}
/* continue关键字可以用来跳过当次循环*/
for(var i = 0;i<5;i++){
if(i==2){
continue;
}
console.log(i);
}
</script>
</head>
<body>
</body>
</html>
叁
01.对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象</title>
<script type="text/javascript">
/* JS中数据类型:
- String 字符串
- Number 数值
- Boolean 布尔值
- Null 空值
- Undefined 未定义
以上五种类型属于基本数据类型,不是五种基本数据类型,就是Object
- Object 对象
基本数据类型都是单一的值“hello” 123 true,
值和值之间没有任何的联系。
在js中来表示一个人的信息(name gender age):
var name = "孙悟空";
var gender = "男";
var age = 18;
如果使用基本数据类型的数据,我们所创建的变量都是独立的,不能成为一个整体。
对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性。
对象的分类:
1.内建对象
- 由ES标准中定义的对象,在任何的ES的实现中都可以使用
- 比如:Math String Number Boolean Function Object ...
2.宿主对象
- 由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象
- 比如:BOM(浏览器对象模型) DOM(文档对象模型)
3.自定义对象
- 由开发人员自己创建的对象
*/
// 创建对象
/* 使用new关键字调用的函数,是构造函数constructor
构造函数是专门用来创建对象的函数
使用typeof 检查一个对象时,会返回object
*/
var obj = new Object();
// console.log(obj);
/* 在对象中保存的值称为属性
向对象中添加属性:
语法: 对象.属性名 = 属性值;
*/
// 向obj中添加一个name属性
obj.name = "孙悟空";
// 向obj中添加一个gender属性
obj.gender = "男";
// 向obj中添加一个age属性
obj.age = "18";
// console.log(obj);
/* 读取对象中的属性
语法: 对象.属性名
如果读取对象中没有的属性,不会报错而是会返回undefined
*/
// console.log(obj.name);
// console.log(obj.hello);
/* 修改对象的属性值
语法:对象.属性名 = 新值
*/
obj.name = "tom";
/* 删除对象的属性
语法:delete 对象.属性名
*/
delete obj.name;
console.log(obj.name);
</script>
</head>
<body>
</body>
</html>
02.属性名和属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性名和属性值</title>
<script type="text/javascript">
var obj = new Object();
/* 向对象中添加属性
属性名:
- 对象的属性名不强制要求遵守标识符的规范
*/
obj.name = "tom";
obj.var = "hello";
// console.log(obj.var);
// console.log(obj.name);
// obj.123 = 234;
// console.log(obj.123);//Uncaught SyntaxError: Unexpected number
/* 如果要使用特殊的属性名,不能采用.的方式来操作
需要使用另一种方式:
语法:对象["属性名"] = 属性值
读取时也要采用这种方式
使用[]这种形式去操作属性,更加的灵活,
在[]中可以直接传递一个变量,这样变量值是多少就会读取哪一个属性
*/
obj["123"] = 789;
var n = "123";
// console.log(obj[n]);
// console.log(obj["123"]);
/* 属性值
JS对象的属性值,可以是任意的数据类型
*/
obj.test = "abc";
obj.test = 123;
obj.test = true;
obj.test = null;
obj.test = undefined;
// console.log(obj.test);
// 创建一个对象
var obj2 = new Object();
obj2.name = "cat";
// 将obj2设置为obj的属性
obj.test = obj2;
// console.log(obj.test);
/* in运算符
- 通过该运算符可以检查一个对象中是否含有指定的属性
如果有则返回true,没有则返回false
- 语法:
"属性名" in 对象
*/
// 检查obj中是否含有test2属性
// console.log("test2" in obj);//false
// console.log("test" in obj);//true
</script>
</head>
<body>
hello!
</body>
</html>
03.基本和引用数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本和引用数据类型</title>
<script type="text/javascript">
/* 基本数据类型
string Number Boolean Null Undefined
引用数据类型
Object
JS中的变量都是保存到栈内存中的,
基本数据类型的值直接在栈内存中存储,
值与值之间是独立存在,修改一个变量不会影响其他的变量
对象是保存到堆内存中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间,
而变量保存的是对象的内存地址(对象的引用),如果两个变量保存的是同一个对象引用,
当通过一个变量修改属性时,另一个也会受到影响
*/
var a = 123;
var b =a;
a++;
// console.log("a-->"+a);
// console.log("b-->"+b);
var obj = new Object();
obj.name = "孙悟空";
var obj2 = obj;
// console.log(obj.name);//孙悟空
// console.log(obj2.name);//孙悟空
// 修改obj的name属性值
obj.name = "猪八戒";
// console.log(obj.name);//猪八戒
// console.log(obj2.name);//猪八戒
// 设置obj2为null
obj2 = null;
// console.log(obj);
// console.log(obj2);
var c = 10;
var d = 10;
// console.log(c == d);//true
var obj3 = new Object();
var obj4 = new Object();
obj3.name = "沙和尚";
obj4.name = "沙和尚";
// console.log(obj3 == obj4);//false
/* 当比较两个基本数据类型的值时,就是比较值。
而比较两个引用数据类型时,它是比较的对象的内存地址,
如果两个对象是一模一样的,但是地址不同,它也会返回false*/
</script>
</head>
<body>
</body>
</html>
04.对象字面量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象字面量</title>
<script type="text/javascript">
// 创建一个对象
// var obj = new Object();
/*
使用对象字面量来创建一个对象
*/
var obj = {};
// console.log(typeof obj);
obj.name = "tom";
// console.log(obj.name);
/* 使用对象字面量,可以在创建对象时,直接指定对象中的属性
语法:{属性名:属性值,属性名:属性值...}
对象字面量的属性名可以加引号也可以不加,建议不加,
如果要使用一些特殊的名字,则必须加引号
属性名和属性值是一组一组的名值对结构,
名和值之间使用:连接,多个名值对之间使用,隔开
如果一个属性之后没有其他属性了,就不要写,了
*/
var obj2 = {
name:"张三",
age:18,
gender:"男",
test:{name:"李四"}
};
// console.log(obj2.test);
</script>
</head>
<body>
</body>
</html>
05.函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
<script type="text/javascript">
/* 函数 function
- 函数也是一个对象
- 函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)
- 函数中可以保存一些代码在需要的时候调用
- 使用typeof检查一个函数对象时,会返回function
*/
// 创建一个函数
// var fun = new Function();
// console.log(typeof fun);
// 可以将要封装的代码以字符串的形式传递给构造函数
var fun = new Function("console.log('Hello,这是我的第一个函数');");
// console.log(fun);
// 封装到函数中的代码不会立即执行
// 函数中的代码会在函数调用的时候执行
/* 调用函数
语法:函数对象()
*/
// 当调用函数时,函数中封装的代码会按照顺序执行
// fun();
// 我们在实际开发中很少使用构造函数来创建一个函数对象
/* 使用 函数声明 来创建一个函数
语法:
function 函数名([形参1,形参2...形参N]){ //[]代表可选
语句...
}
*/
function fun2(){
console.log("我的第二个函数。。。");
document.write("hello world");
alert("你好");
}
// console.log(fun2);
// 调用fun2
// fun2();
/* 使用 函数表达式 来创建一个函数
var 函数名 = function([形参1,形参2...形参n]){
语句...
}
*/
var fun3 = function(){
console.log("hello");
};
// fun3();
</script>
</head>
<body>
</body>
</html>
06.函数的参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数的参数</title>
<script type="text/javascript">
/* 定义一个用来求两个数和的函数
可以在函数的()中来指定一个或多个形参(形式参数)
多个形参之间使用,隔开,声明形参就相当于在函数内部声明了对应的变量
但是并不赋值
*/
function sum(a,b){
console.log(a+b);
}
/* 在调用函数时,可以在()中指定实参(实际参数)
实参将会赋值给函数中对应的形参
*/
// sum(1,2);
/*
调用函数时解析器(浏览器)不会检查实参的类型
所以要注意,是否有可能会接受到非法的参数
*/
// sum(123,"hello");//123hello
// sum(true,false);//1
/*
调用函数时,解析器也不会检查实参的数量
多余实参不会被赋值
如果实参的数量少于形参的数量,则没有对应实参的形参将是undefined
*/
// sum(1,2,"hello",true,null);//3
// sum(1);//undefined
</script>
</head>
<body>
</body>
</html>
07.返回值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>返回值</title>
<script type="text/javascript">
/* 创建一个函数,用来计算三个数的和
可以使用 return 来设置函数的返回值
语法: return 值
return后的值将会作为函数的执行结果返回,
可以定义一个变量,来接受该结果
在函数中return后的语句都不会执行
如果return语句后不跟任何值就相当于返回一个undefined,
如果函数中不写return,则也会返回undefined
return后可以跟任意类型的值
*/
function sum(a,b,c){
// alert(a+b+c);
var d = a+b+c;
return d;
}
// 调用函数
// 变量result的值就是函数的执行结果
// 函数返回什么result的值就是什么
var result = sum(1,2,3);
// console.log(result);
// sum(1,2,3);
// 练习
/* 定义一个函数,判断一个数字是否是偶数,如果是返回true,否则返回false */
// function isOu(num){
// if(num%2==0){
// return true;
// }else{
// return false;
// }
// }
function isOu(num){
return num%2==0;
}
var res = isOu(55555555555);
// console.log(res);
/* 创建一个函数,可以在控制台输出一个人的信息
可以输出人的name age gender address
实参可以是任意的数据类型,也可以是一个对象
当我们参数过多时,可以将参数封装到一个对象中,然后通过对象传递
*/
function sayHello(o){
console.log(o.name+o.age+o.gender+o.address);
}
var obj = {
name : "tom",
age : 19,
address : "china",
gender : "男"
};
// sayHello(obj);
/* 实参可以是一个对象,也可以是一个函数*/
function fun(a){
a(obj);
}
// fun(sayHello);
/*
sayHello()
-调用函数
- 相当于使用的函数的返回值
sayHello
- 函数对象
- 相当于直接使用函数对象
*/
</script>
</head>
<body>
</body>
</html>
08.return
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>return</title>
<script type="text/javascript">
function fun(){
console.log("start");
for(var i = 0;i<5;i++){
if(i == 2){
// 使用break可以退出当前循环
// break;
// continue用于跳过当次循环
// continue;
// 使用return可以结束整个函数
// return;
}
console.log(i);
}
console.log("end");
}
// fun();
/* 返回值可以是任意的数据类型
可以是一个对象,也可以是一个函数
*/
function fun2(){
var obj = {name : "tom"};
return obj;
}
var a = fun2();
// console.log(a);
function fun3(){
// 在函数内部再声明一个函数
function fun4(){
console.log("hello");
}
// fun4();
return fun4;
}
// fun3();
a = fun3();
// a();//hello
// fun3()();//hello
</script>
</head>
<body>
</body>
</html>
09.立即执行函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>立即执行函数</title>
<script type="text/javascript">
// 函数对象()
/* 立即执行函数
函数定义完,立即被调用,这种函数叫做立即执行函数
立即执行函数往往只会执行一次
*/
(function(){
// console.log("hello");
})();//hello
</script>
</head>
<body>
</body>
</html>
10.对象的属性值-函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象</title>
<script type="text/javascript">
/* 创建一个对象 */
var obj = new Object();
// 向对象中添加属性
obj.name = "cat";
obj.age = 12;
// 对象的属性值可以是任何的数据类型,也可以是一个函数
obj.sayName = function(){
console.log(obj.name);
};
// obj.sayName();
/* 函数也可以成为对象的属性
如果一个函数作为一个对象的属性保存,
那么我们称这个函数是这个对象的方法
调用函数就说调用对象的方法*/
var obj2 = {
name : "张三",
age : 12,
sayName:function(){
console.log(obj2.name);
}
};
// obj2.sayName();
</script>
</head>
<body>
</body>
</html>
11.枚举对象中的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>枚举对象中的属性</title>
<script type="text/javascript">
var obj = {
name:"孙悟空",
age:19,
gender:"男",
address:"花果山"
};
// 枚举对象中的属性
// 使用 for...in 语句
/* 语法:
for(var 变量 in 对象){
}
for...in 语句 对象中有几个属性,循环就会执行几次
每次执行时,会将对象中的一个属性的名字赋值给变量
*/
for(var n in obj){
// console.log(n);
// console.log("属性名:"+n+"-->"+"属性值:"+obj[n]);
}
</script>
</head>
<body>
</body>
</html>
12.作用域scope
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>作用域</title>
<script type="text/javascript">
/* 作用域
- 作用域指一个变量的作用的范围
- 在JS中一共有两种作用域:
1.全局作用域
- 直接编写在script标签中的JS代码,都在全局作用域
- 全局作用域在页面打开时创建,在页面关闭时销毁
- 在全局作用域中有一个全局对象window,
它代表的是一个浏览器的窗口,它由浏览器创建,我们可以直接使用
- 在全局作用域中:
创建的变量都会作为window对象的属性保存
创建的函数都会作为window对象的方法保存
- 全局作用域中的变量都是全局变量,
在页面的任意的部分都可以访问的到
2.函数作用域
*/
// console.log(window);
var a = 10;
// console.log(window.a);
function fun(){
console.log("hello");
}
// window.fun();
</script>
</head>
<body>
</body>
</html>
13.变量的声明提前
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变量的声明提前</title>
<script type="text/javascript">
/* 变量的声明提前
- 使用var关键字声明的变量,会在所有的代码执行之前被声明(但是不会赋值)
但是如果声明变量时不使用var关键字,则变量不会被声明提前
函数的声明提前
- 使用函数声明形式创建的函数 function 函数名(){}
它会在所有的代码执行之前就被创建
所以我们可以在函数声明前来调用函数
- 使用函数表达式创建的函数,不会被声明提前,所以不能在声明前调用
*/
// fun();//fun...
// fun2();//UncaughtTypeError: fun2 is not a function
// 函数声明,会被提前创建
function fun(){
console.log("fun...");
}
// 函数表达式,不会被提前创建
var fun2 = function(){
console.log("fun2...");
};
</script>
</head>
<body>
</body>
</html>
14.函数作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数作用域</title>
<script type="text/javascript">
/* 函数作用域
- 调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁
- 每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的
- 在函数作用域中可以访问到全局作用域的变量,
在全局作用域中无法访问到函数作用域的变量
- 当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用,否则向上一级作用域中寻找
- 在函数中要访问全局变量可以使用window对象
*/
// 创建一个变量
var a = 10;
function fun(){
console.log(a);
var b = 20;
}
// fun();//10
// console.log(b);//UncaughtReferenceError: b is not defined
/* 在函数作用域中也有声明提前的特性,
使用var关键字声明的变量,会在函数中所有的代码执行之前被声明
函数声明也会在函数中的所有的代码执行之前执行
*/
function fun3(){
console.log(a);
var a = 10;
fun4();
function fun4(){
console.log("fun4...");
}
}
// fun3();//undefined
</script>
</head>
<body>
</body>
</html>
15.debug
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>debug</title>
<script type="text/javascript">
console.log(d);
var a = 10;
var b = "hello";
c = true;
function fun(){
console.log("hello");
}
var d = 35;
</script>
</head>
<body>
</body>
</html>
16.this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>this</title>
<script type="text/javascript">
/* 解析器在调用函数时每次都会向函数内部传递一个隐含参数,
这个隐含的参数就是this,this指向的是一个对象,
这个对象我们称为函数执行的 上下文对象,
根据函数的调用方式的不同,this会指向不同的对象
1.以函数的形式调用时,this永远都是window
2.以方法的形式调用时,this就是调用方法的 那个对象
*/
function fun(){
console.log(this.name);
}
// fun();
var obj = {
name:"tom",
sayName:fun
};
var name = "全局的name";
// 以方法的形式调用,this是调用方法的对象
// obj.sayName();//tom
// 以函数形式调用,this就是window
// fun();//全局的name
// console.log(obj.sayName == fun); //true
var address = "花果山";
function fun2(){
console.log(this.address);
}
var obj = {
address : "高老庄 ",
sayAddr:fun2
};
var obj2 = {
address : "梁山",
sayAddr:fun2
};
// fun2();//花果山
// obj.sayAddr();//高老庄
// obj2.sayAddr();//梁山
</script>
</head>
<body>
</body>
</html>
17.使用工厂方法创建对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用工厂方法创建对象</title>
<script type="text/javascript">
/*
创建一个对象
*/
var obj = {
name : "孙悟空",
age : 18,
gender : "男",
sayName : function(){
console.log(this.name);
}
};
/*
使用工厂方法创建对象
通过该方法可以大批量的创建对象
*/
function createPerson(name,age,gender){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.sayName = function(){
console.log(this.name);
};
return obj;
}
var obj2 = createPerson("孙悟空",18,"男");
obj2.sayName();
</script>
</head>
<body>
</body>
</html>
18.构造函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>构造函数</title>
<script type="text/javascript">
/* 创建一个构造函数,专门用来创建Person对象
构造函数就是一个普通的函数,创建方式和普通函数没有区别,
不同的是构造函数习惯上首字母大写
构造函数和普通函数的区别就是调用方式的不同
普通函数是直接调用,而构造函数需要使用new关键字来调用
构造函数的执行流程:
1.立刻创建一个新的对象
2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
3.逐行执行函数中的代码
4.将新建的对象作为返回值返回
使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类。
我们将通过一个构造函数创建的对象,称为是该类的实例
this的情况:
1.当以函数的形式调用时,this就是window
2.当以方法的形式调用时,谁调用方法this就是谁
3.当以构造函数的形式调用时,this就是新创建的那个对象
*/
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
console.log(this.name);
};
}
var per = new Person("孙悟空",18,"男");
// console.log(per);
// per.sayName();
/*
使用instanceof可以检查一个对象是否是一个类的实例
语法:
对象 instanceof 构造函数
如果是,返回true,否则返回false
*/
// console.log(per instanceof Person);//true
/*
所有的对象都是Object的后代,
所有任何对象和Object在instanceof检查是都会返回true
*/
// console.log(per instanceof Object);//true
</script>
</head>
<body>
</body>
</html>
19.构造函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>构造函数</title>
<script type="text/javascript">
/* 创建一个Person构造函数
- 在Person构造函数中,为每一个对象都添加了一个sayName方法,
目前我们的方法是在构造函数内部创建的,
也就是构造函数每执行一次就会创建一个新的sayName方法
也就是所有实例的sayName都是唯一的
这样就导致了构造函数执行一次就会创建一个新的方法,
完全可以使所有的对象共享一个方法
*/
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
// this.sayName = function(){
// console.log(this.name);
// };
// this.sayName = fun;
}
// 将sayName方法在全局作用域中定义
/*
将函数定义在全局作用域,污染了全局作用域的命名空间
而且定义在全局作用域中也很不安全
*/
// function fun(){
// console.log(this.name);
// }
Person.prototype.sayName = function(){
console.log(this.name);
};
var per = new Person("tom",11,"男");
// per.sayName();
</script>
</head>
<body>
</body>
</html>
20.原型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原型</title>
<script type="text/javascript">
/* 原型 prototype
我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype
这个属性对应着一个对象,这个对象就是我们所谓的原型对象
如果函数作为普通函数调用prototype没有任何作用
当函数以构造函数的形式调用时(var mc = new Person()),
它所创建的对象中都会有一个隐含的属性,
指向该构造函数的原型对象,我们可以通过__proto__来访问该属性
原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象
我们可以将对象中共有的内容,统一设置到原型对象中
当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有则直接使用,
如果没有则会去原型对象中寻找,如果找到则直接使用
以后创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中,
这样不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法了
*/
function Person(){
}
// 向Person的原型中添加属性a
Person.prototype.a = 123;
// 向Person的原型中添加一个方法
Person.prototype.sayHello = function(){
console.log("hello");
};
var pr = new Person();
var pr2 = new Person();
// console.log(pr.a);//123
// console.log(pr2.a);//123
// pr.sayHello();
// pr2.sayHello();
// console.log(Person.prototype);
// console.log(pr.__proto__);
</script>
</head>
<body>
</body>
</html>
21.原型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原型</title>
<script type="text/javascript">
// 创建一个构造函数
function MyClass(){
}
// 向MyClass的原型中添加一个name属性
MyClass.prototype.name = "原型中的名字";
var mc = new MyClass();
// console.log(mc.name);//原型中的名字
// 使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true
// console.log("name" in mc);//true
// 可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
// console.log(mc.hasOwnProperty("name"));//false
mc.age = 18;
// console.log(mc.hasOwnProperty("age"));//true
/*
原型对象也是对象,所以它也有原型,
当我们使用一个对象的属性或方法时,会先在自身中寻找,
自身中如果有,则直接使用,
如果没有则去原型对象中寻找,如果原型对象中有,则使用,
如果没有则去原型的原型中寻找,直到找到Object对象的原型,
Object对象的原型没有原型,如果在Object中依然没有找到,则返回undefined
*/
</script>
</head>
<body>
</body>
</html>
22.toString
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>toString</title>
<script type="text/javascript">
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
// 创建一个Person实例
var per = new Person("宋江",18,"男");
// 修改Person原型的toString
Person.prototype.toString = function(){
return "Person[name = "+this.name+" , age = "+this.age+" , gender = "+this.gender+" ]";
};
// 当我们直接在页面中打印一个对象时,实际上是输出的对象的toString()方法的返回值
// 如果希望在输出对象时不输出[object Object],可以为对象添加一个toString()方法
// per.toString = function(){
// return "Person....";
// };
// console.log(per.toString() == per);//true
// console.log(per);
// console.log(per.toString());//Person....
// console.log(per.toString());//Person[name = 宋江 , age = 18 , gender = 男 ]
</script>
</head>
<body>
</body>
</html>
23.垃圾回收
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垃圾回收</title>
<script type="text/javascript">
/* 垃圾回收(GC)
- 就像人生活的时间长了会产生垃圾一样,程序运行过程中也会产生垃圾
这些垃圾积攒过多以后,会导致程序运行的速度过慢,
所以我们需要一个垃圾回收的机制,来处理程序运行过程中产生的垃圾
- 当一个对象没有任何的变量或属性对它进行引用,此时我们将永远无法操作该对象,
此时这种对象就是一个垃圾,这种对象过多会占用大量的内存空间,导致程序运行变慢
- 在JS中拥有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁,
我们不需要也不能进行垃圾回收的操作
- 我们需要做的只是要将不再使用的对象设置为null即可
*/
var obj = new Object();
</script>
</head>
<body>
</body>
</html>
肆
01.数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组</title>
<script type="text/javascript">
/*
内建对象
宿主对象
自定义对象
数组(Array)
- 数组也是一个对象
- 它和普通对象功能类似,也是用来存储一些值的
- 不同的是普通对象是使用字符串作为属性名的,
而数组是使用数字作为索引操作元素
- 索引:
从0开始的整数就是索引
- 数组的存储性能比普通对象要好,在开发中经常使用数组来存储一些数据
*/
// 创建数组对象
var arr = new Array();
// 使用typeof检查一个数组时,会返回object
// console.log(typeof arr);//object
/* 向数组中添加元素
语法:数组[索引] = 值
*/
arr[0] = 10;
arr[1] = 11;
arr[2] = 111;
arr[3] = 122;
arr[4] = 12;
// console.log(arr);//{"0":10,"1":11,"length":2}
/* 读取数组中的元素
语法:数组[索引]
如果读取不存在的索引,不会报错而是返回undefined
*/
// console.log(arr[4]);//12
/* 获取数组的长度
可以使用length属性来获取数组的长度(元素的个数)
语法:数组.length
对于连续的数组,使用length可以获取到数组的长度
对于非连续的数组,使用length会获取到数组的最大索引+1
尽量不要创建非连续的数组
*/
// console.log(arr.length);//5
/* 修改length
如果修改的length大于原长度,则多出部分会空出来
如果修改的length小于原长度,则多出的元素会被删除
*/
// arr.length = 10;
// console.log(arr.length);//10
// console.log(arr);
// arr.length = 2;
// console.log(arr.length);
// console.log(arr);// {"0":10,"1":11,"length":2}
/*
向数组的最后一个位置添加元素
语法:
数组[数组.length] = 值;
*/
arr[arr.length] = 100;
// console.log(arr);//{"0":10,"1":11,"2":111,"3":122,"4":12,"5":100,"length":6}
</script>
</head>
<body>
</body>
</html>
02.数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组</title>
<script type="text/javascript">
// 创建一个数组
// var arr = new Array();
// 使用字面量来创建数组
// var arr = [];
// console.log(arr);
// 使用字面量创建数组时,可以在创建时就指定数组中的元素
var arr = [1,2,3,4,5,100];
// console.log(arr[3]);//4
/* 使用构造函数创建数组时,也可以同时添加元素,将要添加的元素作为构造函数的参数传递
元素之间使用,隔开
*/
var arr2 = new Array(10,29,30);
// console.log(arr2);//{"0":10,"1":29,"2":30,"length":3}
// 创建一个数组中只有一个元素10
arr = [10];
// 创建一个长度为10的数组
arr2 = new Array(10);
// console.log(arr2.length);//10
/*
数组中的元素可以是任意的数据类型
*/
// arr = ["hello",1,true,null,undefined];
// console.log(arr);//0: "hello" 1: 1 2: true 3: null 4: undefined length: 5
// 也可以是对象
var obj = {name:"孙悟空"};
arr[arr.length] = obj;
arr = [{name:"a"},{name:"b"},{name:"c"}];
// console.log(arr);
// console.log(arr[1].name);//b
// 也可以是函数
arr = [function(){console.log(1);},function(){console.log(2);}];
// arr[0]();//1
// arr[1]();//2
// 数组中也可以放数组 称为二维数组
arr = [[1,2,3],[23,34,4],[111,222,333]];
// console.log(arr[1]);
</script>
</head>
<body>
</body>
</html>
03.数组的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组的方法</title>
<script type="text/javascript">
// 创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚"];
/* push()
- 该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度
- 可以将要添加的元素作为方法的参数传递
这样这些元素将自动添加到数组的末尾
- 该方法会将数组新的长度作为返回值返回
*/
arr.push("唐僧","白骨精");
// console.log(arr);//{"0":"孙悟空","1":"猪八戒","2":"沙和尚","3":"唐僧","4":"白骨精",length":5}
/* pop()
- 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
*/
result = arr.pop();
// console.log(result);//白骨精
/* unshift()
- 向数组开头添加一个或多个元素,并返回新的数组长度
- 向前边插入元素以后,其他的元素索引会依次调整
*/
// console.log(arr);
arr.unshift("牛魔王","二郎神");
// console.log(arr);
/* shift()
- 可以删除数组的第一个元素,并将被删除的元素作为返回值返回
*/
result = arr.shift();
// console.log(arr);
// console.log(result);//牛魔王
</script>
</head>
<body>
</body>
</html>
04.数组的遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组的遍历</title>
<script type="text/javascript">
// 创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚"];
// 所谓的遍历数组,就是将数组中所有的元素都取出来
for(var i = 0;i<arr.length;i++){
// console.log(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
05.数组练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组练习</title>
<script type="text/javascript">
function Person(name,age,gender){
this.name = name;
this.age = age;
}
// 修改Person原型的toString
Person.prototype.toString = function(){
return "Person[name = "+this.name+" , age = "+this.age+"]";
};
// 创建一个Person对象
var per = new Person("孙悟空",18);
var per2 = new Person("猪八戒",28);
var per3 = new Person("红孩儿",8);
var per4 = new Person("蜘蛛精",12);
var per5 = new Person("二郎神",44);
/*
将这些Person对象放入到一个数组中
*/
var perArr = [per,per2,per3,per4,per5];
/*
创建一个函数,可以将perArr中的满18岁的Person提取出来,
然后封装到一个新的数组中并返回
arr
形参,要提取信息的数组
*/
function getAdult(arr){
// 创建一个新的数组
var newArr = [];
// 遍历arr,获取arr中Person对象
for(var i = 0;i<arr.length;i++){
var p = arr[i];
// 判断Person对象的age是否大于等于18
if(p.age >= 18){
// 如果大于等于18,则将这个对象添加到newArr中
newArr.push(p);
}
}
// 将新的数组返回
return newArr;
}
var result = getAdult(perArr);
// console.log(result);
</script>
</head>
<body>
</body>
</html>
06.forEach
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>forEach</title>
<script type="text/javascript">
/*
一般都是使用for循环去遍历数组,
JS中为我们提供了一个方法,用来遍历数组
forEach()
- 这个方法只支持IE8以上的浏览器
IE8及以下的浏览器均不支持该方法,所以如果需要兼容IE8,则不要使用forEach
还是使用for循环来遍历
*/
// 创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
/*
forEach()方法需要一个函数作为参数
- 像这种函数,由我们创建但不由我们调用的,我们称为回调函数
- 数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素
以实参的形式传递进来,可以来定义形参,来读取这些内容
- 浏览器会在回调函数中传递三个参数:
第一个参数,就是当前正在遍历的元素
第二个参数,就是当前正在遍历的元素的索引
第三个参数,就是正在遍历的数组
*/
arr.forEach(function(value,index,obj){
// console.log("hello");
// console.log(value,index,obj);
});
</script>
</head>
<body>
</body>
</html>
07.slice和splice
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
/* slice()
- 可以用来从数组提取指定元素
- 该方法不会改变原数组,而是将截取到的元素封装到一个新数组中返回
- 参数:
1.截取开始的位置的索引,包含开始索引
2.截取结束的位置的索引,不包含结束索引
- 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
- 索引可以传递一个负值,如果传递一个负值,则从后往前计算
*/
var result = arr.slice(1,2);//猪八戒
result = arr.slice(2);//沙和尚...白骨精
result = arr.slice(2,-1);//沙和尚 唐僧
// console.log(result);
/* splice
- 可以用于删除数组中的指定元素
- 使用splice()会影响到原数组,会将指定元素从原数组中删除
并将被删除的元素作为返回值返回
- 参数:
第一个,表示开始位置的索引
第二个,表示删除的数量
第三个及以后,
可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边
*/
// result = arr.splice(0,2);
// console.log(result);//孙悟空 猪八戒
// console.log(arr);//沙和尚 唐僧 白骨精
result = arr.splice(1,1,"牛魔王","铁扇公主");
// console.log(result);
// console.log(arr);
</script>
</head>
<body>
</body>
</html>
08.数组去重练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组去重练习</title>
<script type="text/javascript">
// 创建一个数组
var arr = [1,2,2,2,3,2,1,3,4,2,5];
// 去除数组中重复的数字
// 获取数组中的每一个元素
for(var i = 0;i<arr.length;i++){
// console.log(arr[i]);
/* 获取当前元素后的所有元素 */
for(var j = i+1;j<arr.length;j++){
// console.log("--->"+j);
/* 判断两个元素是否相等 */
if(arr[i] == arr[j]){
/* 如果相等则证明出现了重复的元素,则删除j对应的元素 */
arr.splice(j,1);
/* 当删除了当前j所在的元素以后,后边的元素会自动补位,
此时将不会再比较这个元素,
需要再比较依次j所在位置的元素
*/
// 使j自减
j--;
}
}
}
// console.log(arr);//12345
</script>
</head>
<body>
</body>
</html>
09.数组的剩余方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组的剩余方法</title>
<script type="text/javascript">
var arr = ["孙悟空","猪八戒","沙和尚"];
var arr2 = ["白骨精","蜘蛛精","玉兔精"];
var arr3 = ["白骨精","蜘蛛精","玉兔精"];
/*
concat()可以连接两个或多个数组,并将新的数组返回
- 该方法不会对原数组产生影响
*/
var result = arr.concat(arr2,arr3,"牛魔王","红孩儿");
// console.log(result);
/*
join()
- 该方法可以将数组转换成一个字符串
- 该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回
- 在join()中可以指定一个字符串作为参数,该字符串将会成为数组中元素的连接符
如果不指定连接符,则默认使用 , 作为连接符
*/
result = arr.join("--");
// console.log(result);//孙悟空--猪八戒--沙和尚
/*
reverse()
- 该方法用来反转数组(前边的去后边,后边的去前边)
- 该方法会直接修改原数组
*/
arr.reverse();
// console.log(arr);//{"0":"沙和尚","1":"猪八戒","2":"孙悟空","length":3}
/*
sort()
- 可以用来对数组中的元素进行排序
- 也会影响原数组,默认会按照Unicode编码进行排序,
即使对于纯数字的数组,使用sort()排序时,也会按照Unicode编码来排序,
所以对数字进行排序时,可能会得到错误的结果
可以自己来指定排序的规则
可以在sort()添加一个回调函数,来指定排序规则,
回调函数中需要定义两个形参,
浏览器会分别使用数组中的元素作为实参去调用回调函数
使用哪个元素调用不确定,但是肯定的是在数组中a一定在b前边
- 浏览器会根据回调函数的返回值来决定元素的顺序,
如果返回一个大于0的值,则元素会交换位置,
如果返回一个小于0的值,则元素位置不变,
如果返回一个0 , 也不交换位置。
- 如果需要升序排列,则返回 a-b,
如果需要降序排列,则返回 b-a
*/
arr = ["d","b","e","c","a"];
arr.sort();
// console.log(arr);//{"0":"a","1":"b","2":"c","3":"d","4":"e","length":5}
arr = [1,3,2,5,4];
arr.sort(function(a,b){
/* if(a>b){
return -1;
}else if(a<b){
return 1;
}else{
return 0;
}//5,4,3,2,1 */
/* 升序排列 */
// return a-b;//1,2,3,4,5
/* 降序排列 */
// return b-a;//5,4,3,2,1
});
// console.log(arr.join());
</script>
</head>
<body>
</body>
</html>
10.函数的方法-call和apply
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>call和apply</title>
<script type="text/javascript">
function fun(a,b){
// console.log("hello world");
// console.log(this);
console.log("a = "+a);
console.log("b = "+b);
}
/*
call()和apply()
- 这两个方法都是函数对象的方法,需要通过函数对象来调用
- 当对函数调用call()和apply()都会调用函数执行
- 当调用call()和apply()可以将一个对象指定为第一个参数
此时这个对象将会成为函数执行时的this
- call()方法可以将实参在对象之后依次传递
- apply()方法需要将实参封装到一个数组中统一传递
- this的情况:
1.以函数的形式调用时,this永远都是window
2.以方法的形式调用时,this是调用方法的对象
3.以构造函数的形式调用时,this是新创建的那个对象
4.使用call和apply调用时,this是指定的那个对象
*/
// fun.call();//hello world
// fun.apply();//hello world
// fun();//hello world
var obj = {
name:"obj",
sayName:function(){
console.log(this.name);
}
};
var obj2 = {name:"obj2"};
// fun.call(obj);
// fun.call(obj,2,3);//a = 2,b = 3
// fun.apply(obj,[2,3]);//a = 2,b = 3
// obj.sayName.apply(obj2);//obj2
// obj.sayName(obj);//obj
</script>
</head>
<body>
</body>
</html>
11.arguments
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>arguments</title>
<script type="text/javascript">
/**
* 在调用函数时,浏览器每次都会传递两个隐含的参数,
* 1.函数的上下文对象 this
* 2.封装实参的对象 arguments
* - arguments 是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度
* - 在调用函数时,我们所传递的实参都会在arguments中保存
* - arguments.length 可以用来获取实参的长度
* - 即使不定义形参,也可以通过arguments来使用实参,
* 只不过比较麻烦
* arguments[0] 表示第一个实参
*
* - 它里边有一个属性叫做callee,
* 这个属性对应一个函数对象,就是当前正在执行的函数的对象
*/
function fun(){
// console.log(arguments); //(1,2,3)
// console.log(arguments.length);//3
// console.log(arguments[0]);//1
// console.log(arguments.callee);// 函数体
}
fun(1,2,3);
</script>
</head>
<body>
</body>
</html>
12.Date
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Date对象</title>
<script type="text/javascript">
/* Date对象
- 在JS中使用Date对象来表示一个时间
*/
// 创建一个Date对象
// 如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间
var d = new Date();
// console.log(d.toString());//Mon Jan 03 2022 19:29:44 GMT+0800 (中国标准时间)
// console.log(typeof d);//object
// 创建一个指定的时间对象
/* 需要在构造函数中传递一个表示时间的字符串作为参数*/
/* 日期的格式:月份/日/年 时:分:秒*/
var d2 = new Date("12/03/2021 11:10:30");
// console.log(d2.toString());//Fri Dec 03 2021 11:10:30 GMT+0800 (中国标准时间)
/* getDate()
- 获取当前日期对象是几日
*/
var date = d2.getDate();
// console.log(date);//3
/* getDay()
- 获取当前日期对象是周几
- 会返回一个0-6的值
*/
var day = d2.getDay();
// console.log(day);//5
/* getMonth()
- 获取当前时间对象的月份
- 会返回一个0-11的值
0 表示 1月
11 表示 12月
*/
var month = d2.getMonth();
// console.log(month);//11
/* getFullYear()
- 获取当前日期对象的年份
*/
var year = d2.getFullYear();
// console.log(year);//2021
/* getTime()
- 获取当前日期对象的时间戳
- 时间戳,指的是从格林威治标准时间的1970年1月1日,0时0分0秒
到当前日期所花费的毫秒数(1秒 = 1000毫秒)
- 计算机底层在保存时间时使用的都是时间戳
*/
var time = d.getTime();
// console.log(time.toString());//1641210668581
// console.log(time/1000/60/60/24/365);
var d3 = new Date("1/1/1970 0:0:0");
time = d3.getTime();
var n = 8*60*60*1000;//8小时 中国在东八区
// console.log(time+n);//0
/* 利用时间戳来测试代码的执行的性能*/
var start = Date.now();
for(var i = 0;i<100;i++){
// console.log(i);
}
var end = Date.now();
// console.log(end - start);
</script>
</head>
<body>
</body>
</html>
13.Math
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math</title>
<script type="text/javascript">
/* Math
- Math和其他的对象不同,它不是一个构造函数,
它属于一个工具类,不用创建对象,它里面封装了数学运算相关的属性和方法
*/
// console.log(Math.PI);//圆周率
// document.write(Math.PI);
/* abs() 可以用来计算一个数的绝对值*/
// console.log(Math.abs(-12));//12
/* Math.ceil()
- 可以对一个数进行向上取整2,小数位只要有值就自动进1
- 上舍入
*/
// console.log(Math.ceil(1.1));//2
/* Math.floor()
- 可以对一个数进行向下取整,小数部分会被舍掉
- 下舍入
*/
// console.log(Math.floor(1.9));//1
/* Math.round()
- 可以对一个数进行四舍五入取整
*/
// console.log(Math.round(1.4));//1
/* Math.random()
- 可以生成一个0-1之间的随机数
*/
// console.log(Math.random());//0.880301
/* 生成一个0-10的随机数
- 生成一个0-x之间的随机数
Math.round(Math.random()*x)
- 生成一个x-y之间的随机数
Math.round(Math.random()*(y-x)+x)
*/
for(var i = 0;i<100;i++){
// 生成一个0-10的随机数
// console.log(Math.round(Math.random()*10));
// 生成1-6之间的随机数
// console.log(Math.round(Math.random()*5+1));
}
/* max() 可以获取多个数中的最大值
min() 可以获取多个数中的最小值
*/
// console.log(Math.max(1,222,333,4));//333
// console.log(Math.min(111,2,3,333,4));//2
/* Math.pow(x,y)
- 返回x的y次幂
*/
// console.log(Math.pow(2,3));//8
/* Math.sqrt()
- 用于对一个数进行开方运算
*/
// console.log(Math.sqrt(9));//3
</script>
</head>
<body>
</body>
</html>
14.包装类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>包装类</title>
<script type="text/javascript">
/* 基本数据类型
String Number Boolean Null Undefined
引用数据类型Object
JS中提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为对象
String()
- 可以将基本数据类型字符串转换为String对象
Number()
- 可以将基本数据类型的数值转换为Number对象
Boolean()
- 可以将基本数据类型的布尔值转换为Boolean对象
但是注意,在实际应用中不会使用基本数据类型的对象,
如果使用基本数据类型的对象,在做一些比较时可能会带来一些不可预期的结果
*/
// 创建一个NUmber类型的对象
// num = 3;
var num = new Number(3);
var str = new String("hello");
var bool = new Boolean(true);
// console.log(num.toString());//3
// 向num中添加一个属性
num.hello = "hello world";
// console.log(num.hello);//hello world
/* 方法和属性只能添加给对象,不能添加给基本数据类型
当我们对一些基本数据类型的值去调用属性和方法时,
浏览器就会临时使用包装类将其转换为对象,然后再调用对象的属性和方法
调用完以后,再将其转换为基本数据类型
*/
var s = 123;
s = s.toString();
// console.log(s);//123
// console.log(typeof s);//String
</script>
</head>
<body>
</body>
</html>
15.字符串的相关方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串的相关方法</title>
<script type="text/javascript">
// 创建一个字符串
var str = "hello";
/* 在底层 字符串是以字符数组的形式保存的
["h","e","l","l","o"]
*/
// console.log(str[1]);//e
/* length属性
- 可以用来获取字符串的长度
*/
// console.log(str.length);//5
/* charAt()
- 可以返回字符串中指定位置的字符
- 根据索引获取指定的字符
*/
var result = str.charAt(1);
// console.log(result);//e
/* charCodeAt()
- 获取指定位置字符的字符编码(Unicode编码)
*/
result = str.charCodeAt(0);
// console.log(result);//104
/* String.fromCharCode()
- 可以根据字符编码去获取字符
*/
result = String.fromCharCode(104);
// console.log(result);//h
/* concat()
- 可以用来连接两个或多个字符串
- 作和 + 一样
*/
result = str.concat("tom","再见");
// console.log(result);
/* indexof()
- 该方法可以检索一个字符串中是否含有指定内容
- 如果字符串中含有该内容,则会返回其第一次出现的索引
如果没有找到指定的内容,则返回-1
- 可以指定一个第二个参数,指定开始查找的位置
str.indexOf("h",1); //从索引为1的位置开始查找“h”
lastIndexOf()
-该方法的用法和indexOf()一样,
不同的是indexOf()是从前往后找,
而lastIndexOf()是从后往前找
*/
result = str.indexOf("l");
// console.log(result);//2
result = str.lastIndexOf("l");
// console.log(result);//3
/* slice()
- 可以从字符串中截取指定的内容
- 不会影响源字符串,而是将截取到的内容返回
- 参数:
第一个,开始位置的索引(包括开始位置)
第二个,结束位置的索引(不包括结束位置)
- 如果省略第二个参数,则会截取到后边所有的
- 也可以传递一个负数作为参数,负数的话将会从后边计算
*/
result = str.slice(1,4);//ell
result = str.slice(1,-2);//el
// console.log(result);
/* substring()
- 可以用来截取一个字符串,与slice()类似
- 参数:
- 第一个,开始截取位置的索引(包括开始位置)
- 第二个,结束位置的索引(不包括结束位置)
- 不同的是,这个方法不能接受负值作为参数,
如果传递了一个负值,则默认使用0
- 而且它还自动调整参数的位置,如果第二个参数小于第一个参数,则自动交换
*/
result = str.substring(1,3);//el
// console.log(result);
/* substr()
- 用来截取字符串
- 参数:
1.截取开始位置的索引
2.截取的长度
*/
result = str.substr(3,2);
// console.log(result);//lo
/* split()
- 可以将一个字符串拆分为一个数组
- 参数:
- 需要一个字符串作为参数,将会根据该字符串去拆分数组
- 如果传递一个空串作为参数,将会根据该字符串去拆分数组
*/
str = "a,b,c,d,e,f,g";
result = str.split(",");
// console.log(result);
/* toUpperCase()
- 将一个字符串转换为大写并返回
*/
var str = "abcdEfg";
result = str.toUpperCase();//ABCDEFG
/* toLowerCase()
- 将一个字符串转换为小写并返回
*/
str = "ABCDEfG"
result = str.toLowerCase();//abcdefg
// console.log(result);
</script>
</head>
<body>
</body>
</html>
伍
01.正则表达式简介
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式简介</title>
<script type="text/javascript">
/* 正则表达式
- 正则表达式用于定义一些字符串的规则,
计算机可以根据正则表达式,来检查一个字符串是否符合规则
或者将字符串中符合规则的内容提取出来
*/
/* 创建正则表达式的对象
- 语法:
var 变量 = new RegExp("正则表达式","匹配模式");
- 使用typeof检查正则表达式对象,会返回object
- 在构造函数中可以传递一个匹配模式作为第二个参数,
可以是
i 忽略大小写
g 全局匹配模式
*/
var reg = new RegExp("a","i");//该正则表达式可以用来检查一个字符串中是否含有a
var str = "a";
/* 正则表达式的方法
test()
- 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则,
如果符合则返回true,否则返回false
*/
var result = reg.test(str);
// console.log(result);
// console.log(reg.test("bcbc"));//false
// console.log(reg.test("Abcbc"));//true
</script>
</head>
<body>
</body>
</html>
02.正则语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则语法</title>
<script type="text/javascript">
/* 使用字面量来创建正则表达式
语法:
var 变量 = /正则表达式/匹配模式
使用字面量的方式创建更加简单,
但是使用构造函数创建更加灵活
*/
var reg = new RegExp("a","i");
reg = /a/i;
// console.log(reg.test("aaaddd"));//true
/* 创建一个正则表达式,检查一个字符串中是否有a或者b
使用 | 表示 或者 的意思
*/
reg = /a|b/;
// console.log(reg.test("ajjk"));//true
/*
创建一个正则表达式检查一个字符串中是否有字母
*/
/*
[]里的内容也是或的关系
[ab] == a|b
[a-z] 任意小写字母
[A-Z] 任意大写字母
[A-z] 任意字母
[0-9] 任意数字
*/
reg = /[A-z]/;
// console.log(reg.test("f"));
// 检查一个字符串中是否含有 abc 或 adc 或 aec
// reg = /abc|adc|aec/;
reg = /a[bde]c/;
/*
[^ ] 除了
*/
reg = /[^ab]/;
// console.log(reg.test("abc"));//true
// console.log(reg.test("ab"));//false
</script>
</head>
<body>
</body>
</html>
03.字符串和正则相关的方法
<!DOCTYPE ht
ml>
<html>
<head>
<meta charset="utf-8">
<title>字符串和正则相关的方法</title>
<script type="text/javascript">
var str = "1a2b3c4d5e6f";
/* split()
- 可以将一个字符串拆分为一个数组
- 方法中可以传递一个正则表达式作为参数,这样方法将会根据正则表达式去拆分字符串
- 这个方法即使不指定全局匹配,也会全都拆分
*/
/*
根据任意字母来将字符串拆分
*/
var result = str.split(/[A-z]/);
/* search()
- 可以搜索字符串中是否含有指定内容
- 如果搜索到指定内容,则会返回第一次出现的索引,如果没有搜索到返回-1
- search()只会查找第一个,即使设置全局匹配
*/
str = "hello abc hello aec afc";
// result = str.search("abc");//6
result = str.search(/a[bef]c/);//6
/*
match()
- 可以根据正则表达式,从一个字符串中将符合条件的内容提取出来
- 默认情况下match()只会找到第一个符合要求的内容,找到以后就停止检索
可以设置正则表达式为全局匹配模式,这样就会匹配到所有的内容
可以为一个正则表达式设置多个匹配模式,且顺序无所谓
- match() 会将匹配到的内容封装到一个数组中返回,即使只查询到一个结果
*/
str = "1a2b3c4d5e6f7";
result = str.match(/[A-z]/g);
/* replace()
- 可以将字符串中指定内容替换为新的内容
- 参数:
1.被替换的内容,可以接受一个正则表达式作为参数
2.新的内容
- 默认只会替换第一个
*/
result = str.replace(/[a-z]/gi,"@-@");
result = str.replace(/[a-z]/gi,"");
// console.log(result);
</script>
</head>
<body>
</body>
</html>
04.正则表达式语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式语法</title>
<script type="text/javascript">
// 创建一个正则表达式检查一个字符串中是否含有aaa
/*
量词
- 通过量词可以设置一个内容出现的次数
- 量词只对它前边的一个内容起作用
- {n} 正好出现n次
- {m,n} 出现m-n次
- {m,} 出现m次以上
- + 至少一个,相当于{1,}
- * 0个或多个,相当于{0,}
- ? 0个或1个,相当于{0,1}
*/
var reg = /a{3}/;
// console.log(reg.test("baaaac"));//true
// ababab
reg = /(ab){3}/;
// console.log(reg.test("dababababd"));//true
reg = /ab{3}d/;
// console.log(reg.test("aaabbbddd"));//true
reg = /ab{1,3}d/;
// console.log(reg.test("abd"));//true
reg =/ab{3,}d/;
// console.log(reg.test("abbbbbd"));//true
reg = /ab+d/;
// console.log(reg.test("abbbd"));//true
reg = /ab*d/;
// console.log(reg.test("ad"));//true
reg = /ab?d/;
// console.log(reg.test("abd"));//true
/*
检查一个字符串中是否以a开头
^ 表示开头
$ 表示结尾
*/
reg = /^a/;
// console.log(reg.test("abd"));//true
reg = /a$/;
// console.log(reg.test("abd2a"));//true
/*
创建一个正则表达式,用来检查一个字符串是否是一个合法手机号
手机号的规则:
1 3 567890123(11位)
1. 以1开头
2. 第二位3-9任意数字
3. 三位以后任意数字9个
*/
var phoneStr = "13567890123";
var phoneReg = /^1[3-9][0-9]{9}$/;
// console.log(phoneReg.test(phoneStr));//true
</script>
</head>
<body>
</body>
</html>
05.正则表达式语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式语法</title>
<script type="text/javascript">
/*
检查一个字符串中是否含有 .
- . 表示任意字符
- 在正则表达式中使用\作为转义字符
\. 来表示 .
\\ 表示 \
注意,使用构造函数时,由于它的参数是一个字符串,而\是字符串中转义字符,
如果需要使用 \ 则需要使用\\来代替
*/
var reg = /\./;
reg = /\\/;
// console.log(reg.test("aaa.sd"));//true
// console.log(reg.test("aaa.s\\d"));//true
reg = new RegExp("\.");// /./
reg = new RegExp("\\.");// /\./
// console.log(reg.toString());
/*
\w
- 任意字母、数字、_ 相当于[A-z0-9_]
\W
- 除了字母、数字、_ 相当于[^A-z0-9_]
\d
- 任意的数字 [0-9]
\D
- 除了数字 [^0-9]
\s
- 空格
\S
- 除了空格
\b
- 单词边界
\B
- 除了单词边界
*/
reg = /\w/;
// console.log(reg.test("_"));//true
/*
创建一个正则表达式检查一个字符串中是否含有单词child
*/
reg = /\bchild\b/;
// console.log(reg.test("hello child"));//true
// 接受一个用户的输入
// var str = prompt("请输入你的用户名:");
var str = " ad min ";
// 去掉字符串中的前后的空格
// 去掉空格就是使用""来替换空格
// console.log(str);
// str = str.replace(/\s/g,"");
// 去除开头的空格
// str = str.replace(/^\s*/g,"");
// 去除结尾的空格
// str = str.replace(/\s*$/g,"");
// 去除开头和结尾的空格
str = str.replace(/^\s*|\s*$/g,"");
// console.log(str);
</script>
</head>
<body>
</body>
</html>
06.邮件的正则
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>邮件的正则</title>
<script type="text/javascript">
/* 正则表达式
hello .nihao @ abc .com.cn
任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母(2-5位) .任意字母(2-5位)
\w{3,} (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}
*/
var emailReg = /\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}/;
var email = "abc.hello@163.com";
// console.log(emailReg.test(email));//true
</script>
</head>
<body>
</body>
</html>
07.DOM简介
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM简介</title>
<script type="text/javascript">
/*
DOM
- Document Object Model
- 文档对象模型
- 节点:Node 构成HTML文档最基本的单元
- 常用节点:
文档节点:整个HTML文档
元素节点:HTML文档中的HTML标签
属性节点:元素的属性
文本节点:HTML标签中的文本内容
- 节点的属性:
nodeName nodeType nodeValue
文档节点 #document 9 null
元素节点 标签名 1 null
属性节点 属性名 2 属性值
文本节点 #text 3 *文本内容
*/
</script>
</head>
<body>
<button type="button" id="btn">hello</button>
<script type="text/javascript">
/* 浏览器已经为我们提供 文档节点 对象,这个对象是window属性
可以在页面中直接使用,文档节点代表的是整个网页
*/
// console.log(document.toString());//[object HTMLDocument]
// 获取到button对象
var btn = document.getElementById("btn");
// console.log(btn.toString());//[object HTMLButtonElement]
// 修改按钮的文字
btn.innerHTML = "I'm Button.";
</script>
</body>
</html>
08.事件简介
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件简介</title>
<script type="text/javascript">
/* 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间
- JavaScript 与 HTML 之间的交互是通过事件实现的
*/
</script>
</head>
<body>
<!--
我们可以在事件对应的属性中设置一些js代码,
这样当事件被触发时,这些代码将会执行
这种写法称为结构和行为耦合,不方便维护
-->
<!-- <button type="button" id="btn" οnclick="alert('点我干嘛???');">Button</button> -->
<!-- <button type="button" id="btn" οndblclick="alert('点我干嘛???');">Button</button> -->
<!-- <button type="button" id="btn" οnmοusemοve="alert('点我干嘛???');">Button</button> -->
<button type="button" id="btn">Button</button>
<script type="text/javascript">
/*
事件,就是用户和浏览器之间的交互行为
比如,点击按钮、鼠标移动、关闭窗口...
*/
// 获取按钮对象
var btn = document.getElementById("btn");
/*
可以为按钮的对应事件绑定处理函数的形式来响应事件
*/
// 绑定一个单击事件
// 像这种为单击事件绑定的函数,我们称为单击响应函数
btn.onclick = function(){
alert("hello");
};
</script>
</body>
</html>
09.文档的加载
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档的加载</title>
<script type="text/javascript">
/*
浏览器在加载一个页面时,是按照自上向下的顺序加载的,
读取到一行就运行一行,如果将script标签写到页面的上边,
在代码执行时,页面还没有加载,页面没有加载,DOM对象也没有加载
会导致无法获取到DOM对象
*/
/*
onload事件会在整个页面加载完成之后才触发
- 为window绑定一个onload事件
该事件对应的响应函数将会在页面加载完成之后执行,
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
*/
window.onload = function(){
// alert("hello");
// 获取id为btn的按钮
var btn = document.getElementById("btn");
// 为按钮绑定一个单击响应函数
btn.onclick = function(){
alert("hello");
};
};
</script>
</head>
<body>
<button type="button" id="btn">Button</button>
<script type="text/javascript">
/*
将JS代码编写到页面的下部就是为了可以在页面加载完毕以后再执行js代码
*/
// // 获取id为btn的按钮
// var btn = document.getElementById("btn");
// // 为按钮绑定一个单击响应函数
// btn.onclick = function(){
// alert("hello");
// };
</script>
</body>
</html>
10.dom查询
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function(){
//为id为btn01的按钮绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//查找#bj节点
var bj = document.getElementById("bj");
//打印bj
//innerHTML 通过这个属性可以获取到元素内部的html代码
alert(bj.innerHTML);
};
//为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//查找所有li节点
//getElementsByTagName()可以根据标签名来获取一组元素节点对象
//这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
//即使查询到的元素只有一个,也会封装到数组中返回
var lis = document.getElementsByTagName("li");
//打印lis
//alert(lis.length);
//变量lis
for(var i=0 ; i<lis.length ; i++){
alert(lis[i].innerHTML);
}
};
//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
//查找name=gender的所有节点
var inputs = document.getElementsByName("gender");
//alert(inputs.length);
for(var i=0 ; i<inputs.length ; i++){
/*
* innerHTML用于获取元素内部的HTML代码的
* 对于自结束标签,这个属性没有意义
*/
//alert(inputs[i].innerHTML);
/*
* 如果需要读取元素节点属性,
* 直接使用 元素.属性名
* 例子:元素.id 元素.name 元素.value
* 注意:class属性不能采用这种方式,
* 读取class属性时需要使用 元素.className
*/
alert(inputs[i].className);
}
};
//查找#city下所有li节点
//返回#city的所有子节点
//返回#phone的第一个子节点
//返回#bj的父节点
//返回#android的前一个兄弟节点
//读取#username的value属性值
//设置#username的value属性值
//返回#bj的文本值
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input class="hello" type="radio" name="gender" value="male"/>
Male
<input class="hello" type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
11.图片切换的练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
width: 1000px;
}
#outer{
width: 1000px;
margin: 50px auto;
padding: 10px;
background-color: #f5f4f4;
/* 设置文本居中 */
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
点击按钮切换图片
*/
// 获取两个按钮
var prev = document.getElementById("prev");
var next = document.getElementById("next");
/*
要切换图片就是要修改img标签的src属性
*/
// 获取img标签
var img = document.getElementsByTagName("img")[0];
// 创建一个数组,用来保存图片的路径
var imgArr = ["img/a.jpg","img/b.jpg","img/c.jpg","img/d.jpg","img/e.jpg","img/f.jpg","img/g.jpg","img/h.jpg"];
// 创建一个变量,来保存当前正在显示的图片的索引
var index = 0;
// 获取id为info的p元素
var info = document.getElementById("info");
// 设置提示文字
info.innerHTML = "共"+imgArr.length+"张,当前第"+(index+1)+"张";
// 分别为两个按钮绑定单击响应函数
prev.onclick = function(){
/*
切换到上一张,索引自减
*/
index--;
// 判断index是否小于0
if(index<0){
index = imgArr.length-1;
}
// alert("prev");
img.src = imgArr[index];
// 当点击按钮后,重新设置信息
info.innerHTML = "共"+imgArr.length+"张,当前第"+(index+1)+"张";
};
next.onclick = function(){
// alert("next");
/*
切换到下一张,index自增
*/
index++;
if(index>imgArr.length-1){
index = 0;
}
// 切换图片就是修改img的src属性
// 要修改一个元素的属性 元素.属性 = 属性值
img.src = imgArr[index];
// 当点击按钮后,重新设置信息
info.innerHTML = "共"+imgArr.length+"张,当前第"+(index+1)+"张";
};
};
</script>
</head>
<body>
<div id="outer">
<p id="info"></p>
<img src="img/a.jpg" alt="不速来客" >
<button type="button" id="prev">上一张</button>
<button type="button" id="next">下一张</button>
</div>
</body>
</html>
12.DOM查询
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM查询</title>
<script type="text/javascript">
/* 获取元素节点的子节点
- 通过具体的元素节点调用
1.getElementsByTagName()
- 方法,返回当前节点的指定标签名后代节点
2.childNodes
- 属性,表示当前节点的所有子节点
3.firstChild
- 属性,表示当前节点的第一个子节点
4.lastChild
- 属性,表示当前节点的最后一个子节点
获取父节点和兄弟节点
- 通过具体的节点调节
1.parentNode
- 属性,表示当前节点的父节点
2.previousSibling
- 属性,表示当前节点的前一个兄弟节点
3.nextSibling
- 属性,表示当前节点的后一个兄弟节点
*/
</script>
</head>
<body>
</body>
</html>
13.dom查询
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function(){
/*
定义一个函数,专门用来为指定元素绑定单击响应函数
参数:
idStr 要绑定单击响应函数的对象的id属性值
fun 事件的回调函数,当单击元素时,该函数将会被触发
*/
function myClick(idStr,fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
//为id为btn01的按钮绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//查找#bj节点
var bj = document.getElementById("bj");
//打印bj
//innerHTML 通过这个属性可以获取到元素内部的html代码
alert(bj.innerHTML);
};
//为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//查找所有li节点
//getElementsByTagName()可以根据标签名来获取一组元素节点对象
//这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
//即使查询到的元素只有一个,也会封装到数组中返回
var lis = document.getElementsByTagName("li");
//打印lis
//alert(lis.length);
//变量lis
for(var i=0 ; i<lis.length ; i++){
alert(lis[i].innerHTML);
}
};
//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
//查找name=gender的所有节点
var inputs = document.getElementsByName("gender");
//alert(inputs.length);
for(var i=0 ; i<inputs.length ; i++){
/*
* innerHTML用于获取元素内部的HTML代码的
* 对于自结束标签,这个属性没有意义
*/
//alert(inputs[i].innerHTML);
/*
* 如果需要读取元素节点属性,
* 直接使用 元素.属性名
* 例子:元素.id 元素.name 元素.value
* 注意:class属性不能采用这种方式,
* 读取class属性时需要使用 元素.className
*/
alert(inputs[i].className);
}
};
//为id为btn04的按钮绑定一个单击响应函数
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
// 获取id为city的元素
var city = document.getElementById("city");
//查找#city下所有li节点
var lis = city.getElementsByTagName("li");
// alert(lis.length);
for(var i = 0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
};
//为id为btn05的按钮绑定一个单击响应函数
var btn05 = document.getElementById("btn05");
btn05.onclick = function(){
// 获取id为city的节点
var city = document.getElementById("city");
//返回#city的所有子节点
/*
childNodes属性会获取包括文本节点在内的所有节点
根据DOM标准 标签间空白也会当成文本节点
注意,在IE8及以下的浏览器中,不会将空白文本当成子节点,
所以该属性在IE8中会返回4个子元素而其他浏览器是9个
*/
var cns = city.childNodes;
// for(var i = 0;i<cns.length;i++){
// alert(cns[i]);
// }
/*
children属性可以获取当前元素的所有子元素
*/
var cns2 = city.children;
alert(cns2.length);
};
//为id为btn06的按钮绑定一个单击响应函数
var btn06 = document.getElementById("btn06");
btn06.onclick = function(){
// 获取id为phone的元素
var phone = document.getElementById("phone");
//返回#phone的第一个子节点
// phone.childNodes[0];
// firstChild可以获取到当前元素的第一个子节点(包括空白文本节点)
var fir = phone.firstChild;
// alert(fir.innerHTML);
// firstElementChild获取当前元素的第一个子元素
/*
firstElementChild不支持IE8及以下的浏览器,
如果需要兼容它们尽量不要使用
*/
fir = phone.firstElementChild;
alert(fir.innerHTML);
};
//为id为btn07的按钮绑定一个单击响应函数
myClick("btn07",function(){
// 获取id为bj的节点
var bj = document.getElementById("bj");
//返回#bj的父节点
var pn = bj.parentNode;
// alert(pn.innerHTML);
/*
innerText
- 该属性可以获取到元素内部的文本内容
- 它和innerHTML类似,不同的是它会自动将HTML标签去除
*/
alert(pn.innerText);
});
//为id为btn08的按钮绑定一个单击响应函数
myClick("btn08",function(){
// 获取id为Android的元素
var and = document.getElementById("android");
//返回#android的前一个兄弟节点(也可能获取到空白的文本)
var ps = and.previousSibling;
// previousElementSibling 获取前一个兄弟元素,IE8以下不支持
// var pe = and.previousElementSibling;
// alert(pe.innerHTML);
alert(ps.innerHTML);
});
//读取#username的value属性值
myClick("btn09",function(){
// 获取id为username的元素
var um = document.getElementById("username");
// 读取um的value属性值
// 文本框的value属性值,就是文本框中填写的内容
alert(um.value);
});
//设置#username的value属性值
myClick("btn10",function(){
// 获取id为username的元素
var um = document.getElementById("username");
um.value = "你好!";
});
//返回#bj的文本值
myClick("btn11",function(){
// 获取id为bj的元素
var bj = document.getElementById("bj");
// alert(bj.innerHTML);
// 获取bj中的文本节点
// var fc = bj.firstChild;
// alert(fc.nodeValue);
alert(bj.firstChild.nodeValue);
});
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input class="male" type="radio" name="gender" value="male"/>
Male
<input class="female" type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
14.全选练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选练习</title>
<script type="text/javascript">
window.onload = function(){
// 获取四个多选框items
var items = document.getElementsByName("items");
// 获取全选/全不选的多选框
var checkedAllBox = document.getElementById("checkedAllBox");
// 1.#checkdAllBtn
/*
全选按钮
- 点击按钮以后,四个多选框全都被选中
*/
// 为id为checkedAllBtn的按钮绑定一个单击响应函数
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){
// alert("hello");
// 遍历items
for(var i = 0;i<items.length;i++){
// 通过多选框的checked属性可以来获取或设置多选框的选中状态
// alert(items[i].checked);
// 设置四个多选框变成选中状态
items[i].checked = true;
}
// 将全选/全不选设置为选中
checkedAllBox.checked = true;
};
/*
全不选按钮
- 点击按钮以后,四个多选框都变成没选中的状态
*/
// 2.#checkedNoBtn
// 为id为checkedNoBtn的按钮绑定一个单击响应函数
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
for(var i = 0;i<items.length;i++){
// 将四个多选框设置为没选中的状态
items[i].checked = false;
}
// 将全选/全不选设置为不选中
checkedAllBox.checked = false;
};
/*
反选按钮
- 点击按钮以后,选中的变成没选中,没选中的变成选中
*/
// 3.#checkedRevBtn
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
checkedAllBox.checked = true;
for(var i = 0;i<items.length;i++){
// 判断多选框状态
// if(items[i].checked){
// // 证明多选框已选中,则设置为没选中状态
// items[i].checked = false;
// }else{
// // 证明多选框没选中,则设置为选中状态
// items[i].checked = true;
// }
items[i].checked = !items[i].checked;
if(!items[i].checked){
checkedAllBox.checked = false;
}
}
};
/*
提交按钮
- 点击按钮以后,将所有选中的多选框的value属性值弹出
*/
// 4.#sendBtn
// 为sendBtn绑定单击响应函数
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
for(var i = 0;i<items.length;i++){
// 判断多选框是否选中
if(items[i].checked){
alert(items[i].value);
}
}
};
/*
全选/全不选多选框
- 当它选中时,其余的也选中,当它取消时其余的也取消
在事件的响应函数中,响应函数是给谁绑定的 this就是谁
*/
// 5.#checkedAllBox
// 为checkedAllBox绑定单击响应函数
checkedAllBox.onclick = function(){
for(var i = 0;i<items.length;i++){
// items[i].checked = checkedAllBox.checked;
items[i].checked = this.checked;
}
};
// 6.items
/*
如果四个多选框全都选中,则checkedAllBox也应该选中
如果四个多选框没都选中,则checkAllBox也不应该选中
*/
// 为四个多选框分别绑定点击响应函数
for(var i = 0;i<items.length;i++){
items[i].onclick = function(){
// 将checkedAllBox设置为选中状态
checkedAllBox.checked = true;
for(var j = 0;j<items.length;j++){
// 判断四个多选框是否全选
// 只要有一个没选中就不是全选
if(!items[j].checked){
// 一旦进入判断,则证明不是全选状态
// 将checkedAllBox设置为没选中状态
checkedAllBox.checked = false;
// 一旦进入判断,则已经得出结果,不用再继续执行循环
break;
}
}
};
}
};
</script>
</head>
<body>
<form action="" method="post">
你爱好的运动是?<input type="checkbox" name="" id="checkedAllBox" value="" />全选/全不选
<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>
</body>
</html>
15.DOM查询的其他方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM查询的其他方法</title>
<script type="text/javascript">
window.onload = function(){
// 获取body标签
var body = document.getElementsByTagName("body")[0];
// console.log(body.toString());//[object HTMLBodyElement]
/*
在document中有一个属性body,它保存的是body的引用
*/
body = document.body;
// console.log(body.toString());//[object HTMLBodyElement]
/*
document.documentElement 保存的是html根标签
*/
var html = document.documentElement;
// console.log(html.toString());//[object HTMLHtmlElement]
/*
document.all 代表页面中所有的元素
*/
var all = document.all;
// console.log(all.length);//12
for(var i = 0;i<all.length;i++){
// console.log(all[i].toString());
}
all = document.getElementsByTagName("*");
// console.log(all.toString());//[object HTMLCollection]
// console.log(all.length);//12
/*
根据元素的class属性值查询一组元素节点对象
getElementsByClassName()可以根据class属性获取一组元素节点对象,
但是该方法不支持IE8及以下的浏览器
*/
var box1 = document.getElementsByClassName("box1");
// console.log(box1.length);//2
// 获取页面中的所有的div
var divs = document.getElementsByTagName("div");
// console.log(divs.length);//3
// 获取class为box1中的所有的div
// .box1 div
/*
document.querySelector()
- 需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象
- 可以使用querySelector()代替getElementsByClassName()
- 使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个
*/
var div = document.querySelector(".box1 div");
// console.log(div.innerHTML);//hello
/*
document.querySelectorAll()
- 该方法和querySelector()用法类似,不同的是它会将符合条件的元素封装到一个数组中返回
- 即使符合条件的元素只有一个,它也会返回数组
*/
box1 = document.querySelectorAll(".box1");
// console.log(box1.length);//3
};
</script>
</head>
<body>
<div class="box1">
<div>hello</div>
</div>
<div class="box1">
<div>hello</div>
</div>
<div class="box1">
<div>hello</div>
</div>
<div></div>
</body>
</html>
16.DOM增删改
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function() {
//创建一个"广州"节点,添加到#city下
myClick("btn01",function(){
//创建广州节点 <li>广州</li>
//创建li元素节点
/*
* document.createElement()
* 可以用于创建一个元素节点对象,
* 它需要一个标签名作为参数,将会根据该标签名创建元素节点对象,
* 并将创建好的对象作为返回值返回
*/
var li = document.createElement("li");
//创建广州文本节点
/*
* document.createTextNode()
* 可以用来创建一个文本节点对象
* 需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回
*/
var gzText = document.createTextNode("广州");
//将gzText设置li的子节点
/*
* appendChild()
* - 向一个父节点中添加一个新的子节点
* - 用法:父节点.appendChild(子节点);
*/
li.appendChild(gzText);
//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.appendChild(li);
});
//将"广州"节点插入到#bj前面
myClick("btn02",function(){
//创建一个广州
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/*
* insertBefore()
* - 可以在指定的子节点前插入新的子节点
* - 语法:
* 父节点.insertBefore(新节点,旧节点);
*/
city.insertBefore(li , bj);
});
//使用"广州"节点替换#bj节点
myClick("btn03",function(){
//创建一个广州
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/*
* replaceChild()
* - 可以使用指定的子节点替换已有的子节点
* - 语法:父节点.replaceChild(新节点,旧节点);
*/
city.replaceChild(li , bj);
});
//删除#bj节点
myClick("btn04",function(){
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/*
* removeChild()
* - 可以删除一个子节点
* - 语法:父节点.removeChild(子节点);
*
* 子节点.parentNode.removeChild(子节点);
*/
//city.removeChild(bj);
bj.parentNode.removeChild(bj);
});
//读取#city内的HTML代码
myClick("btn05",function(){
//获取city
var city = document.getElementById("city");
alert(city.innerHTML);
});
//设置#bj内的HTML代码
myClick("btn06" , function(){
//获取bj
var bj = document.getElementById("bj");
bj.innerHTML = "昌平";
});
myClick("btn07",function(){
//向city中添加广州
var city = document.getElementById("city");
/*
* 使用innerHTML也可以完成DOM的增删改的相关操作
* 一般我们会两种方式结合使用
*/
//city.innerHTML += "<li>广州</li>";
//创建一个li
var li = document.createElement("li");
//向li中设置文本
li.innerHTML = "广州";
//将li添加到city中
city.appendChild(li);
});
};
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
</div>
<div id="btnList">
<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
<div><button id="btn04">删除#bj节点</button></div>
<div><button id="btn05">读取#city内的HTML代码</button></div>
<div><button id="btn06">设置#bj内的HTML代码</button></div>
<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
</div>
</body>
</html>
style/css.css :
@CHARSET "UTF-8";
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 300px;
margin-bottom: 10px;
}
#btnList {
float:left;
}
#total{
width: 450px;
float:left;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li{
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float:left;
}
.inner{
width:400px;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
17.添加删除记录-删除
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">
/*
删除tr的响应函数
*/
function delA(){
// alert("hello");
// 点击超链接以后需要删除超链接所在的那行
// 这里我们点击哪个超链接 this就是谁
// 获取当前tr
var tr = this.parentNode.parentNode;
// 获取要删除的员工的名字
// var name = tr.getElementsByTagName("td")[0].innerHTML;
var name = tr.children[0].innerHTML;
// 删除之前弹出一个提示框
/*
confirm()用于弹出一个带有确认和取消按钮的提示框
需要一个字符串作为参数,该字符串将会作为提示文字显示出来
*/
var flag = confirm("确认删除"+name+"的信息吗");
// 如果用户点击确认
if(flag){
// 删除tr
tr.parentNode.removeChild(tr);
}
/*
点击超链接以后,超链接会跳转页面,这个是超链接的默认行为,
但是此时我们不希望出现默认行为,可以通过在响应函数的最后return false来取消默认行为
*/
return false;
};
window.onload = function(){
/*
点击超链接以后,删除一个员工的信息
*/
// 获取所有超链接
var allA = document.getElementsByTagName("a");
// 为每一个超链接都绑定一个单击响应函数
for(var i = 0;i<allA.length;i++){
allA[i].onclick = delA;
}
/*
添加员工的功能
- 点击按钮以后,将员工的信息添加到表格中
*/
// 为提交按钮绑定一个单击响应函数
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick = function(){
// 获取用户填写的员工信息
// 获取员工的名字
var name = document.getElementById("empName").value;
// 获取员工的Email和salary
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
/*
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
需要将获取到的信息保存到tr中
*/
// 创建一个tr
var tr = document.createElement("tr");
/* // 创建四个td
var nameTd = document.createElement("td");
var emailTd = document.createElement("td");
var salaryTd = document.createElement("td");
var aTd = document.createElement("td");
// 创建一个a元素
var a = document.createElement("a");
// 创建文本节点
var nameText = document.createTextNode(name);
var emailText = document.createTextNode(email);
var salaryText = document.createTextNode(salary);
var delText = document.createTextNode("Delete");
// 将文本添加到td中
nameTd.appendChild(nameText);
emailTd.appendChild(emailText);
salaryTd.appendChild(salaryText);
// 向a中添加文本
a.appendChild(delText);
// 将a添加到td中
aTd.appendChild(a);
// 将td添加到tr中
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd);
// 向a中添加href属性
a.href = "javascript:;";
// 为新添加的a再绑定一次单击响应函数
a.onclick = delA;
*/
// 设置tr中的内容
tr.innerHTML = "<td>"+name+"</td>"+
"<td>"+email+"</td>"+
"<td>"+salary+"</td>"+
"<td><a href='javascript:;'>Delete</a></td>"
获取刚刚添加的a元素
var a = tr.getElementsByTagName("a")[0];
// 为新添加的a再绑定一次单击响应函数
a.onclick = delA;
// 获取table
var employeeTable = document.getElementById("employeeTable");
// 获取employeeTable中的tbody
var tbody = employeeTable.getElementsByTagName("tbody")[0];
// 将tr添加到tbody中
tbody.appendChild(tr);
};
};
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" id="empName" value="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" id="email" value="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" id="salary" value="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
ex_2_style/css.css :
@CHARSET "UTF-8";
#total {
width: 450px;
margin-left: auto;
margin-right: auto;
}
ul {
list-style-type: none;
}
li {
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float: left;
}
.inner {
width: 400px;
border-style: solid;
border-width: 1px;
margin: 10px;
padding: 10px;
float: left;
}
#employeeTable {
border-spacing: 1px;
background-color: black;
margin: 80px auto 10px auto;
}
th,td {
background-color: white;
}
#formDiv {
width: 250px;
border-style: solid;
border-width: 1px;
margin: 50px auto 10px auto;
padding: 10px;
}
#formDiv input {
width: 100%;
}
.word {
width: 40px;
}
.inp {
width: 200px;
}
18.使用DOM操作内联CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用DOM操作CSS</title>
<style type="text/css">
#box1{
width: 50px;
height: 50px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
点击按钮以后,修改box1的大小
*/
// 获取box1
var box1 = document.getElementById("box1");
// 为按钮绑定单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
// 修改box1的宽度
/*
通过JS修改元素的样式
语法:元素.style.样式名 = 样式值
通过style属性设置的样式都是内联样式,
而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示
但是如果在样式中写了!important,则此时样式会有最高的优先级,
即使通过JS也不能覆盖该样式,此时将会导致JS修改样式失败
所以尽量不要为样式添加!important
*/
box1.style.width = "200px";
box1.style.height = "200px";
box1.style.backgroundColor = "green";
};
// 点击按钮2以后,读取元素的样式
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
// 读取box1的样式
/*
语法:元素.style.样式名
通过style属性设置和读取的都是内联样式,
无法读取样式表中的样式
*/
alert(box1.style.width);
};
};
</script>
</head>
<body>
<button id="btn01">点我</button>
<button id="btn02">点我2</button>
<br><br>
<div id="box1"></div>
</body>
</html>
19.读取元素的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>读取元素的样式</title>
<style type="text/css">
#box1{
width: 50px;
height: 50px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
//点击按钮以后读取box1的样式
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
// 读取box1的宽度
/*
获取元素的当前显示的样式
语法:元素.currentStyle.样式名
它可以用来读取当前元素正在显示的样式
如果当前元素没有设置样式,则获取它的默认值
currentStyle只有IE浏览器支持,其他的浏览器都不支持
*/
// alert(box1.currentStyle.backgroundColor);
/*
在其他浏览器可以使用
getComputedStyle()这个方法来获取元素的当前的样式
这个方法是window的方法,可以直接使用
- 需要两个参数
1.要获取样式的元素
2.可以传递一个伪元素,一般都传null
- 该方法会返回一个对象,对象中封装了当前元素对应的样式
可以通过 对象.样式名 来读取样式
如果获取的样式没有设置,则会获取到真实的值,而不是默认值
比如,如果没有设置 width,它不会获取到 auto,而是一个长度
但是该方法不支持IE8及以下的浏览器
通过currentStyle和getComputedStyle()读取到的样式都是只读的,
不能修改,如果要修改必须通过style属性
*/
var obj = getComputedStyle(box1,null);
// alert(obj.width);//50px
// 正常浏览器的方式
// alert(getComputedStyle(box1,null).width);
// IE8的方式
// alert(box1.currentStyle.width);
getStyle(box1,"width")
};
};
/*
定义一个函数,用来获取指定元素当前的样式
参数:
obj 要获取样式的元素
name 要获取的样式名
*/
function getStyle(obj,name){
/*
if(window.getComputedStyle){
// 正常浏览器的方式
alert(getComputedStyle(obj,null)[name]);
}else{
// IE8的方式
alert(obj.currentStyle[name]);
}
*/
// 三目运算符
alert(window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name]);
}
</script>
</head>
<body>
<button id="btn01">点我</button>
<br><br>
<div id="box1"></div>
</body>
</html>
20.其他样式操作的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>其他样式操作的属性</title>
<style type="text/css">
#box1{
width: 50px;
height: 50px;
background-color: red;
border: 10px yellow solid;
padding: 20px;
}
#box2{
padding: 100px;
background-color: #bfa;
}
#box4{
width: 200px;
height: 300px;
background-color: #BBFFAA;
overflow: auto;
}
#box5{
width: 450px;
height: 600px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
var box4 = document.getElementById("box4");
btn01.onclick = function(){
/*
clientWidth
clientHeight
- 这两个属性可以获取元素的可见宽度和高度
- 这些属性都是不带px的,返回都是一个数字,可以直接进行计算
- 会获取元素宽度和高度,包括内容区和内边距
- 这些属性都是只读的,不能修改
*/
// alert(box1.clientWidth);//90 50+20+20
/*
offsetWidth
offsetHeight
- 获取元素的整个的高度和宽度,包括内容区,内边距和边框
*/
// alert(box1.offsetWidth);//110 50+20+20+10+10
/*
offsetParent
- 可以获取当前元素的定位父元素
- 会获取到离当前元素最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位,则返回body
*/
var op = box1.offsetParent;
// alert(op.id);//获取id属性
/*
offsetLeft
- 当前元素相对于其定位元素的水平偏移量
offsetTop
- 当前元素相对于其定位元素的垂直偏移量
*/
// alert(box1.offsetLeft);
/*
scrollWith
scrollHeight
- 可以获取元素整个滚动区域的宽度和高度
*/
// alert(box4.clientHeight);//300 可见的高度
// alert(box4.scrollHeight);//600 可滚动的高度
// alert(box4.clientWidth);//179
// alert(box4.scrollWidth);//450
/*
scrollLeft
- 可以获取水平滚动条滚动的距离
scrollTop
- 可以获取垂直滚动条滚动的距离
*/
// alert(box4.scrollLeft);
alert(box4.scrollTop);
// 当满足scrollHeight - scrollTop == clientHeight
// 说明垂直滚动条到底了
};
};
</script>
</head>
<body>
<button id="btn01">点我</button>
<br><br>
<div id="box4">
<div id="box5"></div>
</div>
<br><br>
<div id="box3">
<div id="box2" style="position: relative;">
<div id="box1"></div>
</div>
</div>
</body>
</html>
21.练习-滚动条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#info{
width: 300px;
height: 500px;
background-color: #BBFFAA;
overflow: auto;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
当垂直滚动条滚动到底时使表单项可用
onscroll
- 该事件会在元素的滚动条滚动时触发
*/
// 获取id为info的p元素
var info = document.getElementById("info");
// 获取两个表单项
var inputs = document.getElementsByTagName("input");
// 为info绑定一个滚动条滚动的事件
info.onscroll = function(){
/*
console.log("info.clientHeight-->"+info.clientHeight);
console.log("info.scrollHeight-->"+info.scrollHeight);
console.log("info.scrollTop-->"+info.scrollTop);
console.log("-->"+Math.round(info.scrollHeight - info.scrollTop)); */
// 检查垂直滚动条是否滚动到底
if(Math.round(info.scrollHeight) - Math.round(info.scrollTop) == Math.round(info.clientHeight)){
// 滚动条滚动到底 使表单项可用
/*
disabled属性可以设置一个元素是否禁用,
如果设置为true 则元素禁用,
如果设置为false 则元素可用
*/
inputs[0].disabled = false;
inputs[1].disabled = false;
}
};
}
</script>
</head>
<body>
<h3>欢迎注册</h3>
<p id="info">
亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
</p>
<!-- 如果表单项添加disabled="disabled" 则表单项将变成不可用的状态 -->
<input type="checkbox" disabled="disabled" />我已仔细阅读协议,一定遵守
<input type="submit" value="注册" disabled="disabled" />
</body>
</html>
22.事件对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>事件对象</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#areaDiv {
border: 1px solid black;
width: 500px;
height: 500px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
当鼠标在areaDiv中移动时,在showMsg中显示鼠标的坐标
*/
// 获取两个div
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
/*
onmousemove
- 该事件将会在鼠标在元素中移动时被触发
事件对象
- 当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数,
在事件对象中封装了当前事件相关的一切信息,
比如,鼠标的坐标、键盘哪个按键被按下、鼠标滚轮滚动的方向...
*/
areaDiv.onmousemove = function(event){
/*
在IE8中,响应函数被触发时,浏览器不会传递事件对象,
在IE8及以下的浏览器中,是将事件对象作为window对象的属性保存的
*/
// 解决事件对象的兼容性问题
// 方式一:
/* if(!event){
event = window.event;
} */
// 方式二
event = event || window.event;
/*
clientX可以获取鼠标指针的水平坐标
clientY可以获取鼠标指针的垂直坐标
*/
var x = event.clientX;
var y = event.clientY;
// 在showMsg中显示鼠标的坐标
showMsg.innerHTML = "x = "+x+" , y = "+y;
};
};
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>
23.div跟随鼠标移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div跟随鼠标移动</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
/*
开启box1的绝对定位
*/
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
使div可以跟随鼠标移动
*/
// 获取box1
var box1 = document.getElementById("box1");
// 绑定鼠标移动事件
document.onmousemove = function(event){
// 解决兼容问题
event = event || window.event;
// 获取滚动条滚动的距离
/*
chrome 的滚动条是body的,可以通过body.scrollTop来获取
火狐等浏览器 的滚动条是html的
*/
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
// 获取到鼠标的坐标
/*
clientX和clientY
用于获取鼠标在当前的可见窗口的坐标
div的偏移量,是相对于整个页面的
pageX和pageY可以获取鼠标相对于当前页面的坐标
*/
var left = event.clientX;
var top = event.clientY;
// 设置div的偏移量
box1.style.left = left + sl + "px";
box1.style.top = top + st + "px";
box1.innerHTML = "x = "+ (left + sl) + "px"+" , <br> y = "+(top + st) + "px";
};
var box2 = document.getElementById("box2");
box2.onmousemove = function(event){
event = event || window.event;
event.cancelBubble = true;
};
};
</script>
</head>
<body style="height: 1000px;width: 2000px;">
<div id="box2" style="width: 500px;height: 500px;background-color: #BBFFAA;font-size: 100px;">冒泡</div>
<div id="box1">
</div>
</body>
</html>
陆
01.事件的冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件的冒泡</title>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background-color: #abf;
}
#s1{
background-color: #eda;
}
body{
background-color: #BBFFAA;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
事件的冒泡(Bubble)
- 所谓的冒泡指的是事件的向上传导,
当后代元素上的事件被触发时,其
祖先元素的相同事件也会被触发
- 在开发中大部分情况冒泡都是有用的,如果
不希望发生事件冒泡可以通过事件对象来取消冒泡
*/
// 为s1绑定单击响应函数
var s1 = document.getElementById("s1");
s1.onclick = function(event){
event = event || window.event;
alert("span的单击响应函数");
/*
取消冒泡
- 可以将事件对象的cancelBubble设置为true,即可取消冒泡
*/
event.cancelBubble = true;
};
// 为box1绑定单击响应函数
var box1 = document.getElementById("box1");
box1.onclick = function(){
event = event || window.event;
alert("div box1的单击响应函数");
event.cancelBubble = true;
};
// 为body绑定单击响应函数
document.body.onclick = function(){
alert("body的单击响应函数");
};
};
</script>
</head>
<body>
<div id="box1">
我是box1
<span id="s1">我是span</span>
</div>
</body>
</html>
02.事件的委派
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件的委派</title>
<script type="text/javascript">
window.onload = function(){
var u1 = document.getElementById("u1");
// 点击按钮以后添加超链接
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
// 创建一个li
var li = document.createElement("li");
li.innerHTML = "<a href='javascript:;' class='link'>new</a>"
// 将li添加到ul中
u1.appendChild(li);
};
/*
为每一个超链接都绑定一个单击响应函数
这里我们为每一个超链接都绑定了一个单击响应函数,这种操作比较麻烦,
而且这些操作只能为已有的超链接设置事件,而新添加的超链接必须重新绑定
*/
// 获取所有的a
var allA = document.getElementsByTagName("a");
// 遍历
/* for(var i = 0;i<allA.length;i++){
allA[i].onclick = function(){
alert("a的单击响应函数");
};
} */
/*
只绑定一次事件,即可应用到多个的元素上,即使元素是后添加的
我们可以尝试将其绑定给元素的共同的祖先元素
事件的委派:
- 指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素
从而通过祖先元素的响应函数来处理事件
- 事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能
*/
// 为ul绑定一个单击响应函数
u1.onclick = function(event){
event = event || window.event;
/*
target
- event中的target表示的触发事件的对象
*/
// alert(event.target);
// 如果触发事件的对象是我们期望的元素,则执行否则不执行
if(event.target.className == "link"){
alert("ul的单击响应函数");
}
// alert("ul的单击响应函数");
};
};
</script>
</head>
<body>
<button id="btn01">添加超链接</button>
<ul id="u1" style="background-color: #BBFFAA;">
<li>
<p>p元素</p>
</li>
<li><a href="javascript:;" class="link">超链接壹</a></li>
<li><a href="javascript:;" class="link">超链接贰</a></li>
<li><a href="javascript:;" class="link">超链接叁</a></li>
</ul>
</body>
</html>
03.事件的绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件的绑定</title>
<script type="text/javascript">
window.onload = function(){
/*
点击按钮以后弹出一个内容
*/
// 获取按钮对象
var btn01 = document.getElementById("btn01");
/*
使用 对象.事件 = 函数 的形式绑定响应函数,
它只能同时为一个元素的一个事件绑定一个响应函数,
不能绑定多个,如果绑定了多个,则后边会覆盖掉前边的
*/
/*
// 为btn01绑定一个单击响应函数
btn01.onclick = function(){
alert(1);
};
// 为btn01绑定第二个响应函数
btn01.onclick = function(){
alert(2);
}; */
/*
addEventListener()
- 通过这个方法也可以为元素绑定响应函数
- 参数:
1.事件的字符串,不要on
2.回调函数,当事件触发时该函数会被调用
3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,
这样当事件被触发时,响应函数将会按照函数的绑定顺序执行
这个方法不支持IE8及以下的浏览器
*/
/*
btn01.addEventListener("click",function(){
alert(1);
},false);
btn01.addEventListener("click",function(){
alert(2);
},false);
*/
/*
attachEvent()
- 在IE8中可以使用attachEvent()来绑定事件
- 参数:
1.事件的字符串,要on
2.回调函数
- 这个方法也可以同时为一个事件绑定多个处理函数,
不同的是它是后绑定先执行,执行顺序和addEventListener()相反
*/
// btn01.attachEvent("onclick",function(){
// alert(1);
// });
/* btn01.addEventListener("click",function(){
alert(this);
},false); //[object HTMLButtonElement]
*/
/*
btn01.attachEvent("onclick",function(){
alert(this);
});//[object window]
*/
bind(btn01,"click",function(){
alert(111);
});
};
// 定义一个函数,用来为指定元素绑定响应函数
/*
addEventListener()中的this,是绑定事件的对象
attachEvent()中的this,是window
需要统一两个方法的this
*/
/*
参数:
obj 要绑定事件的对象
eventStr 事件的字符串
callback 回调函数
*/
function bind(obj,eventStr,callback){
if(obj.addEventListener){
// 大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);
}else{
/*
this是谁由调用方式决定
callback.call(obj)
*/
// IE8及以下
obj.attachEvent("on"+eventStr,function(){
// 在匿名函数中调用回调函数
callback.call(obj);
});
}
}
</script>
</head>
<body>
<button id="btn01">click</button>
</body>
</html>
04.事件的传播
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件的传播</title>
<style type="text/css">
#box1{
width: 300px;
height: 300px;
background-color: yellowgreen;
}
#box2{
width: 200px;
height: 200px;
background-color: yellow;
}
#box3{
width: 150px;
height: 150px;
background-color: skyblue;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
分别为三个div绑定单击响应函数
*/
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
/*
事件的传播
- 关于事件的传播网景公司和微软公司有不同的理解
- 微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,
然后再向当前元素的祖先元素上传播,也就是说事件应该在冒泡阶段执行
- 网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件,
然后再向内传播给后代元素
- W3C综合了两个公司的方案,将事件传播分成了三个阶段
1.捕获阶段
- 在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件
2.目标阶段
- 事件捕获到目标元素,捕获结束开始在目标元素上触发事件
3.冒泡阶段
- 事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
- 如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件,所以这个参数一般都是false
*/
bind(box1,"click",function(){
alert("box1的响应函数");
});
bind(box2,"click",function(){
alert("box2的响应函数");
});
bind(box3,"click",function(){
alert("box3的响应函数");
});
};
// 定义一个函数,用来为指定元素绑定响应函数
/*
addEventListener()中的this,是绑定事件的对象
attachEvent()中的this,是window
需要统一两个方法的this
*/
/*
参数:
obj 要绑定事件的对象
eventStr 事件的字符串
callback 回调函数
*/
function bind(obj,eventStr,callback){
if(obj.addEventListener){
// 大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);
}else{
/*
this是谁由调用方式决定
callback.call(obj)
*/
// IE8及以下
obj.attachEvent("on"+eventStr,function(){
// 在匿名函数中调用回调函数
callback.call(obj);
});
}
}
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
</html>
05.事件练习-拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: #bfa;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
拖拽box1元素
- 拖拽的流程
1.当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
3.当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
*/
// 获取box1
var box1 = document.getElementById("box1");
// 为box1绑定一个鼠标按下事件
// 当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
box1.onmousedown = function(event){
// 设置box1捕获所有鼠标按下的事件
/*
setCapture()
- 只有IE支持,但是在火狐中调用不会报错,
而如果使用chrome调用,会报错
*/
/*
if(box1.setCapture){
box1.setCapture();
}
*/
box1.setCapture && box1.setCapture;
event = event || window.event;
// div的偏移量 鼠标.clientX - 元素.offsetLeft
// div的偏移量 鼠标.clientY - 元素.offsetTop
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;
// 为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event || window.event;
// 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
// 获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
// 修改box1的位置
box1.style.left = left + "px";
box1.style.top = top + "px";
};
// 为元素绑定一个鼠标松开事件
document.onmouseup = function(){
// 当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
// 取消document的onmousemove事件
document.onmousemove = null;
// 取消document的onmouseup事件
document.onmouseup = null;
// 当鼠标松开时,取消对事件的捕获
box1.releaseCapture && box1.releaseCapture();
};
/*
当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容,
此时会导致拖拽功能的异常,这个是浏览器提供的默认行为,
如果不希望发生这个行为,则可以通过return false来取消默认行为
*/
return false;
};
};
</script>
</head>
<body>
大河向东流
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
06.测试IE8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
// 分别为两个按钮绑定单击响应函数
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
btn01.onclick = function(){
alert(1);
};
btn02.onclick = function(){
alert(2);
};
// 设置btn01对鼠标按下相关的事件进行捕获
// 当调用一个元素的setCapture()方法以后,这个元素
// 将会把下一次所有的鼠标按下相关的事件捕获到自身上
btn01.setCapture();
};
</script>
</head>
<body>
<button id="btn01">Button1</button>
<button id="btn02">Button2</button>
</body>
</html>
07.事件练习-拖拽2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: #bfa;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
拖拽box1元素
- 拖拽的流程
1.当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
3.当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
*/
// 获取box1
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var img1 = document.getElementById("img1");
// 开启box1的拖拽
drag(box1);
// 开启box2的拖拽
drag(box2);
drag(img1);
};
/*
提取一个专门用来设置拖拽的函数
参数:
obj 开启拖拽的元素
*/
function drag(obj){
// 为box1绑定一个鼠标按下事件
// 当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
obj.onmousedown = function(event){
// 设置box1捕获所有鼠标按下的事件
/*
setCapture()
- 只有IE支持,但是在火狐中调用不会报错,
而如果使用chrome调用,会报错
*/
/*
if(obj.setCapture){
obj.setCapture();
}
*/
obj.setCapture && obj.setCapture;
event = event || window.event;
// div的偏移量 鼠标.clientX - 元素.offsetLeft
// div的偏移量 鼠标.clientY - 元素.offsetTop
var ol = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop;
// 为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event || window.event;
// 当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
// 获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
// 修改obj的位置
obj.style.left = left + "px";
obj.style.top = top + "px";
};
// 为元素绑定一个鼠标松开事件
document.onmouseup = function(){
// 当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
// 取消document的onmousemove事件
document.onmousemove = null;
// 取消document的onmouseup事件
document.onmouseup = null;
// 当鼠标松开时,取消对事件的捕获
obj.releaseCapture && obj.releaseCapture();
};
/*
当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容,
此时会导致拖拽功能的异常,这个是浏览器提供的默认行为,
如果不希望发生这个行为,则可以通过return false来取消默认行为
*/
return false;
};
}
</script>
</head>
<body>
大河向东流
<div id="box1"></div>
<div id="box2"></div>
<img src="../five/img/mlsxq.jpg" alt="" id="img1" style="position: absolute;">
</body>
</html>
08.滚轮事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滚轮事件</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: #bfa;
}
</style>
<script type="text/javascript">
window.onload = function(){
// 为box1绑定一个鼠标滚轮滚动的事件
/*
onmousewheel鼠标滚轮滚动的事件,会在滚轮滚动时触发,
但是火狐不支持该属性
在火狐中需要使用DOMMouseScroll 来绑定滚动事件
注意该事件需要通过addEventListener()函数来绑定
*/
box1.onmousewheel = function(event){
event = event || window.event;
// 判断鼠标滚轮滚动的方向
// event.wheelDelta 可以获取鼠标滚轮滚动的方向
// 向上滚 120 向下滚 -120
// wheelDelta 这个值不看大小,只看正负
// alert(event.wheelDelta);
// wheelDelta 这个属性火狐中不支持
// 在火狐中使用 event.detail 来获取滚动的方向
// 向上滚 -3 向下滚 3
// alert(event.detail);
/*
当鼠标滚轮向下滚动时,box1变长
当滚轮向上滚动时,box1变短
*/
// 判断鼠标滚轮滚动的方向
if(event.wheelDelta>0 || event.detail<0){
// alert("向上滚");
// 向上滚,box1变短
box1.style.height = box1.clientHeight - 10 + "px";
}else{
// alert("向下滚");
// 向下滚,box1变长
box1.style.height = box1.clientHeight + 10 + "px";
}
/*
使用addEventListener()方法绑定响应函数,取消默认行为时不能使用return false
需要使用event来取消默认行为,event.preventDefault()
但是IE8不支持event.preventDefault(),如果直接调用会报错
*/
event.preventDefault && event.preventDefault();
/*
当滚轮滚动时,如果浏览器有滚动条,滚动条会随之滚动,
这是浏览器的默认行为,如果不希望发生,则可以取消默认行为
*/
return false;
};
// 为火狐绑定滚轮事件
bind(box1,"DOMMouseScroll",box1.onmousewheel);
};
// 定义一个函数,用来为指定元素绑定响应函数
/*
addEventListener()中的this,是绑定事件的对象
attachEvent()中的this,是window
需要统一两个方法的this
*/
/*
参数:
obj 要绑定事件的对象
eventStr 事件的字符串
callback 回调函数
*/
function bind(obj,eventStr,callback){
if(obj.addEventListener){
// 大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);
}else{
/*
this是谁由调用方式决定
callback.call(obj)
*/
// IE8及以下
obj.attachEvent("on"+eventStr,function(){
// 在匿名函数中调用回调函数
callback.call(obj);
});
}
}
</script>
</head>
<body style="height: 2000px;">
<div id="box1"></div>
</body>
</html>
09.键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘事件</title>
<script type="text/javascript">
window.onload = function(){
/*
键盘事件:
onkeydown
- 按键被按下
- 对于onkeydown来说如果一直按着某个按键不松手,则事件会一直触发
- 当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,其他的会非常快
这种设计是为了防止误操作的发生
onkeyup
- 按键被松开
键盘事件一般都会绑定给一些可以获取到焦点的对象(input...)或者是document
*/
document.onkeydown = function(event){
event = event || window.event;
/*
可以通过keyCode来获取按键的编码
通过它可以判断哪个按键被按下
除了keyCode,事件对象中还提供了几个属性
altKey
ctrlKey
shiftKey
- 这三个用来判断alt,ctrl和shift是否被按下
如果按下则返回true,否则返回false
*/
// console.log(event.keyCode);
// 判断一个y是否被按下
if (event.keyCode === 89 && event.ctrlKey){
console.log("y.....");
}
};
/*
document.onkeyup = function(){
console.log("按键被松开了");
};
*/
// 获取input
var input = document.getElementsByTagName("input")[0];
input.onkeydown = function(event){
event = event || window.event;
// console.log(event.keyCode);
// 数字48-57
// 使文本框不能输入数字
if(event.keyCode >= 48 && event.keyCode <= 57){
// 在文本框中输入内容,属于onkeydown的默认行为
// 如果在onkeydown中取消了默认行为,则输入的内容,不会出现在文本框中
return false;
}
// console.log("按键被按下了了了");
};
};
</script>
</head>
<body>
<!-- <div id="box1" style="width: 100px;height: 100px;background-color: #bfa;"></div> -->
<input type="text" value="不能输入数字"/>
</body>
</html>
10.键盘移动div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘移动div</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: #BBFFAA;
position: absolute;
}
</style>
<script type="text/javascript">
/*
使div可以根据不同的方向键向不同的方向移动
*/
window.onload = function(){
// 为document绑定一个按键按下的事件
document.onkeydown = function(event){
event = event || window.event;
// 定义一个变量,来表示移动的速度
var speed = 10;
// 当用户按了ctrl以后,速度加快
if(event.ctrlKey){
speed = 50;
}
// console.log(event.keyCode);
/*
37 左
38 上
39 右
40 下
*/
switch(event.keyCode){
case 37:
// alert("向左");
box1.style.left = box1.offsetLeft - speed + "px";
break;
case 39:
// alert("向右");
box1.style.left = box1.offsetLeft + speed + "px";
break;
case 38:
// alert("向上");
box1.style.top = box1.offsetTop - speed + "px";
break;
case 40:
// alert("向下");
box1.style.top = box1.offsetTop + speed + "px";
break;
}
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
11.BOM-Navigator
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOM</title>
<script type="text/javascript">
/*
BOM
- 浏览器对象模型
- BOM可以使我们通过JS来操作浏览器
- 在BOM中为我们提供了一组对象,用来完成对浏览器的操作
- BOM对象
Window
- 代表的是整个浏览器的窗口,同时window也是网页中的全局对象
Navigator
- 代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
Location
- 代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面
History
- 代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录
由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页
而且该操作只在当次访问时有效
Screen
- 代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息
这些BOM对象在浏览器中都是作为window对象的属性保存的,
可以通过window对象来使用,也可以直接使用
*/
/*
Navigator
- 代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
- 由于历史原因,NAvigator对象中的大部分属性都已经不能帮助我们识别浏览器了
- 一般我们只会使用userAgent来判断浏览器的信息
userAgent是一个字符串,这个字符串包含有用来描述浏览器信息的内容,
不同的浏览器会有不同的userAgent
Firefox
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0
Chrome
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36
IE11
Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
IE10
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E)
IE9
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E)
IE8
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E)
*/
// console.log(navigator.appName);
// console.log(navigator.userAgent);
var ua = navigator.userAgent;
document.write(ua);
if(/firefox/i.test(ua)){
alert("火狐");
}else if(/chrome/i.test(ua)){
alert("谷歌");
}else if(/msie/i.test(ua)){
alert("IE浏览器");
}else if("ActiveXObject" in window){
alert("IE11.......");
}
/*
如果通过UserAgent不能判断,还可以通过一些浏览器中特有的对象,来判断浏览器的信息
比如:ActiveXObject
*/
</script>
</head>
<body>
</body>
</html>
12.History
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>History</title>
<script type="text/javascript">
/*
History
- 对象可以用来操作浏览器向前或向后翻页
*/
window.onload = function(){
// 获取按钮对象
var btn = document.getElementById("btn");
btn.onclick = function(){
/*
length
- 属性,可以获取到当次访问的链接数量
*/
// alert(history.length);
/*
back()
- 可以用来回退到上一个页面,作用和浏览器的回退按钮一样
*/
// history.back();
/*
forward()
- 可以跳转到下一个页面,作用和浏览器的前进按钮一样
*/
// history.forward();
/*
go()
- 可以用来跳转到指定的页面
- 它需要一个整数作为参数
1:表示向前跳转一个页面 相当于forward
2:表示向前跳转两个页面
-1:表示向后跳转一个页面
-2:.....
*/
history.go(-2);
};
};
</script>
</head>
<body>
<button type="button" id="btn">点我</button>
<h1>History</h1>
<a href="11.BOM-Navigator.html">去 BOM</a>
</body>
</html>
12.test01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test01</title>
</head>
<body>
<h1>TEST01</h1>
<a href="12.test02.html">去test02</a>
</body>
</html>
12.test02
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test01</title>
</head>
<body>
<h1>TEST02</h1>
<a href="12.History.html">去12.History.html2</a>
</body>
</html>
13.Location
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Location</title>
<script type="text/javascript">
/*
Location
- 对象中封装了浏览器的地址栏的信息
*/
window.onload = function(){
show();
// 获取按钮对象
var btn = document.getElementById("btn");
btn.onclick = function(){
// 如果直接打印location,则可以获取到地址栏的信息(当前页面的完整路径)
// alert(location);
/*
如果直接将location属性修改为一个完整的路径,或相对路径
则我们页面会自动跳转到该路径,并且会生成相应的历史记录
*/
// location = "http://www.baidu.com";
// location = "12.test01.html";
/*
assign()
- 用来跳转到其他的页面,作用和直接修改location一样
*/
// location.assign("http://www.baidu.com");
/*
reload()
- 用于重新加载当前页面,作用和刷新按钮一样
如果方法中传递一个true作为参数,则会强制清空缓存刷新页面
*/
// location.reload(true);
/*
replace()
- 可以使用一个新的页面替换当前页面,调用完毕也会跳转页面
不会生成历史记录,不能使用回退按钮回退
*/
location.replace("12.test01.html");
};
};
function show(){
var now = new Date();
var year = now.getFullYear(); //得到年份
var month = now.getMonth()+1;//得到月份
var date = now.getDate();//得到日期
// var day = now.getDay();//得到周几
var hour= now.getHours();//得到小时数
var minute= now.getMinutes();//得到分钟数
var second= now.getSeconds();//得到秒数
document.getElementById("y").innerHTML=year;
document.getElementById("mo").innerHTML=month;
document.getElementById("d").innerHTML=date;
document.getElementById("h").innerHTML=hour;
document.getElementById("m").innerHTML=minute;
document.getElementById("s").innerHTML=second;
setTimeout(show,1000);//定时器一直调用show()函数
return "";
}
</script>
</head>
<body>
<button type="button" id="btn">点我</button>
<h1>Location</h1>
<a href="11.BOM-Navigator.html">去 BOM</a>
<input type="text" name="" id="" value="" />
<style>
/* *{
font-size: 50px;
} */
.time span {
display: inline-block;
/* width: 40px; */
/* height: 20px; */
padding-left: 20px;
}
</style>
<div class="time">当前时间:<br><br>
<span id="y"></span>年
<span id="mo"></span>月
<span id="d"></span>日
<span id="h"></span>时
<span id="m"></span>分
<span id="s"></span>秒
<!-- <span id="time1">1</span> -->
<!-- //调用show()函数 -->
</div>
</body>
</html>
14.定时调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定时调用</title>
<script type="text/javascript">
window.onload = function(){
// 获取count
var count = document.getElementById("count");
// 使count中的内容,自动切换
/*
JS的程序的执行速度是非常快的
如果希望一段程序,可以每间隔一段时间执行一次,可以使用计时器
*/
/* for(var i = 0;i<1000;i++){
count.innerHTML = i;
} */
/*
setInterval()
- 定时调用
- 可以将一个函数,每隔一段时间执行一次
- 参数:
1.回调函数,该函数会每隔一段时间被调用一次
2.每次调用间隔的时间,单位是毫秒
- 返回值:
返回一个Number类型的数据
这个数字用来作为定时器的唯一标识
*/
var num = 1;
var timer = setInterval(function(){
count.innerHTML = num++;
if(num == 10){
// 关闭定时器
clearInterval(timer);
}
},1000);
console.log(timer);
/*
clearInterval()
- 可以用来关闭一个定时器
- 方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器
*/
// clearInterval(timer);
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>
15.切换图片练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>切换图片练习</title>
<style type="text/css">
img{
width: 70%;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
使图片可以自动切换
*/
// 获取img标签
var img1 = document.getElementById("img1");
// 创建一个数组来保存图片的路径
var imgArr = ["../five/img/a.jpg","../five/img/b.jpg","../five/img/c.jpg","../five/img/d.jpg","../five/img/e.jpg","../five/img/f.jpg","../five/img/g.jpg","../five/img/h.jpg"];
// 创建一个变量,用来保存当前图片的索引
var index = 0;
// 创建一个变量,用来保存定时器的标识
var timer;
// 为btn01绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
/*
目前,我们每点击一次按钮,就会开启一个定时器,
点击多次就会开启多个定时器,这就导致图片的切换速度过快,
并且只能关闭最后一次开启的定时器
*/
// 在开启定时器之前,需要将当前元素上的其他定时器关闭
clearInterval(timer);
/*
开启一个定时器,来自动切换图片
*/
timer = setInterval(function(){
// 使索引自增
index++;
// 判断索引是否超过最大索引
if(index >= imgArr.length){
// 则将index设置为0
index = 0;
}
// index = index % imgArr.length;
// 修改img1的src属性
img1.src = imgArr[index];
},1000);
};
// 为btn02绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
// 点击按钮以后,停止图片的自动切换,关闭定时器
/*
clearInterval()可以接收任意参数,
如果参数是一个有效的定时器的标识,则停止对应的定时器
如果参数不是一个有效的标识,则什么也不做
*/
clearInterval(timer);
};
};
</script>
</head>
<body>
<img id="img1" src="../five/img/c.jpg" >
<br><br>
<button id="btn01">开始</button>
<button id="btn02">停止</button>
</body>
</html>
16.键盘移动div+定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>键盘移动div</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: #BBFFAA;
position: absolute;
}
</style>
<script type="text/javascript">
/*
使div可以根据不同的方向键向不同的方向移动
*/
window.onload = function(){
// 定义一个变量,来表示移动的速度
var speed = 10;
// 创建一个变量表示方向
// 通过修改dir来影响移动的方向
var dir = 0;
// 开启一个定时器,来控制div的移动
setInterval(function(){
/*
37 左
38 上
39 右
40 下
*/
switch(dir){
case 37:
// alert("向左");
box1.style.left = box1.offsetLeft - speed + "px";
break;
case 39:
// alert("向右");
box1.style.left = box1.offsetLeft + speed + "px";
break;
case 38:
// alert("向上");
box1.style.top = box1.offsetTop - speed + "px";
break;
case 40:
// alert("向下");
box1.style.top = box1.offsetTop + speed + "px";
break;
}
},30);
// 为document绑定一个按键按下的事件
document.onkeydown = function(event){
event = event || window.event;
// 当用户按了ctrl以后,速度加快
if(event.ctrlKey){
speed = 50;
}else{
speed = 10;
}
// 使dir等于按键的值
dir = event.keyCode;
// console.log(event.keyCode);
};
// 当按键松开时,div不再移动
document.onkeyup = function(){
// 设置方向为0
dir = 0;
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
17.延时调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>延时调用</title>
<script type="text/javascript">
var num = 1;
/*
// 开启一个定时器
setInterval(function(){
console.log(num++);
},1000);
*/
/*
延时调用
延时调用一个函数不马上执行,而是隔一段时间以后再执行,而且只会执行一次
延时调用和定时调用的区别
定时调用会执行多次,而延时调用只会执行一次
延时调用和定时调用实际上是可以互相代替的,在开发中可以根据自己需要去选择
*/
var timer = setTimeout(function(){
console.log(num++);
},2000);
// 使用clearTimeout()来关闭一个延时调用
clearTimeout(timer);
</script>
</head>
<body>
</body>
</html>
18.定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定时器</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: #dbd;
position: absolute;
left: 0;
}
</style>
<script type="text/javascript">
window.onload = function(){
// 获取box1
var box1 = document.getElementById("box1");
// 获取btn01
var btn01 = document.getElementById("btn01");
// 获取btn02
var btn02 = document.getElementById("btn02");
// 定义一个变量,用来保存定时器的标识
var timer;
/*
点击按钮以后,使box1向右移动(left值增大)
*/
btn01.onclick = function(){
// 关闭上一个定时器
clearInterval(timer);
// 开启一个定时器,用来执行动画效果
timer = setInterval(function(){
// 获取box1的原来的left值
var oldValue = parseInt(getStyle(box1,"left"));
// 在旧值的基础上增加
var newValue = oldValue + 11;
// 判断newValue是否大于800
if(newValue > 800){
newValue = 800;
}
// 将新值设置给box1
box1.style.left = newValue + "px";
// 当元素移动到800px时,使其停止执行动画
if(newValue == 800){
// 达到目标,关闭定时器
clearInterval(timer);
}
},30);
};
/*
点击按钮以后,使box1向左移动(left值减小)
*/
btn02.onclick = function(){
// 关闭上一个定时器
clearInterval(timer);
// 开启一个定时器,用来执行动画效果
timer = setInterval(function(){
// 获取box1的原来的left值
var oldValue = parseInt(getStyle(box1,"left"));
// 在旧值的基础上增加
var newValue = oldValue - 10;
// 判断newValue是否<0
if(newValue < 0){
newValue = 0;
}
// 将新值设置给box1
box1.style.left = newValue + "px";
// 当元素移动到0px时,使其停止执行动画
if(newValue == 0){
// 达到目标,关闭定时器
clearInterval(timer);
}
},30);
};
};
/*
- 用来获取指定元素的当前的样式
- 参数
obj 要获取样式的元素
name 要获取的样式名
*/
function getStyle(obj,name){
if(window.getComputedStyle){
// 正常浏览器的方式,具有getComputedStyle()方法
return getComputedStyle(obj,null)[name];
}else{
// IE8的方式
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn02">点击按钮以后box2向左移动</button>
<br><br><br>
<div id="box1"></div>
<div style="width: 0;height: 1000px;border-left: 1px black solid;position: absolute;left: 800px;top: 0;"></div>
</body>
</html>
18.定时器2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定时器2</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: #dbd;
position: absolute;
left: 0;
}
</style>
<script type="text/javascript">
window.onload = function(){
// 获取box1
var box1 = document.getElementById("box1");
// 获取btn01
var btn01 = document.getElementById("btn01");
// 获取btn02
var btn02 = document.getElementById("btn02");
/*
点击按钮以后,使box1向右移动(left值增大)
*/
btn01.onclick = function(){
move(box1,800,10);
};
/*
点击按钮以后,使box1向左移动(left值减小)
*/
btn02.onclick = function(){
move(box1,0,10);
};
};
// 定义一个变量,用来保存定时器的标识
var timer;
/*
创建一个可以执行简单动画的函数
参数
obj 要执行动画的对象
target 执行动画的目标位置
speed 移动的速度
*/
function move(obj,target,speed){
// 关闭上一个定时器
clearInterval(timer);
// 获取元素目前的位置
var current = parseInt(getStyle(obj,"left"));
/*
判断速度的正负值
如果从0向800移动,则speed为正
如果从800向0移动,则speed为负
*/
if(current > target){
// 此时速度应为负值
speed = -speed;
}
// 开启一个定时器,用来执行动画效果
timer = setInterval(function(){
// 获取box1的原来的left值
var oldValue = parseInt(getStyle(obj,"left"));
// 在旧值的基础上增加
var newValue = oldValue + speed;
// 向左移动时,需要判断newValue是否小于target
// 向右移动时,需要判断newValue是否大于target
if((speed < 0 && newValue < target) || (speed > 0 && newValue > target) ){
newValue = target;
}
// 将新值设置给box1
obj.style.left = newValue + "px";
// 当元素移动到0px时,使其停止执行动画
if(newValue == target){
// 达到目标,关闭定时器
clearInterval(timer);
}
},30);
}
/*
- 用来获取指定元素的当前的样式
- 参数
obj 要获取样式的元素
name 要获取的样式名
*/
function getStyle(obj,name){
if(window.getComputedStyle){
// 正常浏览器的方式,具有getComputedStyle()方法
return getComputedStyle(obj,null)[name];
}else{
// IE8的方式
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn02">点击按钮以后box2向左移动</button>
<br><br><br>
<div id="box1"></div>
<div style="width: 0;height: 1000px;border-left: 1px black solid;position: absolute;left: 800px;top: 0;"></div>
</body>
</html>
18.定时器3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定时器2</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: #dbd;
position: absolute;
left: 0;
}
#box2{
width: 100px;
height: 100px;
background-color: #bfa;
position: absolute;
left: 0;
top: 200px;
}
</style>
<script src="../tools.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
// 获取box1
var box1 = document.getElementById("box1");
// 获取box2
var box2 = document.getElementById("box2");
/*
点击按钮以后,使box1向右移动(left值增大)
*/
// 获取btn01
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
move(box1,"left",800,10);
};
/*
点击按钮以后,使box1向左移动(left值减小)
*/
// 获取btn02
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
move(box1,"left",0,10);
};
// 获取btn03
var btn03 = document.getElementById("btn03");
btn03.onclick =function(){
move(box2,"left",800,10);
};
// 获取btn04
var btn04 = document.getElementById("btn04");
btn04.onclick =function(){
// move(box2,"width",800,10);
// move(box2,"height",800,10);
// move(box2,"left",800,10);
// move(box2,"top",800,10);
move(box2,"width",800,10,function(){
move(box2,"height",400,10,function(){
move(box2,"top",0,10,function(){
move(box2,"width",100,10,function(){
move(box2,"height",100,10,function(){
});
});
});
});
});
};
};
// 定义一个变量,用来保存定时器的标识
/*
目前的定时器标识由全局变量timer保存,
所有的正在执行的定时器都在这个变量中保存
*/
// var timer;
</script>
</head>
<body>
<br>
<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn02">点击按钮以后box1向左移动</button>
<button id="btn03">点击按钮以后box2向右移动</button>
<button id="btn04">测试按钮</button>
<br><br><br>
<div id="box1"></div>
<div id="box2"></div>
<div style="width: 0;height: 1000px;border-left: 1px black solid;position: absolute;left: 800px;top: 0;"></div>
</body>
</html>
19.轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
width: 1000px;
}
/*
设置outer的样式
*/
#outer{
width: 1020px;
height: 333px;
margin: 50px auto;
background-color: #bfa;
padding: 10px 0;
position: relative;
overflow: hidden;
}
/*
设置imgList
*/
#imgList{
list-style: none;
/* width: 8200px; */
position: absolute;
left: 0px;
}
/*
设置图片的li
*/
#imgList li{
float: left;
margin: 0 10px;
}
#navDiv{
position: absolute;
bottom: 15px;
}
#navDiv a{
float: left;
width: 15px;
height: 15px;
background-color: black;
margin: 0 5px;
/* 设置透明 */
opacity: 0.5;
/* 兼容IE8透明 */
filter:alpha(opacity=50);
}
/* 设置鼠标移入的效果 */
#navDiv a:hover{
background-color: red;
}
</style>
<script src="../tools.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
// 设置imgList的宽度
// 获取imgList
var imgList = document.getElementById("imgList");
// 获取页面中所有的img标签
var imgArr = document.getElementsByTagName("img");
// 设置imgList的宽度
imgList.style.width = 1020*imgArr.length + "px";
/* 设置导航按钮居中 */
// 获取navDiv
var navDiv = document.getElementById("navDiv");
// 获取outer
var outer = document.getElementById("outer");
// 设置navDiv的left值
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
// 默认显示图片的索引
var index = 0;
// 获取所有的a
var allA = document.getElementsByTagName("a");
// 设置默认选中的效果
allA[index].style.backgroundColor = "red";
/*
点击超链接切换到指定的图片
*/
// 为所有的超链接都绑定单击响应函数
for(var i = 0;i<allA.length;i++){
// 为每一个超链接都添加一个num属性
allA[i].num = i;
allA[i].onclick = function(){
// 关闭自动切换的定时器
clearInterval(timer);
// 获取点击超链接的索引,并将其设置为index
index = this.num;
// 切换图片
// imgList.style.left = -1020*index + "px";
// 设置选中的a
setA();
// 使用move函数来切换图片
move(imgList,"left",-1020*index,30,function(){
// 动画执行完毕,开启自动切换
autoChange();
});
};
}
// 开启自动切换图片
autoChange();
/*
创建一个方法来设置选中的a
*/
function setA(){
// 判断当前索引是否是最后一张图片
if(index >= imgArr.length - 1){
// 则将index设置为0
index = 0;
// 此时显示的最后一张图片,而最后一张图片和第一张是一模一样
// 通过css将最后一张切换成第一张
imgList.style.left = 0;
}
// 遍历所有a,并将他们的背景颜色设置为黑色
for(var i = 0;i<allA.length;i++){
allA[i].style.backgroundColor = "";
}
// 将选中的a设置为红色
allA[index].style.backgroundColor = "red";
}
/*
创建一个函数,用来开启自动切换图片
*/
// 定义一个自动切换定时器的标识
var timer;
function autoChange(){
// 开启一个定时器,用来定时去切换图片
timer = setInterval(function(){
// 使索引自增
index++;
// 判断index的值
index %= imgArr.length;
// 执行动画,切换图片
move(imgList,"left",-1020*index,20,function(){
// 修改导航按钮
setA();
});
},2000);
}
};
</script>
</head>
<body>
<!-- 创建一个外部的div,来作为大的容器 -->
<div id="outer">
<!-- 创建一个ul,用来放置图片 -->
<ul id="imgList">
<li>
<img src="../five/img/a.jpg" >
</li>
<li>
<img src="../five/img/b.jpg" >
</li>
<li>
<img src="../five/img/c.jpg" >
</li>
<li>
<img src="../five/img/d.jpg" >
</li>
<li>
<img src="../five/img/e.jpg" >
</li>
<li>
<img src="../five/img/f.jpg" >
</li>
<li>
<img src="../five/img/g.jpg" >
</li>
<li>
<img src="../five/img/h.jpg" >
</li>
<li>
<img src="../five/img/a.jpg" >
</li>
</ul>
<!-- 创建导航按钮 -->
<div id="navDiv">
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
<a href="javascript:void(0);"></a>
</div>
</div>
</body>
</html>
柒
01.类的操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类的操作</title>
<style type="text/css">
.b1{
width: 100px;
height: 100px;
background-color: red;
}
.b2{
/* width: 200px; */
height: 200px;
background-color: yellowgreen;
}
</style>
<script type="text/javascript">
window.onload = function(){
// 获取box
var box = document.getElementById("box");
// 获取btn01
var btn01 = document.getElementById("btn01");
// 为btn01绑定单击响应函数
btn01.onclick = function(){
// 修改box的样式
/*
通过style属性来修改元素的样式,每修改一个样式,浏览器就需要重新渲染一次页面
这样的执行的性能是比较差的,而且这种形式当我们要修改多个样式时,也不太方便
*/
// box.style.width = "200px";
// box.style.height = "200px";
// box.style.backgroundColor = "yellow";
/*
一行代码同时修改多个样式
可以通过修改元素的class属性来间接的修改样式
这样一来,只需要修改一次,即可同时修改多个样式,
浏览器只需要重新渲染页面一次,性能比较好,
并且这种方式,可以使表现和行为进一步的分离
*/
// 修改box的class属性
// box.className += " b2";
// addClass(box,"b2");
// removeClass(box,"b2");
toggleClass(box,"b2");
};
};
/*
定义一个函数,用来向一个元素中添加指定的class属性值
参数:
obj 要添加class属性的元素
cn 要添加的class值
*/
function addClass(obj,cn){
// 检查obj中是否含有cn
if(!hasClass(obj,cn)){
obj.className += " "+cn;
}
}
/*
判断一个元素中是否含有指定的class属性值
如果有该class,则返回true,没有则返回false
*/
function hasClass(obj,cn){
// 判断obj中有没有cn这个class
// 创建一个正则表达式
// var reg = /\bb2\b/;
var reg = new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
}
/*
删除一个元素的指定的class属性
*/
function removeClass(obj,cn){
// 创建一个正则表达式
var reg = new RegExp("\\b"+cn+"\\b");
// 删除class
obj.className = obj.className.replace(reg,"");
}
/*
toggleClass可以用来切换一个类
如果元素中具有该类,则删除
如果元素中没有该类,则添加
*/
function toggleClass(obj,cn){
// 判断obj中是否含有cn
if(hasClass(obj,cn)){
// 有,则删除
removeClass(obj,cn);
}else{
// 没有,则添加
addClass(obj,cn);
}
}
</script>
</head>
<body>
<button id="btn01">点击按钮以后修改box的样式</button>
<br><br>
<div id="box" class="b1"></div>
</body>
</html>
02.二级菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a,img {
border: 0;
text-decoration: none;
}
body {
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
</style>
<link rel="stylesheet" type="text/css" href="css/sdmenu.css" />
<script type="text/javascript" src="../tools.js"></script>
<script type="text/javascript">
window.onload = function(){
/*
每一个菜单都是一个div
当div具有collapse这个类时,div就是折叠的状态
当div没有这个类时,div就是展开的状态
*/
/*
点击菜单,切换菜单的显示状态
*/
// 获取所有的class为menuSpan的元素
var menuSpan = document.querySelectorAll(".menuSpan");
// 定义一个变量,来保存当前打开的菜单
var openDiv = menuSpan[0].parentNode;
// 为span绑定单击响应函数
for(var i = 0;i<menuSpan.length;i++){
menuSpan[i].onclick = function(){
// this代表当前点击的span
// 获取当前span的父元素
var parentDiv = this.parentNode;
// 切换菜单的显示状态
toggleMenu(parentDiv);
// 判断openDiv和parentDiv是否相同
if(openDiv != parentDiv && !hasClass(openDiv,"collapsed")){
// 打开菜单以后,应该关闭之前打开的菜单
/*
为了可以统一处理动画过渡效果,在这将addClass改为toggleClass
*/
// addClass(openDiv,"collapsed");
// 此处toggleClass()不需要有移除的功能
// toggleClass(openDiv,"collapsed");
// 切换菜单的显示状态
toggleMenu(openDiv);
}
// 修改openDiv为当前打开的菜单
openDiv = parentDiv;
};
}
/*
用来切换菜单折叠和显示状态
*/
function toggleMenu(obj){
// 在获取类之前,获取元素的高度
var begin = obj.offsetHeight;
// 切换parentDiv的显示
toggleClass(obj,"collapsed");
// 在切换类之后获取一个高度
var end = obj.offsetHeight;
// console.log("begin = "+begin+" , end = "+end);
// 动画效果就是将高度从begin向end过渡
// 将元素的高度重置为begin
obj.style.height = begin + "px";
// 执行动画,从begin向end过渡
move(obj,"height",end,10,function(){
// 动画执行完毕,内联样式已经没有存在的意义了,删除之
obj.style.height = "";
});
}
};
</script>
</head>
<body>
<div id="my_menu" class="sdmenu">
<div>
<span class="menuSpan">在线工具</span>
<a href="#">图像优化</a>
<a href="#">收藏夹图标生成器</a>
<a href="#">邮件</a>
<a href="#">htaccess密码</a>
<a href="#">梯度图像</a>
<a href="#">按钮生成器</a>
</div>
<div class="collapsed">
<span class="menuSpan">支持我们</span>
<a href="#">推荐我们</a>
<a href="#">链接我们</a>
<a href="#">网络资源</a>
</div>
<div class="collapsed">
<span class="menuSpan">合作伙伴</span>
<a href="#">JavaScript工具包</a>
<a href="#">CSS驱动</a>
<a href="#">CodingForums</a>
<a href="#">CSS例子</a>
</div>
<div class="collapsed">
<span class="menuSpan">测试电流</span>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
</div>
</div>
</body>
</html>
css/sdmenu.css :
@charset "utf-8";
/* sdmenu */
div.sdmenu {
width: 150px;
margin: 0 auto;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(bottom.gif) no-repeat right bottom;
color: #fff;
}
div.sdmenu div {
background: url(title.gif) repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(toptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
height: 15px;
line-height: 15px;
overflow: hidden;
padding: 5px 25px;
font-weight: bold;
color: white;
background: url(expanded.gif) no-repeat 10px center;
cursor: pointer;
border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
background-image: url(collapsed.gif);
}
div.sdmenu div a {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div a.current {
background: #ccc;
}
div.sdmenu div a:hover {
background: #066 url(linkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
}
03.JSON
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON</title>
<!--
如果需要兼容IE7及以下的JSON操作,则可以通过引入一个外部的JS文件来处理
-->
<script src="json2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
JSON
- JS中的对象只有JS自己认识,其他的语言都不认识
- JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别,
并且可以转换为任意语言中的对象,JSON在开发中主要用来数据的交互
- JSON
- JavaScript Object Notation JS对象表示法
- JSON和JS对象的格式一样,只不过JSON字符串中的属性名必须加双引号
其他的和JS语法一致
- JSON分类:
1.对象 {}
2.数组 []
- JSON中允许的值:
1.字符串
2.数值
3.布尔值
4.null
5.对象
6.数组
*/
// 创建一个JSON对象
var obj = '{"name":"孙悟空","age":18,"gender":"男"}';
// JSON数组
var arr = '[1,2,3,"hello",true]';
var obj2 = '{"arr":[1,2,3]}';
var arr2 = '[{"name":"孙悟空","age":18,"gender":"男"},{"name":"孙悟空","age":18,"gender":"男"}]'
/*
将JSON字符串转换为JS中的对象
在JS中,为我们提供了一个工具类,就叫JSON
这个对象可以帮助我们将一个JSON转换为JS对象,也可以将一个JS对象转换为JSON
*/
var json = '{"name":"孙悟空","age":18,"gender":"男"}';
/*
json --> JS对象
JSON.parse()
- 可以将JSON字符串转换为JS对象
- 它需要一个JSON字符串作为参数,会将该字符串转换为JS对象并返回
*/
var o = JSON.parse(json);
// console.log(o.name);//孙悟空
var o2 = JSON.parse(arr);
// console.log(o2[3]);//hello
var obj3 = {name:"猪八戒",age:28,gender:"男"};
/*
JS对象 --> JSON
JSON.stringify()
- 可以将一个JS对象转换为JSON字符串
- 需要一个JS对象作为参数,会返回一个JSON字符串
*/
var str = JSON.stringify(obj3);
console.log(str);//{"name":"猪八戒","age":28,"gender":"男"}
/*
JSON这个对象在IE7及以下的浏览器中不支持,所以在这些浏览器中调用时会报错
*/
</script>
</head>
<body>
</body>
</html>
json2.js :
// json2.js
// 2016-05-01
// Public Domain.
// NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
// See http://www.JSON.org/js.html
// This code should be minified before deployment.
// See http://javascript.crockford.com/jsmin.html
// USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO
// NOT CONTROL.
// This file creates a global JSON object containing two methods: stringify
// and parse. This file is provides the ES5 JSON capability to ES3 systems.
// If a project might run on IE8 or earlier, then this file should be included.
// This file does nothing on ES5 systems.
// JSON.stringify(value, replacer, space)
// value any JavaScript value, usually an object or array.
// replacer an optional parameter that determines how object
// values are stringified for objects. It can be a
// function or an array of strings.
// space an optional parameter that specifies the indentation
// of nested structures. If it is omitted, the text will
// be packed without extra whitespace. If it is a number,
// it will specify the number of spaces to indent at each
// level. If it is a string (such as "\t" or " "),
// it contains the characters used to indent at each level.
// This method produces a JSON text from a JavaScript value.
// When an object value is found, if the object contains a toJSON
// method, its toJSON method will be called and the result will be
// stringified. A toJSON method does not serialize: it returns the
// value represented by the name/value pair that should be serialized,
// or undefined if nothing should be serialized. The toJSON method
// will be passed the key associated with the value, and this will be
// bound to the value.
// For example, this would serialize Dates as ISO strings.
// Date.prototype.toJSON = function (key) {
// function f(n) {
// // Format integers to have at least two digits.
// return (n < 10)
// ? "0" + n
// : n;
// }
// return this.getUTCFullYear() + "-" +
// f(this.getUTCMonth() + 1) + "-" +
// f(this.getUTCDate()) + "T" +
// f(this.getUTCHours()) + ":" +
// f(this.getUTCMinutes()) + ":" +
// f(this.getUTCSeconds()) + "Z";
// };
// You can provide an optional replacer method. It will be passed the
// key and value of each member, with this bound to the containing
// object. The value that is returned from your method will be
// serialized. If your method returns undefined, then the member will
// be excluded from the serialization.
// If the replacer parameter is an array of strings, then it will be
// used to select the members to be serialized. It filters the results
// such that only members with keys listed in the replacer array are
// stringified.
// Values that do not have JSON representations, such as undefined or
// functions, will not be serialized. Such values in objects will be
// dropped; in arrays they will be replaced with null. You can use
// a replacer function to replace those with JSON values.
// JSON.stringify(undefined) returns undefined.
// The optional space parameter produces a stringification of the
// value that is filled with line breaks and indentation to make it
// easier to read.
// If the space parameter is a non-empty string, then that string will
// be used for indentation. If the space parameter is a number, then
// the indentation will be that many spaces.
// Example:
// text = JSON.stringify(["e", {pluribus: "unum"}]);
// // text is '["e",{"pluribus":"unum"}]'
// text = JSON.stringify(["e", {pluribus: "unum"}], null, "\t");
// // text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]'
// text = JSON.stringify([new Date()], function (key, value) {
// return this[key] instanceof Date
// ? "Date(" + this[key] + ")"
// : value;
// });
// // text is '["Date(---current time---)"]'
// JSON.parse(text, reviver)
// This method parses a JSON text to produce an object or array.
// It can throw a SyntaxError exception.
// The optional reviver parameter is a function that can filter and
// transform the results. It receives each of the keys and values,
// and its return value is used instead of the original value.
// If it returns what it received, then the structure is not modified.
// If it returns undefined then the member is deleted.
// Example:
// // Parse the text. Values that look like ISO date strings will
// // be converted to Date objects.
// myData = JSON.parse(text, function (key, value) {
// var a;
// if (typeof value === "string") {
// a =
// /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
// if (a) {
// return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
// +a[5], +a[6]));
// }
// }
// return value;
// });
// myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) {
// var d;
// if (typeof value === "string" &&
// value.slice(0, 5) === "Date(" &&
// value.slice(-1) === ")") {
// d = new Date(value.slice(5, -1));
// if (d) {
// return d;
// }
// }
// return value;
// });
// This is a reference implementation. You are free to copy, modify, or
// redistribute.
/*jslint
eval, for, this
*/
/*property
JSON, apply, call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours,
getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join,
lastIndex, length, parse, prototype, push, replace, slice, stringify,
test, toJSON, toString, valueOf
*/
// Create a JSON object only if one does not already exist. We create the
// methods in a closure to avoid creating global variables.
if (typeof JSON !== "object") {
JSON = {};
}
(function () {
"use strict";
var rx_one = /^[\],:{}\s]*$/;
var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g;
var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
var rx_four = /(?:^|:|,)(?:\s*\[)+/g;
var rx_escapable = /[\\\"\u0000-\u001f\u007f-\u009f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
var rx_dangerous = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
function f(n) {
// Format integers to have at least two digits.
return n < 10
? "0" + n
: n;
}
function this_value() {
return this.valueOf();
}
if (typeof Date.prototype.toJSON !== "function") {
Date.prototype.toJSON = function () {
return isFinite(this.valueOf())
? this.getUTCFullYear() + "-" +
f(this.getUTCMonth() + 1) + "-" +
f(this.getUTCDate()) + "T" +
f(this.getUTCHours()) + ":" +
f(this.getUTCMinutes()) + ":" +
f(this.getUTCSeconds()) + "Z"
: null;
};
Boolean.prototype.toJSON = this_value;
Number.prototype.toJSON = this_value;
String.prototype.toJSON = this_value;
}
var gap;
var indent;
var meta;
var rep;
function quote(string) {
// If the string contains no control characters, no quote characters, and no
// backslash characters, then we can safely slap some quotes around it.
// Otherwise we must also replace the offending characters with safe escape
// sequences.
rx_escapable.lastIndex = 0;
return rx_escapable.test(string)
? "\"" + string.replace(rx_escapable, function (a) {
var c = meta[a];
return typeof c === "string"
? c
: "\\u" + ("0000" + a.charCodeAt(0).toString(16)).slice(-4);
}) + "\""
: "\"" + string + "\"";
}
function str(key, holder) {
// Produce a string from holder[key].
var i; // The loop counter.
var k; // The member key.
var v; // The member value.
var length;
var mind = gap;
var partial;
var value = holder[key];
// If the value has a toJSON method, call it to obtain a replacement value.
if (value && typeof value === "object" &&
typeof value.toJSON === "function") {
value = value.toJSON(key);
}
// If we were called with a replacer function, then call the replacer to
// obtain a replacement value.
if (typeof rep === "function") {
value = rep.call(holder, key, value);
}
// What happens next depends on the value's type.
switch (typeof value) {
case "string":
return quote(value);
case "number":
// JSON numbers must be finite. Encode non-finite numbers as null.
return isFinite(value)
? String(value)
: "null";
case "boolean":
case "null":
// If the value is a boolean or null, convert it to a string. Note:
// typeof null does not produce "null". The case is included here in
// the remote chance that this gets fixed someday.
return String(value);
// If the type is "object", we might be dealing with an object or an array or
// null.
case "object":
// Due to a specification blunder in ECMAScript, typeof null is "object",
// so watch out for that case.
if (!value) {
return "null";
}
// Make an array to hold the partial results of stringifying this object value.
gap += indent;
partial = [];
// Is the value an array?
if (Object.prototype.toString.apply(value) === "[object Array]") {
// The value is an array. Stringify every element. Use null as a placeholder
// for non-JSON values.
length = value.length;
for (i = 0; i < length; i += 1) {
partial[i] = str(i, value) || "null";
}
// Join all of the elements together, separated with commas, and wrap them in
// brackets.
v = partial.length === 0
? "[]"
: gap
? "[\n" + gap + partial.join(",\n" + gap) + "\n" + mind + "]"
: "[" + partial.join(",") + "]";
gap = mind;
return v;
}
// If the replacer is an array, use it to select the members to be stringified.
if (rep && typeof rep === "object") {
length = rep.length;
for (i = 0; i < length; i += 1) {
if (typeof rep[i] === "string") {
k = rep[i];
v = str(k, value);
if (v) {
partial.push(quote(k) + (
gap
? ": "
: ":"
) + v);
}
}
}
} else {
// Otherwise, iterate through all of the keys in the object.
for (k in value) {
if (Object.prototype.hasOwnProperty.call(value, k)) {
v = str(k, value);
if (v) {
partial.push(quote(k) + (
gap
? ": "
: ":"
) + v);
}
}
}
}
// Join all of the member texts together, separated with commas,
// and wrap them in braces.
v = partial.length === 0
? "{}"
: gap
? "{\n" + gap + partial.join(",\n" + gap) + "\n" + mind + "}"
: "{" + partial.join(",") + "}";
gap = mind;
return v;
}
}
// If the JSON object does not yet have a stringify method, give it one.
if (typeof JSON.stringify !== "function") {
meta = { // table of character substitutions
"\b": "\\b",
"\t": "\\t",
"\n": "\\n",
"\f": "\\f",
"\r": "\\r",
"\"": "\\\"",
"\\": "\\\\"
};
JSON.stringify = function (value, replacer, space) {
// The stringify method takes a value and an optional replacer, and an optional
// space parameter, and returns a JSON text. The replacer can be a function
// that can replace values, or an array of strings that will select the keys.
// A default replacer method can be provided. Use of the space parameter can
// produce text that is more easily readable.
var i;
gap = "";
indent = "";
// If the space parameter is a number, make an indent string containing that
// many spaces.
if (typeof space === "number") {
for (i = 0; i < space; i += 1) {
indent += " ";
}
// If the space parameter is a string, it will be used as the indent string.
} else if (typeof space === "string") {
indent = space;
}
// If there is a replacer, it must be a function or an array.
// Otherwise, throw an error.
rep = replacer;
if (replacer && typeof replacer !== "function" &&
(typeof replacer !== "object" ||
typeof replacer.length !== "number")) {
throw new Error("JSON.stringify");
}
// Make a fake root object containing our value under the key of "".
// Return the result of stringifying the value.
return str("", {"": value});
};
}
// If the JSON object does not yet have a parse method, give it one.
if (typeof JSON.parse !== "function") {
JSON.parse = function (text, reviver) {
// The parse method takes a text and an optional reviver function, and returns
// a JavaScript value if the text is a valid JSON text.
var j;
function walk(holder, key) {
// The walk method is used to recursively walk the resulting structure so
// that modifications can be made.
var k;
var v;
var value = holder[key];
if (value && typeof value === "object") {
for (k in value) {
if (Object.prototype.hasOwnProperty.call(value, k)) {
v = walk(value, k);
if (v !== undefined) {
value[k] = v;
} else {
delete value[k];
}
}
}
}
return reviver.call(holder, key, value);
}
// Parsing happens in four stages. In the first stage, we replace certain
// Unicode characters with escape sequences. JavaScript handles many characters
// incorrectly, either silently deleting them, or treating them as line endings.
text = String(text);
rx_dangerous.lastIndex = 0;
if (rx_dangerous.test(text)) {
text = text.replace(rx_dangerous, function (a) {
return "\\u" +
("0000" + a.charCodeAt(0).toString(16)).slice(-4);
});
}
// In the second stage, we run the text against regular expressions that look
// for non-JSON patterns. We are especially concerned with "()" and "new"
// because they can cause invocation, and "=" because it can cause mutation.
// But just to be safe, we want to reject all unexpected forms.
// We split the second stage into 4 regexp operations in order to work around
// crippling inefficiencies in IE's and Safari's regexp engines. First we
// replace the JSON backslash pairs with "@" (a non-JSON character). Second, we
// replace all simple value tokens with "]" characters. Third, we delete all
// open brackets that follow a colon or comma or that begin the text. Finally,
// we look to see that the remaining characters are only whitespace or "]" or
// "," or ":" or "{" or "}". If that is so, then the text is safe for eval.
if (
rx_one.test(
text
.replace(rx_two, "@")
.replace(rx_three, "]")
.replace(rx_four, "")
)
) {
// In the third stage we use the eval function to compile the text into a
// JavaScript structure. The "{" operator is subject to a syntactic ambiguity
// in JavaScript: it can begin a block or an object literal. We wrap the text
// in parens to eliminate the ambiguity.
j = eval("(" + text + ")");
// In the optional fourth stage, we recursively walk the new structure, passing
// each name/value pair to a reviver function for possible transformation.
return (typeof reviver === "function")
? walk({"": j}, "")
: j;
}
// If the text is not JSON parseable, then a SyntaxError is thrown.
throw new SyntaxError("JSON.parse");
};
}
}());
03.JSON-IE7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON</title>
<script type="text/javascript">
var str = '{"name":"孙悟空","age":18,"gender":"男"}';
/*
eval()
- 这个函数可以用来执行一段字符串形式的JS代码,并将执行结果返回
- 如果使用eval()执行的字符串中含有{},它会将{}当成是代码块
如果不希望将其当成代码块解析,则需要在字符串前后各加一个()
- eval()这个函数的功能很强大,可以直接执行一个字符串中的JS代码,
但是在开发中尽量不要使用,首先他的执行性能比较差,然后它还具有安全隐患
*/
var str2 = "alert('hello');";
// eval(str2);
var obj = eval("("+str+")");
// console.log(obj);//{"age":18,"gender":"男","name":"孙悟空"}
</script>
</head>
<body>
</body>
</html>
tools.js
/*
创建一个可以执行简单动画的函数
参数
obj 要执行动画的对象
attr 要执行动画的样式 比如:left top width height
target 执行动画的目标位置
speed 移动的速度
callback 回调函数
*/
function move(obj, attr, target, speed, callback) {
// 关闭上一个定时器
clearInterval(obj.timer);
// 获取元素目前的位置
var current = parseInt(getStyle(obj, attr));
/*
判断速度的正负值
如果从0向800移动,则speed为正
如果从800向0移动,则speed为负
*/
if (current > target) {
// 此时速度应为负值
speed = -speed;
}
// 开启一个定时器,用来执行动画效果
// 向执行动画的对象中添加一个timer属性,用来保存它自己的定时器标识
obj.timer = setInterval(function() {
// 获取box1的原来的left值
var oldValue = parseInt(getStyle(obj, attr));
// 在旧值的基础上增加
var newValue = oldValue + speed;
// 向左移动时,需要判断newValue是否小于target
// 向右移动时,需要判断newValue是否大于target
if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
// 将新值设置给box1
obj.style[attr] = newValue + "px";
// 当元素移动到0px时,使其停止执行动画
if (newValue == target) {
// 达到目标,关闭定时器
clearInterval(obj.timer);
// 动画执行完毕,调用回调函数
callback && callback();
}
}, 30);
}
/*
- 用来获取指定元素的当前的样式
- 参数
obj 要获取样式的元素
name 要获取的样式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {
// 正常浏览器的方式,具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
// IE8的方式
return obj.currentStyle[name];
}
}
/*
定义一个函数,用来向一个元素中添加指定的class属性值
参数:
obj 要添加class属性的元素
cn 要添加的class值
*/
function addClass(obj, cn) {
// 检查obj中是否含有cn
if (!hasClass(obj, cn)) {
obj.className += " " + cn;
}
}
/*
判断一个元素中是否含有指定的class属性值
如果有该class,则返回true,没有则返回false
*/
function hasClass(obj, cn) {
// 判断obj中有没有cn这个class
// 创建一个正则表达式
// var reg = /\bb2\b/;
var reg = new RegExp("\\b" + cn + "\\b");
return reg.test(obj.className);
}
/*
删除一个元素的指定的class属性
*/
function removeClass(obj, cn) {
// 创建一个正则表达式
var reg = new RegExp("\\b" + cn + "\\b");
// 删除class
obj.className = obj.className.replace(reg, "");
}
/*
toggleClass可以用来切换一个类
如果元素中具有该类,则删除
如果元素中没有该类,则添加
*/
function toggleClass(obj, cn) {
// 判断obj中是否含有cn
if (hasClass(obj, cn)) {
// 有,则删除
removeClass(obj, cn);
} else {
// 没有,则添加
addClass(obj, cn);
}
}