JavaScript入门

// JavaScript的发明人
// 布兰登·艾奇(Brendan Eich),用了十天时间发明了JavaScript模型

// JavaScript简称JS

// JavaScript是什么？
// 1.脚本语言
// 编译语言：需要把代码编译成计算机所认知的二进制语言才能执行
// 脚本语言：不需要编译，直接执行
// 2.解释性语言
// 解释性语言：遇到一行代码就解释一行代码
// 其他语言：把所有代码编译完成后在执行代码
// 3.动态类型的语言
// 4.基于对象的语言
// 5.弱类型语言
// 弱类型语言：声明变量都用var，会自动辨别类型：var num = 10; var num2 = 10.23;
// 强类型语言：声明变量的时候必须写上对应变量的类型：int num = 10; double num2 = 10.23;

// JS分三个部分： 
// 1.ECMAScript js的基本语法
// 2.DOM  Document Object Model 文档对象模型
// 3.BOM Browser Object Model 浏览器对象模型

// js代码注意问题
// 1.如果script的标签中有错误的js代码，那么这对script标签就不会执行
// 2.如果有一个script标签代码错误，但它不会影响其他的script标签
// 3.script标签在页面中可以多对出现
// 4.script标签一般放在body标签内容的最后，可以放在head中
// 5.如果script标签引用外部js文件，那么就不要在这对标签里面放任何js代码

// 在浏览器弹出的提示框中显示
alert();
// 在浏览器的控制台中显示
console.log();
// 在浏览器页面中显示
document.write();
// 在浏览器中弹出输入框
prompt();

/*什么是变量：
 变量是计算机内存中存储数据的标识符，根据变量名可以获取到内存中存储的数据*/

/*为什么使用变量：
 使用变量可以方便的获取或者修改内存的数据*/

// 变量的作用：
// 操作数据：存储数据、读取数据

/*变量名的规范：
一般以字母，$符号，下划线开头
变量名一般都是小写，如果是多个单词，那么第一个单词的首字母小写，后面的单词首字母大写
变量名不能是关键字
区分大小写*/

// 变量声明
var  name;// 有var 有变量名字但没有赋值

// 声明多个变量
var name,age,sex;

// 变量的初始化：声明变量同时赋值
var xiu = undefined;// 声明变量没有赋值默认为undefined：未定义
var number = 20;// 存储一个数字(number)
var name = "修抗";// 存储一个字符串(string) 字符串应该用单引号或者双引号包裹起来
var flag = true;// 存储一个真(true) 假(false)
var nll = null;// 存储一个空(null)

// 声明多个变量依次赋值
var num1,num2,num3;
num1 = 10;
num2 = 20;
num3 = 30;

// 声明多个变量并赋值
var num1 = 10,num2 = 20,num3 = 30;

// 变量的交换(1)
var num1 = 10,num2 = 20;
var num3;//重新声明一个变量
num3 = num1;//num3 = num1 = 10
num1 = num2;//num1 = num2 = 20
num2 = num3;//num2 = num3 = 10

// 变量的交换(2)一般适用于数字的交换
var num4 = 10,num5 = 20;
num4 = num4 + num5;//10+20=30
num5 = num4 - num5;//30-20=10
num4 = num4 - num5;//30-10=20

// 变量的交换(3)
var num6 = 10,num7 = 20;
num6 = num6 ^ num7;
num7 = num6 ^ num7;
num6 = num6 ^ num7;

/*
原始数据类型：number,string,boolean,undefined,null,object
基本类型：number,string,boolean
复杂类型：object
空类型：undefined,null

基本类型的值在栈空间存储
复类类型的值在堆空间存储，然后在栈空间引用堆空间的地址
*/
// 获取变量的数据类型
var xiu = "修抗";
console.log(typeof(xiu)); //string

// 八进制(数字前面加一个0代表八进制)
var num = 012;

// 十进制
var num2 = 10;

// 十六进制(数字前面加一个0x代表十六进制)
var num3 = 0xa;

/*二进制-->十进制
1----1----0----0----1----0----1----0----1(二进制)
256--128--64---32---16---8----4----2----1
256--128--0----0----16---0----4----0----1(十进制)
二进制：110010101 = 256+128+0+0+16+0+4+0+1 = 405：十进制
*/ 

/*二进制-->八进制
110----010----101(二进制)
6------2------5(八进制/每三位二进制为一组)
二进制：110010101 = 625：八进制
*/

/*二进制-->十六进制
1----1001----0101(二进制)
1----9-------5(十六进制/每四位二进制为一组)
二进制：110010101 = 195：十六进制
*/

/*十进制-->二进制
405-202-101-50--25--12--6---3---1
1---0---1---0---1---0---0---1---1(倒叙)
十进制：405 = 110010101：二进制
 */

// 小数类型和整数类型都是数字类型(Number)

//数字的最大值和最小值
console.log(Number.MAX_VALUE);//最大值
console.log(Number.MIN_VALUE);//最小值

// Infinity 无穷大
// -Infinity 无穷小

// 小数的bug
console.log(0.1+0.2);//结果不是0.3而是0.30000000000000004

// 不要用NaN验证NaN
var xiu;
console.log(xiu+10);//返回NaN
console.log("你好" == "我好");//false：都是字符串，但是字符串内容不一样
console.log(xiu+10 == NaN);//false：都是NaN,但是里面的值不一样

// isNaN()判断是否不是数字,如果不是数字返回true
console.log(isNaN(NaN));

// 字符串可以使用单引号，也可以使用双引号
var str = "xiu ";
var str2 = ‘kang‘;

// 查看字符串的长度
console.log(str.length);

// 字符串拼接，用+链接
// 如果两边只要有一边为字符串，那么+就为拼接
// 如果两边都是数字。那么就是算术功能
var str3 = "1";
var str4 = ‘2‘;
console.log(str3 + str4);//12

// Boolean类型
// 布尔类型只有两个值 true(真) false(假)
var flag = true;

// Undefined
// 表示声明一个变量没有赋值，变量只有声明的时候值默认为undefined
var unde = undefined;

// null类型
// 表示一个空，变量的值如果为空，必须手动设置
var str = null;

// 其他类型转为数字类型：三种方式
// parseInt();转整数
console.log(parseInt("8sa"));//8
console.log(parseInt("as8"));//NaN
console.log(parseInt("8.9"));//8
console.log(parseInt("8.2as"));//8
console.log(parseInt("sa6.8"));//NaN

// parseFloat();转小数
console.log(parseFloat("8sa"));//8
console.log(parseFloat("as8"));//NaN
console.log(parseFloat("8"));//8
console.log(parseFloat("8.9as"));//8.2
console.log(parseFloat("sa6.8"));//NaN

// Number();转数字
console.log(Number("8sa"));//NaN
console.log(Number("as8"));//NaN
console.log(Number("8"));//8
console.log(Number("8.9as"));//NaN
console.log(Number("sa6.8"));//NaN

// 其他类型转为字符串类型：两种方式
// toString;不能转换没有意义的变量：null、undefined
var xiu = 10;
console.log(xiu.toString());

// String();
var kang = 20;
console.log(String(kang));

// 其他类型转为布尔类型
// Boolean();
console.log(Boolean(0));//false
console.log(Boolean(""));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false

// x+y
// x和y是操作数 +是操作符

// 算术运算符(+、-、*、/、%)
10%4;//10除于4的余数

// 一元运算符(++、--)
// 这个运算符只需要一个操作数就可以运算的表达式
// 前+ 后+ 前- 后-
var x = 2;
var y = 2;
console.log(x++ +3);//5,后+,先参与运算,运算结束后在+1
console.log(x);//3
console.log(++y +3);//6,前+,先+1,然后在参与运算
console.log(y);//3

// 二元运算符()
// 这个运算符需要两个个操作数就可以运算的表达式

// 三元运算符()
// 这个运算符需要三个操作数就可以运算的表达式
// var 变量 = 表达式1 ? 表达式2 : 表达式3
// 如果表达式1结果为true,就执行表达式2,然后把表达式2的结果给变量
// 如果表达式1结果为false,就执行表达式3,然后把表达式3的结果给变量
var sear = true ? 1 : 2;//sear=1

// 复合运算符(+=、-=、*=、/=、%=)
var num;
num+=10;//num=num+10;

// 关系运算符(<、>、<=、>=、!=、==、===、!=、!==)
var xiu = "10";
var kang = 10;
console.log(xiu==kang);//两个值都一样所以为true
console.log(xiu===kang);//值一样，但是类型不一样所有为false

// 逻辑运算符($$与-并且、 ||或-或者、 !非-取反、)
console.log(true && true);//两个为true则为true
console.log(true || false);//一个为true则为true
console.log(!false);//false为true，true为false

/*
运算符的优先级
1.() 优先级最高
2.一元运算符 ++ -- !
3.算术运算符 先* / 后 + -
4.关系运算符 < <= > >=
5.相等运算符 == != === !==
6.逻辑运算符 先&& 在||
7.赋值运算符 =
 */

// 流程控制：代码的执行过程

// 流程控制的三种方式：
// 1.顺序结构
// 从上到下，从左往右执行的顺序叫顺序结构(不严谨)
// var xiu = 2;(不严谨的原因：先找到2,然后在将2赋值给xiu)

// 2.分支结构

// if语句
/*
if(表达式1) {
    代码块1
}else if(表达式2) {
    代码块2
}else {
    代码块3
}
先运行表达式1,如果表达式1为true就执行的代码块1,如果为false就执行表达式2
如果表达式2,如果表达式2为true就执行的代码块2,如果为false就执行代码块3
else if()可以多次出现,也可以不写
else 只能出现一次,也可以不写
*/
var x = prompt("请输入数字");//prompt()弹出一个输入框
if(x > 5){
    console.log("大于5");
}else if(x < 5) {
    console.log("小于5");
}else if(x == 5) {
    console.log("等于5");
}else {
    console.log("请输入数字");
}

// switch-case
/*
switch(表达式){
    case 值1: 代码块;break;    
    case 值2: 代码块;break;    
    case 值3: 代码块;break;    
    default:代码4;   
}
获取表达式的值,然后和值依次比较,如果和值相等执行相对应的代码块,遇到break跳出switch语句
如果和值都不相等，那么就执行default语句
表达式的值跟case的值比较是严格模式的比较(===)
default可以省略
break可以省略：省略后不会跳出语句 会依次往下执行
 */
