JavaScript
大约 75 分钟
JavaScript
Hello World
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- JS代码需要编写到script标签中 -->
<script type="text/javascript">
// 控制浏览器弹出一个警告框
alert("hello world");
//向body中输出一个内容
document.write("hello world");
// 向控制台输出一个内容
console.log("hello world");
</script>
</head>
<body>
</body>
</html>
编写位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--可以将js代码编写到外部js文件中，通过script标签引入，可以在不同的页面中引用，也可以用到浏览器的缓存机制，推荐使用-->
<script src="js/helloworld.js"></script>
<!--script标签一旦用于引入外部文件，就不能再编写代码了，即使编写了浏览器也会忽略-->
<!--可以将js代码编写到script标签中-->
<script type="text/javascript">
alert("hello world 2");
</script>
</head>
<body>
<!--可以将js代码编写到标签的onclick属性中，当点击按钮时，会执行js代码-->
<button onclick="alert('hello world 3');" >点我</button>
<!--可以将js代码写在超链接的href属性中，当点击超链接时，会执行js代码-->
<a href="javascript:alert('hello world 4');">再点我一下</a>
<a href="javascript:;">再点我一下</a>
</body>
</html>
基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
多行注释
*/
//单行注释
/*
1.JS中严格区分大小写
2.JS中每一条语句以分号结尾
3.JS中会忽略多个空格和换行
*/
</script>
</head>
<body>
</body>
</html>
字面量和变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 字面量：都是一些不可改变的值，比如：1,2,3,4,5
* 字面量都是可以直接使用，但是一般都不会直接使用
*
* 变量：用来保存字面量，而且变量的值可以任意改变，更加方便使用。
* 所以在开发中都是通过变量去保存一个字面量，而很少使用字面量。
*/
//声明变量，在JS中使用var关键字声明一个变量
var a;
//为变量赋值
a = 123;
console.log(a);
//声明和赋值同时进行
var b = "hellow world";
console.log(b);
</script>
</head>
<body>
</body>
</html>
标识符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* 在JS中所有可以由我们自主命名的都可以称为标识符，例如变量名，函数名，属性名
* 命名标识符时需要遵守以下规则：
* 1.标识符中可以含有字母，数字，_，$
* 2.标识符不能以数字开头
* 3.标识符不能是ES中的关键字或保留字
* 4.标识符一般都使用驼峰命名法：首字母小写，其他单词的开头字母大写，其余字母小写
*/
</script>
</head>
<body>
</body>
</html>
数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* 数据类型指的就是字面量的类型，在JS中一共有六种数据类型
* String 字符串
* Number 数值
* Boolean 布尔值
* Null 空值
* Undefined 未定义
* Object 对象
* 其中string Number Boolean Null Undefined属于基本数据类型
* 而Object属于引用数据类型
*/
/**
* String字符串：在JS中字符串需要使用引号引起了，使用双引号或单引号都可以
* 引号不能嵌套
* 在字符串中可以使用\作为转义字符
* \"表示"
* \'表示'
* \n表示换行
* \t表示制表符
*/
var str = "hello";
console.log(str);
var str = "hello: 'world'";
console.log(str);
var str = "hello: \"world\"";
console.log(str);
/**
* Number数字：整数和小数
* typeof：检查变量的类型
* Infinity：表示正无穷
* NaN：特殊的数字，表示Not a Number
*/
var a = 1;
console.log(a);
var b = 2.1
console.log(b);
console.log(typeof a);
var c1 = Number.MAX_VALUE; //最大值
console.log(c1);
var c2 = Number.MIN_VALUE; //最小的正值
var d = Number.MAX_VALUE * Number.MAX_VALUE;
console.log(d);
var e = Infinity;
console.log(typeof e); //返回number
var f = NaN;
console.log(f);
console.log(typeof f); //返回number
var g1 = 111 + 222; //整数运算基本可以保证精确
console.log(g1);
var g2 = 0.1 + 0.2; //浮点运算可能得到一个不精确的结果，不要使用JS进行精确度要求高的运算
console.log(g2);
/**
* Boolean布尔值：true，false
*/
var bool = true;
console.log(typeof bool); //返回boolean
/**
* Null类型的值只有一个：就是null，专门用来表示一个为空的对象
* Undefined类型的值只有一个，就是undefined，当声明一个变量而没有赋值时，值就是undefined
*/
var a = null;
console.log(a); //返回null
console.log(typeof a); //返回object
var aa;
console.log(aa); //返回undefined
console.log(typeof aa); //返回undefined
/**
* 强制类型转换指将一个数据类型强制转换为其他数据类型
* 主要是指将其他数据类型转换为String Number Boolean
*/
var a = 123;
var b = a.toString(); //调用toString()方法转换为String类型，注意null和undefined没有toString()方法
console.log(typeof b);
var b = String(a); //调用String()函数，将被转换的数据作为参数传递给函数
//对于Number和Boolean实际上就是调用toString()方法，
// 对于null和undefined，会将null直接转换为"null"，将undefined直接转换为"undefined"
console.log(typeof b);
/**
* 将其他数据类型转为为Number
* 方式一：调用Number()函数
* 字符串 --> 数字
* 1.如果是纯数字字符串，则直接将其转换为数字
* 2.如果字符串中有非数字的内容，则转换为NaN
* 3.如果字符串是一个空串或者全是空格，则转换为0
* 布尔 --> 数字
* 1.true转为1
* 2.false转为0
* Null --> 数字
* 0
* Undefined --> 数字
* NaN
*
* 方式二：调用parseInt()或者parseFloat()函数，第二个参数指定数字的进制
* parseInt()从左到右将一个字符串中前面有效的整数取出来
* parseFloat()从左到右将一个字符串中前面有效的浮点数取出来
* 如果对非String使用parseInt()或者parseFloat()，会先将其转换为String，然后再操作
*/
var a = "123";
var b = Number(a);
console.log(typeof b);
a = "123px";
b = parseInt(a);
console.log(typeof b);
console.log(b);
/**
* 将其他数据类型转换为Boolean，使用Boolean()函数
* 数字 ---> 布尔
* 除了0和NaN，其余的都是true
* 字符串 --> 布尔
* 除了""（空串），其余的都是true
* null和undefined都会转换为false
* 对象也会转换为true
*/
var a = 123;
b = Boolean(a);
console.log(b);
console.log(typeof b);
</script>
</head>
<body>
</body>
</html>
运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* 算术运算符：+ - * / %
*/
var result = true + 1;
console.log(result);
result = true + false;
console.log(result);
result = 2 + null; //null转换为0
console.log(result);
result = 2 + NaN; //和NaN运算结果都是NaN
console.log(result);
result = "123" + "456"; //字符串拼接
console.log(result);
result = "123" + 456; //如果值和字符串做加法运算，都会先转为为字符串再拼接
console.log(result);
result = 100 - "1"; //不做加法运算时，其他类型，包括字符串都会转换为数字，利用这一点可以做隐式转换
console.log(result);
/**
* 一元运算符，只需要一个操作数
* + 正号
* - 不会对数字产生任何影响
* - 负号
* - 对数字进行符号的取反
* 对于非Number类型的值
* - 会先将其转换为Number，然后再运算
* - 可以对一个其他的数据类型使用+，来将其转换为Number类型，原理和Number()函数一样
*/
result = 1 + +"2" + 3;
console.log(result);
/**
* 自增++
* - 通过自增使变量在自身基础上增1
* - a++的值等于原变量的值（自增前的值）
* - ++a的值等于原变量新值（自增后的值）
*
* 自减--
* - 通过自减使变量在自身基础上减1
* - a--的值等于原变量的值（自减前的值）
* - --a的值等于原变量新值（自减后的值）
*/
var a = 1;
console.log(a++); //1
console.log(a); //2
console.log(++a); //3
console.log(a); //3
/**
* 逻辑运算符
* ！ 可以为一个任意数据类型取两次反，来将其转换为Boolean类型，原理同Boolean()一样
* && 短路与
* || 短路或
* 对于非布尔值，会先将其转换为布尔值，再运算，并且返回原值
* - 与运算，如果值都是true，则返回最后面的值，如果值有false，则返回最前面的false的值
* - 或运算，如果有true，则返回第一个true值，如果都是false，则返回最后一个false
*/
result = 5 && 6 && 7; //返回7
console.log(result);
result = 2 && 0 && NaN; //返回0
console.log(result);
result = 5 || 6 || 7; //返回5
console.log(result);
result = 0 || 0 || NaN; //返回NaN
console.log(result);
/**
* 赋值运算符：= += -= *= /= %=
*/
/**
* 关系运算符：比较两个值的大小关系，成立返回true，不成立返回false
* > >= < <=
* 对于非数值进行比较时，会转换为数值进行
* - true转换为1
* - 任何值和NaN做任何比较都是false
* - 如果运算符两侧的值都是字符串时，不会将其转换为数值进行比较，而是逐位比较字符编码，可用于英文排序
* - 对字符串型数字进行比较，一定要转型
*/
/**
* 编码：在字符串中使用\uxxxx表示Unicode编码，xxxx表示16进制
*/
console.log("\u2690");
/**
* 相等运算符==，比较两个值是否相等，相等返回true，否则返回false
* 当使用==来比较时，如果值的类型不同，则会自动进行类型转换，将其转换为相同类型再比较
* undefined衍生自null，所以这两个值做相等判断时，会返回true
* NaN不和任何值相等，包括本身，可以通过isNaN()函数判断一个值是否是NaN
*
* 不等运算符!=，与==类似
* 全等运算符===，不会做类型转换，类型不同直接返回false
* 不全等运算符!==，不会做类型转换，类型不同直接返回true
*/
console.log(null == 0); //false
console.log(undefined == null); //true
/**
* 条件运算符（三元运算符）：条件表达式 ? 语句1 : 语句2;
* 如果条件表达式结果是非布尔值，会被转换为布尔值
*/
</script>
</head>
<body>
<!--在网页中使用&#xx表示Unicode编码，这里xx表示十进制-->
<h1>d</h1>
</body>
</html>
流程控制语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var score = prompt("请输入(0-100)：");
if (score > 100 || score < 0 || isNaN(score)){
alert("请重新输入");
} else {
if (score == 100){
alert("A");
} else if (score >= 80){
alert("B");
} else if (score >= 60){
alert("C");
} else {
alert("D");
}
}
var height = prompt("请输入身高(cm)：");
var money = prompt("请输入财富(w)：");
var face = prompt("请输入颜值(px)：");
if (height > 180 && money > 1000 && face > 500){
alert("A");
} else if (height > 180 || money > 1000 || face > 500){
alert("B");
}else {
alert("C");
}
//prompt()返回String类型，使用+转换为Number类型
var num1 = +prompt("请输入第一个数：");
var num2 = +prompt("请输入第二个数：");
var num3 = +prompt("请输入第三个数：");
if (num1 < num2 && num1 < num3){
if (num2 < num3){
alert(num1 + "," + num2 + "," + num3);
} else {
alert(num1 + "," + num3 + "," + num2);
}
} else if (num2 < num1 && num2 < num3){
if (num1 < num3){
alert(num2 + "," + num1 + "," + num3);
} else {
alert(num2 + "," + num3 + "," + num1);
}
} else {
if (num1 < num2){
alert(num3 + "," + num1 + "," + num2);
} else {
alert(num3 + "," + num2 + "," + num1);
}
}
var num = 1;
switch (num) {
case 1:
console.log("壹");
break;
case 2:
console.log("贰");
break;
default:
console.log("xxx");
break;
}
var score = 60;
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>
循环语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var i = 0; //初始化变量
while (i < 5){ //设置条件表达式
console.log(i);;
i++; //更新初始化变量
}
var i = 0;
var a = 200000;
while (a < 1000000){
a = a * 1.05;
i++;
}
document.write(i);
document.write("<br/>");
var sum = 0;
for (var i = 1; i <= 100 ; i++){
if (i % 2 != 0){
sum += i;
}
}
console.log(sum);
//水仙花数
for (var i = 100; i < 1000; i++){
var a = parseInt(i / 100);
var b = parseInt(i / 10) % 10;
var c = i % 10;
if (a * a * a + b * b * b + c * c * c == i){
console.log(i);
}
}
for (var i=0; i<5; i++){
for (var j=0; j<i+1; j++){
document.write("* ");
}
document.write("<br/>")
}
//九九乘法表
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/>");
}
outer:
for (var i=0; i<5; i++){
console.log("外层循环" + i);
for (var j=0; j<5; j++){
break outer;
console.log("--->内层循环" + j);
}
}
//质数
console.time("test");
for (var i=2; i<=100; i++){
var flag = true;
for (var j=2; j<=Math.sqrt(i); j++){
if (i%j == 0){
flag = false;
break;
}
}
if (flag){
console.log(i);
}
}
console.timeEnd("test");
</script>
<style type="text/css">
span{
display: inline-block;
width: 80px;
}
</style>
</head>
<body>
</body>
</html>
对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* 对象属于一种复合的数据类型，在对象中可以保存多个不同的数据类型的属性
* 对象的分类：
* 1.内建对象
* - 在ES标准中定义的对象，在任何的ES的实现中都可以使用
* - 比如：Math String Number Boolean Function Object...
* 2.宿主对象
* - 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
* - 比如BOM DOM
*3.自定义对象
* - 由开发人员自己创建的对象
*/
/**
* 创建对象
* 使用new关键字调用的函数，是构造函数constructor
* 构造函数是专门用来创建对象的函数
* 一般使用对象字面量 {} 来创建对象，可以在创建对象时直接指定对象属性
*/
// var obj = new Object();
// console.log(obj);
var obj = {name:"stone",gender:"male",age:20,test:{name:"box"}};
console.log(obj);
/**
* 在对象中保存的值称为属性
* 使用 对象.属性名 = 属性值 向对象添加属性
* 也可以使用 对象["属性名"] = 属性值，读取时也要使用 对象["属性名"]
* 可以在[]中传递一个变量作为属性名
*/
obj.name = "stone";
obj.gender = "male";
obj.age = 18;
console.log(obj);
/**
* 读取对象属性
* 如果读取对象中没有定义的属性，不会报错返回undefined
* JS对象的属性值，可以是任意的数据类型，包括对象
* 使用 "属性名" in 对象 检查对象是否有指定属性，有返回true，没有返回false
*/
console.log(obj.name);
console.log("age" in obj);
/**
* 修改对象的属性值
*/
obj.age = 20;
console.log(obj.age);
/**
* 删除对象属性：delete 对象.属性名
*/
delete obj.age;
console.log(obj.age);
/**
* 基本数据类型：String Number Boolean Null Undefined
* 引用数据类型： Object
* JS中的变量名都是保存到栈内存中
* 基本数据类型的变量值直接在栈内存中存储，值与值之间是独立存在，修改一个不会影响其他
* 对象是保存在堆内存中，每创建一个对象，就会在堆内存中开辟出一块空间，而变量保存的是对象的内存地址（对象的引用），
* 如果两个对象保存的是同一个对象引用，当一个变量修改属性时，另一个也会改变
*
* 当比较两个基本数据类型时，就是比较值
* 而比较两个引用数据类型时，却是比较对象的内存地址
*/
var a = 10;
var b = a;
a++;
console.log(a);
console.log(b);
var obj1 = new Object();
obj1.name = "stone";
var obj2 = obj1;
console.log(obj1.name);
console.log(obj2.name);
obj1.name = "box";
console.log(obj1.name);
console.log(obj2.name);
obj2 = null;
console.log(obj1); //不受影响
console.log(obj2); //null
</script>
</head>
<body>
</body>
</html>
函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* 函数function
* - 函数也是一个对象
* - 函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）
* - 函数中可以保存一些代码在需要的时候调用
* - 使用typeof检查一个函数对象时，会返回function
* 创建一个函数对象
* - 可以将要封装的代码以字符串的形式传递给构造函数，实际开发中不用这种方式
* - 函数中的代码会在函数调用的时候执行：函数对象()
* - 使用函数声明来创建一个函数：function 函数名([形参1,形参2,...,形参N]){函数体}
* - 使用函数表达式来创建一个函数：var 函数名 = function ([形参1,形参2,...,形参N]){函数体}
*/
var fun = new Function("console.log('hello function')");
fun();
function fun2() {
console.log("hello function");
}
console.log(fun2);
fun2();
var fun3 = function () {
console.log("hello world");
};
console.log(fun3);
fun3();
/**
* 函数的参数：可以在函数的()中指定一个或多个形参，使用逗号分隔，相当于声明了对应的变量
* 在调用函数时，可以在()中指定实参（实际参数），实参可以是任意数据类型，实参将会赋值给函数中对应的形参
* 调用函数时解析器不会检查实参的类型，所以要注意是否接收到非法的参数，需要对参数进行检查
* 调用函数时解析器也不会检查实参的数量，多余的形参不会被赋值，没有对应实参的形参将是undefined
* 定义一个求和的函数
*/
function sum(a,b) {
console.log(a+b);
}
sum(1,2);
/**
* 函数的返回值
* 使用return来设置函数的返回值，作为函数执行结果返回
* return后之后的语句都不会执行，结束整个函数
* return后不加任何值或者不写return，则返回undefined
* return后可以是任意类型的值，可以是一个对象，也可以是一个函数
*/
function sum(a,b,c) {
var d = a + b + c;
return d;
}
var result = sum(1,2,3);
console.log(result);
function fun4() {
function fun5() {
console.log("fun5");
}
return fun5;
}
a = fun4();
console.log(a);
console.log(a());
fun4()();
/**
* 立即执行函数：函数定义完后立即调用，只会执行一次
*/
(function() {
console.log("立即执行函数");
})();
(function(a,b) {
console.log(a + b);
})(1,2);
/**
* 函数对象的方法：call()和apply()
* - 当对函数调用call()和apply()都会调用函数执行
* - 在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this
* - call()方法可以将实参在对象之后依次传递
* - apply()方法需要将实参封装到一个数组中统一传递
* - this的情况：
* 1.以函数形式调用时，this永远都是window
* 2.以方法形式调用时，this是调用方法的对象
* 3.以构造函数形式调用时，this是新创建的那个对象
* 4.使用call()和apply()调用时，this是指定的那个对象
*/
function fun1(a, b) {
console.log(this.name);
console.log(a);
console.log(b);
}
var obj = {name:"objname"};
var obj2 = {name:"obj2name"};
fun1.call(obj,2,3); //返回objname,2,3
fun1.apply(obj2,[2,3]); //返回obj2name,2,3
</script>
</head>
<body>
</body>
</html>
方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* 函数也可以作为对象的属性，称这个函数为对象的方法
*/
var obj = new Object();
obj.name = "stone";
obj.sayName = function () {
console.log(obj.name);
};
//调方法
obj.sayName();
var obj2 = {
name:"box",
syaName:function () {
console.log(obj2.name);
}
};
obj2.syaName();
/**
* 枚举对象中的属性，使用 for(var 变量 in 对象){} 语句，有几个属性，循环体执行几次
* 每次执行时，会将对象的属性名赋值给变量
*/
for(var n in obj){
console.log("属性名：" + n + "，属性值：" + obj[n]);
}
</script>
</head>
<body>
</body>
</html>
作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* 作用域：
* - 指一个变量作用的范围
* - 两种作用域
* 1.全局作用域
* - 直接编写在script标签中的JS代码，都在全局作用域
* - 全局作用域在页面打开时创建，在页面关闭时销毁
* - 在全局作用域中有一个全局对象window，代表浏览器窗口，由浏览器创建，可以直接使用
* - 在全局作用域中，创建的变量都会作为window对象的属性保存
* - 在全局作用域中，创建的函数都会作为window对象的方法保存
* - 在全局作用域中的变量都是全局变量，在页面的任意部分都可以访问到
* 2.函数作用域
* - 调用函数的时候创建函数作用域，函数执行完毕后销毁
* - 每调用一次函数就会创建一个新的函数作用域，它们之间是互相独立的
* - 在函数作用域中可以访问到全局作用域的变量
* - 在全局作用域中无法访问到函数作用域的变量
* - 当在函数作用域中操作一个变量时，会先在自身作用域中寻找，如果没有则向上一级作用域寻找，直到全局作用域
* - 在函数中访问全局变量使用window.属性
* - 在函数作用域中也有声明提前的特性，使用var声明的变量，会在函数中所有代码执行之前被声明
* - 在函数中不使用var声明的变量都会成为全局变量
* - 函数的形参相当于在函数作用域中声明的变量，且没有赋值
*
* 变量的声明提前：
* - 使用var关键字声明的变量，会在所有的代码执行之前被声明
* - 但是如果声明变量时不使用var关键字，则变量不会被声明提前
*
* 函数的声明提前：
* - 使用函数声明形式 function 函数(){} 创建的函数，会在所有的代码执行之前就被创建，所以可以在创建前调用
* - 使用函数表达式创建的函数不会被声明提前，不能在创建前调用
*/
var a = 10;
console.log(window.a);
</script>
</head>
<body>
</body>
</html>
this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* 解析器在调用函数时每次都会向函数内部传递一个隐含的参数
* 这个隐含的参数就是this,this指向的是一个对象，称为函数执行的上下文对象
* 根据函数调用方式的不同，this会指向不同的对象
* - 以函数的形式调用，this永远都是window
* - 以方法的形式调用，this就是调用方法的对象
*/
var name = "box";
function fun() {
console.log(this.name);
}
fun(); //输出box
var obj = {
name:"stone",
sayName:fun
};
obj.sayName(); //输出stone
</script>
</head>
<body>
</body>
</html>
创建对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* 使用工厂方法创建对象
* 使用的构造函数都是Object，创建的对象都是Object这个类型
* 无法区分出多种类型的对象，故不常用
*/
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 obj1 = createPerson("tom",18,'male');
var obj2 = createPerson("jerry",20,'female');
obj1.sayName();
obj2.sayName();
/**
* 使用构造函数创建对象
* 创建一个构造函数，用来创建专门的对象
* 构造函数就是一个普通的函数，创建方式和普通函数没有区别
* 不同的是构造函数约定首字母大写
*
* 构造函数与普通函数的区别就是调用方式的不同
* - 普通函数是直接调用
* - 构造函数需要使用new关键字来调用
*
* 构造函数执行流程：
* 1.立即创建一个新的对象
* 2.将新建的对象设置为函数中this，在构造函数中可以使用this来引用新建的对象
* 3.逐行执行函数中的代码
* 4.将新建的对象作为返回值返回
*
* 使用同一个构造函数创建的对象称为一类对象，也将一个构造函数称为一个类
* 通过一个构造函数创建的对象，称为该类的实例
* 使用instanceof可以检查一个对象是否是一个类的实例，语法：对象 instanceof 构造函数
* 所有对象都是Object的后代
*
*/
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function () {
console.log(this.name);
}
}
//作为普通函数调用
var per = Person();
console.log(per); //输出undefined
//作为构造函数调用，创建一个实例
var per = new Person("tom",18,"male");
console.log(per); //输出对象
console.log(per instanceof Person); //输出true
console.log(per instanceof Object); //输出true
/**
* 在构造函数中，为避免实例化的时候重复创建相同的方法，可以将方法在全局作用域中定义
* 但是将函数定义在全局作用域，污染了全局作用域的命名空间，而且定义在全局作用域中也很不安全
*/
function Dog(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = fun;
}
function fun() {
console.log(this.name);
}
/**
* 原型对象
* 解析器会向创建的每一个函数添加一个prototype属性
* prototype属性对应一个对象，就是所谓的原型对象
* 当函数以普通函数形式调用，prototype没有任何作用
* 当函数以构造函数形式调用，所创建对象中都会有一个隐含属性，指向该构造函数的原型对象，可以通过__proto__访问该属性
* 原型对象相当于一个公共区域，所有同一个类的实例都可以访问到这个原型对象，可以将对象中共有的内容统一设置到原型对象中
* 当访问对象的一个属性或方法时，会先在对象自身中寻找，如果有则直接使用，没有则在原型对象中寻找，如果没有则继续在原型的原型中寻找，直到Object对象
* Object对象的原型没有原型，如果在Object中依然没有找到，则返回undefined
* 后续创建构造函数时，可以将这些对象共有的属性和方法统一添加到构造函数的原型对象中
* 使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true，这时可以使用Object对象的hasOwnProperty()方法
*/
function MyClass() {
}
var mc = new MyClass();
console.log(mc.__proto__ == MyClass.prototype); //输出true
var mc2 = new MyClass();
console.log(mc2.__proto__ == MyClass.prototype); //输出true
//向MyClass的原型对象中添加属性
MyClass.prototype.a = 123;
console.log(mc.a); //输出123
//向MyClass的原型对象中添加方法
MyClass.prototype.sayHello = function () {
console.log("hello");
}
console.log(mc.sayHello());
console.log("a" in mc); //true
console.log(mc.hasOwnProperty("a")); //false
</script>
</head>
<body>
</body>
</html>
toString
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* 当直接在页面中打印一个对象时，实际上输出的是对象的toString()方法的返回值
*/
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
var per = new Person("tom",18,"male");
console.log(per);
console.log(per.toString());
/**
* 可以为对象添加一个toString()方法
*/
Person.prototype.toString = function () {
return "Person[name=" + this.name + ",age=" + this.age +",gender=" + this.gender + "]";
}
console.log(per.toString());
</script>
</head>
<body>
</body>
</html>
垃圾回收
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* 垃圾回收（GC）
* 当一个对象没有任何变量或属性对它进行引用，此时这个对象就是垃圾
* 在JS中有自动的垃圾回收机制，会自动将垃圾从内存中销毁，不需要也不能进行垃圾回收操作
* 需要做的就是将不再使用的对象设置为null即可
*/
var obj = new Object();
obj = null;
</script>
</head>
<body>
</body>
</html>
数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* 数组（Array）
* - 数组也是一个对象，使用从0开始的整数作为索引来操作元素
* - 数组的存储性能比普通对象更好
* - 如果读取不存在的索引，不会报错返回undefined
*/
var arr = new Array(); //创建数组
var arr2 = new Array(1,2,3); //创建数组的同时添加元素
var arr3 = new Array(3); //创建数组，长度为3
console.log(typeof arr); //输出object
arr[0] = 10; //向数组中添加元素
arr[1] = 11;
console.log(arr); //返回[10, 11]
console.log(arr[0]); //返回10
console.log(arr.length); //返回2，获取连续数组长度
arr[3] = 12;
console.log(arr); //返回[10, 11, empty, 12]，尽量不要创建非连续数组
console.log(arr.length); //返回4，获取非连续数组的最大索引+1
arr.length = 5;
console.log(arr); //返回[10, 11, empty, 12, empty]
arr.length = 2;
console.log(arr); //返回[10, 11]，可以通过修改length长度删除元素
arr[arr.length] = 12; //使用 数组[数组.length] 向数组最后添加元素
console.log(arr); //返回[10, 11, 12]
/**
* 使用字面量创建数组，可以在创建时指定数组中的元素，常用
*/
var arr1 = [];
var arr2 = [1,2,3,4,5];
console.log(arr2);
arr = ["hello",1,true,null,undefined]; //数组的元素可以是任意数据类型
console.log(arr);
arr = [{name:"stone"},{name:"box"},{name:"tom"}]; //数组的元素可以是对象
console.log(arr);
arr = [function () {},function () {}]; //数组的元素可以是函数
console.log(arr);
arr = [[1,2,3],[4,5,6],[7,8,9]]; //数组的元素可以是数组
console.log(arr);
/**
* 数组的方法
concat() 连接两个或更多的数组，并返回结果。
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行排序
splice() 删除元素，并向数组添加新元素。
toSource() 返回该对象的源代码。
toString() 把数组转换为字符串，并返回结果。
toLocaleString() 把数组转换为本地数组，并返回结果。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度，其他元素索引会自动调整。
valueOf() 返回数组对象的原始值
*/
var arr = ["stone","box","tom"];
var result = arr.push("Jerry","Bob");
console.log(arr); //返回["stone", "box", "tom", "Jerry", "Bob"]
console.log(result); //返回新的长度5
var result = arr.pop();
console.log(arr); //返回["stone", "box", "tom", "Jerry"]
console.log(result); //返回被删除元素Bob
var result = arr.unshift("Jerry","Bob");
console.log(arr); //返回["Jerry", "Bob", "stone", "box", "tom", "Jerry"]
console.log(result); //返回新的长度6
var result = arr.shift();
console.log(arr); //返回["Bob", "stone", "box", "tom", "Jerry"]
console.log(result); //返回被删除元素Jerry
var result = arr.slice(0,2); //截取，从索引0到1
console.log(arr); //返回["Bob", "stone", "box", "tom", "Jerry"]
console.log(result); //返回["Bob", "stone"]
var result = arr.splice(0,2,"Cat"); //删除，从索引0开始，删除2个元素，并添加1个元素
console.log(arr); //返回["Cat", "box", "tom", "Jerry"]
console.log(result); //返回被删除的元素数组["Bob", "stone"]
var result = arr.splice(2,0,"Cat","Dog"); //添加，从索引2开始
console.log(arr); //返回["Cat", "box", "Cat", "Dog", "tom", "Jerry"]
console.log(result); //没有元素被删除，返回[]
arr2 = ["stone","alex"];
var result = arr.concat(arr2); //拼接数组，不会对原数组产生影响
console.log(arr); //返回["Cat", "box", "Cat", "Dog", "tom", "Jerry"]
console.log(arr2); //返回["stone", "alex"]
console.log(result); //返回["Cat", "box", "Cat", "Dog", "tom", "Jerry", "stone", "alex"]
var result = arr.join("-"); //默认使用","进行连接
console.log(arr); //返回["Cat", "box", "Cat", "Dog", "tom", "Jerry"]
console.log(result); //返回Cat-box-Cat-Dog-tom-Jerry
var result = arr.reverse(); //会修改原数组
console.log(arr); //返回["Jerry", "tom", "Dog", "Cat", "box", "Cat"]
console.log(result); //返回["Jerry", "tom", "Dog", "Cat", "box", "Cat"]
var result = arr.sort(); //会修改原数组，按照Unicode编码进行排序，对数字也是
console.log(arr); //返回["Cat", "Cat", "Dog", "Jerry", "box", "tom"]
console.log(result); //返回["Cat", "Cat", "Dog", "Jerry", "box", "tom"]
/**
* 可以在sort()添加一个回调函数，来指定排序规则
* - 回调函数需要定义两个形参
* - 浏览器将会分别使用数组中的元素作为实参去调用回调函数
* - 使用哪个元素调用不确定，但顺序与形参顺序一致
* - 浏览器会根据回调函数的返回值来决定元素的顺序
* 1.如果返回一个大于0的值，则元素会交换位置
* 2.如果返回一个小于0的值，则元素位置不变
* 3.如果返回0，则认为两个元素相等，也不交换位置
*/
arr = [1,2,3,11,12,13];
console.log(arr.sort()); //返回[1, 11, 12, 13, 2, 3]
arr.sort(function (a, b) {
return a - b; //升序
})
console.log(arr); //返回[1, 2, 3, 11, 12, 13]
arr.sort(function (a, b) {
return b - a; //降序
})
console.log(arr); //返回[13, 12, 11, 3, 2, 1]
/**
* 数组的遍历，将数组中的所有元素都取出来
*/
var arr = ["stone","box","tom"];
for (var i=0; i<arr.length; i++) {
console.log(arr[i]);
}
/**
* 练习：创建函数，从一个对象数组中进行筛选，将符合条件的对象加入到新的数组中
*/
function Person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
Person.prototype.toString = function () {
return "Person[name=" + this.name + ",age=" + this.age + ",gender=" + this.gender + "]";
}
var per1 = new Person("tome",18,"male");
var per2 = new Person("tome",9,"male");
var per3 = new Person("tome",28,"male");
var per4 = new Person("tome",12,"male");
var per5 = new Person("tome",30,"male");
var arr = [per1,per2,per3,per4,per5];
function selectAudit(arr) {
var audit = [];
for (var i=0; i<arr.length; i++) {
if (arr[i].age >= 18) {
audit.push(arr[i]);
}
}
return audit;
}
console.log(selectAudit(arr));
/**
* 使用forEach方法遍历数组，不支持IE8
* 需要使用回调函数（由浏览器调用）作为参数
* 函数执行次数与数组元素个数相同，每次执行浏览器会将遍历到的元素以实参的形式传递进来
* 可以定义形参来读取元素
* 浏览器会在回调函数中传递三个参数
* - 第一个参数为当前正在遍历的元素
* - 第二个参数为当前正在遍历的元素的索引
* - 第三个参数为当前正在遍历的数组
*/
var arr = ["stone","box","tom"];
arr.forEach(function (value, index, obj) {
console.log(value);
})
/**
* 数组去重
*/
var arr = [1,2,3,1,2,3,1,2,3];
for (var i=0; i<arr.length; i++){
for (var j=i+1; j<arr.length; j++){
if (arr[i] == arr[j]){
arr.splice(j,1);
j--; //当删除了当前j所在的元素后，后边的元素会自动补位，需要再比较一次当前位置的元素
}
}
}
console.log(arr);
</script>
</head>
<body>
</body>
</html>
arguments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* 在调用函数时，浏览器每次都会传递两个隐含的参数
* 1.函数的上下文对象this
* 2.封装实参的对象arguments
* - arguments是一个类数组对象，也可以通过索引来操作数据，也可以获取长度
* - 在调用函数时，所传递的实参都会保存到arguments中
* - arguments.length可以用来获取实参的长度
* - 即使不定义形参，也可以通过arguments来使用实参
* - arguments[n]表示第n个实参
* - callee属性对应当前正在执行的函数对象
*/
function fun() {
console.log(arguments[1]);
console.log(arguments.length);
console.log(arguments.callee == fun);
}
fun("a","b"); //输出b，2，true
</script>
</head>
<body>
</body>
</html>
Date
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* Date对象：表示一个时间
* - 如果直接使用构造函数 new Date() 创建一个Date对象，则会封装为当前日期时间
* - 在构造函数中传递一个表示时间的字符串作为参数来表示指定的时间，日期格式：月/日/年 时:分:秒
*/
var d = new Date();
console.log(d); //输出 Fri Jan 25 2019 13:29:42 GMT+0800 (中国标准时间)
var d2 = new Date("01/25/2019 13:33:00");
console.log(d2); //输出 Fri Jan 25 2019 13:33:00 GMT+0800 (中国标准时间)
/**
* Date对象的方法：
Date() 返回当日的日期和时间。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。
getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setFullYear() 设置 Date 对象中的年份（四位数字）。
setYear() 请使用 setFullYear() 方法代替。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setTime() 以毫秒设置 Date 对象。
setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCFullYear() 根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCSeconds() 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
toSource() 返回该对象的源代码。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toDateString() 把 Date 对象的日期部分转换为字符串。
toGMTString() 请使用 toUTCString() 方法代替。
toUTCString() 根据世界时，把 Date 对象转换为字符串。
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。
UTC() 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf() 返回 Date 对象的原始值。
*/
//获取当前的时间戳
console.log(Date.now()); //输出1548395431899
</script>
</head>
<body>
</body>
</html>
Math
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* Math：不是一个构造函数，属于一个工具类，不用参加对象，封装了数学运算的属性和方法
* Math的属性：
E 返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2 返回 2 的自然对数（约等于0.693）。
LN10 返回 10 的自然对数（约等于2.302）。
LOG2E 返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。
PI 返回圆周率（约等于3.14159）。
SQRT1_2 返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2 返回 2 的平方根（约等于 1.414）。
* Math的方法：
abs(x) 返回数的绝对值。
acos(x) 返回数的反余弦值。
asin(x) 返回数的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x) 对数进行上舍入。
cos(x) 返回数的余弦。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。生成x-y之间的随机数：Math.round(Math.random()*(y-x)+x)
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
toSource() 返回该对象的源代码。
valueOf() 返回 Math 对象的原始值。
*/
</script>
</head>
<body>
</body>
</html>
包装类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* 基本数据类型：String Number Boolean Null Undefined
* 引用数据类型：Object
* 包装类：在JS中提供了三个包装类，通过这三个包装类可以将基本数据类型转换为对象
* - String()：将基本数据类型字符串转换为String对象
* - Number()：将基本数据类型数字转换为Number对象
* - Boolean()：将基本数据类型布尔值转换为Boolean对象
* 注意：在实际开发中不会使用基本数据类型的对象，如果使用基本数据类型对象进行比较操作会出现不可预期结果
* 方法和属性只能添加给对象，不能添加给基本数据类型
* 当对一些基本数据类型的值去调用属性和方法时，浏览器会临时使用包装类将其转换为对象，然后再调用属性和方法
* 调用完后再将其转为基本数据类型
*/
//创建一个Number类型的对象
var num = new Number(3);
console.log(typeof num); //输出object
//创建一个String类型的对象
var str = new String("hello");
console.log(typeof str); //输出object
//创建一个Boolean类型的对象
var boo = new Boolean(true);
console.log(typeof boo); //输出object
</script>
</head>
<body>
</body>
</html>
字符串方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* 在底层字符串是以字符数组的形式保存的
* 字符串属性：
* length 字符串的长度
*/
var str = "hello stone";
console.log(str[0]); //输出h
console.log(str.length); //输出11
/**
* 字符串方法：
anchor() 创建 HTML 锚。
big() 用大号字体显示字符串。
blink() 显示闪动字符串。
bold() 使用粗体显示字符串。
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
concat() 连接字符串。
fixed() 以打字机文本显示字符串。
fontcolor() 使用指定的颜色来显示字符串。
fontsize() 使用指定的尺寸来显示字符串。
fromCharCode() 从字符编码创建一个字符串。
indexOf() 检索字符串，返回第一次出现的索引，没有找到返回-1，可以指定查找位置。
italics() 使用斜体显示字符串。
lastIndexOf() 从后向前搜索字符串。
link() 将字符串显示为链接。
localeCompare() 用本地特定的顺序来比较两个字符串。
match() 找到一个或多个正则表达式的匹配。
replace() 替换与正则表达式匹配的子串。
search() 检索与正则表达式相匹配的值。
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
small() 使用小字号来显示字符串。
split() 把字符串分割为字符串数组，如果参数为空串，则会将每个字符都拆分为数组中的元素。
strike() 使用删除线来显示字符串。
sub() 把字符串显示为下标。
substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符，不接受负值。
sup() 把字符串显示为上标。
toLocaleLowerCase() 把字符串转换为小写。
toLocaleUpperCase() 把字符串转换为大写。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
toSource() 代表对象的源代码。
toString() 返回字符串。
valueOf() 返回某个字符串对象的原始值。
*/
</script>
</head>
<body>
</body>
</html>
正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* 正则表达式：定义字符串规则
* 创建正则表达式的对象语法： var 变量 = new RegExp("正则表达式","匹配模式")
* 匹配模式：
* - i 忽略大小写
* - g 全局匹配模式
* 检查字符串是否符合正则表达式规则的方法：test()，符合返回true，否则返回false
*/
var reg = new RegExp("a","i"); //检查字符串中是否含有"a"
var str = "a";
console.log(reg.test(str)); //输出true
var str = "A";
console.log(reg.test(str)); //输出true
/**
* 使用字面量创建正则表达式语法： var 变量 = /正则表达式/匹配模式
* 是以字面量的方式创建更加简单，使用构造函数创建更加灵活
*/
var reg = /a/i;
var str = "A";
console.log(reg.test(str)); //输出true
/**
* 支持正则表达式的String对象的方法：
search 检索与正则表达式相匹配的值，返回第一次出现的索引，没有则返回-1。
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串，默认只替换第一个。
split 把字符串分割为字符串数组，即使不指定全局匹配，也会全部拆分。
*/
var str = "1a2b3c4d5";
console.log(str.split(/[a-z]/)); //输出["1", "2", "3", "4", "5"]
var str = "1a2b3c4A5B6C";
console.log(str.search(/a[0-9]b/gi)); //输出1
console.log(str.match(/[a-z]/ig)); //输出["a", "b", "c", "A", "B", "C"]
console.log(str.replace(/[a-z]/gi, "")); //输出123456
/**
* 方括号
[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
[A-z] 查找任何从大写 A 到小写 z 的字符。
[adgk] 查找给定集合内的任何字符。
[^adgk] 查找给定集合外的任何字符。
(red|blue|green) 查找任何指定的选项。
*
*/
/**
* 元字符
. 查找单个字符，除了换行和行结束符。
\w 匹配字母、数字、下划线。等价于'[A-Za-z0-9_]'。
\W 匹配非字母、数字、下划线。等价于 '[^A-Za-z0-9_]'。
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B 匹配非单词边界。
\0 查找 NUL 字符。
\n 查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\v 查找垂直制表符。
\xxx 查找以八进制数 xxx 规定的字符。
\xdd 查找以十六进制数 dd 规定的字符。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符
*/
/**
* 量词：
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
n{X} 匹配包含 X 个 n 的序列的字符串。
n{X,Y} 匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,} 匹配包含至少 X 个 n 的序列的字符串。
n$ 匹配任何结尾为 n 的字符串。
^n 匹配任何开头为 n 的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。
*/
//去除字符串前后空格
var str = " hello ";
str = str.replace(/^\s*|\s*$/g, "");
console.log(str); //输出hello
</script>
</head>
<body>
</body>
</html>
DOM文档加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* 浏览器加载一个页面时，是按照自上而下的顺序加载执行的。
* 为window的onload事件绑定的处理函数在整个页面加载完成后才执行，这样可以确保代码执行时所有的DOM对象已经加载完成
*/
window.onload = function () {
//获取对象
var btn = document.getElementById("btn");
//可以为按钮的对应事件绑定处理函数的形式来响应事件，当事件被触发时，其对应的函数将会被调用
btn.onclick = function () {
console.log("click button");
};
}
</script>
</head>
<body>
<button id="btn">button</button>
</body>
</html>
DOM查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript">
/**
* 定义一个函数，专门用来为指定元素绑定单击响应函数
* @param idStr 要绑定单击响应函数的对象的id
* @param fun 事件的回调函数，当单击元素时，该函数将会被触发
*/
function myClick(idStr, fun){
var btn01 = document.getElementById(idStr);
btn01.onclick = fun;
}
window.onload = function () {
//查找#bj节点
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
var bj = document.getElementById("bj");
console.log(bj.innerHTML);
}
//查找所有li节点
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
var lis = document.getElementsByTagName("li");
console.log(lis.length);
for (var i=0; i<lis.length; i++){
console.log(lis[i].innerHTML);
}
}
//查找name=gender的所有节点
var btn03 = document.getElementById("btn03");
btn03.onclick = function () {
var inputs = document.getElementsByName("gender");
console.log(inputs.length);
for (var i=0; i<inputs.length; i++){
//使用 元素.属性名 读取元素节点属性，但是class不能采用这种方式，需要使用 元素.className
console.log(inputs[i].value);
}
}
//查找#city下所有li节点
var btn04 = document.getElementById("btn04");
btn04.onclick = function () {
var city = document.getElementById("city");
var lis = city.getElementsByTagName("li");
console.log(lis.length);
for (var i=0; i<lis.length; i++){
console.log(lis[i].innerHTML);
}
}
//返回#city的所有子节点
var btn05 = document.getElementById("btn05");
btn05.onclick = function () {
var city = document.getElementById("city");
var cns = city.childNodes; //DOM标签中的空白也是文本节点（IE8及以下例外）
console.log(cns.length);
for (var i=0; i<cns.length; i++){
console.log(cns[i].innerHTML);
}
console.log("------------");
var cns2 = city.children; //获取当前元素的子元素，推荐使用
console.log(cns2.length);
for (var i=0; i<cns2.length; i++){
console.log(cns2[i].innerHTML);
}
}
//返回#phone的第一个子节点（包括空白）
var btn06 = document.getElementById("btn06");
btn06.onclick = function () {
var phone = document.getElementById("phone");
var fc = phone.firstChild;
console.log(fc.innerHTML);
console.log("----------");
var fec = phone.firstElementChild; //当前元素的第一个子元素，不支持IE8及以下
console.log(fec);
}
//返回#bj的父节点
myClick("btn07", function () {
var bj = document.getElementById("bj");
var pn = bj.parentNode;
console.log(pn.innerHTML);
console.log(pn.innerText); //获取元素内部的文本内容，没有html标签
})
//返回#android的前一个兄弟节点（包括空白）
myClick("btn08", function () {
var and = document.getElementById("android");
var ps = and.previousSibling;
console.log(ps.innerHTML);
console.log("--------------");
var pes = and.previousElementSibling; //获取前一个兄弟元素，不包括空白，不支持IE8及以下
console.log(pes.innerHTML);
})
//返回#username的value属性值
myClick("btn09", function () {
var un = document.getElementById("username");
//文本框的value属性值就是文本框中填写的内容
console.log(un.value);
})
//设置#username的value属性值
myClick("btn10", function () {
var un = document.getElementById("username");
un.value = "hello";
console.log(un.value);
})
//返回#bj的文本值
myClick("btn11", function () {
var bj = document.getElementById("bj");
console.log(bj.innerHTML);
console.log(bj.innerText);
console.log(bj.firstChild.nodeValue);
})
//获取body元素
console.log(document.body);
//获取html根元素
console.log(document.documentElement);
//根据class属性值获取元素,不支持IE8及以下
console.log(document.getElementsByClassName("inner").length);
//根据CSS选择器来获取第一个元素节点对象，支持IE8
console.log(document.querySelector("#total"));
console.log(document.querySelector(".inner p").innerHTML);
//根据CSS选择器来获取一组元素
console.log(document.querySelectorAll(".inner").length); //返回2
}
</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>
图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 500px;
margin: 50px auto;
padding: 10px;
background-color: greenyellow;
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function () {
var prev = document.getElementById("prev");
var next = document.getElementById("next");
//切换图片就是修改图片的src属性
var img = document.getElementsByTagName("img")[0];
//创建数组用来保存图片的路径
var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
//创建变量来保存当前正在显示图片的索引
var index = 0;
//设置提示文字
var info = document.getElementById("info");
info.innerHTML = "一共 " + imgArr.length + " 张图片，当前第 " + (index + 1) + " 张";
prev.onclick = function () {
//切换到上一张
index--;
if (index < 0){
index = imgArr.length - 1; //跳到最后一张
}
img.src = imgArr[index];
info.innerHTML = "一共 " + imgArr.length + " 张图片，当前第 " + (index + 1) + " 张";
}
next.onclick = function () {
//切换到下一张
index++;
if (index > imgArr.length - 1){
index = 0; //调到第一张
}
img.src = imgArr[index];
info.innerHTML = "一共 " + imgArr.length + " 张图片，当前第 " + (index + 1) + " 张";
}
}
</script>
</head>
<body>
<div id="outer">
<p id="info"></p>
<img src="img/1.jpg" alt="冰棍">
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
DOM增删改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript">
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
window.onload = function () {
//创建一个"广州"节点,添加到#city下
myClick("btn01", function () {
var gzLi = document.createElement("li"); //创建元素节点对象，以标签名作为参数
var gzText = document.createTextNode("广州"); //创建文本节点对象，以文本内容作为参数
gzLi.append(gzText); //将文本节点添加到元素节点
var city = document.getElementById("city");
city.append(gzLi);
})
//将"广州"节点插入到#bj前面
myClick("btn02", function () {
var gzLi = document.createElement("li");
var gzText = document.createTextNode("广州");
gzLi.append(gzText);
var bjLi = document.getElementById("bj");
var city = document.getElementById("city");
city.insertBefore(gzLi,bjLi);
})
//使用"广州"节点替换#bj节点
myClick("btn03", function () {
var gzLi = document.createElement("li");
var gzText = document.createTextNode("广州");
gzLi.append(gzText);
var bjLi = document.getElementById("bj");
var city = document.getElementById("city");
city.replaceChild(gzLi,bjLi);
})
//删除#bj节点
myClick("btn04", function () {
var bjLi = document.getElementById("bj");
bjLi.parentNode.removeChild(bjLi);
})
//读取#city内的HTML代码
myClick("btn05", function () {
var city = document.getElementById("city");
console.log(city.innerHTML);
})
//设置#bj内的HTML代码
myClick("btn06", function () {
var bjLi = document.getElementById("bj");
bjLi.innerHTML = "重庆";
console.log(bjLi.innerHTML);
})
//创建一个"广州"节点,添加到#city下，推荐使用这种方式
myClick("btn07", function () {
var city = document.getElementById("city");
//city.innerHTML += "<li>广州</li>";
var gzLi = document.createElement("li");
gzLi.innerHTML = "广州";
city.appendChild(gzLi);
})
}
</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>
DOM添加删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/css02.css" />
<script type="text/javascript">
window.onload = function () {
function delA() {
var tr = this.parentNode.parentNode;
var name = tr.getElementsByTagName("td")[0].innerHTML;
var flag = confirm("确认删除" + name + "吗？");
if(flag){
tr.parentNode.removeChild(tr);
}
return false;
}
//删除员工，先获取所有超链接
var allA = document.getElementsByTagName("a");
//再为每个超链接绑定一个单击响应函数
for (var i=0; i<allA.length; i++){
//for循环会在页面加载完成之后立即执行，而单击响应函数会在超链接被点击时才执行
//当单击响应函数执行时，for函数早已执行完毕，所以delA中如果使用allA[i]则为allA[allA.length]，故使用this
allA[i].onclick = delA;
}
//添加员工，先为提交按钮绑定点击响应函数
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick = function () {
//获取填写的员工信息
var name = document.getElementById("empName").value;
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
//创建tr元素，td元素和a元素节点
var tr = document.createElement("tr");
/*var nameTd = document.createElement("td");
var emailTd = document.createElement("td");
var salaryTd = document.createElement("td");
var aTd = document.createElement("td");
var a = document.createElement("a");
a.href = "javascript:;";
//创建文本节点
var nameText = document.createTextNode(name);
var emailText = document.createTextNode(email);
var salaryText = document.createTextNode(salary);
var delText = document.createTextNode("Delete");
//将文本节点添加到元素节点
nameTd.appendChild(nameText);
emailTd.appendChild(emailText);
salaryTd.appendChild(salaryText);
a.appendChild(delText);
//将元素节点添加到其父节点
aTd.appendChild(a);
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd);*/
//可以采用以上逐级添加元素节点的方式，也可以以下直接使用innerHTML方式
//这种方法要注意添加元素所在的层级，需要定位到tr级，不能到tr的父节点tbody
tr.innerHTML = "<td>" + name + "</td>"+
"<td>" + email + "</td>"+
"<td>" + salary + "</td>"+
"<td><a href='javascript:;'>Delete</a></td>";
var a = tr.getElementsByTagName("a")[0];
var employeeTable = document.getElementById("employeeTable");
var tbody = employeeTable.getElementsByTagName("tbody")[0];
tbody.appendChild(tr);
//为新添加的a再绑定单击响应函数
a.onclick = delA;
}
}
</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" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
DOM操作CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background-color: red;
padding: 10px;
border: 10px solid yellow;
}
</style>
<script type="text/javascript">
window.onload = function () {
/**
* 点击按钮1后，修改元素的样式
* 通过JS修改元素样式：元素.style.样式名 = 样式值
* 注意：如果CSS样式名中有“-”，需要将这种样式名修改为驼峰命名法
* 通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式会立即显示
* 但是如果在样式中写了!important，此时样式有最高优先级，通过JS修改则不会生效，故尽量不要使用!important
*/
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
box1.style.width = "300px";
box1.style.backgroundColor = "blue";
}
/**
* 点击按钮2后，读取元素的样式
* 只能读取JS内联样式：元素.style.样式名
* 无法读取样式表的样式
*/
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
console.log(box1.style.width);
}
/**
* 获取元素当前显示的样式：元素.currentStyle.样式名
* currentStyle只支持IE
*/
var btn03 = document.getElementById("btn03");
btn03.onclick = function () {
console.log(getStyle(box1, "width"));
}
/**
* 获取元素当前显示的样式：getComputedStyle()
* 这个是window的方法，可以直接使用
* 需要两个参数：
* 1.要获取样式的元素
* 2.可以传递一个伪元素，一般都传null
* 该方法会返回一个对象，该对象封装了当前元素对应的样式
* 可以通过 对象.样式名 来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值
* 例如：没有设置width，则不会获取到auto，而是一个长度
* 不支持IE8及以下版本
* 通过currentStyle和getComputedStyle()读取到了样式都是只读的，不能修改，如果要修改必须通过style属性
*/
//console.log(getComputedStyle(box1, null).width);
/**
* 定义一个函数，获取指定元素的当前样式
* @param obj 要获取样式的元素
* @param name 要获取的样式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {
//正常浏览器，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
}else {
//IE8，没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
var btn04 = document.getElementById("btn04");
btn04.onclick = function () {
/**
* clientWidth clientHeight
* - 这两个属性可以获取元素的可见宽度和高度，包括内容区和内边距
* - 返回结果是数字，可以直接进行计算
* - 这些属性都是只读，不能修改
*/
console.log(box1.clientWidth); //返回220
console.log(box1.clientHeight); //返回220
/**
* offsetWidth offsetHeight
* - 获取元素的整个宽度和高度，包括内容区，内边距和边框
*/
console.log(box1.offsetWidth); //返回240
/**
* offsetParent
* - 可以用来获取当前元素的定位父元素
* - 会获取到离当前元素最近的开启了定位的祖先元素
* - 如果所有的祖先元素都没有开启定位，则返回body
*/
console.log(box4.offsetParent.id); //返回box3
/**
* offsetLeft 当前元素相对于其定位父元素的水平偏移量
* offsetTop 当前元素相对于其定位父元素的垂直偏移量
*/
console.log(box1.offsetLeft); //返回8
/**
* scrollWidth scrollHeight
* - 可以获取元素整个滚动区域的宽度和高度
*
* scrollLeft 获取水平滚动条滚动的距离
* scrollTop 获取垂直滚动条滚动的距离
*
* 当满足 scrollHeight - scrollTop == clientHeight 说明垂直滚动条滚动到底了
* 当满足 scrollWidth - scrollLeft == clientWidth 说明水平滚动条滚动到底了
*/
}
}
</script>
</head>
<body>
<button id="btn01">click me1</button>
<button id="btn02">click me2</button>
<button id="btn03">click me3</button>
<button id="btn04">click me4</button>
<br><br>
<div id="box1"></div>
<div id="box2">
<div id="box3" style="position: relative" >
<div id="box4"></div>
</div>
</div>
</body>
</html>
事件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#areaDiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<script type="text/javascript">
window.onload = function () {
//当鼠标在areaDiv中移动时，在showMsg中显示鼠标的坐标
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
/**
* 事件对象：
* 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
* 在事件对象中封装了当前事件相关的一切信息，比如鼠标的坐标，键盘被按下的按键，鼠标滚轮滚动的方向
* 在IE8中，响应函数被触发时，浏览器不会传递事件对象。
* 在IE8及以下版本中，是将事件对象作为window对象的属性保存的
*/
areaDiv.onmousemove = function (event) {
//clientX，clientY可以获取鼠标指针的水平坐标和垂直坐标
if (!event){
event = window.event;
}
//event = event || window.event; 解决事件对象的兼容性问题
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>
跟随鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function () {
//使div跟随鼠标移动
var box1 = document.getElementById("box1");
document.onmousemove = function (event) {
//解决兼容性问题
event = event || window.event;
/**
* 获取滚动条滚动的距离
* chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
* firefox等浏览器认为浏览器的滚动条是html的
*/
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
/**
* 获取到鼠标的坐标
* clientX,clientY 获取鼠标在当前可见窗口的坐标
* div的偏移量是相对于整个页面的
* pageX,pageY 获取鼠标相对于当前页面的坐标，不支持IE8
*/
var left = event.clientX;
var top = event.clientY;
//设置div的偏移量
box1.style.left = left + sl + "px";
box1.style.top = top + st + "px";
}
}
</script>
</head>
<body style="height: 1000px;width: 2000px">
<div id="box1"></div>
</body>
</html>
事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
#s1{
background-color: yellow;
}
</style>
<script type="text/javascript">
/**
* 事件冒泡：
* - 事件向上传递，当后代元素的事件被触发时，其祖先元素的相同事件也会被触发
* - 在开发中大部分情况下冒泡是有用的，如果不希望发生事件冒泡，可以通过事件对象来取消冒泡
*/
window.onload = function () {
//为s1绑定一个单击响应函数
var s1 = document.getElementById("s1");
s1.onclick = function (event) {
event = event || window.event;
console.log("span"); //输出span
//取消冒泡
event.cancelBubble = true;
}
//为box1绑定一个单击响应函数
var box1 = document.getElementById("box1");
box1.onclick = function () {
console.log("div"); //输出div，body
}
//为body绑定单击响应函数
document.body.onclick = function () {
console.log("body");
}
}
</script>
</head>
<body>
<div id="box1">
div
<span id="s1">span</span>
</div>
</body>
</html>
事件委派
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
var ul = document.getElementById("ul");
/**
* 点击按钮后添加超链接
*/
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
//创建一个li
var li = document.createElement("li");
li.innerHTML = "<a href='javascript:;' class='link'>新建超链接</a>";
//将li添加到u1中
ul.appendChild(li);
}
/**
* 为每一个超链接绑定一个单击响应函数
* 只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
*/
var allA = document.getElementsByTagName("a");
/*for (var i=0; i<allA.length; i++){
allA[i].onclick = function () {
console.log(this.innerHTML);
}
} */
/**
* 希望只绑定一次事件，就可以应用到多个元素上，即使元素是后添加的
* 可以尝试将事件其绑定给元素的共同的祖先元素，子元素事件触发时由祖先元素的响应函数来处理
*
* 事件的委派：
* - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
* - 事件委派利用了冒泡，减少事件绑定的次数，提供程序的性能
*/
ul.onclick = function (event) {
event = event || window.event;
/**
* target
* - event中的target表示触发事件的对象
*/
//console.log(event.target);
//如果触发事件的对象是期望的元素则执行，否则不执行
if (event.target.className == "link") {
console.log("我是ul的单击响应函数");
}
}
}
</script>
</head>
<body>
<button id="btn01">添加超链接</button>
<ul id="ul">
<li><a href="javascript:;" class="link">超链接1</a></li>
<li><a href="javascript:;" class="link">超链接2</a></li>
<li><a href="javascript:;" class="link">超链接3</a></li>
</ul>
</body>
</html>
事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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() 方法为元素绑定响应函数，可以为一个元素的相同事件同时绑定多个响应函数
* 这样当事件被触发时，响应函数将会按照函数的绑定顺序依次执行
* 不支持IE8,IE8需要使用 attachEvent() 来绑定事件
* 参数：
* 1.事件的字符串，不要on
* 2.回调函数
* 3.是否在捕获阶段触发事件，需要一个布尔值，一般都传入false
*/
btn01.addEventListener("click",function () {
alert(1);
},false);
btn01.addEventListener("click",function () {
alert(2);
},false);
/**
* attachEvent() 不支持chrome
* 参数：
* 1.事件的字符串，要on
* 2.回调函数
* 执行顺序是后绑定先执行
*/
/*btn01.attachEvent("onclick", function () {
alert(1);
});
btn01.attachEvent("onclick", function () {
alert(2);
});*/
bind(btn01, "click", function () {
alert(3);
});
bind(btn01, "click", function () {
alert(4);
});
/**
* 定义函数，为指定元素绑定响应函数
* addEventListener()中的this是绑定事件的对象
* attachEvent()中的this是window，需要统一这两个方法的this
* @param obj 要绑定事件的对象
* @param eventStr 事件的字符串（不要on）
* @param callback 回调函数
*/
function bind(obj, eventStr, callback) {
if (obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr, callback, false);
}else {
//IE8
obj.attachEvent("on" + eventStr, function () {
//this是谁由调用方式决定，在匿名函数中调用回调函数
callback.call(obj);
});
}
}
}
</script>
</head>
<body>
<button id="btn01">click me</button>
</body>
</html>
事件传播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#box1{
width: 300px;
height: 300px;
background-color: yellowgreen;
}
#box2{
width: 200px;
height: 200px;
background-color: red;
}
#box3{
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
<script type="text/javascript">
window.onload = function () {
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
/**
* 事件的传播
* W3C将事件传播分成了三个阶段：
* 1.捕获阶段，在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
* 2.目标阶段，事件捕获到了目标元素，捕获结束开始在目标元素上触发事件
* 3.冒泡阶段，事件从目标元素向它的祖先元素传递，依次触发祖先元素上的事件
* 如果希望在捕获阶段就触发事件，可以将addEventListener()第三个参数设置为true
* 一般情况下不会希望在捕获阶段触发事件，所以这个参数一般都是false
* IE8及以下没有捕获阶段
*/
bind(box1,"click",function () {
alert("box1");
})
bind(box2,"click",function () {
alert("box2");
})
bind(box3,"click",function () {
alert("box3");
})
function bind(obj, eventStr, callback) {
if (obj.addEventListener){
obj.addEventListener(eventStr, callback, false);
}else {
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>
拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload = function () {
/**
* 拖拽元素
* - 拖拽流程
* 1.当鼠标在被拖拽元素上点击时，开始拖拽 onmousedown
* 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
* 3.当鼠标松开时，被拖拽元素固定在当前位置，取消document的onmousemove事件 onmouseup
*/
var box1 = document.getElementById("box1");
box1.onmousedown = function (event) {
//设置box1捕获所有鼠标按下的事件，只支持IE，Firefox不会报错，Chrome会报错
if (box1.setCapture) {
box1.setCapture();
}
//box1.setCapture() && box1.setCapture();
/**
* div的水平偏移量 鼠标.clientX = 元素.offsetLeft
* div的垂直偏移量 鼠标.clientY = 元素.offsetTop
*/
event = event || window.event;
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;
document.onmousemove = function (event) {
event = event || window.event;
var left = event.clientX - ol;
var top = event.clientY - ot;
box1.style.left = left + "px";
box1.style.top = top + "px";
}
document.onmouseup = function () {
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
//当鼠标松开时，取消对事件的捕获，只支持IE，Firefox不会报错，Chrome会报错
box1.releaseCapture() && box1.releaseCapture();
}
/**
* 当去拖拽网页中的内容时，浏览器默认会去搜索引擎中搜索内容，此时会导致拖拽功能的异常，这个是浏览器的默认行为
* 如果不行为发生这个行为，可以通过return false来取消默认行为
* 但是这种方式不支持IE8
*/
return false;
}
/**
* 提取专门用来设置拖拽的函数
*/
function drag(obj) {
obj.onmousedown = function (event) {
//设置box1捕获所有鼠标按下的事件，只支持IE，Firefox不会报错，Chrome会报错
if (obj.setCapture) {
obj.setCapture();
}
//box1.setCapture() && box1.setCapture();
/**
* div的水平偏移量 鼠标.clientX = 元素.offsetLeft
* div的垂直偏移量 鼠标.clientY = 元素.offsetTop
*/
event = event || window.event;
var ol = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop;
document.onmousemove = function (event) {
event = event || window.event;
var left = event.clientX - ol;
var top = event.clientY - ot;
obj.style.left = left + "px";
obj.style.top = top + "px";
}
document.onmouseup = function () {
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
//当鼠标松开时，取消对事件的捕获，只支持IE，Firefox不会报错，Chrome会报错
obj.releaseCapture() && obj.releaseCapture();
}
/**
* 当去拖拽网页中的内容时，浏览器默认会去搜索引擎中搜索内容，此时会导致拖拽功能的异常，这个是浏览器的默认行为
* 如果不行为发生这个行为，可以通过return false来取消默认行为
* 但是这种方式不支持IE8
*/
return false;
}
}
var box2 = document.getElementById("box2");
drag(box2);
}
</script>
</head>
<body>
<p>搜索</p>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
滚轮事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function () {
/**
* 鼠标滚轮在box上向下滚动时，box1变长
* 鼠标滚轮在box上向上滚动时，box1变短
* onmousewheel不支持Firefox，在Firefox中需要使用DOMMouseScroll来绑定滚动事件，需要通过addEventListener()函数来绑定
*/
var box1 = document.getElementById("box1");
box1.onmousewheel = function (event) {
event = event || window.event;
/**
* 判断鼠标滚轮滚动的方向
* 使用event.wheelDelta，返回正值表示向上滚动，返回负值表示向下滚动
* 在Firefox中使用event.detail，返回正值表示向下滚动，返回负值表示向上滚动
*/
if(event.wheelDelta > 0 || event.detail < 0){
box1.style.height = box1.clientHeight - 10 + "px";
}else {
box1.style.height = box1.clientHeight + 10 + "px";
}
//当滚轮滚动时，如果浏览器有滚动条，则滚动条也会随之滚动，这是浏览器的默认行为，可以使用return false取消
//但是使用addEventListener()方法绑定响应函数，取消默认行为不能使用return false，需要使用event.preventDefault()来取消默认行为
//但是IE8不支持event.preventDefault()
event.preventDefault() && event.preventDefault();
return false;
}
//为Firefox绑定滚轮事件
bind(box1, "DOMMouseScroll", box1.onmousewheel);
}
/**
* 定义函数，为指定元素绑定响应函数
* addEventListener()中的this是绑定事件的对象
* attachEvent()中的this是window，需要统一这两个方法的this
* @param obj 要绑定事件的对象
* @param eventStr 事件的字符串（不要on）
* @param callback 回调函数
*/
function bind(obj, eventStr, callback) {
if (obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr, callback, false);
}else {
//IE8
obj.attachEvent("on" + eventStr, function () {
//this是谁由调用方式决定，在匿名函数中调用回调函数
callback.call(obj);
});
}
}
</script>
</head>
<body style="height: 1000px">
<div id="box1"></div>
</body>
</html>
键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function () {
/**
* 键盘事件：一般都会绑定给可以获取到焦点的对象或者是document
* onkeydown 按键被按下，如果一直按着，则会连续触发，当onkeydown连续触发时，第一次和第二次之间会间隔稍长，这种设计是为了防止误操作
* onkeyup 按键被松开
* keyCode获取按键编码
* altKey，ctrlKey，shiftKey用来判断alt，ctrl和shift是否被按下，如果按下返回true，否则返回false
*/
/*document.onkeydown = function (event) {
event = event || window.event;
if (event.keyCode === 89 && event.ctrlKey){
console.log("ctrl和y都被按下");
}
};*/
var input = document.getElementsByTagName("input")[0];
//文本框中不能输入数字，数字的keyCode为48-57
input.onkeydown = function (event) {
event = event || window.event;
if (event.keyCode >= 48 && event.keyCode <= 57) {
//在文本框输入内容，属于onkeydown的默认行为，如果使用return false取消默认行为，则输入内容不会出现在文本框中
return false;
}
}
/**
* 使div可以根据不同的方向键向不同的方向移动
* 左：37，上：38，右：39，下：40
*/
document.onkeydown = function (event) {
event = event || window.event;
var speed = 10; //表示移动的速度
//当用户按下ctrl以后，速度加快
if (event.ctrlKey){
speed = 50;
}
console.log(event.keyCode);
switch (event.keyCode) {
case 37:
box1.style.left = box1.offsetLeft - speed + "px";
break;
case 39:
box1.style.left = box1.offsetLeft + speed + "px";
break;
case 38:
box1.style.top = box1.offsetTop - speed + "px";
break;
case 40:
box1.style.top = box1.offsetTop + speed + "px";
break;
}
}
}
</script>
</head>
<body>
<input type="text">
<div id="box1"></div>
</body>
</html>
navigator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* BOM：浏览器对象模型，使用BOM可以通过JS来操作浏览器
* BOM对象：
* window：表示整个浏览器的窗口，也是网页中的全局对象
* navigator：表示当前浏览器的信息，通过该对象可以识别不同的浏览器
* - 由于历史原因，navigator对象中的大部分属性都已经不能用于识别浏览器了
* - 一般只会使用userAgent来判断浏览器的信息
* - 如果通过userAgent不能判断，还可以通过一些浏览器的特有对象来判断浏览器信息，比如ActiveXObject只有IE才有
* location：表示当前浏览器的地址栏信息，操作浏览器跳转页面
* history：表示浏览器历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，且只在当次访问有效
* screen：表示用户屏幕的信息，可以获取用户屏幕相关的信息，主要用于移动端
* 这些BOM对象在浏览器中都是作为window对象的属性保存，可以通过window对象来使用，也可以直接使用
*/
var ua = navigator.userAgent;
if (/firefox/i.test(ua)){
alert("我是Firefox");
} else if (/chrome/i.test(ua)){
alert("我是Chrome");
} else if (/msie/i.test(ua)){
alert("我是IE");
} else if ("ActiveXObject" in window){
alert("我是IE11");
}
</script>
</head>
<body>
</body>
</html>
history
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* history：操作浏览器先前向后翻页
* length：属性，获取当前访问链接的数量
* back()：方法，回退到上一个页面
* forward()：方法，跳转到下一个页面
* go()：方法，跳转到指定的页面，需要一个整数作为参数
* - 1.表示向前跳转一个页面
* - 2.表示向前跳转两个页面
* - -1.表示向后跳转一个页面
* - -2.表示向后跳转两个页面
*/
</script>
</head>
<body>
</body>
</html>
location
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* location：该对象封装了浏览器地址栏的信息
*/
window.onload = function () {
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
console.log(location); //直接打印可以获取到地址栏的信息，即页面的完整路径
location = "http://www.baidu.com"; //修改为完整路径或相对路径，则会跳转到该路径，并生成相应的历史记录
location.assign("http://www.baidu.com"); //加载新的页面，与上面修改功能相同，会生成历史记录
location.reload(true); //重新加载页面，true表示强制清空缓存
location.replace("http://www.baidu.com"); //用新的页面替换当前页面，不会生成历史记录，不能回退。
}
}
</script>
</head>
<body>
<button id="btn01">click me</button>
</body>
</html>
定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
var count = document.getElementById("count");
/**
* setInterval()：定时调用
* 参数：
* 1.回调函数
* 2.间隔时间，单位毫秒
* 返回值：number类型数据，作为定时器的唯一标识
*/
var num = 1;
var timer = setInterval(function () {
count.innerHTML = num++;
if (num == 11){
clearInterval(timer);
}
},1000);
/**
* clearInterval()：关闭定时器，使用定时器标识作为参数
*/
}
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>
定时切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
var img1 = document.getElementById("img1");
//创建一个数组来保存图片的路径
var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
//创建一个变量来保存当前图片的索引
var index = 0;
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
var timer; //保存定时器标识
btn01.onclick = function(){
/**
* 每点击一次按键就会开启一个定时器，且只能关闭最后一次开启的定时器
* 可以在开启定时器之前，将当期元素上的其他定时器关闭
*/
clearInterval(timer);
timer = setInterval(function () {
index++;
if (index >= imgArr.length){
index = 0;
}
//index %= imgArr.length;
img1.src = imgArr[index];
},1000);
}
btn02.onclick = function () {
//clearInterval()可以接收任意参数，如果是一个有效参数，则停止对应定时器，如果无效，则什么也不做
clearInterval(timer);
}
}
</script>
</head>
<body>
<img id="img1" src="img/1.jpg">
<br><br>
<button id="btn01">开始</button>
<button id="btn02">停止</button>
</body>
</html>
定时移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function () {
/**
* 使div可以根据不同的方向键向不同的方向移动
* 左：37，上：38，右：39，下：40
*/
var speed = 10; //表示移动的速度
var dir = 0; //表示移动的方向
setInterval(function () {
switch (dir) {
case 37:
box1.style.left = box1.offsetLeft - speed + "px";
break;
case 39:
box1.style.left = box1.offsetLeft + speed + "px";
break;
case 38:
box1.style.top = box1.offsetTop - speed + "px";
break;
case 40:
box1.style.top = box1.offsetTop + speed + "px";
break;
}
},100)
document.onkeydown = function (event) {
event = event || window.event;
//当用户按下ctrl以后，速度加快
if (event.ctrlKey){
speed = 50;
}else {
speed = 10;
}
dir = event.keyCode;
}
document.onkeyup = function () {
dir = 0; //设置方向为0
}
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
延时调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/**
* setTimeout()：延时调用，指定时间以后执行，只会执行一次
* 可以与定时调用相互替换
*/
var num = 1;
var timer = setTimeout(function () {
console.log(num++);
},3000);
clearTimeout(timer);
</script>
</head>
<body>
</body>
</html>
定时器应用1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0; /*由于IE浏览器默认初始值值是auto，不方便计算，所有这里需要设置初始值*/
}
</style>
<script type="text/javascript">
window.onload = function () {
var btn1 = document.getElementById("btn1");
var box1 = document.getElementById("box1");
var timer;
//点击按钮后，使box1向右移动（left值增大）
btn1.onclick = function () {
//关闭上一个定时器
clearInterval(timer);
//开启定时器
timer = setInterval(function () {
//获取box1原来left值
var oldValue = parseInt(getStyle(box1,"left"));
//在旧值的基础上修改
var newValue = oldValue + 10;
if (newValue > 800){
newValue = 800;
}
//将新值设置给box1
box1.style.left = newValue + "px";
//当移动到800px时，停止
if (newValue == 800){
clearInterval(timer);
}
},30)
}
}
/**
* 定义一个函数，获取指定元素的当前样式
* @param obj 要获取样式的元素
* @param name 要获取的样式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {
//正常浏览器，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
}else {
//IE8，没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn1">点我</button>
<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>
定时器应用2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0; /*由于IE浏览器默认初始值值是auto，不方便计算，所有这里需要设置初始值*/
}
</style>
<script type="text/javascript">
var timer;
window.onload = function () {
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var box1 = document.getElementById("box1");
//点击向右按钮后，使box1向右移动（left值增大）
btn1.onclick = function () {
move(box1,10,800)
}
//点击向左按钮后，使box1向左移动（left值减小）
btn2.onclick = function () {
move(box1,10,0)
}
};
/**
* 创建一个可以执行简单动画的函数
* @param obj：要执行动画的对象
* @param speed：速度
* @param target：移动目标
*/
function move(obj, speed, target) {
//关闭上一个定时器
clearInterval(timer);
//判断速度的正负值
var currValue = parseInt(getStyle(obj,"left"));
if (currValue > 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";
//当移动到800px时，停止
if (newValue == target){
clearInterval(timer);
}
},30)
};
/**
* 定义一个函数，获取指定元素的当前样式
* @param obj 要获取样式的元素
* @param name 要获取的样式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {
//正常浏览器，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
}else {
//IE8，没有getComputedStyle()方法
return obj.currentStyle[name];
}
};
</script>
</head>
<body>
<button id="btn1">右移</button>
<button id="btn2">左移</button>
<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>
定时器应用3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0; /*由于IE浏览器默认初始值值是auto，不方便计算，所有这里需要设置初始值*/
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 0; /*由于IE浏览器默认初始值值是auto，不方便计算，所有这里需要设置初始值*/
top: 200px;
}
</style>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
/**
* 定时器的标识由全局变量timer保存，多个对象调用会导致冲突
*/
//var timer;
window.onload = function () {
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");
var box1 = document.getElementById("box1");
//点击向右按钮后，使box1向右移动（left值增大）
btn1.onclick = function () {
move(box1,"left",10,800)
}
//点击向左按钮后，使box1向左移动（left值减小）
btn2.onclick = function () {
move(box1,"left",10,0)
}
//点击向右按钮后，使box2向右移动（left值增大）
btn3.onclick = function () {
move(box2,"left",10,800)
}
//点击向下按钮后，使box2向下移动（top值增大）
btn4.onclick = function () {
move(box2,"width",10,800,function () {
move(box2,"height",10,400,function () {
})
})
}
};
</script>
</head>
<body>
<button id="btn1">BOX1右移</button>
<button id="btn2">BOX1左移</button>
<button id="btn3">BOX2右移</button>
<button id="btn4">BOX2下移</button>
<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>
tools.js文件：
/**
* 创建一个可以执行简单动画的函数
* @param obj：要执行动画的对象
* @param attr：要执行动画的样式，例如left，top，width
* @param speed：速度
* @param target：移动目标
* @param callback：回调函数，将会在动画执行完毕后执行
*/
function move(obj, attr, speed, target, callback) {
//关闭上一个定时器
clearInterval(obj.timer);
//判断速度的正负值
var currValue = parseInt(getStyle(obj,attr));
if (currValue > 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";
//当移动到800px时，停止
if (newValue == target){
clearInterval(obj.timer);
callback && callback();
}
},30)
};
/**
* 定义一个函数，获取指定元素的当前样式
* @param obj 要获取样式的元素
* @param name 要获取的样式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {
//正常浏览器，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
}else {
//IE8，没有getComputedStyle()方法
return obj.currentStyle[name];
}
};
图片轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 520px;
height: 333px;
margin: 50px auto;
background-color: greenyellow;
padding: 10px 0;
position: relative;
overflow: hidden;
}
#imgList{
list-style: none;
/*width: 2600px;*/
position: absolute;
/*left: -520px;*/
}
#imgList li{
float: left;
margin: 0 10px;
}
#navDiv{
position: absolute;
bottom: 15px;
}
#navDiv a{
/*设置超链接浮动*/
float: left;
width: 10px;
height: 10px;
background-color: red;
margin: 0 5px;
/*设置透明*/
opacity: 0.5;
/*兼容IE8透明*/
filter: alpha(opacity=50);
}
/*设置鼠标移入效果*/
#navDiv a:hover{
background-color: black;
}
</style>
<script type="text/javascript"src="js/tools.js"></script>
<script type="text/javascript">
window.onload = function () {
//获取imgList
var imgList = document.getElementById("imgList");
//获取页面中所有的img标签
var imgArr = document.getElementsByTagName("img");
//设置imgList的宽度
imgList.style.width = imgArr.length * 520 + "px";
//设置导航按钮居中
var navDiv = document.getElementById("navDiv");
var outer = document.getElementById("outer");
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
//默认显示图片的索引
var index = 0;
//获取所有的a
var allA = document.getElementsByTagName("a");
//设置默认选中的效果
allA[index].style.backgroundColor = "black";
//点击超链接切换到指定的图片
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 = index * (-520) + "px";
//修改正在选中的a
setA();
//使用move函数来切换图片
move(imgList, "left", 20, -520*index, 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 = "black";
}
//定义一个定时器标识
var timer;
//创建函数用来开启自动切换图片
function autoChange() {
//开启一个定时器来定时切换图片
timer = setInterval(function () {
//使索引自增
index++;
//判断index的值
index %= imgArr.length;
move(imgList,"left",20,-520*index,function () {
//修改导航按钮
setA();
})
},3000)
}
}
</script>
</head>
<body>
<!--创建一个外部的div，用来作为大的容器-->
<div id="outer">
<!--创建一个ul，用来放置图片-->
<ul id="imgList">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
<li><img src="img/1.jpg"></li>
</ul>
<!--创建导航按钮-->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
类的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.b1{
width: 100px;
height: 100px;
background-color: red;
}
.b2{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById("box");
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
//修改box样式：宽度
//通过style属性来属性元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面，性能较差，修改麻烦，耦合度高
/*box.style.width = "200px";
box.style.height = "200px";*/
//希望一行代码修改多个样式，可以通过修改元素的class的属性来间接修改样式，浏览器只需重新渲染一次，性能较好，耦合度低
//box.className += " b2";
//addClass(box,"b2");
//removeClass(box,"b2");
toggleClass(box,"b2");
};
};
/**
* 定义一个函数来向一个元素中添加指定的class属性值
* @param obj：要添加class属性的元素
* @param cn：要添加的class值
*/
function addClass(obj, cn) {
if (!hasClass(obj, cn)){
obj.className += " " + cn;
}
}
/**
* 判断一个元素中是否含有指定的class属性值
* @param obj
* @param cn
*/
function hasClass(obj, cn) {
var reg = new RegExp("\\b" + cn + "\\b");
return reg.test(obj.className);
}
/**
* 移除元素中指定的class属性
* @param obj
* @param cn
*/
function removeClass(obj, cn) {
var reg = new RegExp("\\b" + cn + "\\b");
obj.className = obj.className.replace(reg, "");
}
/**
* 切换类，有就删除，没有就添加
* @param obj
* @param cn
*/
function toggleClass(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>
二级菜单动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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="js/tools.js"></script>
<script type="text/javascript">
window.onload = function () {
//每一个菜单都是一个div，当div有collapsed类时，折叠，没有时展开
//点击菜单，切换菜单显示状态，获取所有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，获取当前点击的父元素
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;
}
}
/**
* 用来切换菜单折叠和显示状态
* @param obj
*/
function toggleMenu(obj) {
//在切换类之前，获取元素的高度
var begin = obj.offsetHeight;
//切换菜单parentDiv，就是去除和加上collapsed类
toggleClass(obj, "collapsed");
//在切换类之后，获取元素的高度
var end = obj.offsetHeight;
//动画效果就是将高度从begin向end过渡，将元素的高度重置为begin
obj.style.height = begin + "px";
//执行动画，从begin到end过渡
move(obj,"height",10,end,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>
JSON
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--如果需要兼容IE7及以下的JSON操作，则可以引入一个外部的JS文件来处理-->
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript">
/**
* JSON：JavaScript Object Notation
* - JS中的对象只有JS认识，其他语言不认识
* - JSON就是一个特殊格式的字符串，这个字符串可以被任意语言识别，并转化任意语言对象
* - JSON用于不同语言之间数据的传递
* - JSON和JS对象的格式一样，只是JSON字符串中的属性名必须加双引号
* - 分类：
* 1.对象{}
* 2.数组[]
* - JSON中允许的值：
* 1.字符串
* 2.数值
* 3.布尔值
* 4.null
* 5.对象
* 6.数组
*/
var obj1 = '{"name":"tom","age":18,"gender":"make"}';
var arr1 = '[1,2,3,"hello",true]';
/**
* JSON：将JSON字符串与JS中的对象相互转换，不支持IE7及以下
* - JSON.parse()：将JSON字符串转换为JS对象，返回对象
* - JSON.stringify()：将JS对象转换为JSON，返回字符串
*/
var obj2 = JSON.parse(obj1);
console.log(obj2.name); //输出tom
var arr2 = JSON.parse(arr1);
console.log(arr2[0]); //输出1
var obj3 = {"name":"tom","age":18,"gender":"make"};
var str1 = JSON.stringify(obj3);
console.log(str1); //输出{"name":"tom","age":18,"gender":"make"}
/**
* eval()：执行一段字符串形式的JS代码，并将执行结果返回
* - 如果使用eval()执行的字符串中含所有{}，它会将{}当成代码块
* - 如果不希望将其当成代码块解析，则需要在字符串前后各加一个()
* - 开发中尽量不要使用，执行性能较差，有安全隐患
*/
var str2 = '{"name":"tom","age":18,"gender":"make"}';
var obj = eval("(" + str2 + ")");
console.log(obj); //输出对象
</script>
</head>
<body>
</body>
</html>