尚硅谷JavaScript
JavaScript
[TOC]
一、简介
1、什么是语言
2、起源
现在已经不局限于前端验证
3、简史
4、实现
5、特点
二、Day1
1、HelloWorld
<!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>Document</title>
<!-- JS代码需要编写到script标签中 -->
<script type="text/javascript"> // 控制浏览器弹出一个警告框
// alert("这是我的第一行JS代码");
/*
让计算机在页面中输出一个内容
可以向body中输出一个内容
*/
// document.write("我是你写的内容");
// 向控制台输出一个内容
// console.log("我在控制台输出了");
// 依次从上往下执行
alert("这是我的第一行JS代码");
document.write("我是你写的内容");
console.log("我在控制台输出了"); </script>
</head>
<body>
</body>
</html>
2、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>Document</title>
<!--
可以将js代码编写到外部js文件中，然后通过script标签引入
写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制
-->
<!--
script标签一旦用于引入了外部文件了，就不能再标签内编写代码了
即使编写了浏览器也会忽略，如果需要则需要重新创建一个新的script标签用于编写内部代码
-->
<script type="text/javascript" src="js/script.js"> // alert("我是引入js文件标签的内部的js代码"); </script>
<script> alert("我是内部的js代码"); </script>
<!--
也可以将js代码写到script标签中
<script type="text/javascript">
alert("我是script标签中的代码");
</script>
-->
</head>
<body>
<!--
可以将js代码编写到标签的onclick属性中
当我们点击按钮时，js代码才会执行
虽然可以写在标签的属性中，但是他们属于结果和行为耦合，不方便维护，不推荐使用
-->
<button onclick="alert('讨厌，你点我干嘛！');">点我一下</button>
<!--
可以将js代码编写到超链接的href属性中
当我们点击超链接时，js代码才会执行
-->
<a href="javascript:alert('让你点你就点');">你也点我一下呗</a>
<a href="javascript:;">你也点我一下呗</a>
</body>
</html>
3、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>Document</title>
<script type="text/javascript"> // js注释
/*
多行注释
JS注释
多行注释，注释中内容不会被执行，但是可以在源代码查看
要养成良好的编写注释的习惯，也可以通过注释对代码进行一些简单的测试
*/
// 单行注释
// alert("hello");
// document.write("hello");
console.log("hello");//该语句用于在控制台输出一个日志
/**
* 1.JS中严格区分大小写
* 2.JS中每一条语句以分号(;)结尾
* 如果不写分号，浏览器会自动添加，但是会消耗一些系统资源
* 而且有些时候，浏览器会加错分号，所以在开发中分号必须写
* 3.JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化
*
*
*/ </script>
</head>
<body>
</body>
</html>
4、字面量和变量
<!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>Document</title>
<script type="text/javascript"> /**
* 字面量，都是一些不可改变的值
* 比如： 1 2 3 4 5
* 字面量都是可以直接使用的，但是我们一般都不会直接使用字面量
* 1341494914
* 变量可以用来保存字面量，而且变量的值是可以任意改变的
* 变量更加方便我们使用，所以在开发中我们都是通过变量去保存一个字面量
* 可以使用变量名对变量进行描述
*/
// alert(1494919);
// 声明变量
// 在js中使用var关键字来声明一个变量
var a;
// 为变量赋值
a=123;
a=456;
alert(a);
// 声明和赋值同时进行
var b = 123;
var c = 0;
var age = 80;
alert(age); </script>
</head>
<body>
</body>
</html>
5、标识符
<!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>Document</title>
<script text="javascript"> /**
* 标识符
* -在js中所有可以由我们自主命名的都可以称为标识符
* -例如：变量名、函数名、属性名都属于标识符
* -命令一个标识符时需要遵守如下的规则
* 1.标识符中可以含有字母、数字、_、$
* 2.标识符不能以数字开头
* 3.标识符不能是ES中的关键字或保留字
* 4.标识符一般都采用驼峰命名法
* -首字母小写，每个单词开头字母大写，其余小写
* helloworld -> helloWorld
*
* JS底层保存标识符时实际是采用的Unicode编码
* 所以理论上，所有的理论上讲所有的utf-8含有的内容都可以作为标识符
*
*/
var _good = 123
alert(_good); </script>
</head>
<body>
</body>
</html>
6、数据类型--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>Document</title>
<script> /**
* 数据类型指的就是字面量的类型
* 在JS中一共有六种数据类型
* String字符串
* Number 数值
* Boolean 布尔值
* Null 空值
* underfind 未定义
* Object 对象
*
* 其中String Number Boolean Null Undefind属于基本数据类型
* 而Object属于引用数据类型
*/
/**
* String 字符串
* -在Js中字符串需要使用引号引起来
* -使用双引号或单引号都可以,但是不要混着用
* -引号不能嵌套，单引号里不能放单引号，双引号里不能放双引号
*
*/
// var str = "hello";
var str = 'hello';
// str = "我说:" 今天真不错! "";
// 在字符串我们可以使用\作为转义字符
// 当表示一些特殊符号时可以使用\进行转义
// \" 表示 " \' 表示 ' \n 表示换行 \t 表示制表符 \\ 表示 \
str = "我说:\"今天真不错!\"";
// 输出字面量
alert("str");
// 输出变量
alert(str); </script>
</head>
<body>
</body>
</html>
7、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>Document</title>
<script> /**
* 在JS中所有数值都是Number类型，
* 包括整数和浮点数（小数）
*
*/
var a = 123;
var b = "123";
// a = 41781.24290
/**
* 可以使用一个运算符typeof
* 来检查一个变量的类型
* 语法:typeof 变量
*/
// console.log(a);
// console.log(b);
// console.log(typeof a);
// console.log(typeof b);
// JS中可以表示的数字的最大值
// Number.MAX_VALUE = 1.7976931348623157e+308
console.log(Number.MAX_VALUE);
var a = Number.MAX_VALUE * Number.MAX_VALUE;
// 如果使用Number的数字超过了最大值，则会返回一个Infinity表示正无穷
// Infinity表示正无穷，-Infinity表示负无穷，可以直接使用
// 使用typeof检查Infinity也会返回Number
console(a);
var c = Infinity;
console(c);
console(typeof c);
// NaN是一个特殊数字表示Not A Number
var d = "abc" * "hhh";
// 同样是字面量可以直接使用，使用typeof检查NaN也会返回Number
d = NaN;
alert(d);//NaN
alert(typeof d);//Number
// Number.MIN_VALUE表示大于0的最小值
var e = Number.MIN_VALUE;
alert(e);
// 在js中整数的运算基本可以保证精确
var f = 123 + 456;
alert(f);
// 如果使用JS进行浮点元素，可能得到一个不精确的结果
// 所以千万不要使用JS对精确度要求较高的计算
var g = 0.1 + 0.2;
alert(g);// !=0.3 </script>
</head>
<body>
</body>
</html>
8、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>Document</title>
<script> /**
* Boolean 布尔值
* 布尔值只有两个，主要用来做逻辑判断
* true
* 表示真
* false
* 表示假
* 使用typeof检查一个布尔值时，返回boolean
*/
var b = true;
alert(typeof b); </script>
</head>
<body>
</body>
</html>
9、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>Document</title>
<script> /**
* Null类型的值只有一个，就是null
* null这个值专门用来表示一个为空的对象
* 用typeof检查一个null值时，会返回object
*
*
* Undefined类型的值只有一个，就是undefined
* 当声明一个变量，但是不给变量赋值时，值就是undefined
* 使用typeof检查一个undefined时也会返回undefined
*
*/
var a = null;
alert(typeof a);
var b;
//可以当字面量使用
b = undefined;
alert(b);//undefined </script>
</head>
<body>
</body>
</html>
10、强制类型转换----转换为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>Document</title>
<script> /**
* 强制类型转换
* -指将一个数据类型强制转换为其他数据类型
* -类型转换主要指，将其他的数据类型转换为
* String Number Boolean
*
*
*/
// 将其他数据类型转换为String
/**
* 方式一:
* -调用被转换数据类型的toString()方法
* -该方法不会影响到原变量，他会将转换的结果返回
* -但是注意：null和undefined没有toString()方法，不能够转换为其他数据类型
* 如果调用他们的方法会报错！
* 方式二：
* -调用String()函数,并将转换的数据作为参数传给函数
* -使用String()函数做强制类型转换时，
* 对于Number和Boolean实际上就是调用的toString()方法
* 但是对于null和undefined，就不会调用toString()方法
* 他会将null直接转换为"null"
* 将undefined直接转换为"undefined"
*
*/
var a = 123;
// 调用a的toString()方法
a = a.toString();
a = true;
a = a.toString();
a = null;
// a = a.toStirng();报错
a = undefined;
// a = a.toString();报错
a = 123;
// 调用String()函数，来将a转换为字符串
a = String(a);
a = null;
a = String(a);
a = undefined;
a =String(a);
alert(typeof a);
alert(a); </script>
</head>
<body>
</body>
</html>
11、类型转换为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>Document</title>
<script> /**
* 将其他数据类型转换为Number
* 方式一：
* 使用Number()函数
* -字符串转为数字
* 1.如果是纯数字的字符串，则直接将其转换为数字
* 2.如果字符串中有非数字的内容，则转换为NaN
* 3.如果字符串是一个空串或者是一个全是空格的字符，则转换为0
* -布尔值转为数字
* true - 1
* false - 0
* -Null转为数字 - 0
* -undefined转为数字 - NaN
*
* 方式二：
* 这种方式专门用来应对字符串
* -parseInt()把一个字符串转换为整数
* -parseFloat()把一个字符串转换为一个浮点数
*
*/
var a = "123";
// 调用Number()函数转换为Number类型
a = Number(a);
var b ="abc";
b = Number(b);//转换不了
// alert(typeof b);
var c ="";
c = Number(c);
// alert(c);//0
var d = null;
d = Number(d);
// alert(d);
var e = undefined;
e = Number(e);
// alert(e);
// alert(typeof a);
// alert(a);
a = "123px9200";
// 调用parseInt()函数将a转换为Number
// 可以将一个字符串中的有效整数内容取出来然后转换为Number
// 从左往右读,当匹配到非数字字符后停止.如123a23 - 123
a = parseInt(a);
alert(a);//123
// parseFloat()作用和praseInt()类似，但是他可以有效的获取到小数位
a = "123.456px";
a = a.parseFloat(a);
alert(a);//123.456
// 如果对非String类型使用parseInt()或parseFloat()，他会先将其转换为String，然后再操作
a = true;
a = a.parseInt(a);
alert(a);//NaN </script>
</head>
<body>
</body>
</html>
12、其他进制的数字
<!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>Document</title>
<script> var a = 123;
/**
* 在js中，如果需要表示16进制的数字，则需要以0x开头
* 如果需要表示8进制的数字，则需要以0开头
* 如果要表示2进制的数字，则需要以0b开头，但是不是所有浏览器都支持。
*/
// 十六进制
a = 0x10;
// 八进制数字
a = 080;
// 二进制数字
a = 0b10;
//像这种类型的字符串，有些浏览器会当成八进制解析，有些会当成十进制解析
var b = "070";
// 可以在parseInt()中传递一个第二个参数，来指定数字的进制
b = parseInt(b,10);//10表示使用十进制
alert(b);//70
alert(a); </script>
</head>
<body>
</body>
</html>
13、数据类型转换为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>Document</title>
<script> /**
* 将其他数据类型转回为Boolean
* 使用Boolean()函数
* 数字转布尔
* 除了0和NaN，其余都是true
* 字符串转布尔
* 除了空串，其余都是true
* null和undefined都会转换为false
* 对象也会转换为true
* 方式二：
* 为任意类型取两次反即可转换为布尔类型，原理与Boolean()函数一样
*/
var a =123;//true
a = -123;//true
a = 0;//false
a = Infinity; //true
a = NaN; // false
a = "hello";//true
a = "";//false
a =" ";//true
a = null;//false
a = undefined;//false
// 调用Boolean()函数来将a转换为布尔值
a = Boolean(a);
alert(typeof a);
alert(a); </script>
</head>
<body>
</body>
</html>
14、运算符
<!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>Document</title>
<script> /**
* 运算符也叫操作符
* 通过运算符可以对一个或多个值进行计算，并获取运算结果
* 比如：typeof就是运算符，可以来获得一个值的类型
* 他会将该值的类型以字符串的形式返回
* 任何值和NaN做运算，得到的还是NaN
* number string boolean undefined object
* 算数运算符：不会对原变量影响
* 对非数字的数据类型，会先将他们转换为number类型后计算
* + 可以对两个值进行加法运算，并将结果返回
* 如果对两个字符串进行加法运算，则会拼串.
* 任何值和字符串做加法运算，都会转换为字符串，然后再和字符串做拼串的操作
* - 可以对两个或多个值进行减法运算
* * 可以对两个或多个值进行乘法运算
* / 可以对两个或多个值进行除法运算
* % 取模运算，求余数
*
*/
var a = 123;
var result = typeof a;
// alert(result);//number
// alert(typeof result);//string
a = a + 1;
// alert(a);//124
a = true + 1;
// alert(a);//2
a = 1 + null;
// alert(a);//2
a = 1 + NaN;
// alert(NaN);//NaN
a = "123" + "456";
// alert(a);//"123456"
a = 123 + "hello";
// alert(a);//"123hello"
// 可以利用这个特点，将数据类型转换为string
var c = 123;
//隐式的类型转换，实际上也是调用了String()函数
c = c + "";
// alert(typeof c);//String
// alert("c="+c);
a = 1 + 2 + "3";
// alert("a="+a);//33
a = "1" + 2 + 3;
// alert("a="+a);//123
a = 100 - 5;
// alert(a);//95
a = 100 - true;
// alert(a);//99
a = 100 - "1";
// alert(a);//99
a = 2 * 2;
// alert(a);//4
a = 2 * "8";
// alert(a);//16
a = 2 * undefined;
// alert(a);//NaN
a = 2 * null;
// alert(a);//0
a = 2 / 2;
// alert(a);//1
// 任何值做- * / 运算都会自动转换为Number
var d = "123";
// 所以可以通过以下方法转换为number类型
// 原理和Number()函数一样，但是使用起来更加简单
d = d - 0;
d = d * 1;
d = d / 1;
a = 9 % 3;
// alert(a);//3 </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>Document</title>
<script> /**
* 一元运算符，只需要一个操作数
* + 正号 不会对数字产生任何影响
* - 负号 对数值进行取反
*
* 对于非Number类型的值。会先转换为number再计算
* 可以对一个其他的数据类型使用+，使其转换为Number类型
* 原理和Number()函数一样
*/
var a = 123;
a = +a;
a = -a;
// alert(a);
var b = true;
b = -b;
// alert(b);//-1
var c = "18";
c = -c;
c = +c;
// alert(c);//18
var result = 1 + +"2" + 3;
alert(result);//6 </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>Document</title>
<script> /**
* 自增
* -通过自增可以使变量在自身的基础上增加1
* -对一个变量自增后，原变量的值会立即自增1
* -自增分为两种
* a++
* ++a
* -无论是a++还是++a，都会立即使原变量的值自增1
* 不同的是a++和++a的值不同
* a++的值等于原变量的值（自增前的值）
* ++a的值等于自增后的值
*
* 自减
* -通过自减可以让变量在自身的基础人减少1
* -自减分成两种：a-- 和 --a
* 无论是--a和a--都会立即使原变量的值立即减少1
* 不同的是--a和a--的值不同
* a--是变量的原值
* --a是自减后的值
*
*/
var a = 1;
// a++;
// ++a;//这个等同于a=a+1;
// alert(++a);
// alert(a++);
// alert(a);//2
var c =10;
// 使c自增1
c++;
// alert(c++);//11
var d = 20;
// alert(++d);//21
// var result = d++ + ++d + d;
// alert(result);//20+22+22=64
d = d++;
// alert(d);//20
var e = 10;
// e--;
// alert(e);//9
alert(--e);//9
alert(e--);//10 </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>Document</title>
<script> var n1 = 10,n2=20;
var n = n1++;
console.log('n='+n);//10
console.log('n1='+n1);//11
n = ++n1;
console.log('n='+n);//12
console.log('n1='+n1);//12
n = n2--;
console.log('n='+n);//20
console.log('n2='+n2);//19
n = --n2;
console.log('n='+n);//18
console.log('n2='+n2);//18 </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>Document</title>
<script> /**
* JS中为我们提供了三种逻辑运算符
* ！非
* -!可以用来对一个值进行非运算
* 所谓非运算就是指对一个布尔值进行取反操作
* true变false，false变true
* 如果对非布尔值进行取反，则会先转换为布尔值再进行取反
* 所以我们可以利用这个特点将一个数据转换为布尔值
* 为任意数据类型取两次反，来将其转换为布尔值
* 原理和Boolean()函数一样
* && 与
* -可以对符号两侧的值进行与运算并返回结果
* -运算规则：如果两端都是true返回true，只要有一个false就返回false
* -JS中的与属于短路的与，如果第一个为false，则不会执行第二个
*
* || 或
* -可以对符号两侧的值进行或运算并返回结果
* -运算规则：两个都是false返回false，只要有一个true就返回true
* -JS中的或属于短路的或，如果第一个为true，则不会执行第二个
*/
var a = true;
a = !a;
// console.log(a);//false
var b = 10;
b = !b;
// console.log(b);//false
// 如果两端都是true返回true，只要有一个false就返回false
var result = true && false;
// console.log(result);
result = false && alert("我不会执行");
// console.log(result);//false
// 两个都是false返回false，只要有一个true就返回true
var r = false || true;
// console.log(r);//true
r = true || alert("hello");
console.log(r);//true </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>Document</title>
<script> /**
* &&和|| 非布尔值的情况
* 对于非布尔值进行与和或运算时，会现将数据转换为布尔类型，再进行运算，并且返回原值
* 注意返回的是原值！！！
* -与运算：
* 如果第一个值为true，必然返回第二个值
* 如果第一个值为false，必然返回第一个值
* -或运算
* 如果第一个为true，直接返回第一个值
* 如果第一个值为false，则直接返回第二个值
*/
// 如果两个都是true，则返回后边的
var result = 1 && 2;
// console.log(result);//不是true而是2
// 如果两个值都是false，则返回前边的
result = 0 & NaN;
// 如果第一个是false直接返回第一个
// 如果第一个为true，直接返回第一个值
result = 1 || 2;
// console.log(result);//1
// 如果第一个值为false，则直接返回第二个值
result = 0 || 2;
// console.log(result);//2
result = "" || "hello";
// console.log(result);//hello </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>Document</title>
<script> /**
* =
* 可以将符号右侧的值赋值给符号左侧的变量
* +=
* 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;
*
*/
var a =123;
// console.log(a);//123
a +=5;//a=a+5;
// console.log(a);//128 </script>
</head>
<body>
</body>
</html>
三、Day2
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>Document</title>
<script> /**
* 通过关系运算符可以比较两个值之间的大小关系
* 如果关系成立会返回true，如果关系不成立则返回false
*
* > 大于号
* -判断符号左边的值是否大于右边的值
* -如果关系成立会返回true，如果关系不成立则返回false
* >= 大于等于
* -判断符号左边的值是否大于等于右边的值
* -如果关系成立会返回true，如果关系不成立则返回false
*
* < 小于号
* -判断符号左边的值是否小于右边的值
* -如果关系成立会返回true，如果关系不成立则返回false
* <= 小于等于
* -判断符号左边的值是否小于等于右边的值
* -如果关系成立会返回true，如果关系不成立则返回false
*
*
* 非数值的情况
* -对于非数值情况会先转换成number再做运算
* -对于符号两侧都是字符串的情况，不会将其转换为数字进行比较，而会分别比较字符串中字符的Unicode编码
*
*
*/
var result = 5 > 10;//false
result = 5>=5;//true
result = 4<5;//true
result = 5<=3;//false
// console.log(result);
console.log(1>true);//false
console.log(1>=true);//true=1
console.log(1>"0");//true
console.log(10>null);//true
//任何值和NaN做任何比较都是false
console.log(10<="hello");//false
console.log("1"<"5");//true
console.log("11"<"5");//true
// 比较两个字符串时，比较的是字符串的编码
console.log("a"<"b");//true
// 比较两个字符时，是一位一位进行比较的
// 如果两位一样，则比较下一位，所以借用它对英文进行排序
console.log("abc"<"b");
console.log("abc"<"bcd");
// 比较中文时没有意义
// console.log("你">"我");
// 如果比较的两个字符串型的数字，可能会得到不可预期的结果
// 注意：在比较两个字符串型的数字时，一定要转型
console.log("122114"< +"5");//false </script>
</head>
<body>
</body>
</html>
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>Document</title>
<script> // 在字符串中使用转义字符输入Unicode编码
// \u四位编码
console.log("\u2620"); </script>
</head>
<body>
<!-- 在网页中使用Unicode编码
&#编码; 这里的编码使用的是10进制编码 -->
<h1 style="font-size: 200px">☠</h1>
66666
</body>
</html>
四、Day3
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>Document</title>
<script> /**
* 相等运算符用来比较两个值是否相等
* 如果相等会返回true，否则返回false
*
* 使用==来做相等运算
* -当使用==来比较两个值时，如果值的类型不同，
* 则会自动进行类型转换，将其转换为相同的类型再进行比较
*
* 不相等 ，用来比较两个值是否不相等，不相等返回true，否则false
* 使用！= 来做不相等运算
* 不相等也会对变量进行自动的类型转换，如果转换后相等则返回false
*
* ===
* 全等
* 用来判断两个值是否全等，和相等类似，不同的是不会自动转换类型
* 类型不同直接转换为false
*
* !==
* 不全等
* 不会进行类型转换的不相等
*/
var a = 10;
console.log(a==4);//false
console.log("1"==1);//true
console.log(true=="1");//true,都是转为number
console.log(null==0);//false
// undefined 衍生自null
// 所以这两个值做相等判断时，会返回true
console.log(undefined==null);//true
// NaN不和任何值相等，包括本身
console.log(NaN==NaN);//false
var b = NaN;
// 判断b的值是否是NaN
console.log(b==NaN);//false
// 可以通过isNaN()函数来判断
// 是则返回true，否则false
console.log(isNaN(b));
console.log("1"!= 1);//false
console.log("1"===1);//false
console.log(null===undefined);//false
console.log("1" !== 1);//true </script>
</head>
<body>
</body>
</html>
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>Document</title>
<script> /**
* 条件运算符也叫三元运算符
* 语法：
* 条件表达式?语句1:语句2
* 执行的流程：
* 条件运算符在执行的时候，首先对表达式进行求值，
* 如果该值为true，则执行语句1，并返回执行结果
* 如果该值为false，则执行语句2，并返回执行结果
*
* 如果条件的表达式的求值结果是一个非布尔值，则
* 会将其转换为布尔值再进行运算
*/
true?alert("666"):alert("111");//666
var a = 10;
var b = 20;
a > 20 ? alert(a):alert(b);
// 获取a和b中的最大值
var max = a > b ? a : b;
// alert(max);
// 获取a，b，c中的最大值
// 这种写法可读性极差，极不推荐
var max = a > b ? (a > c ? a : c) : ( b > c ? b : c ) ;
alert(max);
"hello"?alert("666"):alert("111"); </script>
</head>
<body>
</body>
</html>
3、运算符的优先级
<!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>Document</title>
<script> /**
* ,运算符
* 可以分割多个语句，一般在声明多个变量的时候使用
*/
var a,b,c;
//可以同时声明多个变量，也可同时赋值
var a=1,b=2,c=3;
/**
* 和数学中一样，在js中运算符也有优先级
* 比如：先乘除后加减
*
* 在js中有一个运算符优先级的表，
* 在表中越靠上优先级越高，优先级越高越优先计算
* 如果优先级一样，则从左往右计算
* 但是这个表我们并不需要记忆，如果遇到优先级不清楚的使用（）括起来
*
*/
// var result = 1 + 2 * 3;
// 如果或的优先级高，或者两个一样高，则返回3
// 如果与的优先级高，则返回1
var result = 1 || 2 && 3;//1 </script>
</head>
<body>
</body>
</html>
4、代码块
<!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>Document</title>
<script> /**
* 我们的程序是由一条一条语句构成的
* 语句是按照从上向下的顺序一条一条执行的
* 在JS中可以使用{}来为语句进行分组，
* 同一个{}中的语句我们称为是一组语句
* 他们要么都执行，要么都不执行
* 一个{}中的语句我们也称为一个代码块
*
* JS中的代码块，只具有分组的作用，没有其他的作用
* 代码块中的内容，在外部是完全可见的
*/
{
var a = 10;
alert("hello");
console.log("你好");
document.write("代码块");
}
alert(a); </script>
</head>
<body>
</body>
</html>
5、流程控制语句
<!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>Document</title>
<script> /**
* 流程控制语句
* -JS中的程序是从上到下一行一行执行的
* -通过流程控制语句可以控制程序执行流程
* 使程序可以根据一定的条件来选择执行
* -语句的分类：
* 1条件判断语句
* 2条件分支语句
* 3循环语句
*
* 条件判断语句：
* -使用条件判断语句可以在执行某个语句之前进行判断，
* 如果条件成立才会执行语句，条件不成立则语句不执行
* -if语句
* -语法一：
* if(条件表达式){
* 语句1
* ....
* }
* if语句在执行时，会先对条件表达式进行求值判断，
* 如果条件表达式的值为true，则执行if后的语句
* 如果条件表达式的值为false，则不会执行if后的语句
* if语句执行控制紧随其后的那个语句
* 如果希望if语句可以控制多条语句，可以将这些语句统一放在代码块中
* if语句后代码块不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句
*/
if(true)
alert("你猜我出来吗？");
var a = 10;
if(a>10)
alert("a比10大");
alert("谁也管不了我");
if(a>10){
alert("a比10大");
alert("现在有人管我了");
}
var a = 15;
if(a>10 && a<=20){
alert("a大于10,并且a小于等于20");
}
if(a>10 || a<=20){
alert("a大于10,并且a小于等于20");
} </script>
</head>
<body>
</body>
</html>
五、Day4
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>Document</title>
<script> /**
* 流程控制语句
* -JS中的程序是从上到下一行一行执行的
* -通过流程控制语句可以控制程序执行流程
* 使程序可以根据一定的条件来选择执行
* -语句的分类：
* 1条件判断语句
* 2条件分支语句
* 3循环语句
*
* 条件判断语句：
* -使用条件判断语句可以在执行某个语句之前进行判断，
* 如果条件成立才会执行语句，条件不成立则语句不执行
* -if语句
* -语法一：
* if(条件表达式){
* 语句1
* ....
* }
* if语句在执行时，会先对条件表达式进行求值判断，
* 如果条件表达式的值为true，则执行if后的语句
* 如果条件表达式的值为false，则不会执行if后的语句
* if语句执行控制紧随其后的那个语句
* 如果希望if语句可以控制多条语句，可以将这些语句统一放在代码块中
* if语句后代码块不是必须的，但是在开发中尽量写上代码块，即使if后只有一条语句
*/
if(true)
alert("你猜我出来吗？");
var a = 10;
if(a>10)
alert("a比10大");
alert("谁也管不了我");
if(a>10){
alert("a比10大");
alert("现在有人管我了");
}
var a = 15;
if(a>10 && a<=20){
alert("a大于10,并且a小于等于20");
}
if(a>10 || a<=20){
alert("a大于10,并且a小于等于20");
} </script>
</head>
<body>
</body>
</html>
六、Day5
1、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>Document</title>
<script> /**
* if语句
* 语法二：
* if(条件表达式){
* 语句...
* }else{
* 语句...
* }
* 当语句执行时，会先对if后的条件表达式进行求值判断，
* 如该值为true，则执行if后的语句
* 如该值为false，则执行else后的语句
*
* 语法三：
* if(条件表达式){
* 语句...
* }else if(条件表达式){
* 语句...
* }else {
* 语句...
* }
*
* 从上到下依次对条件表达式进行求值判断
* 该语句只会有一个代码块执行
* 注意条件逻辑的顺序
*/
var age = 50;
if(age>=60){
alert("你该退休了");
}else{
alert("你还不用退休");
} </script>
</head>
<body>
</body>
</html>
2、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>Document</title>
<script> /**
* 从键盘输入小明的期末成绩
* 当成绩为100时，‘奖励一辆BMW’
* 当成绩为80-90时，奖励一台iphone14
* 当成绩为60-80时，奖励参考书
* 当其他时，奖励大嘴巴子
*/
// var scode = 50;
// prompt();可以弹出一个提示框，该提示框会带有一个文本框
// 用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数
// 该字符串将会作为提示框的提示文字
// 用户输入的内容将作为函数的返回值返回，可以定义一个变量来接收该内容
var score = prompt("请输入小明的期末成绩");
if(score==100){
alert("BWM");
}else if(score>=80 && score<=90){
alert("iphone14");
}else if(score>=60 && score<80){
alert("参考书");
}else{
alert("大嘴巴子");
} </script>
</head>
<body>
</body>
</html>
3、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>Document</title>
<script> /**
* 女方嫁女儿，条件：
* 高：180cn以上，富：1000万以上，颜值：90以上
* 如果三个条件都满足，则“我一定要嫁给他”
* 如果只有其中一个条件满足，则“嫁吧，比上不足比下有余”
* 如果三个条件都不满足，则："不嫁"
*/
var height = prompt("你多高啊？");
var money = prompt("你有多少钱？");
var appearance = prompt("你长什么样？");
if(height>=180&&money>=1000&&appearance>=90){
alert("我要嫁给你！");
}else if(height>=180||money>=1000||appearance>=90){
alert("还行吧，就嫁你了");
}else{
alert("算了，不嫁了");
} </script>
</head>
<body>
</body>
</html>
4、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>Document</title>
<script> // 键盘输入三个整数，对他们进行排序，并且从小到大输出
/**
* 返回值是String类型的
*/
var num1 = +prompt("请输入第一个整数");
var num2 = +prompt("请输入第二个整数");
var num3 = +prompt("请输入第三个整数");
// 找到最小的
if(num1<num2 && num1<num3){
// num1最小，比较num2和num3
if(num2<num3){
// num2小
alert(num1+","+num2+","+num3);
}else{
alert(num1+","+num3+","+num2);
}
}else if(num2<num1&&num2<num3){
// num2最小，比较num1和num3
if(num1<num3){
// num1小
alert(num2+","+num1+","+num3);
}else{
alert(num2+","+num3+","+num1);
}
}else{
// num3最小，比较num2和num1
if(num2<num1){
// num2小
alert(num3+","+num2+","+num1);
}else{
alert(num3+","+num1+","+num2);
}
} </script>
</head>
<body>
</body>
</html>
5、条件分支语句
<!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>Document</title>
<script> // 条件分支语句也叫switch语句
// 根据num的值，输出对应的中文
/**
* 语法：
* switch(条件表达式){
* case 条件表达式:
* 语句
* break;
* case 条件表达式:
* 语句
* break;
* case 条件表达式:
* 语句
* break;
* case 条件表达式:
* 语句
* break;
* defaukt:
* 语句
* break;
* }
*
* 执行流程：
* switch...case...语句
* 在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较
* 如果比较结果为true，则从当前case处开始执行代码
* 如果比较结果为false，则继续向下比较
* 注意：如果case分支没有break，则会往下执行到代码结束
* 如果所有case语句条件都不满足。则执行default语句
*/
var num = +prompt("请输入一个4以内的整数：");
switch(num){
case 1 :
alert("一");
break;
case 2 :
alert("二");
break;
case 3 :
alert("三");
break;
case 4 :
alert("四");
break;
default:
alert("只能在4以内哦");
} </script>
</head>
<body>
</body>
</html>
6、switch语句练习
<!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>Document</title>
<script> /**
* 对于成绩大于60分的，输出“合格”，低于60分的，输出不合格
* 6x / 10 = 6
* 7x / 10 = 7
* ...
*/
/* var score = 60;
switch(parseInt(score/10)){
case 10:
case 9:
case 8:
case 7:
case 6:
alert("合格");
break;
default:
alert("不合格");
break;
} */
var score = 60;
switch(true){
case score>=60:
alert("合格");
break;
default:
alert("不合格");
break;
} </script>
</head>
<body>
</body>
</html>
7、循环语句
<!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>Document</title>
<script> /*
向网页中输出连续数字
*/
document.write(1+"<br />");
document.write(2+"<br />");
document.write(3+"<br />");
document.write(4+"<br />");
/*
循环语句：
通过循环语句可以反复执行一段代码多次
while循环
-语法：
while(条件表达式){
语句（循环体）
...
}
- while语句在执行时，
先对条件表达式进行求值判断，
如果值为true，则执行循环体，
循环体执行完毕后，继续对表达式进行判断
如果为true则继续执行循环体，以此类推，
直到为false时退出
do...while循环
语法：
do{
语句...
}while(条件表达式)
执行流程：
在执行时，先执行循环体，
循环体执行完毕后，再对while的条件表达式进行判断
如果为true，继续执行循环体，以此类推，
直到为false时退出循环
实际上这两个语句功能类似，
但是注意do...while一定会执行一次
*/
/**像这种将条件表达式写为true的循环，叫做死循环
* 该循环不会停止·，，除非浏览器关闭，死循环在开发中慎用
* 可以使用break，来终止循环
*
*/
// while(true){
// alert(n++);
// if(n==10){
// break;
// }
// }
// 创建一个循环，往往要有三个步骤
// 1初始化一个变量
var i = 0;
// 2在循环中设置一个条件表达式
/* while(i<=10){
// alert(i);
// 3定义一个更新表达式，每次更新初始化变量
// if(i==3){
// continue;
// }
document.write(i++ +"<br />");
i++;
} */
do{
document.write(i++ +"<br />");
}while(i<=10) </script>
</head>
<body>
</body>
</html>
8、while循环语句练习
<!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>Document</title>
<script> /**
* 假如投资的年利率为5%，试求从1000块增长到5000块，需要花费多少年
*
* 1000 1000*1.05
* 1050 1050*1.05
*/
// 定义一个变量，表示本金
var money = 1000;
var i = 0;
while(money<5000){
money = money*1.05;
// 年数+1
i++;
}
alert("花费了"+i+"年,"+"得到了"+money+"元"); </script>
</head>
<body>
</body>
</html>
七、Day6
1、while练习
<!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>Document</title>
<script> /**
* 从键盘输入小明的期末成绩
* 当成绩为100时，‘奖励一辆BMW’
* 当成绩为80-90时，奖励一台iphone14
* 当成绩为60-80时，奖励参考书
* 当其他时，奖励大嘴巴子
*/
// var scode = 50;
// prompt();可以弹出一个提示框，该提示框会带有一个文本框
// 用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数
// 该字符串将会作为提示框的提示文字
// 用户输入的内容将作为函数的返回值返回，可以定义一个变量来接收该内容
while(true){
var score = prompt("请输入小明的期末成绩");
if(score>=0&&score<100){
break;
}
alert("请输入有效的分数");
}
if(score==100){
alert("BWM");
}else if(score>=80 && score<=99){
alert("iphone14");
}else if(score>=60 && score<80){
alert("参考书");
}else{
alert("大嘴巴子");
} </script>
</head>
<body>
</body>
</html>
2、for循环
<!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>Document</title>
<script> /*
for语句。也是一个循环语句，也成为for循环
在for循环中，为我们提供了专门位置用来放三个表达式
1、初始化表达式
2、条件表达式
3、更新表达式
for循环的语法：
for(初始化表达式，条件表达式，更新表达式){
语句...
}
执行流程：先初始表达式，初始变量，只执行一次
再条件表达式，判断是否执行循环
最后更新表达式，继续执行条件表达式判断是否执行循环
*/
// 创建一个执行10次的while循环
// 初始化表达式
/* var i = 0;
// 创建一个循环，定义条件表达式
while(i<10){
// 设置更新表达式
alert(i++);
} */
for(var i = 0; i < 10 ; i++){
alert(i);
}
// for语句中三部分都可以省略，也可以写在外部
for(;i<10;){
alert(i++);
}
// 如果for循环中不写任何表达式，则变成死循环
for(;;){
alert("hello");
} </script>
</head>
<body>
</body>
</html>
3、for循环练习
<!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>Document</title>
<script> var result = 0;
for(var i = 1 ; i < 100 ; i++){
if(i%2!=0){
result = result + i;
}
}
alert(result); </script>
</head>
<body>
</body>
</html>
4、for循环练习-----100内7的倍数
<!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>Document</title>
<script> var result = 0;
var j=0;
for(var i=1;i<100;i++){
if(i%7==0){
result = result+i;
j++;
}
}
alert("100以内7的倍数的个数为："+j+"个，"+"总和为："+result); </script>
</head>
<body>
</body>
</html>
5、for循环练习----水仙花数
<!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>Document</title>
<script> // 水仙花数是指一个3位数，他的每位数的3次幂之和等于他的本身
// 求1000以内的水仙花数
for(var i=100;i<1000;i++){
// 个位数
var a=i%10 ;
// 十位数
var b= parseInt(i%100/10);
// 百位数
var c =parseInt(i/100);
if(a*a*a + b*b*b + c*c*c==i){
console.log(i);
}
}
// </script>
</head>
<body>
</body>
</html>
6、for循环练习
<!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>Document</title>
<script> /**
* 在页面中接收一个用户输入的数字，判断该数是否为质数
*
*/
var num = prompt("请输入一个大于1的整数：");
// 判断值是否合法
if(num<1){
alert("该数不合法！");
}else{
// 创建变量保存当前状态
var flag = true;
// 判断是否为质数
// 获取2-num之间的数
for(var i = 2;i<num;i++){
// console.log(i);
// 判断num是否能给i整数
if(num%i==0){
//num不是质数
flag=false;
}
}
// num是质数
if(flag){
alert(num + "是质数");
}else{
alert(num+"不是质数");
}
} </script>
</head>
<body>
</body>
</html>
7、嵌套的for循环
<!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">
<script> /*
通过程序，输出如下的图形：
*
**
***
****
...
*/
for(var i=0;i<10;i++){
for(var j=0;j<=i;j++){
document.write("*");
}
document.write("<br />");
}
// 页面的控制台默认独占一块，不同的consloe语句，输出在不同行，同一个可以用换行符隔开
// console.log("111"+"\n"+"222");
document.write("<br />");
document.write("<br />");
for(var i=10;i>=0;i--){
for(var j=0;j<i;j++){
document.write("*");
}
document.write("<br />");
}
document.write("<br />");
document.write("<br />");
for(var i=0;i<10;i++){
for(var j=0;j<10-i;j++){
document.write("*");
}
document.write("<br />");
}
document.write("<br />");
document.write("<br />");
for(var i=10;i>=0;i--){
for(var j=10-i;j>0;j--){
document.write("*");
}
document.write("<br />");
} </script>
<title>Document</title>
</head>
<body>
</body>
</html>
8、打印99乘法表
<!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>Document</title>
<script> // 打印乘法表
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> body{
width: 1000px;
}
span{
display: inline-block;
width: 80px;
} </style>
</head>
<body>
</body>
</html>
9、打印出1-100的所有质数
<!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>Document</title>
<script> for(var i=2;i<=100;i++){
var flag=true;
for(var j=2;j<i;j++){
if(i%j==0){
flag=false;
}
}
if(flag){
console.log(i);
}
} </script>
</head>
<body>
</body>
</html>
八、Day7
1、break和continue
<!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>Document</title>
<script> // break关键字可以用来退出switch或循环语句
// 不能在if语句中使用break和continue
// break关键字，会立即终止最近的那个循环语句，嵌套循环一个break只跳出一层
/* for(var i=0;i<5;i++){
console.log(i);
break;
} */
// 这种写法没问题，break对for起作用
/* for(var i=0;i<5;i++){
console.log(i);
if(i==2){
break;
}
} */
/* for(var i=0;i<5;i++){
console.log("@外层循环");
for(var j=0;j<5;j++){
break;
console.log("@内层循环");
}
} */
// 可以为循环语句创建一个label，来标记当前的循环
// 语法： 标签名:循环语句
/*
使用break语句时，可以在break后跟着一个标签名，
这样break将会结束指定的循环，而不是最近的
*/
/* outer:
for(var i=0;i<5;i++){
console.log("@外层循环");
inner:
for(var j=0;j<5;j++){
console.log("@内层循环");
break outer;
}
} */
/*
continue用来跳过当次循环
同样continue也是默认只对离他最近的循环起作用
*/
/* for(var i=0;i<5;i++){
if(i==2){
continue;
}
console.log(i);
} */
/* for(var i=0;i<5;i++){
for(var j=0;j<5;j++){
if(j==1){
continue;
}
console.log("@内层循环"+j);
}
console.log("@外层循环"+i);
} */
outer:
for(var i=0;i<5;i++){
inter:
for(var j=0;j<5;j++){
if(j==1){
continue outer;
}
console.log("@内层循环"+j);
}
console.log("@外层循环"+i);
} </script>
</head>
<body>
</body>
</html>
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>Document</title>
<script> console.time("a");
for(var i=2;i<=100000;i++){
// 计算程序执行时间
/*
开启计时器
参数是计时器的名字，这个参数是计时器的标识
*/
var flag=true;
var result = Math.sqrt(i);
for(var j=2;j<=result;j++){
if(i%j==0){
flag=false;
// 现在i已经不可能是是质数了，可以直接退出循环
break;
}
}
if(flag){
// console.log(i);
}
}
// console.timeEnd()用来停止一个计时器，需要一个计时器的名字作为参数
console.timeEnd("a");
/*
36
1 36
2 18
3 12
4 9
6 6
*/
// 开方
/* var result = Math.sqrt(16);\
console.log(result); */ </script>
</head>
<body>
</body>
</html>
3、对象
<!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>Document</title>
<script> /*
JS中的数据类型
- String 字符串
-Number 数值
- Boolean 布尔值
- Null 空值
- Undefined 未定义
以上五种类型属于基本数据类型，以后我们看到的值
只要不是上边的五种，就全都是对象
- Object
基本数据类型都是单一的值"Hello" 123 true,
值之间没有任何的联系
var name = "swk";
var gender = "男";
var age = 18;
如果使用基本数据类型表示，这些变量都是独立的，不能成为一个整体
对象属于一种复合的数据类型，在对象中可以保存多个不同的数据类型的属性
对象的分类：
1、内建对象
-由ES标准中定义的对象，在任何的ES的实现中都可以使用
-比如：Math String Number Boolean Function Object .....
2、宿主对象
-有JS的运行环境提供的对象，目前主要指由浏览器提供的对象
-比如 BOM DOM
3、自定义对象
-由开发人员自己创建的对象
*/
// 创建对象
/*
使用new关键字调用的函数，是构造函数construtor
构造函数是专门用来创建对象的函数
使用typeof检查一个对象是，会返回object
*/
var obj = new Object();
// console.log(obj);
// console.log(typeof Obj);
/*
在对象中保存的值称为属性
向对象添加属性
语法：对象.属性名 = 属性值;
*/
obj.name = "孙悟空";
obj.gender = "男";
obj.age = 18 ;
console.log(obj);
/*
读取对象中的属性
语法：
对象.属性名
如果读取对象中没有的属性，不会报错而返回undefined
*/
var name = obj.name;
console.log(name);
/*
修改对象的属性值
语法： 对象.属性名 = 属性值 ;
*/
obj.name = "Tom";
console.log(obj.name);
/*
删除对象的属性
语法： delete 对象.属性名;
*/
delete obj.name; </script>
</head>
<body>
</body>
</html>
4、对象的属性名和属性值
<!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>Document</title>
<script> var obj = new Object();
/*
向对象中添加属性
属性名：
-对象的属性名不强制要求遵守标识符的规定
什么乱七八糟的名字都可以使用
- 但是我们使用时还是尽量按照标识符的规范去做
*/
obj.name = "孙悟空";
// obj.var = "Tom";
/*
如果需要使用特殊的属性名，不能采用.的方式来操作
需要使用另一种方式
语法: 对象["属性名"] = 属性值 ;
读取属性时也要采用这种方式
使用[]这种方式去操作属性，更加的灵活
在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性
*/
obj["123"] = 789;
// console.log(obj["123"]);
var n = "123";
obj[n] = "hello";
// console.log(obj[n]);
/*
属性值
JS对象的属性值，可以使任意的数据类型
甚至是一个对象
*/
obj.test = true;
obj.test = null;
obj.test = undefined;
// console.log(obj.test);
// 创建一个对象
var obj2 = new Object();
obj2.name = "猪八戒";
obj2.age = 500;
// 将obj2设置为obj的属性
obj.test = obj2;
console.log(obj);
console.log(obj.test);
console.log(obj.test.name);
/*
in运算符
-通过该运算符可以查看一个对象是否含有指定的属性
如果月返回true，没有则返回false
-语法：
"属性名" in 对象
*/
console.log("test2" in obj); </script>
</head>
<body>
</body>
</html>
5、基本和引用数据类型
<!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>Document</title>
<script> /*
基本数据类型
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 = "swk";
var obj2 = obj;
obj.name = "我变了";
/* console.log("obj的name="+obj.name);
console.log("obj2的name="+obj2.name); */
obj2 = null;
/* console.log(obj);
console.log(obj2); */
var c = 10;
var d = 10;
// console.log(c==d);
var obj3 = new Object();
var obj4 = new Object();
obj3.name = "沙和尚";
obj4.name = "沙和尚";
/*
*/
console.log(obj3.name==obj4.name);//false </script>
</head>
<body>
</body>
</html>
6、对象字面量
<!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>Document</title>
<script> /*
创建一个对象
var obj = new Object():
使用字面量创建一个对象
var obj = {}
*/
var obj = {};
console.log(obj);
obj.name = "Tom";
// 使用对象字面量。可以在创建对象时，直接指定对象中的属性
// 对象字面量的属性名可以加引号也可以不加，建议不加
// 如果要使用一些特殊的名字，则必须要加引号
// 属性名和属性值是一组一组的名值对结构
/*
名和值之间，使用:连接，多个名值之间使用,隔开
*/
var obj2 ={
name:"猪八戒",
age:18,
test:{
name: "沙和尚"
}
};
console.log(obj2); </script>
</head>
<body>
</body>
</html>
7、函数
<!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>Document</title>
<script> /*
函数
函数也是一个对象
函数中可以封装一些功能（代码），需要时可以执行这些功能（代码）
函数可以保存一些代码在需要时调用
使用typeof检查一个函数对象时，会返回function
*/
/* {
console.log("第一行代码");
console.log("第二行代码");
console.log("第三行代码");
}*/
/*
创建一个函数对象
可以将需要封装的代码以字符串的形式传递给函数
我们在实际开发中很少使用构造函数来创建一个函数对象
*/
var fun = new Function("console.log('这是我的第一个函数');");
console.log(fun);
/*
封装到函数中的代码不会立刻执行
函数的代码会在函数调用时执行
调用函数 语法： 函数对象()
当调用函数时，函数中封装的代码会按照顺序执行
*/
// fun();
// 使用函数声明来创建一个函数对象
/*
语法：
function 函数名 ([形参1,形参2..]){
语句...
}
*/
function fun2(){
alert("我是第二个函数");
alert("哈哈哈");
}
console.log(fun2);
// 调用fun2
// fun2();
/*
使用函数表达式来创建一个函数对象
var 函数名 = function([形参1,形参2...]){
语句...
}
*/
// 将匿名函数赋值给fun3
var fun3 = function(){
alert("我是第三个函数");
};
// 调用fun3
fun3(); </script>
</head>
<body>
</body>
</html>
8、函数的参数
<!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>Document</title>
<script> // 定义一个求两数和的函数
/* function sum(){
console.log(1+1);
} */
/*
可以在函数的()中指定一个或多个形参（形式参数）
多个形参之间使用,隔开，声明形参相当于在函数内部声明了对应的变量
*/
function sum(a,b){
console.log(a+b);
}
/*
在调用函数时，可以在()中指定实参（实际参数）
实参将会赋值给函数中对应的形式参数
*/
// sum(3,4);
/*
调用函数时，解析器不会检查实参的类型
所以要注意，是否有可能会接受到非法的参数，如果有可能则需要对参数进行类型的检查
函数的实参可以是任意的数据类型
*/
// sum("123",false);
/*
调用函数时，解析器也不会检查实参的数量
多余的实参不会被赋值
如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined
*/
sum(123,456,"hello",true);
sum(123); </script>
</head>
<body>
</body>
</html>
9、返回值
<!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>Document</title>
<script> /*
创建一个函数，用来计算三个数的和
可以使用return来设置函数的返回值
语法：
return 值;
return 后的值将会作为函数的执行结果返回
可以定义一个变量来接收这个结果
在函数中return后的语句都不会执行
如果在return语句后不加任何值则默认return undefined
如果函数不写return语句，则也返回undefined
return 后可以跟任意类型的值
*/
function sum(a,b,c){
// alert(a+b+c);
var result = a+b+c;
return result;
alert("我不会执行的！");
}
//调用函数
// r的值就是函数返回的执行结果
var r = sum(1,2,3);
alert(r);
var a = alert("hello");
console.log(a);//undefined </script>
</head>
<body>
</body>
</html>
10、练习
<!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>Document</title>
<script> /*
定义一个函数。判断一个数字是否是偶数，如果是返回true，否则返回false
*/
function isEven(num){
/* if(num%2==0){
return true;
}else{
return false;
} */
// 优化
return num%2==0;
}
var result = isEven(1828);
// console.log(result);
/*
定义一个函数，可以根据半径计算一个圆的面积，并返回计算结果
*/
function area(r){
return 3.14*r*r;
}
result = area(5);
// console.log(result);
/*
创建一个函数，可以在控制台中输出一个人的信息
可以输出一个人的name，age，gender，address
实参可以是任意的数据类型，也可以是一个对象
当我们的参数过多时，可以将参数封装到一个对象中，然后通过对象传递
*/
function sayHello(name,age,gender,address){
return "我是"+name+",今年"+age+"岁了,我是"+gender+"的,我的住址是"+address;
}
// alert(sayHello('孙悟空',18,'男','花果山'));
// 创建一个对象
var obj = {
name: '孙悟空',
age: 18,
gender: '男',
address: '花果山'
}
function sayHello(o){
return "我是"+obj.name+",今年"+obj.age+"岁了,我是"+obj.gender+"的,我住在"+obj.address;
}
// alert(sayHello(obj));
/*
实参可以是一个对象，也可以是一个函数对象
*/
function fun(a){
// a(obj);
alert(a);
}
// fun(sayHello);
// fun(function(){alert("hello")});
/*
area()
调用函数
相对于使用函数的返回值
area
函数对象
相对于直接使用函数对象
*/
fun(area(10)); </script>
</head>
<body>
</body>
</html>
11、return
<!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>Document</title>
<script> function fun(){
alert("函数要执行了");
for(var i=0;i<5;i++){
if(i==2){
// 使用break退出当前循环
// break;
// 使用continue跳过当次循环
// continue;
// 使用return可以结束整个函数
return;
}
console.log(i);
}
alert("函数执行结束了");
}
// fun();
/*
返回值可以是任意的数据类型
也可以是一个对象，也可以是一个函数
*/
function fun2(){
var obj = {
name: '猪八戒',
age: 18
}
// return 10;
return obj;
// return {name:'猪八戒',age:18}
}
var a = fun2();
// console.log("a="+a);
function fun3(){
// 在函数内部声明一个函数
function fun4(){
alert("我是fun4");
}
// 将fun4函数对象作为返回值返回
return fun4;
}
a = fun3();
console.log(a);
// a();
fun3()(); </script>
</head>
<body>
</body>
</html>
12、立即执行函数
<!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>Document</title>
<script> // 函数对象()
/*
立即执行函数
函数定义完，立即被调用，这种函数叫做立即执行函数
立即执行函数往往只执行一次
*/
/* (function(){
alert("我是一个匿名函数");
})(); */
(function(a,b){
console.log("a="+a);
console.log("b="+b);
})(123,456); </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>Document</title>
<script> // 创建一个对象
var obj = new Object();
// 向对象中添加属性
obj.name = "孙悟空";
obj.age = 18;
// 对象的属性值可以是任何数据类型，也可以是个函数
obj.sayName = function(){
console.log(obj.name);
};
function fun(){
console.log(obj.name);
}
// console.log(obj.sayName);
// 调方法
// obj.sayName();
// 调函数
// fun();
/*
函数也可以成为对象的属性
如果一个函数作为一个对象的属性保存
那么我们称这个函数是这个对象的方法
调用这个函数就说是调用对象的方法（method）
但是它只是名称上的区别
*/
// document.write();
// "hello".toString();
var obj2 = {
name: '猪八戒',
age:18,
sayName:function(){
console.log(obj2.name);
}
};
obj2.sayName(); </script>
</head>
<body>
</body>
</html>
14、枚举对象中的属性
<!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>Document</title>
<script> var obj = {
name:"swk",
age:18,
gender:'man',
address:'hgs'
};
// 枚举对象中的属性
// 使用for...in语句
/*
语法：
for(var 变量 in 对象){
}
for...in语句中 对象中有几个属性，循环体执行几次
每次执行时，会将对象中的一个属性的名字赋值给变量
*/
for(var n in obj){
console.log("属性名:"+n);//有多少个属性执行多少次循环
console.log("属性值:"+obj[n]);
} </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>Document</title>
<script> /*
作用域
-作用域指的是一个变量的作用的范围
-在js中一共有两种作用域
1、全局作用域
-直接编写在script标签中的js代码，都在全局作用域中
-全局作用域在页面打开时创建，在页面关闭时销毁
-在全局作用域中有一个全局对象window，我们可以直接使用
它代表的是一个浏览器的窗口，由浏览器创建
-在全局作用域中，创建的变量都会作为window对象的属性保存
创建的函数都会作为window的方法保存
-全局作用于的变量都是全局变量
在页面的任意的部分都可以访问到
2、函数作用域
*/
// console.log(window);//object window
var a =10;
// console.log(window.a);
function fun(){
console.log("我是fun函数");
}
// window.fun();
// window.alert("hello"); </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>Document</title>
<script> /*
变量的声明提前
-使用var关键字声明的变量，会在所有代码执行之前被声明（不赋值）
var a = 123;
相对于 先在开头声明var a;然后在赋值语句中赋值 a = 123
但是如果声明变量时不使用var关键字，则变量不会被声明提前，提前使用a会报错
函数的声明提前
-使用函数声明形式创建的函数function 函数(){}
它会再所有代码执行之前就被创建，所以我们也可以在函数声明前调用
-使用函数表达式创建的函数，不会被声明提前，所以不能提前调用
*/
/* console.log("a="+a);
var a = 123; */
// fun();
// fun2();//报错
// console.log(fun2);//undefined
function fun(){
console.log("我是fun函数");
}
var fun2 = function(){
console.log("我是fun2函数");
}; </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>Document</title>
<script> /*
函数作用域
-调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
-每调用一次函数就会创建一个新的函数作用域，他们中间是相互独立的
-在函数作用域中可以访问到全局作用域的变量
-在函数作用域中无法访问到函数作用域的变量
-在函数作用域中操作一个变量时，他会现在自身的作用域中寻找，如果有就用
没有就向上一级寻找,直到全局作用域，如果全局作用域也没有就报错
-在函数中要访问全局变量可以使用window对象
*/
var a =10;
/* var a = 10;
function fun(){
var a = "我是函数里面的a";
var b = 20;
console.log("a="+window.a);
function fun2(){
var a = "我是最里层的a";
console.log("a="+window.a);
}
fun2();
}
fun(); */
// console.log(b);//报错
// console.log("a="+a);
/*
在函数作用域中也有声明提前的特性
使用var关键字声明的变量，会在函数中的所有代码执行之前声明
函数声明也会在函数中所有的代码执行之前执行
*/
function fun3(){
// console.log(a);
var a =23;
fun4();
function fun4(){
console.log("我是fun4");
}
}
// fun3();
/*
在函数中，不使用var声明的变量都会成为全局变量
*/
var c =12;
function fun5(){
console.log("c="+c);//12
// var c = 10;
// c = 10;//给全局变量重新赋值
// 没有使用var，默认是window全局
d =100;
}
// fun5();
// console.log("c="+c);//10
// console.log("d="+d);//100
var e= 25;
/*
定义形参就相当于在函数作用域中声明了变量
*/
function fun6(e){
alert(e);//undefined
}
fun6(); </script>
</head>
<body>
</body>
</html>
18、DeBug
<!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>Document</title>
<script> alert(d);
var a = 10;
var b = "hello";
c = true;
function fun(){
alert("hello");
}
var d = 35; </script>
</head>
<body>
</body>
</html>
九、Day8
1、this
<!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>Document</title>
<script> function fun(){
/*
解析器在调用函数时每次都会向函数内部传递一个隐含的参数
这个隐含的参数就是this,this指向一个对象
这个对象我们称为函数执行的上下文对象
根据函数的调用方式的不同，this会指向不同的对象
1、以函数的形式调用时，this永远是window
2、以方法的形式调用时，this就是调用它的对象
*/
var name = "window";
function fun(a,b){
// console.log("a="+a+",b="+b);
console.log(this);
}
fun();//this指向window
// 创建一个对象
var obj = {
name: "tom",
sayName:fun
};
var obj2 = {
name: "joen",
sayName:fun
};
obj.sayName();//this指向obj
}
fun(); </script>
</head>
<body>
</body>
</html>
2、this2.0
<!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>Document</title>
<script> // 创建一个name变量
var name = "全局";
// 创建一个fun()函数
function fun(){
// 只会得到全局的name
// console.log(name);
// 现在可变了
console.log(this.name);
}
// 创建两个对象
var obj = {
name:"swk",
sayName:fun
};
var obj2 = {
name:"shs",
sayName:fun
};
fun();//全局
obj.sayName();//全局 </script>
</head>
<body>
</body>
</html>
3、对象---工厂方法创建对象
<!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>Document</title>
<script> /*
创建一个对象
*/
/* var obj = {
name:"孙悟空",
age:18,
gender:"man",
sayName:function(){
alert(this.name);
}
} */
/* var ob2 = {
name:"猪八戒",
age:28,
gender:"man",
sayName:function(){
alert(this.name);
}
}
var obj3 = {
name:"沙和尚",
age:38,
gender:"man",
sayName:function(){
alert(this.name);
}
} */
/*
使用工厂方法创建对象
*/
function createPerson(name,age,gender){
// 创建一个新的对象
var obj = new Object();
// 向对象中添加属性
obj.name=name;
obj.age=age;
obj.gender=gender;
obj.sayName=function(){
alert(this.name);
};
// 返回对象
return obj;
}
var obj2 = createPerson("猪八戒",28,"man");
var obj3 = createPerson("沙和尚",38,"man");
// console.log(obj2);
// console.log(obj3);
// obj2.sayName();
// obj.sayName();//孙悟空
// obj2.sayName();//猪八戒
/*
用来创建狗的对象
*/
function createDog(name,age){
var obj = new Object();
obj.name=name;
obj.age=age;
obj.sayHello=function(){
alert("汪汪~~");
}
return obj;
}
/*
使用工厂方法创建的对象，使用的构造函数都是object
所以创建的对象都是Object这个类型
就导致我们无法区分
*/
// 创建一个狗对象
var dog1 = createDog("旺财",3);
console.log(dog);
console.log(obj2); </script>
</head>
<body>
</body>
</html>
4、构造函数
<!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>Document</title>
<script> /*
创建一个构造函数，专门用来创建Person对象的
构造函数就是一个普通的函数，创建方式和普通函数没有区别
不同的是构造函数习惯上首字母大写
构造函数和普通函数的区别就是调用方式的不同
普通函数是直接调用，而构造函数小使用new关键字来调用
构造函数的执行流程：
1、立刻创建一个新的对象
2、将新建的对象设置为函数中的this
在构造函数中可以使用this来引用新创建的对象
3、逐行执行函数中的代码
4、将新建的对象作为返回值返回
使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类
我们将通过一个构造函数创建的实例，称为是该类的实例
this情况：
1、当以函数形式调用时，this就是window
2、当以方法的形式调用时，谁调用方法this就是谁
3、当以构造函数的形式调用时，this就是创建的那个对象
*/
function Person(name,age){
// alert(this);
this.name = name;
this.age=age;
this.sayName=function(){
alert(this.name);
}
}
function Dog(name,age){
// alert(this);
this.name = name;
this.age=age;
this.sayHello=function(){
alert(this.name+":汪汪~~");
}
}
var person = new Person("swk",18);
var person2 = new Person("zbj",28);
var dog = new Dog("旺财",3);
// console.log(person);
/* person.sayName();
person2.sayName();
dog.sayHello() */;
/*
使用instanceof可以检查一个对象是否是一个类的实例
语法： 对象 instanceof 构造函数名
是为true，否则false
*/
// console.log(person instanceof Person);
/*
所有的对象都是Object的后代
所有任何对象和Object做instanceof检查时都返回true
*/
console.log(person instanceof Object);//true </script>
</head>
<body>
</body>
</html>
5、构造函数2.0
<!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>Document</title>
<script> /*
创建一个Person构造函数
-在Person构造函数中，为每一个对象都添加了一个sayName方法
目前我们的方法是在构造函数内部创建的，
也就是构造函数每执行一次就会创建一个新的sayName方法
也就是所以实例的sayName都是唯一的
这样就是导致了构造函数执行一次就会创建一个新的方法
我们完成可以使所有对象共享同一个方法
*/
function Person(name,age){
// alert(this);
this.name = name;
this.age=age;
this.sayName = fun;
}
// 现在只会创建一个
/*
将函数定义在全局作用域中，污染了全局作用域的命令空间
而且定义在全局作用域中也很不安全
*/
//将sayName方法在全局作用域中定义
function fun(){
alert("大家好，我是"+this.name);
};
// 创建一个Person实例
var person = new Person("swk",18);
var person2 = new Person("zbj",28);
person.sayName();
person2.sayName();
alert(person.sayName==person2.sayName); </script>
</head>
<body>
</body>
</html>
6、原型
<!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>Document</title>
<script> /*
原型prototype
我们所创建的每一个函数，解析器都会向函数添加一个属性prototype
这个属性对应着一个对象，这个对象就是我们所谓的原型对象
如果函数作为普通函数调用prototype没有任何作用
当函数通过构造函数形式调用时，它所创建的对象中都会有一个隐含的属性
指向构造函数的原型对象，我们可以通过__proto__来访问该属性
原型对象就相当于一个公共的区域，所有同一个累的实例都可以访问到这个原型对象
我们可以将对象中共有的内容，统一设置到原型对象中
当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用
如果没有则会去原型对象中寻找，如果找到则直接使用
以后我们创建构造函数时，可以将共有的属性和方法，统一添加到构造函数的原型对象中，
这样不用分别给每一个对象添加，也不会影响到全局作用域，这可以使每个对象都具有这些属性和方法了
*/
/* function Person(){
}
function MyClass(){
} */
// console.log(Person.prototype==MyClass.prototype);//false
// 向MyClass的原型中添加属性a
// MyClass.prototype.a = 123;
// 向MyClass的原型中添加一个方法
// MyClass.prototype.sayHello= function(){
// alert("hello");
// };
// var mc = new MyClass();
// var mc2 = new MyClass();
// console.log(mc.__proto__ == MyClass.prototype);
// 向mc中添加a属性
// mc.a="我是mc中的a";
// console.log(mc.a);//我是mc中的a
// console.log(mc2.a);//123
// mc.sayHello();//hello
function Person(name,age){
// alert(this);
this.name = name;
this.age=age;
// this.sayName = fun;
}
// 使用原型修改
Person.prototype.sayName=function fun(){
alert("大家好，我是"+this.name);
};
// 创建一个Person实例
var person = new Person("swk",18);
var person2 = new Person("zbj",28);
person.sayName();
person2.sayName(); </script>
</head>
<body>
</body>
</html>
7、原型
<!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>Document</title>
<script> /*
创建一个构造函数
*/
function MyClass(){
}
// 向MyClass原型中添加一个name属性
MyClass.prototype.name = "我是原型中的name";
var mc = new MyClass();
mc.age=18;
// console.log(mc.name);
// 使用in检查对象是否含有某个属性时，如果对象中没有，但是原型中有也会返回true
// console.log("name" in mc);//true
// 可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
// 使用该方法只有当对象自身中含有属性时，才会返回true
// console.log(mc.hasOwnProperty("name"));
// console.log(mc.hasOwnProperty("hasOwnProperty"));//true，在原型中
/*
原型对象也是对象，所以他也有原型
当我们使用一个对象的属性或方法时，会先在自身找
自身有直接使用
没有则向原型找
还没有则向原型的原型找,直到找到Object对象的原型
Object的对象的原型没有原型，如果在这还找不到，则返回undefined
*/
// console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));//false
// console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//true
// console.log(mc.__proto__.__proto__.__proto__);//null </script>
</head>
<body>
</body>
</html>
8、toString
<!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>Document</title>
<script> function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}
// 创建一个Person实例
var per = new Person("孙悟空",18,"man");
var per2 = new Person("猪八戒",18,"man");
// 当我们直接在页面中打印一个对象时，实际上时输出对象的toString()方法的返回值
// 如果我们希望在输出对象时不输出[Object Object]，可以向对象中添加一个toString方法
// Person[name= ,age= ,gender= ,];
/* per.toString = function(){
// return "我是一个快乐的小Person";
return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
} */
// 修改原型的toString
Person.prototype.toString = function(){
// return "我是一个快乐的小Person";
return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
}
// console.log(per);
// console.log(per.__proto__.__proto__.hasOwnProperty("toString"));//true
alert(per);
alert(per2); </script>
</head>
<body>
</body>
</html>
9、垃圾回收
<!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>Document</title>
<script> /*
垃圾回收（GC）
-就像人生活时间长了会产生垃圾一样，程序运行过程中也会产生垃圾
这些垃圾积攒过多以后，会导致程序运行的速度过慢
所以我们需要一个垃圾回收的机制，来处理程序运行过程中产生的垃圾
-当一个对象没有任何变量或属性对他进行引用，此时我们将永远无法操作该对象
此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢
所以这种垃圾必须进行处理。
-在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁
我们不需要也不能进行连接回收的操作。
-我们需要做的只需要将不需要使用的对象设置为null即可
*/
var obj = new Object();
// 对象的一系列操作
obj=null; </script>
</head>
<body>
</body>
</html>
10、数组简介
<!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>Document</title>
<script> /*
内建对象
宿主对象
自定义对象
数组（Array)
-数组也是一个对象
-它和我们普通对象功能类似，也是用来存储一些值的
-不同的是普通对象时使用字符串作为属性名的
而数组使用数字来作为索引操作元素
-索引：
从0开始的整数就是索引
-数组的存储性能要比普通对象要好，在开发中我们经常使用数组来存储一些数据
*/
// 创建一个数组对象
var arr = new Array();
//使用tyoeof检查一个数组时，会返回object
// console.log(typeof arr);
/*
向数组中添加元素
语法：数组[索引]=值
*/
arr[0]=10;
arr[1]=20;
arr[2]=30;
arr[3]=40;
// arr[9]=11;
/*
读取数组中的元素
语法：数组[索引]
如果读取不存在的索引，他不会报错而是返回undefined
*/
// console.log(arr[2]);
/*
获取数组长度
可以使用length属性获取数组的长度
语法：数组.length
对于连续的数组，使用length可以获取到数组的长度（元素的个数）
对于非连续的数组，使用length会获取到数组最大的索引+1
尽量不要创建一个非连续的数组
*/
/* console.log(arr.length);
console.log(arr); */
// 修改length
/*
如果修改的length大于原长度，则多出部分会空出
如果修改的length小于原长度，则多出的元素会被删除
*/
// arr.length=10;
/* arr.length=2;
console.log(arr.length);
console.log(arr); */
arr[4]=50;
arr[5]=60;
// 向数组最后一个位置添加元素
// 语法：数组[数组.length]=值;
arr[arr.length]=70; </script>
</head>
<body>
</body>
</html>
11、数组2.0
<!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>Document</title>
<script> // 创建一个数组
// var arr = new Array();
/* arr[0]=123;
arr.hello="abc";
console.log(arr.hello); */
// 使用字面量创建一个数组
// 语法： []
// var arr = [];
// console.log(typeof arr);
// 使用字面量创建数组时，可以直接指定数组中的元素
var arr = [1,34,52,223,11];
// console.log(arr.length);
// 使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作为构造函数的参数传递
var arr2 = new Array(10,20,30);
// console.log(arr2);
// 创建一个数组，数组中只有一个元素10
arr=[10];
// 创建一个长度为10的数组
arr2=new Array(10);
// console.log(arr2.length);
// 数组中的元素可以是任意的数据类型
arr = ["hello",1,true, null,undefined];
// 也可以是对象
var obj = {name:"孙悟空"};
arr[arr.length]=obj;
console.log(arr[5].name);
// 也可以是函数
arr=[function(){alert(1)},function(){}];
// arr[0]();
// 也可以是数组,多维数组
arr = [[1,2,3],[4,5,6],[7,8,9]];
console.log(arr[0][0]); </script>
</head>
<body>
</body>
</html>
12、数组的方法
<!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>Document</title>
<script> // 创建一个数组
var arr = ["孙悟空","猪八戒","沙和尚"];
/*
push()
-该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
-可以将要添加的元素作为方法的参数传递
这样这些元素将会自动添加到数组的末尾
-该方法会将数组新的长度作为返回值返回
*/
var result = arr.push("唐僧","蜘蛛精","白骨精");
// console.log(arr);
// console.log("result="+result);
/*
pop()
-该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回
*/
// arr.pop();
result = arr.pop();
// console.log(arr);
// console.log("result="+result);
/*
unshift()
-向数组开头添加一个或多个元素，并返回新的数组长度
-向前边插入元素以后，其他元素索引会依次调整
*/
arr.unshift("牛魔王","红孩儿");
// console.log(arr);
/*
shift()
-可以删除数组的第一个元素，并将被删除元素作为返回值返回
*/
result = arr.shift();
console.log(arr);
console.log("result="+result); </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>Document</title>
<script> // 创建一个数组
var arr = [1,2,3,4,5];
// 所谓的遍历数组，就是将数组所有元素都取出来
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
} </script>
</head>
<body>
</body>
</html>
14、练习
<!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>Document</title>
<script> function Person(name,age){
this.name=name;
this.age=age;
}
// 修改Person原型的toString
Person.prototype.toString=function(){
return "Person[name="+this.name+",age="+this.age+"]";
};
// 创建一个Person对象
var per1 = new Person("tom1",18);
var per2 = new Person("tom2",15);
var per3 = new Person("tom3",13);
var per4 = new Person("tom4",20);
var per5 = new Person("tom5",38);
/*
将Person对象放入一个数组中
*/
var perArr = [per1,per2,per3,per4,per5];
/*
创建一个函数，可以将perArr中的满18岁的Person提取出来
然后封装到一个新的数组中并返回
arr
形参，要提取信息的数组
*/
function getAdult(arr){
// 创建一个新的数组接收
var newArr = [];
// 遍历获取数组中所有Person对象
for(var i=0,j=0;i<arr.length;i++){
// 判断Person对象中年龄是否大于等于18
if(arr[i].age>=18){
newArr.push(arr[i]);
}
}
return newArr;
}
var result = getAdult(perArr);
console.log(result); </script>
</head>
<body>
</body>
</html>
15、forEach
<!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>Document</title>
<script> /*
一般我们都是使用for循环去遍历数组
JS中还为我们提供一个方法，用来遍历数组
forEach()
-这个方法只支持IE8以上和其他的浏览器
-若需要兼容IE8，就不要使用
*/
// 创建一个数组
var arr = [1,2,3,4,5];
/*
forEach()方法需要一个函数作为参数
-像这种函数，由我们创建但是不由我们调用，我们称为回调函数
-数组中有几个元素，函数就会执行几次
每次执行时，浏览器会将遍历到的元素以实参的形式传递进来
我们可以来定义形参，来读取这些内容
-浏览器会在回调函数中传递三个参数：
1、当前正在遍历的元素
2、当前正在遍历的元素的索引
3、当前正在遍历的整个数组对象
*/
arr.forEach(function (value,index,obj){
// console.log("hello");
console.log("value="+value);
console.log("index="+index);
console.log("obj="+obj);
}); </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>Document</title>
<script> var arr = [1,2,3,4,5];
/*
slice()
-可以用来从数组提取指定的元素
-参数：
1、截取开始位置的索引，包含开始索引
2、截取结束位置的索引，不包含结束索引
第二个参数可以不写，默认是最后位置的索引
-索引可以传递一个负值，如果传递一个负值，则从后往前算
-该方法不会改变原数组，而是将截取到的元素封装到一个新数组中返回
*/
var result = arr.slice(0,2);
// console.log(result);
/*
splice()
-可以用于删除数组中指定的元素
-使用splice()会影响到原数组，会将指定元素从原数组中删除
并将被删除的元素作为返回值返回
-参数，
1、表示开始位置的索引
2、表示删除的数量
3、第三个参数及以后都是插入新元素
可以借助这个在数组中插入一些元素
*/
var result2 = arr.splice(1,2,"牛魔王");
console.log(arr);
console.log(result2); </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>Document</title>
<script> // 创建一个数组
var arr = [1,2,2,2,3,2,1,3,4,5,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--;
}
}
}
alert(arr); </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>Document</title>
<script> var arr = [1,2,3];
var arr2 = [4,5,6];
/*
concat()可以连接两个或多个数组，并将新的数组返回
-该方法不会对原数组产生影响
-也可以直接传元素
*/
var result = arr.concat(arr,7,8,9);
// console.log(result);
/*
join()
-该方法可以把数组转换为一个字符串
-该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
-在join中可以指定一个字符串作为参数，这个字符串可以作为数组元素的连接符
*/
result = arr.join("-");
// console.log(result);
/*
reverse()
-该方法用于反转数组（前边的去后边，后边的去前边）
-会直接修改原数组
*/
arr.reverse();
// console.log(arr);
arr = [a,f,e,d,c,w,q,r];
/*
sort()
-可以对数组的元素进行排序
-会影响原数组，默认按照Unicode编码进行排序
*/
arr.sort();
console.log(arr);
// 即使对于纯数字的数组，使用sort()排序时，也会按照Unicode编码来排序
// 所以对数字进行排序时，可能会得到错误的结果
arr = [1,44,2,32,54,7];
/*
我们可以自己来指定排序的规则
可以在sort()中添加一个回调函数来指定规则
回调函数中需要定义两个形参
浏览器将会分别使用数组中的元素作为实参去调用回调函数
使用哪个元素不确定，但是肯定的是在数组中a一定在b前边
浏览器会根据回调函数的返回值来决定元素的顺序
如果返回一个大于0的值，则元素会交换位置
如果返回一个小于0的值，则元素位置不变
如果返回一个等于0的值，则认为两个元素相等，不交换位置
如果需要升序排列。则返回a-b
降序返回b-a
*/
// arr.sort();
arr.sort(function(a,b){
/* if(a>b){
return 1;
}else if(a<b){
return -1;
}else{
return 0;
} */
// 升序
return a-b;
});
console.log(arr); </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>Document</title>
<script> function fun(a,b){
// alert("我是fun函数"+this.name);
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是指定的那个对象
*/
var obj = {
name:obj,
sayName:function(){
alert(this.name);
}
};
var obj2={};
// fun.call();
// fun.apply();
// fun.call(obj);
// obj.sayName.apply(obj2);
// fun.call(obj,2,3);//a=2,b=3
// fun.apply(obj,2,3);//报错
fun.apply(obj,[2,3]); </script>
</head>
<body>
</body>
</html>
20、arguments
<!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>Document</title>
<script> /*
在调用函数时，浏览器每次都会传递进两个隐含的参数
1、函数的上下文对象this
2、封装实参的对象arguments
-在arguments是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度
-在调用函数时，我们所传递的实参都会在arguments中保存
-arguments.length可以获取实参的数量
-即使不定义形参，也可以通过arguments来使用实参
arguments[0]表示第一个实参
-它里边有一个属性叫做callee，
这个属性对应一个函数对象，就是当前正在指向的函数对象
*/
function fun(a,b){
// console.log(arguments instanceof Array);//false
// console.log(Array.isArray(arguments));//false
// console.log(arguments.length);
// console.log(arguments[1]);
console.log(arguments.callee==fun);
}
fun(1,2); </script>
</head>
<body>
</body>
</html>
21、Date
<!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>Document</title>
<script> /*
Date对象
-在js中使用Date对象来表示一个时间
*/
//创建一个Date对象
//如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间
var d = new Date();
// console.log(d);
// 创建一个指定的时间对象
// 需要在构造函数值传递一个表示时间的字符串作为参数
// 日期格式： 月份/日/年份 时:分:秒
var d2 = new Date("23/10/2022 21:32:30");
// console.log(d2);
/*
getDate()
-获取当前日期对象是几日
getDay()
-获取当前日期对象是周几
-会返回一个0-6的值
0表示周日
1表示周一
getMonth()
-获取当前日期对象是几月
-返回0-11的值
0表示1月
11表示12月
getFullYear()
-获取当前日期对象的年份
*/
var date = d2.getDate();
var day = d2.getDay();
var month = d2.getMonth();
var year = d2.getFullYear();
// console.log("date="+date);
// console.log("dat="+day);
// console.log("month="+month);
// console.log("year="+year);
/*
getTime()
-获取当前日期对象的时间戳
-时间戳，指的是格林威治标准时间的1970年1月1日，0时0分0秒
到当前日期所花费的毫秒数（1秒=1000毫秒）
-计算机底层保存时间时使用都是时间戳
*/
var time = d2.getTime();
// console.log(time);
var d3 = new Date("1/1/1970 0:0:0");
time = d3.getTime();
// console.log(time);//-28800000，八个小时，东八区快八个小时
// 利用时间戳来测试代码的执行性能
// 获取当前的时间戳
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>
22、Math
<!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>Document</title>
<script> /*
Math
-Math和其他对象不同，他不是一个构造函数
它属于一个工具类不用创建对象，它里边封装了数学运算的属性和方法
-比如：
Math.PI圆周率
*/
// alert(Date);//函数
// alert(Math);//对象
// console.log(Math.PI);//圆周率
/*
abs()可以用来计算一个数的绝对值
*/
// console.log(Math.abs(-1));
/*
Math.ceil()
-可以对一个数进行向上取整，小数位只有有值就自动进1
*/
// console.log(Math.ceil(1.1));//2
/*
floor()
-可以对一个数进行向下取整
小数部分会被舍掉
*/
// console.log(Math.floor(1.99));//1
/*
round()
-可以对一个数进行四舍五入取整
*/
// console.log(Math.round(1.4));
/*
Math.random()
-可以用来生成一个0-1之间的随机数
-生成一个0-x之间的随机数
Math.round(Math.random()*x)
-生成1到10
-生成x到y之间的整数
Math.round(Math.random()*(y-x))+x;
*/
// 生成0-10的随机数
/* for(var i=0;i<10;i++){
console.log(Math.round(Math.random()*10));
} */
/*
max()可以获取多个数中的最大值
min()可以获取多个数中的最小值
*/
var max = Math.max(10,45,30,100);
// console.log(max);
/*
Math.pow(x,y)
返回x的y次幂
*/
console.log(Math.pow(12,3));
console.log(Math.sqrt(4)); </script>
</head>
<body>
</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>Document</title>
<script> /*
基本数据类型
String Number Boolean Null Undefined
引用数据类型
Object
在JS中为我们提供了三个包装类。通过这三个包装类可以将基本数据类型的数据转换为对象
String()
-可以将基本数据类型字符串转换为String对象
Number()
-可以将基本数据类型的数字转换为Number对象
Boolean()
-可以将基本数据类型的布尔值转换为Boolean对象
但是注意：我们在实际应用中不会使用基本数据类型的对象
如果使用基础数据类型的对象，在做一些比较时可能会带来一些不可预期的结果
*/
var a =123;
// console(typeof a);
// 创建一个Number类型的对象
var num = new Number(3);
var num2 = new Number(3);
var String = new String("hello");
var bool = new Boolean(true);
var bool2 = true;
//向num中添加一个属性
num.hello = "abc";
// console.log(num.hello);
// console.log(num==nu2);//false
// console.log(bool==bool2);//true,但是===就是false
/* var b = new Boolean(false);
if(b){
alert("我运行了");
} */
/*
方法和属性只能添加给对象，不能添加给基本数据类型
当我们对一些基本数据类型的值去调用属性或方法时
浏览器会临时使用包装类将其转换为对象，然后再调用对象的属性和方法
调用完以后，再将其转换为基本数据类型
*/
var s =123;
s.hello = "你好";
console.log(s.hello);//undefined
s=s.toString();
console.log(s);
console.log(typeof s); </script>
</head>
<body>
</body>
</html>
十、Day9
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>Document</title>
<script> // 创建一个字符串
var str = "Hello JavaScript";
/*
在底层字符串时以字符数组的形式保存的
["H","e","l"...]
*/
/*
length属性
获取字符串的长度
*/
// console.log(str.length);//13
// console.log(str[0]);//H
/*
charAt()
-可以返回字符串指定位置的字符
-不会对原字符串影响
-参数为索引，从0开始
-也是可以str[0];
*/
var result = str.charAt(3);
// console.log(result);//l
/*
charCodeAt()
-获取指定位置字符的字符编码（Unicode编码）
*/
result = str.charCodeAt(1);
// cons.console.log(result);//
/*
String.fromCharCode()
-可以根据字符编码去获取字符
*/
result = String.fromCharCode(20015);
// console.log(result);
/*
concat()
-可以连接两个或多个字符串
-作用和+一样
*/
result = str.concat("你好","再见");
console.log(result);
/*
indexOf()
-该方法可以检索一个字符串是否有指定内容
-如果字符串中含有该内容，则返回其中第一次出现的索引
如果没有找到指定内容，则返回-1
-可以指定第二个参数，指定开始查找的位置
*/
str = "hello javascript";
result = str.indexOf("e");
// console.log(result);
/*
lastIndexOf();
-该方法和indexOf一样，只是方向相反
-也同样可以指定开始查找的位置
*/
result = str.lastIndexOf("a");
// console.log(result);
/*
slice()
-可以从字符串中截取指定内容
-不会影响源字符串，而是将截取结果返回
-参数：
第一个，开始位置的索引（包括开始）
第二个，结束位置的索引（不包括结束）
-如果省略第二个参数，则会截取到后边所有
-也可以传递一个负数作为参数，负数将会从后边开始计算
*/
str = "abcdefg";
result = str.slice(0,2);
// console.log(result);
/*
substring()
-可以用来截取一个字符串，跟slice类似
-参数：
-第一个，开始位置的索引（包括开始）
-第二个，结束位置的索引（不包括结束）
-不同的是这个方法不能接收负值作为参数
如果传递了一个负值，则默认使用0
-而且他会自动调整参数位置，如果第二个参数小于第一个，则会交换
*/
result = str.substring(2,0);
// console.log(result);
/*
substr()
-用来截取字符串
-参数：
1、截取开始位置的索引
2、截取的长度
*/
result = str.substr(2,3);
// console.log(result);
/*
split()
-可以将一个字符串拆分为一个数组
-参数：
-需要一个字符串作为参数，会根据该字符串去拆分数组
*/
/*
如果传递一个空串作为参数，将会把每个字符都拆分为数组中的一个元素
*/
str = "abc,def,ghi";
result = str.split(",");
// console.log(Array.isArray(result));//true
/*
toUpperCase()
toLowerCase()
-将字符串转换为大/小写并返回
*/ </script>
</head>
<body>
</body>
</html>
十一、Day10
1、正则表达式1.0
<!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>Document</title>
<script> /*
正则表达式
-admin
-admin@qq.com
-邮件的规则
1、前边可以xxxx
2、跟着一个@
3、后边可以xxx
4、最后.com
-正则表达式用于定义一些字符串的规则
计算机可以根据正则表达式来检查一个字符串是否符合规则
或者将字符串中符合规则的内容提取出来
*/
// 创建正则表达式对象
/*
语法：
var 变量 = new RegExp("正则表达式,"匹配模式");
使用typeof检查正则表达式对象，会返回Object
以下这个正则表达式可以用来检查一个字符串中是否含有a
在构造函数中可以传递一个匹配模式作为第二参数
可以是i 忽略大小写 g 全局匹配模式
*/
var reg = new RegExp("a","i");
var str = "a";
/*
正则表达式的方法
test()
-使用这个方法可以来检查一个字符串是否符合正则表达式的规则
如果符合true，否则false
*/
var result = reg.test(str);
// console.log(reg.test("abc")); </script>
</head>
<body>
</body>
</html>
2、正则表达式2.0
<!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>Document</title>
<script> /*
使用字面量来创建正则表达式
语法：
var 变量 = /正则表达式/匹配模式
使用字面量的方式更加简单
使用构造函数创建更加灵活
*/
var reg = /a/i;
//console.log(reg.test("abc"));
// 创建一个正则表达式，检查一个字符串是否含有a或b
/*
使用|表示或者的意思
*/
reg = /a|b/
// console.log(reg.test("a"));
/*
创建一个正则表达式来检查一个字符串是否有字母
[]里的内容也是或的关系
[a-z],任意小写字母
[A-Z],任意大写字母
[A-z]，任意字母
*/
reg = /[ab]/;
req= /[a-z]/;
// console.log("acd");
// 检查一个字符串是否含有abc或adc或aec
reg = /abc|adc|aec/;
reg = /a[bde]c/;
// console.log("abce");
/*
[^]除了
*/
reg = /[^ab]/;
// console.log(reg.test("abc"));//true
// 除了纯数字
reg = /[^0-9]/;
console.log(reg.test("12a345")); </script>
</head>
<body>
</body>
</html>
3、字符串和正则相关方法
<!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>Document</title>
<script> var str = "1a2b3c4d5e6f7";
/*
split()
-可以将一个字符串拆分为一个数组
-方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式区拆分字符串
-这个方法即使不指定全局匹配，也会全部拆分
*/
/*
根据任意字母来拆分字符串
*/
var result = str.split(/A-z/);
console.log(result);
/*
search()
可以搜索字符串中是否有指定内容
如果搜索到指定内容，则会返回第一次出现的索引，如果没有返回-1
可以接收正则表达式作为参数
search只会查找第一个，即使设置全局也没用
*/
str = "hello abc hello aec afc";
// result = str.search("abc");
/*
搜索字符串中是否含有abc或aec或afc
*/
result = str.search(/a[bef]c/);
// console.log(result);
/*
match
可以根据正则表达式从一个字符串中将符合条件的提取出来
默认情况下我们的match只会找到第一个符合要求的内容，找到
后就返回了，我们可以设置正则表达式为全局匹配模式，这样就可以匹配所有内容
match会将匹配到的内容封装到一个数组中返回，即使只有一个结果
*/
str ='1a2b3c4D5E6F7';
result = str.match(/a-z/ig);
// console.log(result);
/*
replace()
可以将字符串中指定内容替换为新的内容
参数：
1、被替换的内容
2、新的内容
默认只会替换第一个
*/
result = str.replace(/[a-z]/ig,"");
// console.log(result); </script>
</head>
<body>
</body>
</html>
4、正则表达式3.0
<!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>Document</title>
<script> /*
创建一个正则表达式检查一个字符串是否含有aaa
*/
/*
量词
- 通过量词可以设置一个内容出现的次数
- 量词只对它前边的一个内容起作用
- {n}正好出现n次
- {m-n}出现m到n次，n不写表示大于m次
- +至少一个，相当于{1,}
- *0个或多个，
- ? 0个或1个,相对于{0,1}
*/
var reg = /aaa/;
reg = /a{3}/;
reg=/ab{3}/;//只对b起作用
reg=/(ab){3}/;//对ab起作用
// 匹配a中间1-3个b，后c
reg =/ab{1,3}c/;
// console.log(req.test("bvaaa"));
reg = /ab+c/;
reg = /ab*c/;
reg = /ab?c/;
/*
检查一个字符串是否以a开头
^表示开头
$表示结尾
*/
reg = /^a/;//开头为a
reg = /a$/;//结尾为a
/*
如果在正则表达式中同时使用^$则要求字符串必须完全符合正则表达式
*/
reg = /^a$/;
reg = /^a|a$/;
/*
创建一个正则表达式，用来检查一个字符串是否是一个手机号
手机号的规则
1、总共11位
2、以1开头
3、第二位3-9任意，不能是0,1,2
4、三位以后任意数字
^1 [3-9] [0-9]{9}$
*/
var phoneStr = "15219377123";
var phoneReg = /^1[3-9][0-9]{9}$/;
console.log(phoneReg.test(phoneStr)); </script>
</head>
<body>
</body>
</html>
5、正则表达式
<!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>Document</title>
<script> /*
检查一个字符串是否含有 .
. 表示任意字符
在正则表达式中使用\作为转义字符
\. 表示 .
\\ 表示 \
注意：在使用构造函数时，由于它的参数是一个字符串，而
\是字符串中的转义字符，如果要使用\则需要使用\\来代替
*/
var reg = /\./;
reg = /\\/;
reg = new RegExp("\\.");
// console.log("b.");
/*
\w 表示任意字母和数字，下划线_
\W 表示除了字母、数字、下划线
\d 任意数字
\D 除了数字
\s 含有空格
\S 除了空格，只匹配空格
\b 单词边界
\B 除了单词边界
*/
reg = /\w/;
reg=/\W/;
reg = /\d/;
reg= /\D/;
reg= /\s/;
reg = /\S/;
// console.log(reg.test("abc"));
/*
创建一个正则表达式检查一个字符串中是否含有单词child
*/
reg = /\bchild\b/;
// console.log(reg.test("hello chilld ren"));
/*
接收一个用户输入
*/
var str = prompt("请输入你的用户名：");
// console.log(str);
// 去除字符串前后空格，使用""替换
str = " hello ";
// str = str.replace(/\s/g,"");//全部空格给去除了
// 去除开头的空格
// str = str.replace(/^\s*/,"");
//去除结尾空格
// str = str.replace(/\s*$/,"");
// 整合
str = str.replace(/^\s* | \s*$/g,""); </script>
</head>
<body>
</body>
</html>
6、电子邮件正则表达式
<!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>Document</title>
<script> /*
电子邮件
字母/数字/下划线 xxxx @ 字母 . com
任意字母数字下划线 .任意字母数字下划线 @ .任意字母(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}$/;
console.log(emailReg.test("1849569695@qq.com")); </script>
</head>
<body>
</body>
</html>
7、DOM
<!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>Document</title>
</head>
<body>
<button id="btn1">我是一个按钮</button>
<script> /*
浏览器已经为我们提供了文档节点对象，这个对象是window属性
可以在页面中直接使用，文档节点代表整个网页
*/
// console.log(document);
// 获取button对象
var btn= document.getElementById("btn1");
// console.log(btn);
// 修改按钮的文字
// console.log(btn.innerHTML);
btn.innerHTML="我被改了"; </script>
</body>
</html>
8、事件
<!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>Document</title>
</head>
<body>
<!--
我们可以在事件对应的属性中设置一些js代码
当事件被触发时，这些代码将会被执行
这种写法我们称为结构和行为耦合，不方便维护，不推荐使用
-->
<!-- <button id="btn" onmousemove="alert('讨厌，你点我干嘛');">我是一个按钮</button> -->
<button id="btn">我是一个按钮</button>
<script type="text/javascript"> /*
事件就是用户和浏览器之间的交互行为
比如：点击按钮，鼠标移动，关闭窗口
onclick
ondblclick
onmousemove
*/
/*
可以为按钮的对应事件绑定处理函数的形式来响应事件
这样当事件被触发时，其对应的函数将会被调用
*/
var btn = document.getElementById("btn");
// console.log(btn);
// 为按钮绑定一个单击事件
// 像这种单击事件绑定的函数，我们称为单击响应函数
/* btn.onclick = function(){
alert("你干嘛？哎哟~~");
} */
btn.ondblclick = function(){
alert("双击666");
} </script>
</body>
</html>
9、文档的加载
<!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>Document</title>
<script> /*
浏览器在加载一个页面时，是按照自上向下的顺序加载的
读取一行就运行一行,如果将script标签写到页面的上边
在代码执行时，页面还没加载，页面没有加载DOM对象也没有加载
导致无法获取DOM对象
*/
/*
onload事件
页面加载完成之后再执行，再触发
支持该事件的有，window、image、layer
为window绑定一个onload事件
该事件对应的响应函数将会在页面加载完成之后执行。
这样可以确定我们的代码执行时所有的DOM对象都已经加载完毕了
*/
window.onload=function(){
alert("页面加载完成后执行");
}
// alert("我先执行");
// 获取id为btn的对象
var btn = document.getElementById("btn");
// 为按钮绑定单击响应函数
// console.log(btn);//null </script>
</head>
<body>
<button id="btn">我是一个按钮</button>
<script> /*
将js代码编写到页面的下部就是为了可以在页面加载完毕以后再执行js代码
*/
// 获取id为btn的对象
var btn = document.getElementById("btn");
// 为按钮绑定单击响应函数
btn.onclick = function(){
alert("hello");
}; </script>
</body>
</html>
10、DOM查询
<!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>Document</title>
</head>
<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 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>Document</title>
<style> *{
margin: 0;
padding: 0;
}
.outer{
width: 500px;
margin: 50px auto;
padding: 10px;
background-color: skyblue;
text-align: center;
} </style>
<script> 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/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.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;
}
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 class="outer">
<p id="info"></p>
<img src="img/1.jpg" alt="冰棍">
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
12、获取元素节点的子节点、父节点和兄弟节点
<!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>Document</title>
</head>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript"> // 定义一个函数专门为指定元素绑定的响应函数
/*
参数：
idStr 要绑定单击响应函数对象的id属性值
fun 事件的回调函数，当点击元素时，该函数会被触发
*/
function myClick(idStr,fun){
//为id为btn01的按钮绑定一个单击响应函数
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
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);
}
};
// 为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);
}
}
var btn05 = document.getElementById("btn05");
btn05.onclick = function(){
var city = document.getElementById("city");
//返回#city的所有子节点
/*
childNodes会获取包括文本节点在内的所有子节点
根据DOM标签标签间的空白也会被当成文本节点
注意：在IE8及以下1浏览器中，不会将空白文本当成子节点
*/
var cns = city.childNodes;
/*
children属性可以获取当前元素的所有子元素
*/
var cns2 = city.children;
/* for(var i=0;i<cns.length;i++){
alert(cns[i]);
} */
alert(cns.length);
}
var btn06 = document.getElementById("btn06");
btn06.onclick = function(){
//返回#phone的第一个子节点
var phone = document.getElementById("phone");
// firstchildNodes可以获取当前元素的第一个子节点（包括空白文本节点）
var pfc = phone.firstChild;
// firstElementChild获取当前元素的第一个元素
// 不兼容ie8及以下
fir = phone.firstElementChild;
alert(pfc.innerHTML);
}
myClick("btn07",function(){
//获取id为bj的节点
var bj = document.getElementById("bj");
// 返回#bj的父节点
var pn = bj.parentNode;
// alert(pn.innerHTML);
/*
innerText
-该属性可以获取到元素内部的文本内容
-它和innerHTML类似，不同的是它会自动将 标签 去除
*/
alert(pn.innerText);
});
myClick("btn08",function(){
//获取id为Android的元素
var and = document.getElementById("android");
//返回#android的前一个兄弟节点(也包括空白的文本)
var ps = and.previousSibling;
/*
previousElementSibling
获取前一个兄弟元素，ie8及以下不能用
*/
ps= and.previousElementSibling;
alert(ps);
});
myClick("btn09",function(){
//读取#username的value属性值
var username = document.getElementById("username");
// 文本框的value属性值，就是文本框中填写的的内容
var username = username.value;
alert(username);
});
myClick("btn10",function(){
//设置#username的value属性值
// 设置value
username.value = "今天天气真不错！";
});
myClick("btn11",function(){
var bj = document.getElementById("bj");
//返回#bj的文本值
// alert(bj.innerText);
// alert(bj.innerHTML);
// 获取bj中的文本节点
var fc = bj.firstChild;
// nodeValue获取节点值
alert(fc.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="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>
13、练习
<!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>
<script type="text/javascript"> window.onload = function(){
// 全选按钮
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){
var items = document.getElementsByName("items");
// 设置选中状态
for(var i =0;i<items.length;i++){
items[i].checked = true;
}
checkedAllBox.checked=true;
}
// 全不选
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
var items = document.getElementsByName("items");
// 设置选中状态
for(var i =0;i<items.length;i++){
items[i].checked = false;
}
checkedAllBox.checked=false;
}
// 反选
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
var items = document.getElementsByName("items");
// 反选时也需要判断四个多选框是否全部选中
// 设置checkedAllBox为选中
checkedAllBox.checked=true;
// 设置选中状态
for(var i =0;i<items.length;i++){
items[i].checked = !items[i].checked ;
// 判断四个多选框是否全选
if(!items[i].checked){
checkedAllBox.checked=false;
}
}
}
// 提交
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
var items = document.getElementsByName("items");
for(var i =0;i<items.length;i++){
if(items[i].checked ){
alert(items[i].value);
}
}
}
// 全选多选框
/*
在事件的响应函数中，响应函数是给谁绑定的，this就是谁
*/
var checkedAllBox = document.getElementById("checkedAllBox");
var items = document.getElementsByName("items");
checkedAllBox.onclick=function(){
for(var i =0;i<items.length;i++){
// items[i].checked = checkedAllBox.checked;
items[i].checked =this.checked;
}
}
/*
如果四个多选框都选中，则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.checked=false;
// 一旦进入，就有结果了
break;
}
}
}
}
}; </script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>
14、DOM查询的其他方法
<!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>Document</title>
<script> window.onload = function(){
// 获取body标签
// var body = document.getElementsByTagName("body")[0];
/*
在document中有一个属性body，它保存的是body的引用
*/
var body = document.body;
// console.log(body);
/*
document.documentElement是html根标签
*/
var html = document.documentElement;
// console.log(html);
/*
document.all代表页面中所有的元素
*/
var all=document.all;
for(var i=0;i<all.length;i++){
// console.log(all[i]);
}
// 也是全部元素
// all = document.getElementsByTagName("*");
/*
根据元素的class属性查询一组元素节点对象
该方法不支持ie8及以下的浏览器
*/
var box1 = document.getElementsByClassName("box1");
// console.log(box1.length);
// 获取页面中所有的div
var divs = document.getElementsByTagName("div");
// 获取class为 box1中的所有div
/*
document.querySelector()
-需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象
-虽然ie8没有getElementByClassName()但是可以使用querySelector()代替
-使用该方法总会返回唯一一个元素，如果满足条件的元素有多个，那么只会返回第一个
*/
var div = document.querySelector(".box1 div");
var box1 = document.querySelector(".box1");
// console.log(div.innerHTML);
// console.log(divs.length);
/*
document.querySelectorAll()
-该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
-即使符合条件的元素只有一个，也会返回一个数组
*/
box1 = document.querySelectorAll(".box1");
// console.log(box1.length);
}; </script>
</head>
<body>
<div class="box1">
第一个
<div>我是box1中的div</div>
</div>
<div class="box1">
</div>
<div class="box1">
</div>
</body>
</html>
15、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);
li.innerHTML = "广州";
//获取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>
16、练习
<!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"> /*
删除函数
*/
function del(){
// 删除超链接所在那行
// 这里我们点击哪个超链接，this就是哪个a
var tr = this.parentNode.parentNode;
// 提示
/*
confirm用于弹出一个带有确认和取消的提示框
如果用户点击确定返回true，否则返回false
*/
// 获取要删除的员工的名字
// var name = tr.getElementsByTagName("td")[0].innerHTML;
var name = tr.children[0].innerHTML;
var flag = confirm("你确定要删除"+name+"吗?");
if(flag){
// 删除tr
tr.parentNode.removeChild(tr);
}
/*
点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
但是我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
*/
return false;
}
window.onload = function(){
// 删除
var allA = document.getElementsByTagName("a");
// 给a标签绑定单击函数
for(var i=0;i<allA.length;i++){
allA[i].onclick = del;
}
// 添加
var button = document.getElementById("addEmpButton");
button.onclick=function(){
//获取用户填写的信息
// 获取员工名字
var name = document.getElementById("empName").value;
// 获取员工email和salary
var email = document.getElementById("email").value;
var salary= document.getElementById("salary").value;
// 需要将获取到的信息保存到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.appendChild(delText);
// 将a添加到td中
aTd.appendChild(a);
// 将td添加到tr
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
tr.appendChild(aTd);
// 向a中添加属性
a.href = "javascript:;";
// 为新添加的a再绑定单击响应函数
a.onclick = del;
// 获取table
var table = document.getElementById("employeeTable");
var tbody = table.getElementsByTagName("tbody")[0];
// 将tr添加到todody中
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="deleteEmp?id=001">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>
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"> /*
删除函数
*/
function del(){
// 删除超链接所在那行
// 这里我们点击哪个超链接，this就是哪个a
var tr = this.parentNode.parentNode;
// 提示
/*
confirm用于弹出一个带有确认和取消的提示框
如果用户点击确定返回true，否则返回false
*/
// 获取要删除的员工的名字
// var name = tr.getElementsByTagName("td")[0].innerHTML;
var name = tr.children[0].innerHTML;
var flag = confirm("你确定要删除"+name+"吗?");
if(flag){
// 删除tr
tr.parentNode.removeChild(tr);
}
/*
点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
但是我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
*/
return false;
}
window.onload = function(){
// 删除
var allA = document.getElementsByTagName("a");
// 给a标签绑定单击函数
for(var i=0;i<allA.length;i++){
allA[i].onclick = del;
}
// 添加
var button = document.getElementById("addEmpButton");
button.onclick=function(){
//获取用户填写的信息
// 获取员工名字
var name = document.getElementById("empName").value;
// 获取员工email和salary
var email = document.getElementById("email").value;
var salary= document.getElementById("salary").value;
// 需要将获取到的信息保存到tr中
// 创建一个tr
var tr = document.createElement("tr");
// 设置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.onclick=del;
// 获取table
var table = document.getElementById("employeeTable");
var tbody = table.getElementsByTagName("tbody")[0];
// 将tr添加到todody中
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="deleteEmp?id=001">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>
18、a的索引问题
<!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"> window.onload = function(){
// 删除
var allA = document.getElementsByTagName("a");
// 给a标签绑定单击函数
for(var i=0;i<allA.length;i++){
/*
for循环会在页面加载完成之后立即执行
而响应函数会在超链接被点击时才执行
当响应函数执行时，for循环早已经执行完毕
*/
alert("for循环正在执行"+i);
allA[i].onclick=function(){
alert("响应函数执行"+i)
}
}
} </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="deleteEmp?id=001">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>
19、使用dom操作css
<!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>Document</title>
<style> .box1{
width: 100px;
height: 100px;
background-color: skyblue;
} </style>
<script> window.onload=function(){
/*
点击按钮以后，修改box1的大小
*/
var num = 100;
var btn01 = document.getElementById("btn01");
var box01 = document.getElementById("box1");
btn01.onclick=function(){
// 修改box1的宽度
/*
通过js修改元素的样式：
语法： 元素.style.样式名 = 样式值
注意：如果css的样式名中含有-
这种名称在js中是不合法的比如background-color
需要将这种样式修改为驼峰命名
去掉-，然后将-后的字母大写
通过style属性设置的样式都是内联样式
而内联样式有较高的优先级，所以通过js修改的样式往往会立即显示
但是如果在样式中泄露！importtant，样式有最高的优先级
js也无法修改
通过style读取和设置的都是内联样式，无法读取样式表中的样式
*/
num = num+10;
box1.style.width=num+"px";
box1.style.height=num+"px";
box1.style.backgroundColor="yellow";
};
var btn02 = document.getElementById("btn02");
btn02.onclick =function(){
// 读取box1的样式
alert(box1.style.width);
};
}; </script>
</head>
<body>
<button id="btn01">点我变大，变黄！！</button>
<button id="btn02">点我读取样式信息</button>
<div class="box1" id="box1">
</div>
</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>Document</title>
<style> #box1{
width: 100px;
height: 100px;
background-color: yellow;
} </style>
<script> window.onload=function(){
var box1= document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
// 读取box1的样式
/*
获取元素当前显示的样式
语法：
元素.currentStyle.样式名
它可以读取当前元素正在显示的样式
如果当前元素没有设置元素，则获取它的默认值
只有ie支持，其他浏览器不支持
*/
// alert(box1.currentStyle.width);
/*
其他浏览器可以使用
getComputedStyle()这个方法获取元素当前样式
这个方法是window的方法，可以直接使用
需要两个参数：
第一个：要获取样式的元素
第二个：可以传递一个伪元素，一般传null
该方法返回了一个对象，对象中封装了当前元素对应的样式
可以通过 对象.样式名 读取样式
没有设置样式，会显示准确值
ie8及以下不支持
通过currentStyle和getComputedStyle不能修改样式，只能读
*/
// 正常浏览器
var obj = getComputedStyle(box1,null);
//ie8
// alert(box1.currentStyle.backgroundColor);
// alert(obj.width);
alert(getStyle(box1,"width"));
};
};
/*
定义一个函数，用来获取指定元素的当前样式
参数：
1、元素
2、样式名
*/
function getStyle(obj,name){
// 如果单写getComputedStyle是变量，没有就会报错，加上window是属性，没有返回undefined--->false
/* if(window.getComputedStyle){
// 正常,有getComputedStyle()方法
return getComputedStyle(obj,null)[name];
}else{
// ie8
return obj.currentStyle[name];
} */
return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
/* if(obj.currentStyle){
// ie8
return obj.currentStyle[name];
}else{
// 正常,有getComputedStyle()方法
return getComputedStyle(obj,null)[name];
} */
} </script>
</head>
<body>
<button id="btn01">点我一下</button>
<br/><br/>
<div id="box1"></div>
</body>
</html>
十二、Day11
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>Document</title>
<style> #box1{
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
border: 10px solid yellow;
}
#box4{
width: 200px;
height: 300px;
background-color: #bfa;
overflow: auto;
}
#box5{
width: 450px;
height: 600px;
background-color:yellow;
} </style>
<script> 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);
// box1.clientHeight=300;
/*
offsetWidth
offsetHeight
-获取元素的整个宽度和高度，包括内容区，内边距和边框
*/
// alert(box1.offsetHeight);
/*
offsetParent
-可以获取当前元素的定位元素
-会获取到离当前元素最近的开启了定位的祖先元素
*/
var op = box1.offsetParent;
// alert(op.id);
/*
offsetLeft
-当前元素相对于其定位父元素的水平偏移量
offsetTop
-当前元素相对于其定位父元素的垂直偏移量
*/
// alert(box1.offsetLeft);
/*
scrollWidth
scrollHeight
-获取指定元素的滚动区域宽度或高度
*/
// alert(box4.scrollHeight);
/*
scrollLeft
scrollTOp
-获取水平或垂直滚动条滚动的距离
*/
// alert(box4.scrollLeft);
// alert(box4.clientHeight);//283
// alert(box4.scrollHeight);//600
// 当满足scrollHeight-scrollTop ==clientHeight时，说明滚动条滚到低了
alert(box4.scrollHeight - box4.scrollTop);//
};
}; </script>
</head>
<body>
<button id="btn01">点我一下</button>
<br/><br/>
<div id="box4">
<div id="box5"></div>
</div>
<div id="box2" style="position: relative;">
<div id="box1"></div>
</div>
</body>
</html>
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>Document</title>
<style> #info{
width: 300px;
height: 500px;
background-color: #bfa;
overflow: auto;
} </style>
<script> window.onload=function(){
/*
当垂直滚动条滚到底时，设置表单项可用
onsroll
-该事件在元素的滚动条滚动时触发
*/
var info = document.getElementById("info");
info.onscroll=function(){
if(info.scrollHeight-info.scrollTop == info.clientHeight){
// 滚到底部了，设置可用
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
/*
disabled属性设置元素是否禁用
如果设置为true，元素禁用，否则元素可用
*/
inputs[i].disabled = false;
}
}
};
}; </script>
</head>
<body>
<h3>欢迎用户注册</h3>
<p id="info">
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
亲爱的用户，请你乖乖仔细阅读下面的协议，如果胆敢不看不仔细阅读那你就完了，别想注册了，给我爬
</p>
<!--
disabled不可用
-->
<input type="checkbox" disabled/>我已阅读完协议，确定同意！
<input type="submit" disabled value="确定"/>
</body>
</html>
3、事件对象
<!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>Document</title>
<style> #areaDiv{
width: 300px;
height: 150px;
border: 1px solid black;
}
#showMsg{
width: 300px;
height: 50px;
border:1px solid black;
} </style>
<script> window.onload=function(){
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.innerHTML="("+x+","+y+")";
};
}; </script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>
4、练习
<!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>Document</title>
<style> #box1{
width: 100px;
height: 100px;
background-color: red;
/*
开启box1的绝对定位
*/
position: absolute;
}
body{
height: 1000px;
width: 2000px;
} </style>
<script> window.onload=function(){
var box1 = document.getElementById("box1");
window.onmousemove=function(event){
event = event || window.event;
// 获取滚动条滚动的距离
/*
chrome认为浏览器的滚动条是body，可以通过body.scrollTop来获取
其他浏览器认为浏览器的滚动条是html的
*/
// var st = document.body.scrollTop;
// var st = document.documentElement.scrollTop;
var st = document.documentElement.scrollTop || document.body.scrollTop;
var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
// 获取鼠标坐标
/*
clientX，clientY 用于获取在可见窗口的坐标
而div的偏移量是相对于整个页面的
*/
var x = event.clientX;
var y = event.clientY;
/*
pageX和pageY可以获取鼠标相对于当前页面的坐标
但是这两个属性在ie8中不支持，所以如果需要兼容ie8，则不要使用
*/
// var x = event.pageX;
// var y = event.pageY;
// 设置box1坐标
box1.style.left = x+sl+ "px";
box1.style.top = y +st + "px";
}
}; </script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
5、冒泡
<!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>Document</title>
<style> #box1{
width: 200px;
height: 200px;
background-color: green;
}
#s1{
background-color: yellow;
} </style>
<script> window.onload=function(){
/*
事件的冒泡(Bubble)
-所谓的冒泡就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
-在开发中大部分冒泡是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡
*/
var s1 = document.getElementById("s1");
s1.onclick=function(event){
event = event||window.event;
alert("我是span的单击响应函数");
// 取消冒泡
/*
将事件对象的cancelBubble设置为true，即可取消冒泡
*/
event.cancelBubble=true;
};
var box1 = document.getElementById("box1");
box1.onclick=function(event){
event = event||window.event;
event.cancelBubble=true;
alert("我是div的单击响应函数");
};
document.body.onclick=function(){
alert("我是body的单击响应函数");
};
}; </script>
</head>
<body>
<div id="box1">我是box1
<span id="s1">我是span</span>
</div>
</body>
</html>
6、事件的委派
<!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>Document</title>
<script> window.onload=function(){
/*
为每一个超链接绑定一个单击响应函数
*/
var u1 = document.getElementById("u1");
/*
为每一个超链接绑定一个的点击响应函数
这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦
而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
*/
// 获取所有的a
var allA = document.getElementsByTagName("a");
// 遍历
/* for(var i=0;i<allA.length;i++){
allA[i].onclick=function(){
alert("我是a的单击响应函数");
}
} */
/*
我们希望值绑定一次事件，即可应用到多个元素上，即使元素是后添加的
我们可以尝试将其绑定给元素的共同的祖先元素
事件的委派
-指将事件统一给元素的共同的祖先元素，这样当后代元素上的事件被触发时，会一直冒泡到祖先元素
从而通过祖先元素的响应函数来处理事件
-事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
*/
u1.onclick=function(event){
// 如果触发事件的对象是我们期望的元素，则执行，否则不执行
/*
target
-event中的tar get表示的触发事件的对象
*/
if(event.target.className=="link"){
alert("我是ul的单击响应函数");
}
};
// 点击按钮以后添加超链接
var btn01 = document.getElementById("btn01");
var num=4;
btn01.onclick=function(){
// 创建一个li
var li =document.createElement("li");
li.innerHTML=("<a class='link' href='javascript:;'>超链接"+num+"</a>");
u1.appendChild(li);
// 以下这种不行，因为此时li节点还未被添加进去，无法获取父节点
// li.paraentNode.appendChild(li);
num++;
};
}; </script>
</head>
<body>
<button id="btn01">添加超链接</button>
<ul id="u1">
<li><a class="link" href="javascript:;">超链接1</a></li>
<li><a class="link" href="javascript:;">超链接2</a></li>
<li><a class="link" href="javascript:;">超链接3</a></li>
</ul>
</body>
</html>
7、事件的绑定
<!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>Document</title>
<script> window.onload=function(){
/*
点击按钮后弹出一个内容
*/
var btn01 = document.
getElementById("btn01");
/*
使用对象.事件 = 函数 的形式绑定响应函数
它只能同时为一个元素的一个事件绑定一个函数
不能绑定多个，如果绑定了多个，则后边的会覆盖前面的
*/
/* btn01.onclick=function(){
alert(1);
}; */
/*
为btn01绑定第二个响应函数
*/
/* btn01.onclick=function(){
alert(2);
}; */
/*
addEventListener()
-通过这个方法也可以为元素绑定响应函数
-参数
1、事件的字符串，不要on
2、回调函数，当事件触发时，该函数会被调用
3、是否在捕获阶段触发事件，需要一个布尔值，一般都传false
使用这个可以同时为一个元素的相同事件同时绑定多个响应函数
这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
这个方法不支持Ie8及以下的浏览器
*/
/* btn01.addEventListener("click",function(){
alert(1);
},false);
btn01.addEventListener("click",function(){
alert(2);
},false); */
/*
attachEvent()
-在ie8中可以使用attachEvent()来绑定事件
-参数：
1、事件的字符串，要加on
2、回调函数
-这个方法也可以同时使一个事件绑定多个处理函数
不同的是它是后绑定的事件会先执行，执行顺序和addEventListener()相反
-只能在ie8使用
*/
/* btn01.attachEvent("onclik",function(){
alert(1);
});
btn01.attachEvent("onclik",function(){
alert(2);
}); */
/* btn01.attachEvent("onclik",function(){
alert(this);//window
}); */
/* btn01.addEventListener("click",function(){
alert(this);//button
},false); */
bind(btn01,"click",function(){
alert(this);
});
};
// 定义一个函数，用来为指定元素绑定响应函数
/*
addEventListener()中的this是绑定事件的对象
attachEvent()中的this是window
需要统一两个方法的this
*/
/*
参数：
obj要绑定事件的对象
evenStr事件的字符串(不要on)
callback回调函数
*/
function bind(obj,eventStr,callback){
if(obj.addEventListener){
// 大部分浏览器兼容
obj.addEventListener(eventStr,callback,false);
}else{
/*
this是谁由调用方式决定
callback.call(obj)
*/
// ie8及以下
// obj.attachEvent("on"+eventStr,callback);
obj.attachEvent("on"+eventStr,function(){
callback.call(obj);
});
}
}; </script>
</head>
<body>
<button id="btn01">我是一个按钮</button>
</body>
</html>
8、事件的传播
<!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>Document</title>
<style> #box1{
width: 300px;
height: 300px;
background-color: #bfa;
}
#box2{
width: 200px;
height: 200px;
background-color: yellow;
}
#box3{
width: 100px;
height: 100px;
background-color: green;
} </style>
<script> 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
-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{
/*
this是谁由调用方式决定
callback.call(obj)
*/
// ie8及以下
// obj.attachEvent("on"+eventStr,callback);
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>
9、练习---拖拽
<!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>Document</title>
<style> #box1{
width: 100px;
height: 100px;
background-color: #bfa;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
} </style>
<script> window.onload=function(){
/*
可以拖拽box1元素
-拖拽的流程
1、当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
2、当鼠标移动时，被拖拽元素跟随鼠标移动onmousemove
3、当鼠标松开时，被拖拽元素固定在当前位置onmouseup
*/
var box1 = document.getElementById("box1");
// 1、当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
box1.onmousedown=function(event){
event = event||window.event;
// div的偏移量
/*
鼠标.clientX - 元素.offsetLeft
鼠标.clientY - 元素.offsetTop
*/
var x1 =event.clientX - box1.offsetLeft;
var y1 =event.clientY - box1.offsetTop;
// 2、当鼠标移动时，被拖拽元素跟随鼠标移动onmousemove
// 为document绑定一个鼠标移动事件
document.onmousemove=function(event){
event = event||window.event;
var x = event.clientX-x1;
var y = event.clientY-y1;
box1.style.left=x+"px";
box1.style.top=y+"px";
};
document.onmouseup=function(event){
//3、当鼠标松开时，被拖拽元素固定在当前位置onmouseup
// 取消document的onmousemove事件
document.onmousemove=null;
document.onmouseup=null;
}
};
}; </script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
10、拖拽2.0
<!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>Document</title>
<style> #box1{
width: 100px;
height: 100px;
background-color: #bfa;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
} </style>
<script> window.onload=function(){
/*
可以拖拽box1元素
-拖拽的流程
1、当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
2、当鼠标移动时，被拖拽元素跟随鼠标移动onmousemove
3、当鼠标松开时，被拖拽元素固定在当前位置onmouseup
*/
var box1 = document.getElementById("box1");
// 获取box2
var box2 = document.getElementById("box2");
var img = document.getElementById("img1");
drag(img1);
drag(box1);
// 给box2绑定拖拽
drag(box2);
};
/*
提取一个专门用来设置拖拽的函数
*/
function drag(obj,event){
// 1、当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
obj.onmousedown=function(event){
obj.setCapture&&obj.setCapture();
event = event||window.event;
var x1 =event.clientX - obj.offsetLeft;
var y1 =event.clientY - obj.offsetTop;
document.onmousemove=function(event){
event = event||window.event;
var x = event.clientX-x1;
var y = event.clientY-y1;
obj.style.left=x+"px";
obj.style.top=y+"px";
};
document.onmouseup=function(event){
document.onmousemove=null;
document.onmouseup=null;
obj.releaseCapture&&obj.releaseCapture();
};
return false;
};
}; </script>
</head>
<body>
我是一段文字
<div id="box1"></div>
<div id="box2"></div>
<img id="img1" src="img/1.jpg"style="position: absolute;"/>
</body>
</html>
<!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>Document</title>
<script> window.onload=function(){
// 分别为两个按钮绑定单击响应函数
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
btn01.onclick=function(){
alert(1);
};
btn02.onclick=function(){
alert(2);
}
// 设置btn01对鼠标按下相关的事件进行捕获
/*
当调用一个元素的setCaptrue()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自己身上
*/
// btn01.setCaptrue();
}; </script>
</head>
<body>
<button id="btn01">按钮1</button>
<button id="btn02">按钮2</button>
</body>
</html>
十三、Day12
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>Document</title>
<style> #box1{
width: 100px;
height: 100px;
background-color: red;
} </style>
<script> window.onload=function(){
var box1 = document.getElementById("box1");
/*
当滚轮向下滚动，box1变长，相反变短
*/
/*
为box1绑定一个鼠标滚轮事件
onmousewheel鼠标滚轮滚动事件，会在鼠标滚动时触发
但是火狐不支持该属性
在火狐中需要使用DOMMouseScroll来绑定滚动事件
注意该事件需要通过addEventListener()函数来绑定
*/
// var num=100;
box1.onmousewheel=function(event){
event=event||window.event;
// alert("滚了");
// 判断鼠标滚轮滚动的方向
// event.wheelDelta可以获取鼠标滚轮滚动的方向
// 不看大小，只看正负，向上正，向下负，但是火狐不支持
// alert(event.wheelDelta);
// 火狐使用detail获取滚动的方向
// alert(event.detail);
if(event.wheelDelta>0||event.detail<0){
// alert("向上滚");
// num+=10;
box1.style.height= box1.clientHeight+10+"px";
}else{
// num-=10;
box1.style.height=box1.clientHeight-10+"px";
// alert("向下滚");
}
/*
使用addEventListener()绑定的响应函数，取消默认行为不能使用return false
需要使用event来取消默认行为.但是ie8不支持，会报错
*/
event.preventDefault&&event.preventDefault();
/*
当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动
这是浏览器的默认行为，如果不希望发生，则取消默认行为return false
*/
return false;
};
// 为火狐绑定滚轮事件,现在使用onwheel
bind(box1,"DOMMouseScroll",box1.onmousewheel);
};
function bind(obj,eventStr,callback){
if(obj.addEventListener){
// 大部分浏览器兼容
obj.addEventListener(eventStr,callback,false);
}else{
/*
this是谁由调用方式决定
callback.call(obj)
*/
// ie8及以下
// obj.attachEvent("on"+eventStr,callback);
obj.attachEvent("on"+eventStr,function(){
callback.call(obj);
});
}
}; </script>
</head>
<body style="height: 2000px;">
<div id="box1"></div>
</body>
</html>
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>Document</title>
<style>
</style>
<script> window.onload=function(){
/*
键盘事件：
onkeydown
-按键按下
-对于onkeydown来说如果一直按着按键不松手，则事件会一直触发
-当onkeydown连续触发时，第一次和二次之间间隔会稍微长点，其他的非常的快
这种设计是为了防止误操作
onkeyup
-按键松开
-不会连续触发
键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
*/
/* document.onkeydown=function(event){
alert(event.key+"按键被按下了");
} */
document.onkeyup=function(event){
event=event||window.event;
/*
event.keycode 按键的Unicode编码
event.key 按键名字
-通过它那个判断哪个按键被按下
*/
/* if(event.keyCode==89){
alert("y被松开了");
} */
/*
判断y和ctrl是否同时被按下
无法通过以下判断，每次只能获取一个按键的编码
*/
/* if(event.keyCode==89&&event.keyCode==17){
alert("y和ctrl被松开了");
} */
/*
除了keyCode，事件对象还提供了几个属性
altKey
ctrlKey
shiftKey
-这三个用来判断alt ctrl 和shift是否被按下
如果按下则返回true，否则返回false
*/
if(event.keyCode==89&&event.ctrlKey){
alert("y和ctrl被同时松开了");
}
// alert(event.key+"按键被松开了");
};
// 获取input
var input = document.getElementsByTagName("input")[0];
input.onkeydown=function(event){
event=event||window.event;
// console.log(event.key+"按键被按下了");
// 使用文本框不能输入数字，其他的可以
// 数字的keyCode是48到57
if(event.keyCode>=48&&event.keyCode<=57){
alert("不能输入数字");
return false;
}
/*
在文本框中输入内容，属于onkeydown的默认行为
// 如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
*/
// return false;
};
}; </script>
</head>
<body>
<input id="input1" type="text">
</body>
</html>
3、练习----移动div
<!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>Document</title>
<style> #box1{
width: 100px;
height: 100px;
background-color: #bfa;
position: absolute;
} </style>
<script> /*
使div可以根据不同的方向键向不同的方向移动，
按左键-左移
...
*/
window.onload=function(){
var box1 = document.getElementById("box1");
document.onkeydown=function(event){
event=event||window.event;
// alert(event.keyCode);
/* if(event.keyCode==39||event.keyCode==68){
// 右移
box1.style.left = box1.offsetLeft + 20 +"px";
}else if(event.keyCode==37||event.keyCode==65){
// 左移
box1.style.left = box1.offsetLeft - 20 +"px";
}else if(event.keyCode==38||event.keyCode==87){
// 上移
box1.style.top = box1.offsetTop - 20 +"px";
}else if(event.keyCode==40||event.keyCode==83){
// 下移
box1.style.top = box1.offsetTop + 20 +"px";
} */
// 定义一个变量表示移动的速度
var speed = 10;
// 当用户按住ctrl后，速度加快
if(event.ctrlKey){
speed=30;
}
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>
<div id="box1"></div>
</body>
</html>
4、BOM----Navigator
<!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>Document</title>
<script> /*
BOM
-浏览器对象模型
-BOM可以使我们通过JS来操作浏览器
-在BOM中为我们提供了一组对象，用来完成对浏览器的操作
-BOM对象
Window
-代表整个浏览器的窗口，同时也是网页中的全局对象
Navigator
-代表当前浏览器的信息，通过该对象可以识别不同的浏览器
Location
-代表当前浏览器的地址栏信息，或者操作浏览器跳转页面
History
-代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录
由于隐私原因，该对象不能获取具体的历史记录，只能操作浏览器向前或向后翻页
而且该操作只在当次访问时有效
Screen
-代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关信息
这些BOM对象在浏览器中都是作为window对象的属性保存的
可以通过window对象来使用，也可以直接使用
*/
/* alert(window.navigator);
alert(window.location);
alert(window.screen);
alert(window.history); */
/*
Navigator
-代表当前浏览器的信息，通过该对象可以识别不同的浏览器
-由于历史原因，Navigator对象的大部分属性都已经不能帮助我们识别浏览器了
-一般我们只会使用userAgent来判断浏览器的信息
userAgent就是一个字符串，这个字符串中包含有用来描述浏览器信息的内容
不同的浏览器有不同的userAgent
火狐：Mozilla/5.0(Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
edge：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36 Edg/106.0.1370.52
在ie11中已经将微软和ie相关的标识已经去除了，所以我们基本已经不能通过userAgent来识别是不是ie浏览器了
属性：
appName：返回浏览器的名字
*/
// alert(window.navigator.appName);
// alert(navigator.userAgent);
var ua = navigator.userAgent;
console.log(ua);
if(/firefox/i.test(ua)){
alert('你是火狐');
}else if(/edg/i.test(ua)){
alert("你是edge");
}else if(/mise/i.test(ua)){
alert("你是ie");
}else if("ActiveXObject" in window){
alert("你是ie11，你个王八蛋！");
}
/*
如果通过userAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息
比如：ActiveXObject
*/
/* if(window.ActiveXObject){
alert("你是ie,你完了");
}else{
alert("你不是ie");
} */
// alert(!!window.ActiveXObject);//ie11让他是false
// alert("ActiveXObject" in window);//ie11可以抓了 </script>
</head>
<body>
</body>
</html>
5、History
<!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>Document</title>
<script> /*
Histroy
-对象可以用来操作浏览器向前或向后翻页
属性：
-length可以获取当前访问的链接数量
*/
// alert(history);//Object history
// alert(history.length);
window.onload=function(){
var btn01= document.getElementById("btn01");
btn01.onclick=function(){
/*
back()
-可以用来回退到上一个页面，作用和浏览器的回退按钮一样
*/
// history.back();
/*
forward()
-可以跳转到下一个页面，作用和浏览器的前进按钮一样
*/
// history.forward();
/*
go()
-可以用来跳转到指定的页面
-它需要一个整数作为参数
1、表示向前跳转一个页面
2、表示向前跳转两个页面
-1、向后跳转一个页面
......
*/
// history.go(1);
};
}; </script>
</head>
<body>
<button id="btn01">点我一下有惊喜</button>
<h1>Histroy</h1>
<a href="04_BOM.html">去bom</a>
</body>
</html>
6、Location
<!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>Document</title>
<script> window.onload=function(){
var btn01= document.getElementById("btn01");
btn01.onclick=function(){
/*
如果直接打印Location，则是获取地址栏的信息（当前页面的完整路径）
*/
// alert(location);
/*
如果将location修改为一个绝对或相对路径，
页面会直接跳转到相应页面，并生成相应的历史记录
*/
// location="https://www.xiaolin-blog.top";
/*
assign()
-用来跳转到其他的页面，作用和直接修改location一样
*/
// location.assign("https://www.bilibili.com");
/*
reload()
-用于重新刷新当前页面，作用和刷新一样
-如果在方法中传递了一个参数true，则强制清空缓存刷新
*/
// location.reload(true);
/*
replace()
-可以使一个新页面替换当前页面，跳转后无法回退到当前页面
-不会生成历史记录
*/
location.replace("https://bilibili.com");
};
}; </script>
</head>
<body>
<button id="btn01">点我一下有惊喜</button>
<h1>Location</h1>
<input type="text" name="" id="">
<a href="04_BOM.html">去bom</a>
</body>
</html>
7、window--定时调用
<!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>Document</title>
<script> window.onload=function(){
var count = document.getElementById("count");
/*
使count中的内容，自动切换
Js程序的执行速度是非常快的
如果希望一段程序，可以每隔一段事件执行一次，可以使用定时调用
*/
/* for(var i =0;i<100;i++){
count.innerHTML=i;
} */
/*
setInterval();
-定时调用
-可以将一个函数每隔一段时间执行一次
-参数:
1、回调函数，该函数会每隔一段时间被调用一次
2、每次调用间隔的时间，单位毫秒
返回值：
返回一个Number类型的数据
这个数字用来作为定时器的唯一标识
*/
var num=0;
var fun = function(){
count.innerHTML=num;
num++;
if(num==10){
clearInterval(timer);
}
}
var timer = setInterval(fun,1000);
/*
clearInterval()
-用来关闭一个定时器
-方法需要一个定时器的标识作为参数，关闭指定的定时器
*/
}; </script>
</head>
<body>
<h1 id="count">1</h1>
</body>
</html>
8、练习--切换图片
<!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>Document</title>
<style> #box1{
width: 500px;
height: 400px;
/* background-color: skyblue; */
text-align: center;
} </style>
<script> window.onload=function(){
/*
自动隔一段时间切换图片
*/
//图片数组
var imgs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
var img1 = document.getElementById("img1");
var i=0;
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
var timer;
btn01.onclick=function(){
/*
目前，我们每点击一次，就会开启一个定时器
点击多次就会有多个，这就导致图片切换速度过快
并且只能关掉最后一个定时器（不断赋予新值的原因）
*/
// 在开启定时器之前，需要将当前元素上一次定时器关闭
// clearInterval(timer);
timer = setInterval(function(){
i++;
/* if(i>=imgs.length){
i=0;
} */
i = i%imgs.length;
img1.src = imgs[i];
},1000);
btn01.disabled=true;
btn02.disabled=false;
}
btn02.onclick=function(){
/*
点击按钮以后，关闭定时器
clearInterval可以接收任意类型，undefined也可以
如果有效就停止，无效就没啥事
*/
clearInterval(timer);
btn01.disabled=false;
btn02.disabled=true;
}
}; </script>
</head>
<body>
<div id="box1">自动播放图片！！
<img id="img1" src="img/1.jpg" alt="">
<button id="btn01">开始</button>
<button id="btn02" disabled>结束</button>
</div>
</body>
</html>
9、移动div练习--优化
<!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>Document</title>
<style> #box1{
width: 100px;
height: 100px;
background-color: #bfa;
position: absolute;
} </style>
<script> /*
使div可以根据不同的方向键向不同的方向移动，
按左键-左移
...
*/
window.onload=function(){
// 创建一个变量
var dir=0;
var speed = 10;
// 开启一个定时器，来控制div的移动
setInterval(function(){
// 定义一个变量表示移动的速度
// 通过修改dir影响div移动的方向
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;
}
},30);
var box1 = document.getElementById("box1");
document.onkeydown=function(event){
event=event||window.event;
// alert(event.keyCode);
/* if(event.keyCode==39||event.keyCode==68){
// 右移
box1.style.left = box1.offsetLeft + 20 +"px";
}else if(event.keyCode==37||event.keyCode==65){
// 左移
box1.style.left = box1.offsetLeft - 20 +"px";
}else if(event.keyCode==38||event.keyCode==87){
// 上移
box1.style.top = box1.offsetTop - 20 +"px";
}else if(event.keyCode==40||event.keyCode==83){
// 下移
box1.style.top = box1.offsetTop + 20 +"px";
} */
// 当用户按住ctrl后，速度加快
if(event.ctrlKey){
speed=30;
}else{
speed=10;
}
dir=event.keyCode;
};
// 当按键松开时，div不再移动
document.onkeyup=function(){
dir=0;
}
}; </script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
10、延时调用
<!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>Document</title>
<script> var num=1;
// 开启一个定时器
/* setInterval(function(){
console.log(num++);
},3000); */
/*
延时调用
延时调用一个函数不马上执行，而是隔一段时间以后再执行，只会执行一次
延时调用和定时调用的区别，就是定时调用执行多次，而延时调用只会执行一次
延时调用和定时调用实际上时可以互相代替的，在开发中可以根据需要去选择
*/
var timer=setTimeout(function(){
console.log(num++);
clearTimeout(timer);
},3000);
// clearTimeout(timer);关闭延时调用 </script>
</head>
<body>
</body>
</html>
11、定时器---练习
<!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>Document</title>
<style> *{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
} </style>
<script> window.onload=function(){
// 获取box1
var box1 = document.getElementById("box1");
// 获取btn01
var btn01= document.getElementById("btn01");
// 点击按钮以后，使box1向右（left值增大）
var timer;
btn01.onclick=function(){
// 关闭一个定时器
clearInterval(timer);
// 开启定时器，执行动画效果
timer = setInterval(function(){
// alert(oldValue);
// 获取box1原来的left值
var oldValue =parseInt(getStyle(box1,"left"));
var newValue=oldValue+19;
// 判断newValue是否大于800
if(newValue>800){
newValue=800;
}
box1.style.left=newValue+"px";
// 当元素移动到800px是，使其停止执行
if(newValue==800){
clearInterval(timer);
}
},30);
};
}
function getStyle(obj,name){
return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
} </script>
</head>
<body>
<button id="btn01">点击按钮，box1向右移动</button>
<div id="box1"></div>
<div style="width: 0px;height:1000px;border-left:1px solid black;position: absolute;left:800px;top:0"></div>
</body>
</html>
12、定时器--练习
<!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>Document</title>
<style> *{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
} </style>
<script> var timer;
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)
}
btn02.onclick=function(){
move(box1,0,10)
}
}
function getStyle(obj,name){
return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
}
// 创建一个可以执行简单动画的函数
/*
参数：
1、obj执行动画的对象
2、target执行动画的目标位置
3、speed速度
*/
function move(obj,target,speed){
// 关闭一个定时器
clearInterval(timer);
// 获取元素目前的位置
var current = parseInt(getStyle(obj,"left"));
// 判断speed的正负值
// 如果0-800移动，则speed为正
// 如果800-0移动，则speed为负
if(current>target){
//此时speed应该为负
speed=-speed;
}
// 开启定时器，执行动画效果
timer = setInterval(function(){
// alert(oldValue);
// 获取box1原来的left值
var oldValue =parseInt(getStyle(obj,"left"));
var newValue=oldValue+speed;
// 判断newValue是否大于800
// 向左或向右移动时判断
if((speed<0&&newValue<target) || speed>0&&newValue>target){
newValue=target;
}
obj.style.left=newValue+"px";
// 当元素移动到0px时，使其停止执行
if(newValue==target){
clearInterval(timer);
}
},30);
}; </script>
</head>
<body>
<button id="btn01">点击按钮，box1向右移动</button>
<button id="btn02">点击按钮，box1向左移动</button>
<div id="box1"></div>
<div style="width: 0px;height:1000px;border-left:1px solid black;position: absolute;left:800px;top:0"></div>
</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>Document</title>
<script src="tool.js"></script>
<style> *{
margin: 0;
padding: 0;
}
#box1{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 0;
top:200px;
} </style>
<script> /*
目前定时器的标识由全局变量timer保存
所有正在执行的定时器都在这个变量中保存
*/
// var timer;
window.onload=function(){
// 获取box1
var box1 = document.getElementById("box1");
// 获取btn01
var btn01= document.getElementById("btn01");
// 获取btn02
var btn02= document.getElementById("btn02");
// 获取btn03
var btn03= document.getElementById("btn03");
// 获取btn04
var btn04= document.getElementById("btn04");
// 点击按钮以后，使box1向右（left值增大）
btn01.onclick=function(){
move(box1,"left",800,20);
};
btn02.onclick=function(){
move(box1,"left",0,10);
};
btn03.onclick=function(){
move(box2,"left",800,10);
};
btn04.onclick=function(){
// move(box2,"width",800,10)
move(box2,"width",800,10,function(){
// alert("动画执行完毕");
move(box2,"height",400,10,function(){
move(box2,"top",0,10,function(){
move(box2,"width",100,10,function(){
});
});
});
});
};
}; </script>
</head>
<body>
<button id="btn01">点击按钮，box1向右移动</button>
<button id="btn02">点击按钮，box1向左移动</button>
<button id="btn03">点击按钮，box2向右移动</button>
<button id="btn04">测试</button>
<br><br>
<div id="box1"></div>
<div id="box2"></div>
<div style="width: 0px;height:1000px;border-left:1px solid black;position: absolute;left:800px;top:0"></div>
</body>
</html>
封装js
function getStyle(obj,name){
return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
}
// 创建一个可以执行简单动画的函数
/*
参数：
1、obj执行动画的对象
2、attr执行动画的样式，比如left、top、width、height
3、target执行动画的目标位置
4、speed速度
5、callback回调函数，这个函数将会在动画执行完毕后执行
*/
function move(obj,attr,target,speed,callback){
// 关闭一个定时器
clearInterval(obj.timer);
// 获取元素目前的位置
var current = parseInt(getStyle(obj,attr));
// 判断speed的正负值
// 如果0-800移动，则speed为正
// 如果800-0移动，则speed为负
if(current>target){
//此时speed应该为负
speed=-speed;
}
// 开启定时器，执行动画效果
/*
向执行动画的对象中添加一个timer属性，用来保存自己的定时器的标识
*/
obj.timer = setInterval(function(){
// alert(oldValue);
// 获取box1原来的left值
var oldValue =parseInt(getStyle(obj,attr));
var newValue=oldValue+speed;
// 判断newValue是否大于800
// 向左或向右移动时判断
if((speed<0&&newValue<target) || speed>0&&newValue>target){
newValue=target;
}
obj.style[attr]=newValue+"px";
// 当元素移动到0px时，使其停止执行
if(newValue==target){
clearInterval(obj.timer);
// 动画执行完毕，调用回调函数
callback&&callback();
}
},30);
};
14、轮播图
<!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>Document</title>
<style> *{
margin: 0;;
padding: 0;
}
#outer{
/* 设置宽和高 */
width: 520px;
height: 333px;
margin: 100px auto;
/* 设置背景颜色 */
background-image: linear-gradient(120deg,skyblue 70%,yellowgreen);
/* 设置padding */
padding: 30px 0;
/* overflow: hidden; */
position: relative;
/* 裁剪溢出内容 */
overflow: hidden;
}
#imgList{
/* width: 2600px; */
/* 去除项目符号 */
list-style: none;
/* display: flex; */
/* 开启绝对定位 */
position: absolute;
left: 0px;
}
#imgList li{
margin: 0 10px;
float: left;
}
/* 设置导航按钮 */
#navDiv{
/* 开启绝对定位 */
position: absolute;
bottom: 15px;
/*
设置left值
outer宽度520
navDiv宽度25*5=125
520-125=395 395/2=197.5
*/
/* left: 197px; */
}
#navDiv a{
float: left;
width: 15px;
height: 15px;
background-color: red;
margin: 0 5px;
opacity: 0.4;
filter: alpha(opacity=50);
}
/*
设置鼠标移入的效果
*/
#navDiv a:hover{
background-color: black;
} </style>
<script src="tool.js"></script>
<script> window.onload=function(){
// 设置imgList的宽度
// 获取imgList
var imgList = document.getElementById("imgList");
// 获取所有的img
var imgArr = document.getElementsByTagName("img");
// 设置imgList的宽度
imgList.style.width = 520*imgArr.length +"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++){
allA[i].num=i;
allA[i].onclick = function(){
// 关闭自动切换定时器
clearInterval(timer);
// 获取点击超链接的索引,并将其设置为index
index=this.num;
// 切换图片
// imgList.style.left= -520*index +"px";
setA();
// 使用move函数切换
move(imgList,"left",-520*index,20,function(){
// 动画执行完毕，开启定时器
autoChange();
});
};
}
// 自动切换图片
autoChange();
// 创建一个方法来设置选中的a
function setA(){
// 判断当前索引是否是最后一张
if(index>=imgArr.length-1){
// 将index设置为0
index=0;
// 此时是最后一张，最后一张和第一张一模一样
imgList.style.left=0;
}
for(var i=0;i<allA.length;i++){
allA[i].style.backgroundColor="";
}
allA[index].style.backgroundColor="black";
};
var timer;
// 创建一个函数，用来开启切换图片
function autoChange(){
// 开启定时器，定时切换
timer = setInterval(function(){
// 使用索引自增
index++;
// 判断图片索引
index%=imgArr.length;
//切换图片
move(imgList,"left",-520*index,20,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>
十四、Day13
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>Document</title>
<style> .b1{
width: 100px;
height: 100px;
background-color: red;
}
.b2{
/* width: 200px; */
height: 200px;
background-color: greenyellow;
} </style>
<script> window.onload=function(){
// 获取btn01
var btn01 = document.getElementById("btn01");
// 获取box1
var box1= document.getElementById("box1");
btn01.onclick=function(){
// 修改box1的样式
/*
通过style属性来修改元素的样式，每修改一个样式，浏览器就要重新渲染一次页面
这样执行的性能很差，而且这种形式当我们要修改多个样式时，也不太方便
*/
/* box1.style.width=200+"px";
box1.style.height=200+"px";
box1.style.backgroundColor="yellow"; */
/*
希望一行代码修改多个样式
这样我们只需要修改一次，即可同时修改多个样式
浏览器只需要重新渲染一次，性能较好
表现和行为耦合度降低
*/
// box1.className+=" b2";
// addClass(box1,"b2");
// removeClass(box1,"b1");
// addClass(box1,"b2");
toggleClass(box1,"b2");
};
};
// 定义一个函数，用来向一个元素中添加指定的class属性值
/*
参数
1、obj 要添加class属性的元素
2、cn要添加的class值
*/
function addClass(obj,cn){
if(!hasClass(obj,cn)){
obj.className+=" "+cn;
}
}
/*
判断一个元素是否含有指定的class属性值
如果有该class返回true，没有返回false
*/
function hasClass(obj,cn){
// 判断obj中有没有cn这个类
var reg = new RegExp("\\b"+cn+"\\b");
return reg.test(obj.className);
}
/*
删除一个元素中的一个Class
*/
function removeClass(obj,cn){
// 使用正则表达式用空串替换cn
var reg = new RegExp("\\s\\b"+cn+"\\b");
obj.className=obj.className.replace(reg,"");
}
/*
toggleClass可以用来切换一个类
如果元素中具有该类，则删除
如果元素中没有该类，则添加
*/
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="box1" class="b1"></div>
</body>
</html>
2、二级菜单
<!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="js/tools.js"></script>
<script type="text/javascript"> window.onload = function(){
/*
每一个菜单都是一个div
当div具有collapsed这个类时，是折叠
当div没有这个类时，dic就是展开的状态
*/
/*
点击菜单，切换菜单的显示状态
*/
// 获取全部菜单span
var spans = document.querySelectorAll(".menuSpan");
// 定义一个变量，用来保存当前打开的菜单
var openDiv = spans[0].parentNode;
for(var i=0;i<spans.length;i++){
spans[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");
// 此处只需要添加class
// toggleClass(openDiv,"collapsed");
//切换菜单显示状态
toggleMenu(openDiv);
}
openDiv=parentDiv;
};
}
/*
用来切换菜单展开和折叠
*/
function toggleMenu(obj){
// 在切换类之前，获取元素的高度
var begin = obj.offsetHeight;
// 切换parentDiv的显示
toggleClass(obj,"collapsed");
// 在切换类之后获取一个高度
var end = obj.offsetHeight;
// 动画效果就是要将高度从begin向end过渡
// 将元素高度重置为begin
obj.style.height=begin+"px";
// 执行动画
move(obj,"height",end,10,function(){
// 动画执行完毕,删除内联样式
obj.style.height="";
});
// obj.style.transition="all 2s" ;
}
}; </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>
3、JSON
<!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>Document</title>
<script> /*
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、数组
*/
// var obj = '{"name":"孙悟空","age":18,"gender":"男"}';
// console.log(typeof obj);//String
var arr ='[1,2,3,"hello",true]';
var obj2 ='{"arr":[1,2,3]}';
var arr2 ='[{"name":"孙悟空","age":18,"gender":"男"},1,2,3,"hello",true]';
/*
将json字符串转换为js中的对象
在js中为我们提供了一个工具类，就加json
这个对象可以帮助我们将一个json转换为js对象，也可以将js对象转换为json
*/
var objJson = '{"name":"孙悟空","age":18,"gender":"男"}';
/*
JSON-->js对象
JSON.parse();
-可以将JSON字符串转换为js对象
-它需要一个JSON字符串作为参数，会将该字符串转换为js对象
*/
var o = JSON.parse(objJson);
// console.log(o.gender);
var o2 =JSON.parse(arr);
// console.log(o2[1]);
var obj3 = {
"name":"猪八戒",
"age":18,
"gender":"男"
};
/*
JS对象--->JSON字符串
-JSON.stringify()
-可以将一个js对象转换为json字符串
-需要一个js对象作为参数，会返回一个JSON字符串
*/
var s3 = JSON.stringify(obj3);
console.log(s3);
/*
JSON对象在ie7以下的浏览器中不支持，所以在这些浏览器中
调用时会报错
*/ </script>
</head>
<body>
</body>
</html>
4、JSON
<!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>Document</title>
<!--
如果需要兼容ie7及以下的json操作，则可以通过引入一个外部的js文件来解决
-->
<script src="js/json2.js"></script>
<script> var str = '{"name":"孙悟空","age":18,"gender":"男"}';
/*
eval()
这个函数可以用来执行一段字符串形式的js代码，并将执行结果返回
如果使用eval()执行的字符串中含有{}。他会将{}当成代码块
如果不希望将其当成代码块解析，则需要在字符串前后各加一个()
-eveal()这个函数功能很强大，可以直接执行一个字符串的js代码
但在开发中尽量不要使用，首先它的执行性能比较差，然后它还具有安全隐患
*/
var str2="alert('hello');";
// eval(str2);
var obj = eval("("+str+")");
console.log(obj); </script>
</head>
<body>
</body>
</html>
本文作者：_xiaolin
本文链接：https://www.cnblogs.com/SilverStar/p/17415641.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