var y = prompt("请输入1到3的整数");
switch(y){
    case "1":console.log(y);
    break;//该语句为跳出语句
    case "2":console.log(y);
    break;
    case "3":console.log(y);
    break;
    default:console.log("请输入1到3的整数");
}

// 三元表达式

// 3.循环结构
// while
/*
var 变量 = 0;
while(条件){
    循环体;
    计数器;
}
如果条件为false,就不执行while大括号里面的内容
如果条件为true,就执行循环体,然后执行计数器,循环结束后计数器+1,然后又去判断条件,直到条件为false停止循环
*/
var xiu = 0;//计数器
while(xiu<10){
    console.log(xiu);//循环体
    xiu++;//计数器+1
}

// do-while
/*
do {
    循环体
}while(条件);
先执行循环体,然后在判断条件是否成立,如果为true继续执行循环体,然后在判断条件,直到条件为false跳出循环
*/
var kang = 0;
do {
    console.log(kang);
    kang++;
}while(kang<0);

// for
/*
for(表达式1;表达式2;表达式3;){
    循环体;
}
先获取表达式1的值,然后判断表达式2,如果为false跳出循环,如果为true就执行循环体然后在执行表达式3,然后继续执行表达式2,直到条件为false
*/
for (var i = 1; i <= 10; i++) {
    console.log(i);
}

// break关键字
// 作用：在循环中使用，遇到break则跳出当前循环
while(true){
    console.log("修抗");
    break;//本来是一个死循环，但是遇到break就跳出循环，所有就执行一次
}

// continue关键字
// 作用：在循环中使用，遇到continue直接执行下次循环
// 输出10以内的奇数
var i = 0;
while(i<10){
    if(i%2==0){
        i++;
        continue;//如果为偶数就继续下次循环
    }
    document.write(i);
    i++;
}

// 数组：存储一组有序的数据

// 作用：可以一次性存储多个数据

// 数组的定义：
/*
1.通过构造函数创建数组
var 数组名 = new Array();
var 数组名 = new Array(长度);
如果Array中只有一个值(整数)，那么这个值就是该数组的长度(元素就个数)
如果有多个值，那么这些值就是该数组的数据(数组的长度就是有多少个值)
 */
var array = new Array();//创建一个空数组，没有数据
var array2 = new Array("25");//如果数组中没有数据，但有长度，那么数组的每个值就是undefined

/*
2.通过字面量的方式创建数组
var array = [];
 */
var array3 = [];//创建空数组
var array4 = [3,34,46,7];//创建数组并添加数据

/*
数组元素：就是数组中存储的数据
数组个数：就是数组中元素的个数
数组下标：从0开始，到数组长度减1结束
通过下标设置数组元素值：数组名[下标] = 值
通过下标访问数组元素值：数组名[下标]
 */

// 获取数组的长度
array.length;

// 注意: 数组中的数据类型可以不一样，但一般存储一样的数据,数组的长度可以任意改变
var array5 = [10,"哈哈",true,undefined,null,new Object()];

// 遍历数组
var array6 = [2,5,72,58,3,52];
for(var i=0;i<array6.length;i++){
    console.log(array6[i]);
}

// 求数组的和
var array7 = [1,2,3,4,5];
var sum = 0;
for(var i=0;i<array7.length;i++){
    sum+=array7[i];
}
console.log(sum);

// 求数组的平均值
var array8 = [1,2,3,4,5];
var avg = 0;
for(var i=0;i<array8.length;i++){
    avg+=array8[i];
}
console.log(avg/array8.length);

// 求数组的最大值
var array9 = [1,2,3,4,5];
var max = array9[0];
for(var i=1;i<array9.length;i++){
    if(max<array9[i]){
        max=array9[i];
    }
}
console.log(max);

// 数组的倒叙
var array10 = [1,2,3,4,5];
for(var i=array10.length-1;i>=0;i--){
    console.log(array10[i]);
}

// 去掉数组中的0
var array11 = [1,0,3,0,5];
var newArray11 = [];
for(var i=0;i<array11.length;i++){
    if(array11[i] != 0){ 
        newArray11[newArray11.length] = array11[i];
    }
}
console.log(newArray11);

// 冒泡排序：把所有数据按照一定顺序进行排序(从大到小,从小到大)
var arr = new Array(3,36,2,47,42,436,54);
for (var i=0;i<arr.length-1;i++) {
    for(var j=0;j<arr.length-1-i;j++){
        if(arr[j]>arr[j+1]){
            var tame = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = tame;
        }
    }
}
console.log(arr);

/*
函数：将重复的代码进行封装，在需要的时候进行调用

定义函数:
function 函数名(){
    函数体;
}
调用函数：
函数名();

函数参数：
定义函数的时候，函数名后面的小括号里的变量就是参数
function 函数名(x,y){
    函数体;
}

形参：定义函数时小括号里面的参数
function 函数名(x,y){
    函数体;
}
实参：调用函数时小括号里面的参数
函数名(x,y);

函数的返回值：
在函数内部有return关键字并且关键字后面有内容，那么这个内容就是返回值
在调用的时候，如果需要返回值，就定义变量接收就行了
function 函数名(){
    return 520;
}
var fun = 函数名();//此时fun变量的值就是函数返回的值

无参数无返回值的函数
function xiu(){
    console.log("修抗");
}
无参数有返回值的函数
function xiu(){
    return "修抗";
}
有参数无返回值的函数
function xiu(x,y){
    console.log(x+y);
}
有参数有返回值的函数
function xiu(x,y){
    return x+y;
}

命名函数：函数有名字
匿名函数：函数没有名字

定义匿名函数:
function(){
    函数体;
}
匿名函数不能直接调用，需要赋值给变量才能调用(这就是函数表达式)
var fun = function(){
    函数体;
}
fun();//在变量后面添加小括号就可以调用匿名函数了

函数的自调用:
(匿名函数)();
(function(){alert("修抗");})();

函数做为参数使用：
如果一个函数作为参数使用，那么这个参数(函数)就是回调函数
function xiu(){
    kang();
}
function kang(){
    函数体;
}

函数做为返回值使用：
function xiu(){
    return function(){
        函数体;
    };
}
var kang = xiu();//将xiu的返回值赋值给变量，现在变量就是一个函数
kang();//直接加小括号掉用就行了

注意：
函数一旦重名,就会把前面的函数覆盖
匿名函数就不会出现重名的问题
形参和实参的个数可以不一致
函数没有明确返回值，但调用的时候接收了，那么接收的值为undefined
没有明确返回值:没有return或者return后面没有跟任何内容
return后面的代码不会执行
函数也有数据类型：function类型
 */

function f1(x,y){
    //获取的函数的名字，只读
    console.log(f1.name);
    // 获取实参的个数
    console.log(f1.arguments.length);
    // 获取形参的个数
    console.log(f1.length);
    // 调用者，如果该函数被其他函数调用，那么该属性就输出其他函数的源码
    console.log(f1.caller);
}
f1(1,2);

// sort()对数组的元素进行排序，并返回数组
var arr = ["dfg","dgh","dsgar"];
arr.sort(function(x,y){
    if(x>y){
        return 1;
    }else if(x==y){
        return 0;
    }else {
        return -1;
    }
});
console.log(arr);

/*
闭包的概念：
在函数A中有一个函数或者对象,该函数或者对象可以访问函数A中定义的变量或者数据,此时形成了闭包
闭包的模式：
函数模式的闭包,对象模式的闭包
闭包的作用：
缓存数据,延长作用域链
闭包的优点缺点：
优点:可以缓存数据,缺点:缓存数据的同时不能释放空间
局部变量是在函数中，函数使用结束后，局部变量就会被自动释放
闭包后，里面的局部变量的使用作用域就会被延长，不会被释放
 */
// 函数模式的闭包：在一个函数中有一个函数
function f1(){
    var num = 10;
    function f2(){
        console.log(num);
    }
    f2();
}
f1();
// 对象模式的闭包：在一个函数中有一个对象
function f3(){
    var num = 3;
    var obj = {age:num};
    console.log(obj.age);
}
f3();

// 列子：
function person(){
    var num = 1;
    return function(){
        num++;
        console.log(num);
    }
}
var per = person();
per();//2
per();//3
per();//4

/*
局部变量：在函数内部定义的变量叫局部变量，只能在函数内部才能使用
全局变量：除了函数以外在其他任意位置定义的变量叫全局变量，可以在页面任意位置使用
隐式全局变量：声明变量的时候没有var就是隐式全局变量(可以在页面任意位置使用)

局部作用域：局部变量的使用范围
全局作用域：全局变量的使用范围
块级作用域：大括号里面定义的变量只能在当前大括号里面使用，而js不支持块级作用域(函数除外)

注意：
定义全局变量,只要页面不关闭就会一直占空间,消耗内存(就是卡),只有在页面隔壁的时候才会释放空间
定义局部变量,就只有在调用的时候占空间,调用完后就会释放空间(所以尽量使用局部变量)
全局变量不能被删除而隐式全局变量可以被删除,删除变量(delete 变量名;)

作用域链：
var sum = 0;
function f1(){
    var sum = 1;
    f2();
    function f2(){
        var sum = 2;
        f3();
        function f3(){
            var sum = 3;
            alert(sum);
        }
    }
}
如果当前没有变量就会去上一级找变量,没有继续去上一级，直到全局变量，这就是作用域链
 */

// 预解析：提前解析代码

// 提前解析变量
console.log(sum);//输出undefined
var sum = 0;
/*
理解：浏览器帮我们做的事,浏览器将声明变量提前了,但没有把赋值提前
var sum;
console.log(sum);//因为声明变量没有赋值，所以就是undefined
sum = 0;
 */

// 提前解析函数
xiu();
function xiu(){
    console.log("爱心");
}
/*
理解：浏览器帮我们做的事,浏览器将声明的函数提前了
function xiu(){
    console.log("爱心");
}
xiu();
 */

// 同时解析函数和变量
kang();
function kang(){
    console.log(str);
}
var str = "埃辛";
/*
理解：浏览器帮我们做的事,浏览器先将声明的变量提前然后在将声明的函数提前
var str;
function kang(){
    console.log(str);
}
kang();
str = "埃辛";
 */

/*
函数的声明
function f1(){}

函数表达式
var f1 = function(){};
 */
if(true){
    function f1(){
        console.log("true");
    }
}else {
    function f1(){
        console.log("false");
    }
}
f1();
// 在IE10及之前输出的结果都是false,因为会把函数的声明提前
// 解决办法就是使用函数表达式，函数表达式不会被提前
 var f2;
 if(true){
    f2 = function(){
        console.log("true");
    }
}else {
    f2 = function(){
        console.log("false");
    }
}
f2();

/*
编程思想：
把一些生活中的经验融入到程序中

面向过程：
每件事的具体过程要知道，注重的是过程

面向对象：
所有的事都用对象来做，注重的是结果

面向对象的基本特性：
封装，继承，多态(抽象性)

对象的特征：
有属性或者方法

面向对象的编程思想：
根据需求，找出相关的对象，总结对象的特征和行为，把特征变成属性，行为变成方法，然后定义构造函数，实例化对象，通过对象调用属性或者方法，完成对应的需求，这就是编程思想

js不是面向对象的语言，但是可以模拟面向对象的思想
js是一门基于对象的语言
 */
 
// 第一种方式创建对象：调用系统自带的构造函数 new Object()
var obj = new Object();
obj.name = "修抗"; //添加属性1
obj.sex = "男"; //添加属性2
obj.xiu = function(){ //添加方法1
    console.log("方法1");
}
obj.kang = function(){ //添加方法2
    console.log("方法2");
}
// 调用属性的两种方式
console.log(obj.name); //对象.属性
console.log(obj["sex"]); //对象["属性"]
// 调用方法的两种方式
obj.xiu(); //对象.方法名()
obj["kang"](); //对象["方法名"]()

// 第二种方式创建对象：自定义一个构造函数，然后在创建对象
// 创建自定义构造函数,构造函数与函数的区别在于首字母是否大写
function Person(name,age){
    //添加属性
    this.name = name;
    this.age = age;
    //添加方法
    this.type = function(){
        console.log("我叫"+this.name+"，今年"+this.age+"岁");
    };
}
//调用自定义的构造函数创建对象,同时对属性进行初始化(实例化对象)
var obj2 = new Person("修抗",24);
// 调用属性和方法
console.log(obj2.name);
obj2.type();

// 第三种方式创建对象：工厂模式创建对象
// 把创建对象的代码放在函数中,返回值就是这个对象，
function createObject(name,age){
    var obj3 = new Object();
    obj3.name = name;
    obj3.age = age;
    obj3.xiu = function(){
        console.log("我叫"+this.name+"，今年"+this.age+"岁");
    }
    return obj3;
}
var kang = createObject("修抗",20);
kang.xiu();

// 第四种方式创建对象：字面量创建对象
// 方式1:
var obj4 = {};
obj4.name = "修抗";// 添加属性
obj4.type = function(){// 添加方法
    alert("方法");
}
// 方式2:
var obj5 = {
    name: "修抗",
    type:function(){
        alert("方法2")
    }
};

var obj = {
    name : "修抗",
    age : 20
}
for(key in obj){
    console.log(key);//属性
    console.log(obj[key]);//值
}

// 自定义创建对象
function Penson(name){
    this.name = name;
}
var obj = new Penson("修抗");
console.log(obj.name);

//工厂模式创建对象
function createObj(){
    var obj2 = new Object();
    obj2.name = "爱心";
    return obj2;
}
var obj3 = createObj();
console.log(obj3.name);
/*
自定义创建对象与工厂模式创建对象的区别

自定义创建对象：
函数名是大写(首字母)
没有new
没有返回值
this是当前对象
通过new的方式创建对象

工厂模式创建对象：
函数名是小写
有new
有返回值
new之后的对象是当前对象
直接调用函数就可以创建对象

他们的共同点：都是函数,都可以创建对象,都可以传入参数
 */

// 自定义构造函数创建对象
function Person(name){
    this.name = name;
 }
 //实例化对象
var obj = new Person("修抗");
// console.dir()可以把对象的构造显示出来
console.dir(Person);//输出构造函数
console.dir(obj);//输出实例化对象
console.log(Person.prototype.constructor == Person);//true
console.log(obj.__proto__.constructor == Person);//true
console.log(obj.constructor == Person);//true
console.log(obj instanceof Person);//true
/*
实列对象和构造函数的关系
实列对象是通过构造函数来创建的,创建的过程叫实例化
判断对象的数据类型(自定义对象)
1. 通过构造器的方式：
实列对象.构造器(constructor) == 构造函数的名字
obj.constructor == Person
2. 对象 instanceof 构造函数名字
obj instanceof Person
 */

function Person(name,age){
    this.name = name;
    this.age = age;
    this.type = function(){
        console.log("修抗");
    }
}
var obj1 = new Person("修抗",20);
var obj2 = new Person("修抗",20);
// 他们指向的方法不是同一个方法，那么就开辟了不同的空间，浪费内存
console.log(obj1.type == obj2.type);//false
// 解决办法
function f1(){
    console.log("修抗");
}
function Person2(name){
    this.name = name;
    this.type = f1;
}
var obj3 = new Person2("修");
var obj4 = new Person2("修");
// 此时他们指的是同一个方法，节省空间，但函数可能重名，发生不必要的问题
console.log(obj3.type == obj4.type);//true
// 可以使用原型解决该办法：原型的作用之一就是数据共享，节省内存空间

//构造函数
function Person(name,age){
    this.name = name;
    this.age = age;
}
// 实例化对象并初始化
var p1 = new Person("修抗",20);
var p2 = new Person("爱惜",20);
console.dir(Person);//查看构造函数的结构
console.dir(p1);//查看实列对象的结构
/*
实列对象中有两个属性(这两个属性是通过构造函数获取的)
构造函数中并没有name和age这两个属性

实列对象中有个属性，__proto__，也是对象，叫原型，不是标准属性，浏览器使用的
构造函数中有个属性，prototype，也是对象，叫原型，是标准属性，程序员使用的

constructor：构造函数
*/
// 实列对象和构造函数的原型指向的是同一个构造函数
console.log(Person.prototype.constructor == p1.__proto__.constructor);//true
// 通过原型添加方法
Person.prototype.type = function(){
    console.log("修抗");
}
// 因为他们指向的是同一个原型里面的构造函数里面的方法，是同一个方法
console.log(p1.type == p2.type);//true

// 原型链：是一种关系，实列对象和原型对象之间的关系，关系是通过原型(__proto__)来联系的

function Person(){};
Person.prototype.sayHi = function(){
    console.log("打招呼");
};
function Student(){};
Student.prototype.eat = function(){
    console.log("牛皮");
};
Student.prototype = new Person();
var obj = new Student();
obj.sayHi();
// obj.eat();//报错
/*
实列对象的原型__proto__指向的是该对象所在的构造函数的原型对象
构造函数的原型对象(prototype)指向如果改变了，实列对象的原型(__proto__)指向也会发生改变
实列对象和原型对象之间的关系是通过__proto__原型来联系起来的，这个关系就是原型链
 */

function Person(){};
Person.prototype.sayHi = function(){
    console.log("打招呼");
};
var obj = new Person();
console.dir(Person);

// 实列对象中__proto__原型
// 构造函数中prototype原型
// 实列对象的原型和构造函数的原型指向是同一个地方
console.log(Person.prototype == obj.__proto__);//true
// prototype是对象，那么对象就有原型 __proto__
// 实列对象中的__proto__原型指向的是构造函数的prototype
// 构造函数的prototype的__proto__的指向是Object的prototype
console.log(Person.prototype.__proto__ == Object.prototype);//true
//Object的prototype的指向就是null
console.log(Object.prototype.__proto__);//null

<div id="dv"></div>
<input type="button" id="btn" value="按钮"/>
<script>
    function Person(btnObj,dvObj,json){
        this.btnObj = btnObj;
        this.dvObj = dvObj;
        this.json = json;
    }
    Person.prototype.inio = function(){
        var that = this;
        this.btnObj.onclick = function(){
            // 当前this为按钮对象，所以需要在外面添加一个this变量
            for(var key in that.json){
                that.dvObj.style[key] = json[key];
            }
        }
    }
    var dv = document.getElementById("dv");
    var btn = document.getElementById("btn");
    var json = {"width":"200px","height":"400px","backgroundColor":"red"};
    //大概意思就是把添加样式的代码封装在构造函数中，方法在原型中添加
    //点击按钮为id节点设置多个样式
    var obj = new Person(btn,dv,json);
    obj.inio();
</script>

// 构造函数
function Person(name,age){
    this.name = name;
    this.age = age;
}
// 通过构造函数创建实列对象,并初始化
var obj = new Person("修抗",20);
// 构造函数里面的prototype属性指向的是构造函数里面的原型
// 通过构造函数为原型添加一个方法
Person.prototype.type = function(){
    console.log("方法");
}
// 原型对象里面的constructor指向的是自己所在的原型对象所在的构造函数中
console.log(Person.prototype.constructor);//输出的是Person构造函数
// 实列对象里面的__proto__属性指向构造函数里面的原型的方法
obj.__proto__.type();//调用原型里面的方法
// 构造函数的原型对象中的方法可以被实例化对象直接访问
obj.type();//调用原型里面的方法

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.name = "修抗";
var obj = new Person("小子",20);
console.log(obj.name);//修抗
/*
实列对象使用属性或者方法，
先在实列中查找，有则直接使用，
无则去实列对象的__proto__指向的原型对象prototype中找，有则使用，没有则报错
 */ 

console.dir(Array);
//内置对象的方法一般都在该构造函数指向的原型中
// 那么就可以通过构造函数的原型添加内置对象的方法
Array.prototype.mySort = function(){
    for (var i = 0; i < this.length-1; i++) {
        for (var j = 0; j < this.length-1-i; j++) {
            if(this[j]>this[j+1]){
                var time = this[j];
                this[j] = this[j+1];
                this[j+1] = time;
            }
        }
    }
}
var arr = [3,51,543,62,31,5];
// 使用自定义的内置方法
arr.mySort();
console.log(arr);

//函数自调用
// (function(){
//     var num = 10;
// })();
// console.log(num);//报错，因为num是局部变量，无法在函数外使用

(function(){
    var num = 10;
    // js是一门动态类型的语言，对象没有属性，点了就有了
    // window是浏览器的顶级对象
    window.num = num;
})();
console.log(window.num);//10
console.log(num);//10

function Person(){};
Person.prototype.sayHi = function(){
    console.log("打招呼");
};
function Student(){};
Student.prototype.eat = function(){
    console.log("牛皮");
};
Student.prototype = new Person();
var obj = new Student();
obj.sayHi();
// obj.eat();//报错
/*
实列对象的原型__proto__指向的是该对象所在的构造函数的原型对象
构造函数的原型对象(prototype)指向如果改变了，实列对象的原型(__proto__)指向也会发生改变
实列对象和原型对象之间的关系是通过__proto__原型来联系起来的，这个关系就是原型链
 */

/*
面向对象的基本特性

封装：
把一个值放在变量中叫封装
把重复的代码放在函数中叫封装
把重复的属性放在对象中叫封装
把功能类似的函数(方法)放在对象中叫封装
把类似的对象放在一个js文件中叫封装

继承：
面向对象的编程语言中有类(class)的概念，但是js不是面向对象的语言，所以js中没有类，但是js可以模拟面向对象的思想编程，js会通过构造函数来模拟类的概念
首先继承是一种关系，类与类之间的关系，js通过构造函数模拟类，然后通过原型来实现继承
继承是为了数据共享，js中的继承也是为了实现数据的共享
继承的关系：父类与子类的关系

多态：
一个对象有不同的行为，或者是同一个行为针对不同的的对象产生不同的结果，想要有多态，就要先有继承js中可以模拟多态，但不会使用，也不会模拟，因为数据不能共享，会占用大量内存空间
 */

// 原型的作用之一：数据共享，节省内存空间
// 原型的作用之二：为了实现继承

/*
列子：
Person的数据共享给Student就叫继承
 */
function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.type = function(){
    console.log("玩");
}
function Student(score){
    this.score = score;
}
// 通过改变原型的指向来模拟继承
Student.prototype = new Person("小明",20);
Student.prototype.Study = function(){
    console.log("学习");
}
var stu = new Student("100");
// 人的方法和属性
console.log(stu.name);//小明
console.log(stu.age);//20
stu.type();//玩
// 学生的方法和属性
console.log(stu.score);//100
stu.Study();//学习
// 优点：继承了方法和属性
// 缺陷：改变原型指向的同时赋值了，那么子类调用的时候直接使用了父类初始化的属性

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.type = function(){
    console.log("玩");
}

function Student(score,name,age){
    Person.call(this,name,age);
    this.score = score;
}
Student.prototype.study = function(){
    console.log("学习");
}
var obj = new Student(20,"小明",30);
console.log(obj.score);//20
console.log(obj.name);//小明
console.log(obj.age);//30
obj.study();
/*
借用构造函数：
把继承父类的构造函数拿过来使用

借用构造函数：构造函数的名字.call(当前对象,属性,属性...)
解决了属性继承，并且值不重复的问题
缺陷，无法继承父类的继承
 */

/*
原型实现继承
借用构造函数实现继承
组合继承：原型继承+借用构造函数继承
 */
function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.sayHi = function(){
    console.log("打招呼");
}
function Student(score,naem,age){
    // 借用构造函数实现继承
    Person.call(this,name,age);
    this.score = score;
}
// 改变原型的指向
Student.prototype = new Person();
Student.prototype.eat = function(){
    console.log("玩耍");
}
var obj = new Student(10,20,100);
console.log(obj.name);
console.log(obj.age);
console.log(obj.score);
obj.sayHi();
obj.eat();
// 优点：父类的属性和方法都被继承了

/*
apply()和call()的作用: 改变this的指向
使用语法：
函数名字.apply(对象,[参数1,参数2...]);
方法名字.apply(对象,[参数1,参数2...]);
函数名字.call(对象,参数1,参数2...);
方法名字.call(对象,参数1,参数2...);
 */
// 修改函数的this指向
function f1(x,y){
    console.log((x+y)+"..."+this);
}
// "use strict";//严格模式
// 在严格模式下，如果没有window，this指向为undefined
// window.f1(1,2);//3...undefined
f1(1,2);//3...window
var obj = new Object();
// 通过apple或者call改变函数中的this指向
f1.apply(obj,[1,2]);//3...Object

// 修改方法的this指向
function Person(age){
    this.age = age;
}
Person.prototype.sayHi = function(x,y){
    console.log((x+y)+"..."+this.age);
}
function Stuendt(age){
    this.age = age;
}
var per = new Person(10);
var stu = new Stuendt(20);
// sayHi是per的实列对象
// 通过apple或者call改变了this的指向
per.sayHi.apply(stu,[1,2]);//3...20(此时的this.age是stu实列对象中的this)
per.sayHi.call(stu,1,2);//3...20

/*
bind的作用：复制一份然后在改变this的指向
使用语法：
函数名字.bind(对象,参数1,参数2...);返回值是复制后的这个函数
方法名字.bind(对象,参数1,参数2...);返回值是复制后的这个方法
 */

// 修改函数的this指向
function f1(x,y){
    console.log((x+y)+"..."+this);
}
f1(1,2);//3...window
var obj = new Object();
// 复制一份的时候,把参数传入到f1函数中,x-->1,y-->2,obj就是this,默认为window
// bind方法是复制的意思，参数可以在复制的时候传进去，也可以在复制之后传进去
var ff = f1.bind(obj);
ff(1,2);//3...Object

// 修改方法的this指向
function Person(age){
    this.age = age;
}
Person.prototype.sayHi = function(x,y){
    console.log((x+y)+"..."+this.age);
}
function Stuendt(age){
    this.age = age;
}
var per = new Person(10);
var stu = new Stuendt(20);
// sayHi是per的实列对象
var pers = per.sayHi.bind(stu,1,2);//此时的this.age是stu实列对象中的this
pers();//3...20

function f1(){
    console.log("哈哈");
}
// f1是函数，也是对象
console.dir(f1);
// 对象调用方法，说明该对象有这个方法
f1.call();
f1.apply();
// 所用的函数都是Function的实列对象
console.log(f1.__proto__ == Function.prototype);//true

// 在构造函数Function的原型中就有call()和apply()方法
console.dir(Function);

// 拷贝继承：把一个对象的属性或者方法复制到另外一个对象中
var obj = {
    name : "小明",
    type : function(){
        console.log("修抗");
    }
};

// 方式1：
//  改变的地址指向
var obj2 = obj;
console.log(obj2.name);
obj2.type();

// 方式2：
// 通过for循环遍历对象依次赋值给新对象
var obj3 = {};
for(var key in obj){
    obj3[key] = obj[key];
}
console.log(obj3.name);
obj3.type();

function Person(){};
Person.prototype.age = 10;
Person.prototype.play = function(){
    console.log("xiu");
}
// 方式3：
// 拷贝原型中的方法及属性
var obj4 = {};
for(var key in Person.prototype){
    obj4[key] = Person.prototype[key];
}
console.log(obj4.age);
obj4.play();

// 内置对象：自带的对象
// 在线文档(百度MDN):https://developer.mozilla.org/zh-CN/
// 常见的内置对象：
/*
全局对象
Infinity--无穷大
escape()--加密字符串
unescape()--解码字符串
encodeURI()--加密字符串为URI
decodeURI()--为加密的URI进行解码
encodeURIComponent()--将字符串加密为URI组件
decodeURIComponent()--为加密的URI组件解码
isFinite(number)--判断一个值是否是数字
isNaN(string)--判断一个值是否不是数字
Number(string)--将一个值转换为数字
parseFloat(string)--将一个值转换为小数
parseInt(string)--将一个值转换为整数
String(string)--将一个值转换为字符串
Boolean(string)--将一个值转换为布尔
*/
/*
Number对象
MAX_VALUE--最大数字
MIN_VALUE--最小数字
NaN--非数字
*/
/*
Boolean对象
toString()--将布尔值转换为字符串,并且返回结果
*/
/*
String对象
length--返回字符串的字符长度
fontcolor(color)--设置字符串的颜色(<FONT COLOR=>)
Fontsize(size)--设置字符串的大小(<FONTSIZE=>)
italics()--设置字符串的斜字体(<I>)
Link(url)--设置字符串的a标签(<A HREF=>)
strike()--设置字符串的删除线(<STRIKE>)
sub()--设置字符串的下标(subscript)字体((SUB>)
sup()--设置字符串的上标(superscript)字体(<SUP>)
charAt(index)--返回指定索引处的字符
concat(string2)--连接两条或多条字符串
indexOf(searchString, startIndex)--返回字符串中第一个出现指定字符串的位置
lastlndexOf(searchString, startIndex)--返回字符串中最后一个出现指定字符串的位置
match(regex)-- 在字符串中查找指定值
replace(regex, newString)--将字符串中的某些字符替换成其它字符
slice(startIndex, endIndex)--将部分字符抽出并在新的字符串中返回剩余部分
split(delimiter)--将字符串分配为数组
substr(startIndex, length)-- 从startIndex取,取length个字符
substring(startIndex, endIndex)-- 从startIndex和endIndex之间的字符,不包括endIndex
toLowerCase()-- 把字符串中的文本变成小写
toUpperCase()-- 把字符串中的文本变成大写
*/
/*
Array对象
length--获取数组元素的个数,即最大下标加1
concat(array1,arrayn)--合并数组,合并后返回结果
join(string)--将数组中元素合并为字符串,string为分隔符.如省略参数则直接合并,不再分隔
shift()--移除数组中的第一个元素并返回该元素
pop()--移除数组中的最后一个元素并返回该元素
unshift(value)为数组的开始部分加上一个或多个元素,并且返回该数组的新长度
push(value)--在数组的末尾加上一个或多个元素,并且返回新的数组长度值
reverse()--反转数组
sort()--按照元素的字母顺序排列,如果不是字符串类型则转换成字符串再排序,返回排序后的数组
toString()--将数组所有元素返回一个字符串,其间用逗号分隔
*/
/*
9.Date对象
getDay()--返回一周中的第几天(0-6)
getFullYear()--返回完整的4位年份数
getMonth()--返回月份数(0-11)
getDate()--返回日(1-31)
getHours()--返回小时数(0-23)
getMinutes()--返回分钟(0-59)
getSeconds()--返回秒数(0-59)
getMilliseconds()--返回毫秒(0-999)
toString()--将日期对象转换为字符串
*/
/*
Math对象
PI--∏的值(约等于3.14159)
abs(x)--返回数字的绝对值
ceil(x)--返回 x 四舍五入后的最大整数
floor(x)--返回 x 四舍五入后的最小整数
max(x,y)--返回 x 和 y 之间较大的数
min(x,y)--返回 x 和 y 之间较小的数
pow(x,y)--返回 y^x 的值
random()--返回位于 0 到 1 之间的随机函数
round(x)--四舍五入后取整
*/

// 普通变量不能直接调用属性或者方法
// 对象可以直接调用属性或者方法

// 普通变量在执行代码的过程中调用的属性或者方法，那么此时的普通类型就变成了基本包装类型，此时的变量就是基本包装类型对象

// 基本包装类型有number,string,boolean

var str = "修抗";//普通变量
str = str.replace("抗","康");//基本包装类型

var num = 10;//基本类型
var num2 = Number("10");//类型转换
var num3 = new Number("10");//基本包装类型

// 如果一个对象&&true，那么结果为true
// 如果一个true&&对象，那么结果为对象
var fleg = new Boolean(false);
console.log(fleg&&true);//true
console.log(true&&fleg);//function

// DOM：文档对象模型

// DOM就是把HTML看作一个文档，然后用DOM操作这些标签

// 文档(document)：一个网页可以成为文档

// 元素(element)：页面中所有的标签都是元素，元素可以看作一个对象

// 节点(node)：页面中所有内容都是节点：标签，属性，文本

// 属性：标签的属性

// 根(root)

// 文档及文档中的所有元素组成一个树形结构图：树状图(DOM树)

<!-- 
要求：为按钮添加一个点击事件
事件源:button
事件名字:onclick
触发事件:点击时
响应:alert(‘...‘)
-->

<!-- 第一个版本 -->
<!-- html代码中嵌入js代码：不方便后期修改和维护 -->
<button onclick="alert(‘第1个版本‘)">按钮1</button>

<!-- 第二个版本 -->
<!-- js代码很多，但是没有与js分离，只是把js写入函数中，调用就行了 -->
<button onclick="xiu()">按钮2</button>
<script>
function xiu(){
    alert("第2个版本");
}
</script>

<!-- 第三个版本 -->
<!-- js与html分离 -->
<button id="sear">按钮3</button>
<script>
    // 获取id为sear的标签，标签就是元素，元素就是对象
    var searObj = document.ElementById(sear);//返回一个元素对象
    searObj.onclick = function(){
        alert("第3个版本");
    }
</script>

<!-- 
根据id属性的值获取元素,返回来的是一个元素对象
document.getElementById("id的值"); 
-->
<a href="#" id="av">百度</a>
<input type="button" value="修改a标签的href属性值" id="but1"/>
<script>
    // 要求：点击按钮修改a标签的href属性值
    // 先通过id获取按钮并添加点击事件(onclick)
    document.getElementById("but1").onclick = function(){
        // 然后在获取a标签并修改href属性的值
        // 注：用DOM获取的标签就是元素,元素就是对象,可以通过对象修改属性的值
        document.getElementById("av").href = "http://www.baidu.com";
    }
</script>

<!-- 
根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个DOM对象
document.getElementsByTagName("标签的名字"); 
-->
<p>段落</p>
<p>段落</p>
<p>段落</p>
<input type="button" value="修改所有p标签的内容" id="but2"/>
<script>
    // 要求：点击按钮修改所有p标签的内容
    // 先通过id获取按钮并添加点击事件(onclick)
    document.getElementById("but2").onclick = function(){
        // 然后获取所有的p标签并修改其内容
        var pObj = document.getElementsByTagName("p");//是一个伪数组，数组里面的元素就是p标签
        // 是一个伪数组，所以需要for循环遍历
        for(var i=0;i<pObj.length;i++){
            // 小提示：凡是成对的标签设置文本内容都使用innerText
            pObj[i].innerText = "修改";
        }
    }
</script>

<!-- 
根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个DOM对象
document.getElementsByName("name的值"); 
-->
<input type="button" value="修改name=‘xiu‘的value值" id="but3"/>
<input type="text" value="你好" name="xiu"/>
<input type="text" value="你好" name="kang"/>
<input type="text" value="你好" name="xiu"/>
<script>
    // 要求：点击按钮修改name=‘xiu‘的value值
    // 先通过id获取按钮并添加点击事件(onclick)
    document.getElementById("but3").onclick = function(){
        var xiuObj = document.getElementsByName("xiu");//是一个伪数组
        for(var i=0;i<xiuObj.length;i++){
            // 小提示：在文本框中设置文本值就是设置value值
            xiuObj[i].value = "修改";
        }
    }
</script>

<!-- 
根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个DOM对象
document.getElementsByClassName("class的值"); 
-->
<input type="button" value="修改class=‘xiu‘的文本值" id="but4"/>
<span class="xiu">修抗</span>
<span>修抗</span>
<span class="xiu">修抗</span>
<script>
    // 要求：点击按钮修改class=‘xiu‘的文本值
    // 先通过id获取按钮并添加点击事件(onclick)
    document.getElementById("but4").onclick = function(){
        var classObj = document.getElementsByClassName("xiu");//是一个伪数组
        for(var i=0;i<classObj.length;i++){
            classObj[i].innerText = "修改";
        }
    }
</script>

<!-- 
根据选择器获取元素,返回来的是一个元素对象
document.querySelector("选择器的名字"); 
-->
<input type="button" value="修改id=‘dv‘的样式" id="but5"/>
<div id="dv"></div>
<script>
    // 要求：点击按钮修改id=‘dv‘的样式
    // 先通过id获取按钮并添加点击事件(onclick)
    document.getElementById("but5").onclick = function(){
        document.querySelector("#dv").style.width = "300px";
        document.querySelector("#dv").style.height = "300px";
        // 在css中属性是多个单词的写法,那么在js操作DOM的时候,不要-,后面的单词首字母大写
        // background-color: red;(css)
        // backgroundColor = "red";(js) 
        document.querySelector("#dv").style.backgroundColor = "red";
    }
</script>

<!-- 
根据选择器获取元素,返回来的是一个伪数组，里面保存了多个DOM对象
document.querySelectorAll("选择器的名字");
 -->
<input type="button" value="修改所有p标签的内容" id="but6"/>
<div class="kang">修抗</div>
<div class="kang">修抗</div>
<div class="kang">修抗</div>
<script>
    // 要求：点击按钮修改class=‘kang‘的文本值
    // 先通过id获取按钮并添加点击事件(onclick)
    document.querySelector("#but6").onclick = function(){
        var kangObj = document.querySelectorAll(".kang");//是一个伪数组
        for (var i = 0; i < kangObj.length; i++) {
            kangObj[i].innerText = "aixin";
        }
    }
</script>

<!-- 点击按钮显示和隐藏文字 -->
<input type="button" value="隐藏" id="but"/>
<p id="xiu">修抗</p>
<script>
//小提示：如果操作DOM的id属性有点多,那么可以将这个DOM操作封装起来,直接调用
function my$(id){
    return document.getElementById(id);
}
my$("but").onclick = function(){
    if(this.value == "隐藏"){
        my$("xiu").style.display = "none";//隐藏
        this.value = "显示";
    }else if(this.value == "显示"){
        my$("xiu").style.display = "block";//显示
        this.value = "隐藏";
    }
}
</script>

<!-- 点击按钮选中单选框/复选框（表单操作） -->
<input type="button" value="修改性别" id="but"/>
<input type="radio" value="男" name="sex" />男
<input type="radio" value="女" name="sex"/>女
<!-- 
checked="checked"：选中
在表单标签中,如果属性和值只有一个时,并且这个值就是这个属性本身
那么在html中,值可以默认不写：checked
在js的DOM操作的时候,值为布尔类型：checked = true
-->
<script>
    document.getElementById("but").onclick = function(){
        var radioObj = document.getElementsByTagName("input");
        if(radioObj[1].checked == false){
            radioObj[1].checked = true;
        }else if(radioObj[1].checked == true){
            radioObj[2].checked = true;
        }
    }
</script>

<!-- 点击按钮为div添加class属性（css样式操作） -->
<style>
    .cls {
        width: 100px;
        height: 100px;
        border: 1px solid red;
    }
</style>
<input type="button" value="按钮" id="but"/>
<div id="xiu"></div>
<script>
    // <div id="xiu" class="cls"></div>
    // 在js代码中操作DOM的时候,设置元素的类样式时,不能使用class关键字,应该使用calssName
    document.getElementById("but").onclick = function(){
        document.getElementById("xiu").className = "cls";
    }
</script>

<!-- 点击按钮隔行换色 -->
<input type="button" value="按钮"  id="but"/>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
document.querySelector("#but").onclick = function(){
    var list = document.querySelectorAll("li");
    for(var i=0;i<list.length;i++){
        list[i].style.backgroundColor = i%2==0 ? "yellow" : "red"; 
    }
}
</script>

<!-- 高亮效果(css的hover效果) -->
<ul id="uu">
    <li>1</li>
    <li>2</li>
</ul>
<script>
    // onmouseover：鼠标进入事件
    // onmouseout：鼠标移出事件
    // 先获取id=‘uu‘里面的li标签,是一个伪数组
    var listObj = document.getElementById("uu").getElementsByTagName("li");
    for (var i = 0; i < listObj.length; i++) {
        listObj[i].onmouseover = function(){
            this.style.backgroundColor = "red";
        }
        listObj[i].onmouseout = function(){
            this.style.backgroundColor = "";
        }
    }
</script>

<!-- 模拟搜索框的效果 -->
<input type="text" value="请输入搜索内容" id="txt" style="color:gray" />
<script>
    // onfocus获取焦点
    // onblur失去焦点
    var txt = document.getElementById("txt");
    txt.onfocus = function(){
        if(this.value == "请输入搜索内容"){
            this.value = "";
            this.style.color = "#000";
        }
    }
    txt.onblur = function(){
        if(this.value.length == 0){
            this.style.color = "gray";
            this.value = "请输入搜索内容";
        }
    }
</script>

<!-- 点击验证文本框的长度是否合法 -->
<input type="text" id="txt" />
<input type="button" id="but"  value="按钮"/>
<script>
    document.getElementById("but").onclick = function(){
        var txtObj = document.getElementById("txt");
        if(txtObj.value.length>3 && txtObj.value.length<6){
            alert("YES");
        }else {
            alert("NO：账号长度应该大于3并且小于6,当前长度为"+txtObj.value.length );
        }    
    }
</script>

<!-- 
textContent
作用：为标签设置或者调用文本内容
谷歌火狐支持,IE8不支持
 -->
 <!-- 要求：修改p标签里面的内容 -->
 <input type="button" value="按钮" id="btn1">
 <p>爱心</p>
 <script>
 document.querySelector("#btn1").onclick = function(){
     document.querySelectorAll("p")[0].textContent = "修抗";
 }
 </script>

<!-- 
innerText
作用：为标签设置或调用文本内容
低版本的谷歌火狐不支持,IE8支持
 -->
 <!-- 要求：修改p标签里面的内容 -->
 <input type="button" value="按钮" id="btn2">
 <p>爱心</p>
 <script>
 document.querySelector("#btn2").onclick = function(){
     document.querySelectorAll("p")[1].innerText = "修抗";
 }
 </script>

<!-- 
因为不同浏览器支持的属性不一样
所以需要设置兼容代码
原理：如果浏览器不支持该属性，那么该属性的类型为 undefined
-->
<script>
    function setInnerText(elen,txt){
        if(typeof elen.innerText != "undefined"){
            elen.innerText = txt;
        }else {
            elen.textContent = txt;
        }
    }
    document.querySelector("#btn1").onclick = function(){
         setInnerText(document.querySelectorAll("p")[0],"修改");
     }
    
</script>

<!-- 
innerText 
主要用于设置文本,如果设置标签内容是没有标签效果的
可以获取标签里面的所有文本内容，但是不能获取标签
innerHTML 
可以设置文本内容,也可以设置HTML标签的内容
可以获取标签里面的所有文本内容，也可以获取里面标签
 -->
<input type="button" value="按钮" id="but"/>
<input type="button" value="按钮" id="but2"/>
<div id="dv">
    修抗
    <p>爱惜</p>
</div>
<script>
    function my$(id){
        return document.getElementById(id);
    };
    my$("but2").onclick = function(){
        // my$("dv").innerText = "<p>修抗<p>";//页面不会解析html标签,会把标签显示出来
        my$("dv").innerHTML = "<p>修抗<p>";//页面会解析html标签,不会把标签显示出来
    }
    my$("but").onclick = function(){
        // console.log(my$("dv").innerText);//修抗 爱惜
        console.log(my$("dv").innerHTML);//修抗 <p>爱惜</p>
    }
</script>

<!-- 
自定义属性：本身HTML标签没有这个属性，而是自己添加的
作用：为了存储一些数据
自定义属性无法直接通过DOM对象获取(设置)值的，需要借助方法
setAttribute(属性的名字,属性的值)：设置自定义属性和值
getAttribute(属性的名字)：获取自定义属性的值
 -->
<ul id="uu">
    <!-- score就是自己添加的属性 -->
    <li>路飞的成绩</li>
    <li>娜美的成绩</li>
    <li>索隆的成绩</li>
    <li>乔巴的成绩</li>
    <li>山治的成绩</li>
</ul>
<script>
    // 要求：点击名字弹出本人的成绩
    // 首先获取ul里面的li标签并添加点击事件
    var list = document.getElementById("uu").getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
        //为标签添加自定义属性和值
        list[i].setAttribute("score",(i+1)*10);
        list[i].onclick = function(){
            // alert(this.score);//弹出的都是undefined
            // 在html中添加的自定义属性，需要使用 getAttribute("自定义属性的名字") 才能获取自定义属性的值
            alert(this.getAttribute("score"));
        }
    }
</script>

<!-- removeAttribute：移除元素的属性-->
<p id="xiu">按钮</p>
<script>
    //要求：删除p标签的id属性
    document.getElementsByTagName("p")[0].removeAttribute("id");
</script>

<!-- 
节点关系：
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <p>内容</p>
        <div>标签</div>
    </body>
</html>
html 的子节点是 head body
head body 的父节点是 html
meta title 是兄弟节点
-->
<div id="dv">
    <p id="p1">p标签</p>
    <span id="sp">span标签</span>
    <s>s标签</s>
</div>
<script>
    var p1 = document.querySelector("#p1");
    var dv = document.querySelector("#dv");
    var sp = document.querySelector("#sp");
    // 获取p标签的父节点(父节点)
    console.log(p1.parentNode);
    // 获取p标签的父元素(父元素)
    console.log(p1.parentElement);
    // 获取div的子节点(子节点)
    console.log(dv.childNodes);//5个字节点(换行也是节点)
    // 获取div的子元素(子元素)
    console.log(dv.children);//3个字元素
    // 获取div的第一个子节点(第一个子节点)
    console.log(dv.firstChild);//是换行 #text
    // 获取div的第一个子元素(第一个子元素)
    console.log(dv.firstElementChild);//获取的是p标签
    // 获取div的最后一个子节点(最后一个子节点)
    console.log(dv.lastChild);//是换行 #text
    // 获取div的最后一个子元素(最后一个子元素)
    console.log(dv.lastElementChild);//获取的是s标签
    // 获取span的前一个兄弟节点(前一个兄弟节点)
    console.log(sp.previousSibling);//是换行 #text
    // 获取span的前一个兄弟元素(前一个兄弟元素)
    console.log(sp.previousElementSibling);//获取的是p标签
    // 获取span的后一个兄弟节点(后一个兄弟节点)
    console.log(sp.nextSibling);//是换行 #text
    // 获取span的后一个兄弟元素(后一个兄弟元素)
    console.log(sp.nextElementSibling);//获取的是s标签
    // 获取div的id属性节点()
    console.log(dv.getAttributeNode("id"));//id=‘p1‘

    // 节点的属性：
    // nodeType 节点的类型(返回数字 1标签 2属性 3文本)
    // nodeName 节点的名字(标签节点-大写的标签名字 属性节点-小写的属性名字 文本节点-#text)
    // nodeValue 节点的值(标签节点-null 属性节点-属性值 文本节点-文本内容)
    //标签
    var p2 = document.querySelector("#p1");
    console.log(p2.nodeType);//1
    console.log(p2.nodeName);//P
    console.log(p2.nodeValue);//null
    // 属性
    var typeP = p2.getAttributeNode("id");
    console.log(typeP.nodeType);//2
    console.log(typeP.nodeName);//id
    console.log(typeP.nodeValue);//p1
</script>

<script>
    // 将DOM操作id的DOM封装起来
    function my$(id){
        return document.getElementById(id);
    }
</script>
<!-- 
oppendChild(obj);
把新元素追加到子元素后面
 -->
 <input type="button" value="按钮1" id="but1" />
 <div id="dv1"></div>
 <script>
     // 先创建一个元素
     var i = 0;
     my$("but1").onclick = function(){
         i++;
        var butObj = document.createElement("input");
         butObj.type    = "button";
         butObj.value = "按钮"+i;
        my$("dv1").appendChild(butObj);
     }
 </script>

<!-- 
insertBefore(newObj,obj);
把新元素追加到指定子元素前面
 -->
 <input type="button" value="按钮2" id="but2" />
 <div id="dv2"></div>
 <script>
     // 先创建一个元素
     my$("but2").onclick = function(){
         i++;
        var butObj = document.createElement("input");
         butObj.type    = "button";
         butObj.value = "按钮"+i;
        my$("dv2").insertBefore(butObj,my$("dv2").firstElementChild);
     }
 </script>
<!-- 
replaceChild(); 
替换子元素
-->
<input type="button" value="按钮3" id="but3" />
<div id="dv3">
    <p>修抗</p>
</div>
<script>
    document.getElementById("but3").onclick = function(){
        var sObj = document.createElement("s");
        sObj.innerHTML = "xiukang";
        var dv3Obj = document.querySelector("#dv3");
        dv3Obj.replaceChild(sObj,dv3Obj.firstElementChild);
    }
</script>

<!-- 
removeChild(obj);
删除子元素
 -->
 <input type="button" value="按钮4" id="but4" />
<div id="dv4">
    <p>修抗1</p>
    <p>修抗2</p>
    <p>修抗3</p>
</div>
<script>
    my$("but4").onclick = function(){
        while(my$("dv4").firstElementChild){
            my$("dv4").removeChild(my$("dv4").firstElementChild);
        }
    }
</script>

<input type="button" value="按钮" id="btn"/>
<div id="dv"></div>
<script>
    // 只创建一个元素
    // 思路：判断有没有该元素，有则删除，无则创建
    var i=0;
    document.getElementById("btn").onclick = function(){
        i++;
        var pObj = document.createElement("p");
        pObj.id = "xiu";
        pObj.innerHTML = "修抗"+i;
        if(document.getElementById("xiu")){
            document.getElementById("dv").removeChild(document.getElementById("xiu"));
        }
        document.getElementById("dv").appendChild(pObj);
    }
</script>

<div>
    <a href="#"><img src="images/timg.jpg" alt=""></a>
</div>
<script>
    /*
    克隆节点
    cloneNode(true)
    参数为布尔类型：true表示连子节点一起克隆
     */ 
    var aObj = document.getElementsByTagName("a")[0].cloneNode(false);
    document.getElementsByTagName("div")[0].appendChild(aObj);
</script>

<!-- 
addEventListener() 
参数1：事件的类型,没有on
参数2：事件的处理函数
参数3：布尔类型,目前就写false
this指向当前绑定的对象
谷歌,火狐支持,IE8不支持
-->
<!-- 要求：给按钮添加多个点击事件 -->
<input type="button" value="按钮" id="btn1"/>
<script>
    document.getElementById("btn1").addEventListener("click",function(){
        console.log("修抗1");
    },false);
    document.getElementById("btn1").addEventListener("click",function(){
        console.log("修抗2");
    },false);
</script>

<!-- 
attachEvent()
参数1：事件的类型
参数2：事件的处理函数
this指向window对象
谷歌,火狐不支持,IE8支持
 -->
 <!-- 要求：给按钮添加多个点击事件 -->
<input type="button" value="按钮" id="btn2"/>
<script>
    document.getElementById("btn2").attachEvent("onclick",function(){
        console.log("修抗3");
    });
    document.getElementById("btn2").attachEvent("onclick",function(){
        console.log("修抗4");
    });
</script>

<!-- 
因为不同浏览器使用的方法不一样
所以需要设置兼容代码
原理：判断 对象.方法 如果为fasle就不支持该方法 不要小括号(如果有小括号就是该方法的返回值)
 -->
 <script>
     function addEventListener(elem,type,fun){
         if(elem.addEventListener){
             elem.addEventListener(type,fun,false);
         }else if(elem.attachEvent){
             elem.attachEvent("on"+type,fun);
         }else {
             elem["on"+type] = fun;
         }
     }
     addEventListener(document.querySelector("#btn1"),"click",function(){
         alert(2);
     });
 </script>

<!-- 
方式1：
将事件处理函数设置为null就可以解绑事件了
 -->
<input type="button" value="绑定事件1" id="btn1"/>
<input type="button" value="解除事件1" id="btn2"/>
<script>
document.getElementById("btn1").onclick = function(){
    console.log("绑定事件1");
}
document.getElementById("btn2").onclick = function(){
    document.getElementById("btn1").onclick = null;
}
</script>

<!-- 
方式2：
使用removeEventListener()解除事件
参数1：事件的名字
参数2：处理函数的名字(须是命名函数)
参数3：false
IE8不支持
 -->
<input type="button" value="绑定事件2" id="btn3"/>
<input type="button" value="解除事件2" id="btn4"/>
<script>
function f1(){
    console.log("绑定事件2");
}
document.querySelector("#btn3").addEventListener("click",f1,false);//设置命名函数
document.querySelector("#btn4").onclick = function(){
    document.querySelector("#btn3").removeEventListener("click",f1,false);
}
</script>

<!-- 
方式3：
使用detachEvent()解除事件
参数1：事件的名字
参数2：处理函数的名字(须是命名函数)
只有IE8支持
 -->
<input type="button" value="绑定事件3" id="btn5"/>
<input type="button" value="解除事件3" id="btn6"/>
<script>
function f2(){
    console.log("绑定事件3");
}
document.querySelector("#btn5").attachEvent("onclick",f2);//设置命名函数
document.querySelector("#btn6").onclick = function(){
    document.querySelector("#btn5").detachEvent("onclick",f2);
}
</script>

<!-- 设置解绑函数的兼容代码 -->
<script>
    function removeEventListener(elen,type,funName){
        if(elen.removeEventListener){
            elen.removeEventListener(type,funName,false);
        }else if(elen.retachEvent){
            elen.retachEvent("on"+type,funName);
        }else{
            elen["on"+type] = null;
        }
    }
</script>

<!-- 
事件冒泡
有多个元素嵌套,并且这些元素都绑定了相同的事件,如果里面的事件触发了.那么外面元素的事件会主动触发
 -->
<div id="dv1" style="width:300px;height:300px;background-color: red">
    <div id="dv2" style="width:200px;height:200px;background-color: blue">
        <div id="dv3" style="width:100px;height:100px;background-color: yellow"></div>
    </div>
</div>
<script>
document.getElementById("dv1").onclick = function(){
    console.log(this.id);
}
document.getElementById("dv2").onclick = function(){
    console.log(this.id);
    //IE谷歌支持，火狐不支持
    window.event.cancelBubble = true;
}
// 事件处理函数参数对象
document.getElementById("dv3").onclick = function(e){
    console.log(this.id);
    //谷歌火狐支持，IE8不支持
    e.stopPropagation();
}
</script>

<div id="dv">
    <input type="text" id="txt" />
</div>
<script>
    function my$(id){
        return document.getElementById(id);
    }
    var keyWord = ["小明你好","小杨你不好","小明你不好啊","苹果吃了","苹果不能吃"];
    //设置输入框的键盘松开事件(onkeyup)
    my$("txt").onkeyup = function(){
        // 创建一个新数组
        var newKeyWord = [];
        // 获取输入框的值
        var text = this.value;
        for(var i=0;i<keyWord.length;i++){
            // 判断是否有该字符并且索引为0
            if(keyWord[i].indexOf(text)==0){
                // 将元素追加到新数组中
                newKeyWord.push(keyWord[i]);
            }
        }
        if(my$("dv1")){
            my$("dv").removeChild(my$("dv1"));
        }
        // 判断新数组的元素是否为0或者文本框的长度为0
        if(newKeyWord.length==0 || this.value.length==0){
            if(my$("dv1")){
                my$("dv").removeChild(my$("dv1"));
            }
            return;
        }
        var divObj = document.createElement("div");
        divObj.style.width = "158px";
        divObj.style.border = "1px solid red";
        divObj.id = "dv1";
        my$("dv").appendChild(divObj);
        for (var i = 0; i < newKeyWord.length; i++) {
            var pObj = document.createElement("p");
            pObj.innerHTML = newKeyWord[i];
            divObj.appendChild(pObj);
        }
    }
</script>

/*
浏览器中的顶级对象：window
页面中的顶级对象：document
页面中所有内容都是属于浏览器的，页面中的内容也是window的
*/

var num = 10;
console.log(window.num);

function f1(){
    console.log("修抗");
}
window.f1();//方法的本质的函数,函数也是方法

window.document.write("haha");

// 因为页面中的所有内容都是window的,所以window可以省略

alert(window.name);//该属性有点特殊,输出是空白,一般没有的属性输出都是undefined


// 下面两个是一样的，如果window被占用了就可以使用top
console.log(top);
console.log(window);

// 下面三个方式,尽量在测试的时候用,因为每个浏览器的样式都不同,而且无法改变样式
// 一般用css做出来
window.alert("弹出提示框");
window.prompt("请输入账号");
window.confirm("你确定退出吗");

window.onload = function(){
    alert("页面加载完毕后才触发的事件,页面中的节点包括外部引入的js文件");
}
// 扩展事件：谷歌不支持，IE8支持
window.onunload = function(){
    alert("页面关闭后才触发的事件");
}
window.onbeforeunload = function(){
    alert("页面关闭前触发的事件");
}

// 获取的是#及后面的内容
console.log(window.location.hash);
// 获取的是主机名及端口号
console.log(window.location.host);
// 获取的是主机名
console.log(window.location.hostname);
// 获取的是文件的相对路径
console.log(window.location.pathname);
// 获取的是端口号
console.log(window.port);
// 获取的是协议
console.log(window.location.protocol);
// 获取的是?及后面的内容
console.log(window.location.search);

// 设置浏览器地址并跳转
window.location.href = "https://www.baidu.com";//属性
window.location.assign("https://www.baidu.com");//方法
window.location.replace("https://www.baidu.com");//没有历史记录(不能后退)

// 重新加载页面
window.location.reload();

window.history.forward();//前进
window.history.back();//后退

//获取当前浏览器的类型
console.log(navigator.userAgent);
//获取当前操作系统的类型
console.log(navigator.platform);

/*
定时器：setInterval()
参数1：函数
参数2：时间(毫米)
返回值：定时器的id
执行过程：每隔一段时间就执行一次函数
 */
var timeId = setInterval(function(){
    console.log("哈哈");
},1000);
/*
停止定时器：clearInterval()
参数：定时器的id
 */
clearInterval(timeId);

/*
一次性定时器：setTimeout
参数1：函数
参数2：时间(毫米)
返回值：定时器的id
执行过程：隔一段时间只执行一次函数
 */ 
var timeId2 = setTimeout(function(){
    console.log("只执行一次");
});
/*
停止一次性定时器：clearTimeout()
参数：定时器的id
虽然说一次性定时器执行一次就不执行了,但内存中还是有该定时器存在占空间的
 */
claerTimeout(timeId2);

<input type="button" id="but1" value="执行"/>
<input type="button" id="but2" value="暂停"/><br/>
<img src="images/timg.jpg" alt="" width="200">
<script>
    var timeId;
    document.getElementById("but1").onclick = function(){
         timeId = setInterval(function(){
            var x = Math.random()*100+1;
            var y = Math.random()*100+1;
            document.querySelectorAll("img")[0].style.marginTop = x+"px";
            document.querySelectorAll("img")[0].style.marginLeft = y+"px";
        },100);
    }
    document.getElementById("but2").onclick = function(){
        clearInterval(timeId);
    }
</script>

<input type="button" value="重新获取验证码5秒" id="but" disabled/>
<script>
    var time = 5;
    var timeId = setInterval(function(){
        time--;
        if(time>0){
            document.getElementById("but").value ="重新获取验证码"+time+"秒";
        }else {
            document.getElementById("but").value ="重新获取验证码";
            document.getElementById("but").disabled = false;
            clearInterval(timeId);
        }
        
    },1000);
</script>

<img src="images/timg.jpg" alt="" width="300" id="im"/>
<input type="button" value="渐变" id="but">
<script>
document.getElementById("but").onclick = function(){
    var opacity = 10;
    
    var timeId = setInterval(function(){
        opacity--;
        if(opacity==0){
            clearInterval(timeId);
        }
        document.getElementById("im").style.opacity = opacity/10;
    },200);
    
}
</script>

<input type="button" value="按钮" id="but">
<div id="dv" style="width:100px;height:100px;background-color:red"></div>
<script>
document.getElementById("but").onclick = function(){
    /*
    为了防止定时器还没有执行完成就又重新打开定时器
    所以需要提前清除定时器
    需要在定时器返回值前面添加一个对象
     */ 
    clearInterval(document.getElementById("but").timeId);
    var width = 100;
    document.getElementById("but").timeId = setInterval(function(){
        width+=10;
        if(width == 400){
            clearInterval(document.getElementById("but").timeId);
        }
        document.getElementById("dv").style.width = width+"px";
    },100);
    
}
</script>

<input type="button" value="移动到200px" id="but">
<input type="button" value="移动到400px" id="but2">
<div id="dv" style="width:100px;height:100px;background-color:red;position:relative"></div>
<script>
function animate(elem,target){
    //获取目标当前位置
    var left = elem.offsetLeft;
    var timeId = setInterval(function(){
        // 设置每次移动的步数
        var stop = 20;
        var stop = target>left?stop:-stop;
        // 设置每次移动后的位置
        left+=stop;
        if(Math.abs(target-left)>Math.abs(stop)){
            elem.style.left = left+"px";
        }else{
            clearInterval(timeId);
            elem.style.left = target+"px";
        }
    },100);
}
document.getElementById("but").onclick = function(){
    animate(document.getElementById("dv"),200);
}
document.getElementById("but2").onclick = function(){
    animate(document.getElementById("dv"),400);
}
</script>

<style>
    #dv1{
        width: 200px;
        height: 200px;
        background-color: red;
    }

    #dv2{
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>
<div id="dv1" style="width:100px">
    <div id="dv2"></div>
</div>
<input type="button" value="效果" id="btn">
<script>
    var dv1 = document.getElementById("dv1");
    var dv2 = document.getElementById("dv2");
    document.getElementById("btn").onclick = function(){
        /*
        在style标签中设置的样式是获取不到的
        只能获取style属性中设置的样式
        所以这种方式废了
        console.log(dv1.style.width);
        console.log(dv1.style.height);
         */

        /*
        以后获取元素的宽和高，应该使用offset系列来获取
        offsetWidth：获取元素的宽
        offsetHeight：获取元素的高
        offsetTop：获取元素距离上边位置的值
        offsetLeft：获取元素距离左边位置的值
        
        注意事项：
        如果没有脱离文档流,那么:
        offsetLeft = 父级元素margin + 父级元素padding + 父级元素的border + 自己的margin
        如果脱离文档流,那么:
        offsetLeft = 自己的Left + 自己的margin
        offsetTop与offsetLeft是相同的一个道理
         */
        console.log(dv2.offsetWidth);//100
        console.log(dv2.offsetHeight);//100
    }
</script>

//获取的是body标签,如果在外部引用的js中获取的是null
console.log(document.body);
// 获取的是title标签中的文本
console.log(document.title);
// 获取html标签
console.log(document.documentElement);

<style>
    *{
        margin: 0;
        padding: 0;
    }
    #lbt {
        width: 500px;
        height: 280px;
        position: relative;
        margin: 0 auto;
        overflow: hidden;

    }
    #photo {
        width: 500px;
        height: 280px;
    }
    #photo ul {
        position: absolute;
        width: 2000px;
    }
    #photo li {
        list-style: none;
        float: left;
    }
    #focus {
        width: 500px;
        position: absolute;
        top: 140px;
        color: #fff;
        text-align: center;
        line-height: 25px;
        display: none;
    }
    #focus span {
        display: block;
        width: 40px;
        height: 25px;
        background-color: rgb(0,0,0,0.2);
    }
    #focus span:nth-child(1){
        float: left;
    }
    #focus span:nth-child(2){
        float: right;
    }
    #serial {
        position: absolute;
        right: 10px;
        bottom: 10px;
    }
    s {
        display: block;
        width: 15px;
        height: 15px;
        background-color: red;
        float: left;
        margin: 0 10px;
        border-radius: 50%;
    }
    .s{
        background-color: blue;
    }
</style>
<div id="lbt">
    <!-- 轮播图的图片 -->
    <div id="photo">
        <ul>
            <li><img src="images/1.jpg" alt="" width="500"></li>
            <li><img src="images/2.jpg" alt="" width="500"></li>
            <li><img src="images/3.jpg" alt="" width="500"></li>
            <li><img src="images/4.jpg" alt="" width="500"></li>
        </ul>
    </div>
    <!-- 轮播图的序列号 -->
    <div id="serial">
    </div>
    <!-- 轮播图的左右焦点 -->
    <div id="focus">
        <span>&lt;</span><span>&gt;</span> 
    </div>
</div>
<script>
    //将指定目标移动多少距离
    function animate(elem,target){
        //获取目标当前位置
        var left = elem.offsetLeft;
        var timeId = setInterval(function(){
            // 设置每次移动的步数
            var stop = 20;
            var stop = target>left?stop:-stop;
            // 设置每次移动后的位置
            left+=stop;
            if(Math.abs(target-left)>Math.abs(stop)){
                elem.style.left = left+"px";
            }else{
                clearInterval(timeId);
                elem.style.left = target+"px";
            }
        },10);
    }
    var lbt = document.getElementById("lbt");
    // 获取整个轮播图的div
    var photo = lbt.children[0];
    // 获取相框
    var ulObj = photo.children[0];
    // 获取序列号
    var serial = lbt.children[1];
    var focus = lbt.children[2];
    // 获取左焦点
    var leftSpan = focus.children[0];
    // 获取右焦点
    var rightSpan = focus.children[1];
    // 定义一个全局变量
    var xiu = 0;
    // 设置序列号
    for (var i = 0; i < ulObj.children.length; i++) {
        // 创建s标签
        var sObj = document.createElement("s");
        // 添加自定义属性
        sObj.setAttribute("index",i);
        // 为序列号添加鼠标进入时间
        sObj.onmouseover = function(){
            // 先删除所有s标签的样式
            for (var i = 0; i < serial.children.length; i++) {
                serial.children[i].removeAttribute("class")
            }
            // 然后在当前s标签中添加样式
            this.className = "s";
            xiu = this.getAttribute("index");
            // 将相框移动位置
            animate(ulObj,-xiu*500);
        }
        // 将创建好的s标签添加到序列号中
        serial.appendChild(sObj);
    }
    //设置默认第一个序列号的样式
    serial.children[0].className = "s";
    // 因为做无缝效果，克隆第一张图片并添加到图片最后
    ulObj.appendChild(ulObj.children[0].cloneNode(true)) ;
    // 设置相框的宽度为所有图片宽度总和
    ulObj.style.width = ulObj.children.length*500+"px";
    //设置显示或者隐藏左右焦点
    photo.onmouseover = function(){
        focus.style.display = "block";
    }
    photo.onmouseout = function(){
        focus.style.display = "none";
    }
    focus.onmouseover = function(){
        focus.style.display = "block";
    }
    focus.onmouseout = function(){
        focus.style.display = "none";
    }
    // 为右焦点添加点击事件
    rightSpan.onclick = rightOver;
    // 右焦点的点击事件
    function rightOver(){
        // 判断是不是最后一张图片
        if(xiu==ulObj.children.length-1){
            xiu = 0;
            // 因为第一张图片和最后一张图片是一样的
            // 所有如果是最后一张图就把图片设置为第一张图片
            // 用户可以最后一张图是第一张图片的错觉
            ulObj.style.left = 0;
            serial.children[0].className = "s";
        }

        xiu++;
        animate(ulObj,-xiu*500);
        //删除所有序列号样式
        for (var i = 0; i < serial.children.length; i++) {
            serial.children[i].removeAttribute("class")
        }
        // 如果是最后一张图片，那么就把第一个序列号设置样式，其他的默认
        if(xiu==ulObj.children.length-1){
            serial.children[0].className = "s";
        }else {
            serial.children[xiu].className = "s";
        }
    }
    // 为左焦点添加点击事件
    leftSpan.onclick = function(){
    if(xiu==0){
        xiu = ulObj.children.length-1;
        ulObj.style.left =-xiu*500+"px";
    }
    xiu--;
    for (var i = 0; i < serial.children.length; i++) {
            serial.children[i].removeAttribute("class")
    }
    serial.children[xiu].className = "s";
    animate(ulObj,-(xiu)*500);
    }
    // 设置自动轮播图
    // 原理就是重复点右焦点现实轮播图
    setInterval(rightOver,1000);
</script>

// 中括号
// [0-9]匹配任何从0到9的十进制数
// [a-z]匹配任何小写从a到z的字符
// [A-Z]匹配任何大小从A到Z的字符
// [A-Za-z]匹配任何大写A到小写z的字符

// 量词
// p+。匹配任何至少包含一个字符p的字符串
// p*。匹配任何包含零个或多个字符p的字符串
// p?。匹配任何包含零个或一个字符p的字符串
// p{2}。匹配任何包含两个连续p的字符串
// p{2,3}。匹配任何包含两个或三个连续p的字符串
// p{2,}。匹配任何包含两个或以上p的字符串
// p$。匹配任何以p结尾的字符串
// ^p。匹配任何以p开头的字符串
// [^0-9]。匹配任何不包含0到9的十进制数
// p.p。匹配任何包含p和p之间的字符串
// ^.{2}$。匹配任何只包含两个字符的字符串
// <b>(.*)</b>。匹配任何被<b></b>包围的字符串
// p(hp)*。匹配任何包含一个p，p后面是hp的字符串

// 预定义字符范围（字符类）
// [:digit:]数字[0~9]
// [:lower:]小写字母[a~z]
// [:upper:]大写字母[A~Z]
// [:alpha:]大小写字母[A~Za~z]
// [:alnum:]大小写字母以及数字[A~Za~z0~9]
// [:xdigit:]十六进制字符[A~Fa~f0~9]
// [:graph:]33~126范围的可打印ASCII字符
// [:cntrl:]控制字符，如制表符、退格符或反斜杠
// [:space:]空白字符：空格、水平制表符、垂直制表符、换行、换页或换行
// [:punct:]标点符号

// 修饰符
// i不区分大小写
// g查找所有出现
// m将字符串视为多行
// s将字符串视为一行
// x忽略正则表达式中的空格和注释

// 元字符
// \A 只匹配字符串开头
// \b 匹配单词边界
// \B 匹配除单词边界之外的任何字符
// \d 匹配数字字符
// \D 匹配非数字字符
// \s 匹配空白字符
// \S 匹配非空白字符
// [] 包围一个字符类
// () 包围一个字符分组或定义一个反引用
// $ 匹配行尾
// ^ 匹配行首
// . 匹配除换行之外的任何字符
// \ 引出下一个元字符
// \w 匹配任何只包含数字字母和下划线的字符串
// \W 忽略下划线、数字和字母


// 创建正则表达式对象
var reg = new RegExp(/^[a-z]/);
// 调用方法验证字符串是否匹配，返回布尔值
var flag = reg.test("sfsdew");
console.log(flag);
/*
var reg = /^[a-z]/;
var flag = reg.test("sfsdew");
console.log(flag);

var flag = /^[a-z]/.test("sfsdew");
console.log(flag);
 */

// 正则表达式的其他方法:

var str1 = "费12劲34即56放78解90分";
// 要求：将字符串中的数字提取出来放在数组中
var arr1 = str1.match(/[0-9]+/g);
console.log(arr1);//[12,34,56,78,90]

var str2 = "2018-08-09";
// 要求：将字符串中的年月日分别提取出来
var arr2 = str2.match(/(\d+)[-](\d+)[-](\d+)/);
console.log(RegExp.$1);//2018
console.log(RegExp.$2);//08
console.log(RegExp.$3);//09

var str3 = "修抗你好哟，真的好哟";
// 要求：将字符串中的"好"替换成"不好"
var arr3 = str3.replace(/好/g,"不好");
console.log(arr3);//修抗你不好哟，真的不好哟

var str4 = " 修 抗 ";
// 要求：删除字符串中的所有空格
var arr4 = str4.replace(/\s+/g,"");
console.log(arr4);

var str5 = "HHhhsabcdhhH";
// 要求：将字符串中的大小写"h"替换成"A"
var arr5 = str5.replace(/[h]/gi,"A");
console.log(arr5);//AAAAsabcdAAA