JavaScript基础

01.HelloWorld-输出语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			/* 
			一个完整的JavaScript实现包含了三个部分:ECMAScript、DOM、BOM.
			JS的特点
				1.解释性语言
				2.类似于C和Java的语法结构
				3.动态语言
				4.基于原型的面向对象
			 */
			/* 
			三个输出语句:

				控制浏览器弹出一个警告框
				alert:警告
			 */
				alert("第一行JS代码")
			/* 
				让计算机在页面中输出一个内容
				document:文档
				document.write()可以向body中输出一个内容
			 */
				document.write("你好!!");
			
			/* 
				向控制台输出一个内容
				console.log()的作用是向控制台输出一个内容
			 */
			console.log("How are you?");
			
			
		</script>
	</head>
	<body>
		
	</body>
</html>

02.JS编写位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--
		 可以将js代码编写到外部js文件中,然后通过script标签引入
			写到外部文件中可以在不同的页面中同时引用,也可以利用到浏览器的缓存机制,推荐使用的方式
		-->
		<!-- script标签一旦用于引用外部文件了,就不能再编写代码了,即使编写了浏览器也会忽略 
			如果需要则可再创建一个新的script标签用于编写内部代码
		-->
		<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
		<!-- 
			可以将js代码编写到script标签中
		<script type="text/javascript">
			alert("写在标签中")
		</script>
		 -->
	</head>
	<body>
		<!-- 
			可以将JS代码写到标签的onclick属性中
			当点击按钮时,JS代码才会执行
			
			虽然可以写在标签的属性中,但他们属于结构与行为耦合,不方便
				使用,不推荐使用
		 -->
		 <button onclick="alert('Who are you?')">Click me!</button>
		 
		 <!-- 
			可以将js代码写在超链接的href属性中,这样当点击超链接时,
				会执行js代码
		 -->
		 <a href="javascript:alert('I am fine!');">点我</a>
		 <a href="javascript:;">原地跳转,无反应</a>
	</body>
</html>

script.js:

	alert("写在外部js文件中");

03.JS基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03.JS基本语法</title>
    <script type="text/javascript">
        /* 
            JS注释:
                多行注释,注释中的内容不会被执行,但是可以在源代码中查看
                vscode中多行注释:alt+shift+a
        */
        // 单行注释
        
        /* 
            1.JS中严格区分大小写!!!!!
            2.Js中每一条语句以分号结尾!!!!!
                - 如果不写分号,浏览器会自动添加,但是会消耗一些系统资源
                    而且有些时候,浏览器会加错分号,所以在开发中分号必须写
            3.JS会忽略多个空格和换行,所以可以利用空格和换行对代码进行格式化
        
        */

    </script>
</head>
<body>
</body>
</html>

04.字面量和变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字面量和变量</title>
    <script type="text/javascript">

        /*
            字面量:都是一些不可改变来的值
                    比如,1 2 3 4 5
                字面量都是可以直接使用,但是一般不会直接使用字面量
         */
        //  alert(12345);

        /* 
            变量:变量可以用来保存字面量,而且变量的值是可以任意改变的
                    变量更加方便使用,所以开发中都是通过变量保存一个字面量,
                    很少直接使用字面量
                    可以通过变量对字面量进行描述
                    x=12345
        */
        //  声明变量
        //  在JS中使用var关键字来声明一个变量
        var a;

        //  为变量赋值
        a = 123;
        a = 1;

        //  声明和赋值同时进行
        var b = 2;

        alert(b);


    </script>
</head>
<body>
    
</body>
</html>

05.标识符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标识符</title>
    <script type="text/javascript">
        /* 
            标识符
                - 在JS中所有的可以由我们自主命名的都可以称为是标识符
                - 例如:变量名、函数名、属性名都属于标识符
                - 命名一个标识符时需要遵守如下的规则:
                    1.标识符中可以含有字母、数字、_、$
                        var a_1_$ = 123;
                    2.标识符不能以数字开头
                    3.标识符不能是ES中的关键字或保留字
                    4.标识符一般都采用驼峰命名法
                        - 首字母小写,其后每个单词的开头字母大写,其余字母小写
                    
                - JS底层保存标识符时实际上是采用的Unicode编码,
                    所以理论上讲,所有的utf-8中含有的内容都可以作为标识符
                        var 你好 = 123;
        */
    </script>
</head>
<body>
    
</body>
</html>

06.数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据类型</title>
    <script type="text/javascript">
        /* 
            数据类型指的就是字面量的类型
             JS中一共有六种数据类型:
                String 字符串
                Number 数值
                Boolean 布尔值
                Null 空值
                Undefined 未定义
                Object 对象

            String、Number、Boolean、Null、Undefined属于基本数据类型
            而Object属于引用数据类型
        */
       

    </script>
</head>
<body>
    
</body>
</html>

07.String字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String字符串</title>
    <script type="text/javascript">
        /* 
            String字符串
                - 在JS中字符串需要使用引号引起来
                - 使用双引号或单引号都可以,但是不要混着用
                - 引号不能嵌套,双引号内不能放双引号,单引号内不能放单引号
       */
    str = '我说:"今天天气真不错!"';

/* 
      在字符串中可以使用\作为转义字符,
        当表示一些特殊符号时可以使用\进行转义

      \" 表示 "
      \' 表示 '
      \n 表示 换行
      \t 表示 制表符
      \\ 表示 \   打印两个\,需要四个\

      */
str = "我说:\"今天\t天气真不错!\""
    </script>
</head>
<body>
    
</body>
</html>

08.Boolean布尔值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boolean布尔值</title>
    <script type="text/javascript">
        /* 
            Boolean 布尔值
                布尔值只有两个
                  true
                    - 表示真
                  false
                    - 表示假

            使用typeof检查一个布尔值时,会返回boolean
        */
    </script>
</head>
<body>
    
</body>
</html>

09.Number数值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Number数值</title>
    <script type="text/javascript">
        /* 
            在JS中所有的数值都是Number类型
              包括整数和浮点数
            
            JS中可以表示的数字的最大值:
                Number.MAX_VALUE
                    1.7976931348623157e+308
                
                Number.MIN_VALUE 大于零的最小值
                    5e-324
            
                如果使用Number表示的数字超过了最大值,则会返回一个
                Infinity 表示正无穷
                -Infinity 表示负无穷
                使用typeof检查Infinity也会返回Number
            
            NaN 是一个特殊的数字,表示Not A Number
                计算"123" * "23";会返回NaN
                使用typeof检查NaN也会返回Number
        */
       var a = 123;
       a = 12.23;
       console.log(a);

       //数字1234
       var b = 1234;
       //字符串1234
       var c = "1234";
       /* 
        可以使用运算符typeof
            来检查一个变量的类型
        语法:typeof 变量
       */

       console.log(typeof a);
       console.log(typeof c);

       console.log(Number.MAX_VALUE)
       console.log(Number.MAX_VALUE * Number.MAX_VALUE)

       /* 
            在JS中整数的运算基本可以保证精确
       */

       var d = 1233 + 223;

       /* 
            如果使用JS进行浮点运算,可能得到一个不精确的结果
                不要使用JS进行对精确度要求较高的运算
       */

       var e = 0.1 + 0.2;

    </script>
</head>
<body>
    
</body>
</html>

10.Null和Undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Null和Undefined</title>
    <script type="text/javascript">
        /* 
            Null类型的值只有一个,就是null
             null这个值专门用来表示一个为空的对象
             使用typeof检查一个null值时,会返回object

            Undefined类型的值只有一个,就undefined
              当声明一个变量,但是不给变量赋值时,它的值就是undefined
              使用typeof检查一个undefined时也会返回undefined
        */
    </script>
</head>
<body>
    
</body>
</html>

11.强制类型转换String

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>强制类型转换</title>
    <script type="text/javascript">
        /* 
            强制类型转换
                - 指将一个数据类型强制转换为其他的数据类型
                - 类型转换主要指,将其他的数据类型,转换为
                    String Number Boolean
        */
       /* 
            1.将其他的数据类型转换为String
                方式一:
                    - 调用被转换数据类型的toString()方法
                    - 该方法不会影响到原变量,它会将转换的结果返回
                    - 注意:null和undefined这两个值没有toString()方法,
                            如果调用他们的toString方法,会报错

                方式二:
                    - 调用String()函数,并将被转换的数据作为参数传递给函数
                    - 使用String()函数做强制类型转换时,
                          对于Number和Boolean实际上就是调用的toString()方法
                          但是对于null和undefined,就不会调用toString()方法,
                            他会将null 直接转换为"null",
                            将undefined 直接转换为 "undefined"

       */
      var a = 123;

      //调用a的toString()方法
      //调用xxx的yyy()方法,就是xxx.yyy()
      a = a.toString();

      a = true;
      a = a.toString();

      a = null;
      //a = a.toString(); //报错

      a = undefined;
      //a = a.toString(); //报错 


      a = 123;

      //调用String()函数,来将a转换为字符串
      a = String(a);

      a = null;
      a = String(a);

      a = undefined;
      a = String(a);


      console.log(typeof a);
      console.log(a);
    </script>
</head>
<body>
    
</body>
</html>

12.转换为Number

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转换为Number</title>
    <script type="text/javascript">
        /* 
            将其他的数据类型转换为Number
                方式一:
                    使用Number()函数
                        - 字符串 --> 数字
                            1.如果是纯数字的字符串,则直接将其转换为数字
                            2.如果字符串中有非数字的内容,则转换为NaN
                            3.如果字符串是一个空串或者是一个全是空格的字符串,则转换为0

                        - 布尔值 --> 数字
                            true 转成 1
                            false 转成 0

                        - null --> 数字  0 

                        - undefined --> 数字 NaN

                方式二:
                    - 这种方式专门用来对付字符串
                    - parseInt() 把一个字符串转换为一个整数
                    - parseFloat() 把一个字符串转换为一个浮点数
        */
       var a = "123";

       //调用Number()函数来将a转换为Number类型
       a = Number(a);

       a = true;
       a = Number(a);

       a = null;
       a = Number(a);

       a = "123px";
       //调用parseInt()函数将a转换为Number
       //parseInt()可以将一个字符串中的有效的整数内容取出来,
        //然后转换为Number,从左至右选择,遇到非整数的类型即停止
       a = parseInt(a);

       a = "123.34px";
       //parseFloat()作用和parseInt()类似,不同的是它可以获得有效的小数
       a = parseFloat(a);// --> 123.34

       /* 
            如果对非String使用parseInt()或parseFloat(),
             他会先将其转换为String 然后再操作
       
       */
      a = true;
      a = parseInt(a);// --> NaN



       console.log(typeof a);
       console.log(a);
    </script>
</head>
<body>
    
</body>
</html>

13.其他的进制的数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>其他的进制的数字</title>
    <script type="text/javascript">
        /* 
            在JS中,如果需要表示16进制的数字,则需要以0x开头
                    如果需要表示8进制的数字,则需要以0开头
                    如果需要表示2进制的数字,则需要以0b开头,
                        但不是所有的浏览器都支持
        */

        //16进制
        a = 0x10;//-->16

        //八进制
        a = 070;//-->56

        //像 "070"这种字符串,有些浏览器会当成8进制解析,有些会当成10进制解析
        a = "070";

        //可以在parseInt()中传递第二个参数,来指定数字的进制
        a = parseInt(a,10);

        
        console.log(typeof a);
        console.log(a);
    </script>
</head>
<body>
    
</body>
</html>

14.转换为Boolean

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转换为Boolean</title>
    <script type="text/javascript">
        /* 
            将其他的数据类型转换成Boolean
             - 使用Boolean()函数
                - 数字--> 布尔
                    - 除了0和NaN,其余的都是true
                - 字符串 --> 布尔
                    - 除了空串,其余的都是true
                - null和undefined都会转换为false

                - 对象也会转换为true
             - 隐式类型转换:
                - 为任意的数据类型做两次非运算,即可将其转换为布尔值
                - 例子:
                    var a = "hello";
                    a = !!a;//true
        */

        var a = 123; //true
        a = -123; //true
        a = 0; //false
        a = Infinity; //true
        a = NaN; //false

        //调用Boolean()函数来将a转换为布尔值
        a = Boolean(a);

        a = "";
        a = Boolean(a);//false

        a = null;
        a = Boolean(a);//false

        a = undefined;
        a = Boolean(a);//false

        console.log(typeof a);
        console.log(a);
    </script>
</head>
<body>
    
</body>
</html>

15.运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运算符</title>
    <script type="text/javascript">
        /* 
            运算符也叫操作符
                通过运算符可以对一个或多个值进行运算,并获取运算结果
                比如:typeof就是运算符,可以用来获取一个值的类型
                    它会将该值的类型以字符串的形式返回
                
                算数运算符
                    当对非Number类型的值进行运算时,会将这些值转换为Number,然后再运算
                        任何值和NaN做运算都得NaN

                        +:对两个值进行加法运算,并将结果返回
                            - 如果对两个字符串进行加法运算,则会将两个字符串拼接为一个字符串,并返回
                            - 任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作
                        -
                        *
                        /
                        %:取模运算(取余数)
        */
       var a = true + 1;//2
       
       a = true + false;//1

       a = 2 + null;//2

       a = 2 + NaN;//NaN

       a = "123" + "456";//"123456"

       a = "a"+
            "b"+
            "c"+
            "d";//abcd
    
        a = 123 + "1";//1231

        a = true + "hello";//truehello
        
        console.log(a);
        //任何值和字符串相加都会转换为字符串,并作拼串操作
        /* 
            可以利用这一特点,来将一个任意的数据类型转换为String
              只需要为任意的数据类型加一个 "" 即可将其转换为String,
              这是一种隐式的类型转换,由浏览器自动完成,实际上也是调用String()函数

        
        */
       var b = 123;
       b = b + "";

       b = null;
       b = b + null;//"null"

       var c = 111;
       c = c + "";
       
       /* 任何值做 - * / 运算都会自动转换为Number
       可以利用这一特点做隐式的类型转换,
       可以通过为一个值 -0 *1 /1 来将其转换为Number
       
       
       */
      
      c = 9 % 3;//0
      c = 9 % 4;//1
      c = 9 % 5;//4

      
      
      console.log("c = "+ c)
    </script>
</head>
<body>
    
</body>
</html>

16.一元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一元运算符</title>
    <script type="text/javascript">
        /* 一元运算符,只需要一个操作数
                    + 正号
                        正号不会对数字产生任何影响
                    - 负号
                        负号可以对数字进行符号的取反
            - 对于非Number类型的值,
                会将其先转换为Number,然后再运算
                - 可以对一个其他的数据类型使用 + ,来将其转换为number
                    他的原理和Number()函数一样
         */
        var a = 123;
        a = -a;//-123

        a = true;
        a = -a;//-1

        a = 1 + + "2" + 3;//6

        console.log(a);
    </script>
</head>
<body>
    
</body>
</html>

17.自增和自减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自增和自减</title>
    <script type="text/javascript">
        /* 自增 ++
                - 通过自增可以使变量在自身的基础上增加1
                - 对于一个变量自增以后,原变量的值会立即自增1
                - 自增分两种: 后++(a++)和 前++(++a)
                    无论是a++ 还是 ++a 都会立即使原变量的值自增1
                    不同的是 a++ 和 ++a 的值不同
                        a++的值等于原变量的值(自增前的值)
                        ++a的值等于原变量新值(自增后的值)
         */
        var a = 1;
        document.write("a:"+a + "</br>");

        // document.write("++a:"+ ++a + "</br>");
        document.write("a++:"+ a++ + "</br>");

        document.write("a:"+a);
    </script>
</head>
<body>
    
</body>
</html>

18.逻辑运算符-布尔值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逻辑运算符</title>
    <script type="text/javascript">
        /* JS中提供了三种逻辑运算符
            ! 非
                - !可以用来对一个值进行非运算
                - 非运算就是指对一个布尔值进行取反操作
                    true变false,false变true
                - 如果对非布尔值进行运算,则会将其转换为布尔值,然后再取反
                    所以可以利用该特点,来将一个其他的数据类型转换为布尔值
                    可以为一个任意数据类型取两次反,来将其转换为布尔值,
                    原理和Boolean()函数一样

            && 与
                - && 可以对符号两侧的值进行与运算并返回结果
                - 运算规则
                    - 两个值中只要有一个值为false就返回false,
                        只有两个值都为true时,才会返回true
                    - JS中的“与”属于短路的与,如果第一个值为false,则不会再看第二个值
            || 或
                - ||可以对符号两侧的值进行或运算并返回结果
                - 运算规则:
                    - 两个值中只要有一个true,就返回true,
                       如果两个值都为false,才返回false
                    - JS中的“或”属于短路的或,
                        如果第一个值为true,则不会看第二个值

        */
       var a = true;

       //对a进行非运算
       a = !a;
       console.log("a = "+a);//a = false

       //如果两个值都是true,则返回true
       var b = true && true;

       //只要有一个false,就返回false
       b = true && false;
       b = false && true;
       b = false && false;

       console.log(b);

        //第一个值为true,会检查第二个值
        true && alert("hello world!");
        //第一个值为false,不会检查第二个值
        false && alert("hello!");


        //两个都是false,则返回false
        b = false || false;

        //只要有一个true,就返回true
        b = true || false;
        b = false || true;
        b = true || true;
        
        //第一个值为false,则会检查第二个值
        false || alert("hello!");

        //第一个值为true,则不再检查第二个值
        true || alert("world!");


    </script>
</head>
<body>
    
</body>
</html>

19.逻辑运算符-非布尔值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逻辑运算符-非布尔值</title>
    <script type="text/javascript">
        /* && || 非布尔值的情况
            - 对于非布尔值进行与 或运算时,
                会先将其转换为布尔值,然后再运算,并且返回原值
            - 与运算:
                - 如果第一个值为true,则必然返回第二个值
                - 如果第一个值为false,则直接返回第一个值
            - 或运算
                - 如果第一个值为true,则直接返回第一个值
                - 如果第一个值为false,则返回第二个值
         */
        //true && true
        //与运算:如果两个值都为true,则返回后边的
        var a = 1 && 2;//2

        //与运算:如果两个值中有false,则返回靠前的false
        //false && true
        a = 0 && 2;//0
        a = 2 && 0;//0
        //false && false
        a = NaN && 0;//NaN
        a = 0 && NaN;//0


        //true || true
        //如果第一个值为true,则直接返回第一个值
        a = 2 || 1;//2
        a = 2 || NaN;//2
        //如果第一个值为false,则直接返回第二个值
        a = NaN || 1;//1
        a = NaN || 0;//0
    </script>
</head>
<body>
    
</body>
</html>

20.赋值运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>赋值运算符</title>
    <script type="text/javascript">
        /* =
             - 可以将符号右侧的值赋值给符号左侧的变量
           +=
             - a += 5 等价于 a = a + 5
           -=
             - a -= 5 等价于 a = a - 5
           *=
             - a *= 5 等价于 a = a * 5
           /=
             - a /= 5 等价于 a = a / 5
           %=
             - a %= 5 等价于 a = a % 5
         */
    </script>
</head>
<body>
    
</body>
</html>

21.关系运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关系运算符</title>
    <script type="text/javascript">
        /* 通过关系运算符可以比较两个值之间的大小关系,
            如果关系成立 它会返回true,如果关系不成立则返回false
            
                > 大于号
                    - 判断符号左侧的值是否大于右侧的
                    - 如果关系成立,返回true,如果关系不成立则返回false
                >=
                <
                <=
            
            非数值的情况
                - 对于非数值进行比较时,会将其转换为数字然后再比较
                - 如果符号两侧的值都是字符串时,不会将其转换为数字进行比较,
                    而会分别比较字符串中字符的Unicode编码*/
            
        
        var a = 5 > 10;//false

        1 > true;//false
        1 >= true;//true
        1 > "0";//true
        10 > null;//true

        //任何值和NaN作任何比较都是false
        10 < "hello";//false

        true > false;//true


        //如果比较的是两个字符串型的数字,可能会得到不可预期的结果
        //注意: 在比较两个字符串型的数字时,一定一定要转型!!!
        "1" < "5";//true
        "11" < "5";//true
        //比较两个字符串时,比较的是字符串的字符编码
        //比较字符编码时是一位一位进行比较
        //如果两位一样,则比较下一位,所以借用它来对英文进行排序
        "a" < "b";//true
        //比较中文时没有意义
        "戒" > "我";//true



    </script>
</head>
<body>
    
</body>
</html>

22.编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编码</title>
    <script type="text/javascript">
        /* 在字符串中使用转义字符输出Unicode编码
            \u四位编码
         */
         alert("\u2620");
         document.write("\u2620");
    </script>
</head>
<body>
    <!-- 在网页中使用Unicode编码
            &#编码; 这里的编码需要的是10进制
     -->
    <h1 style="font-size: 200px;">&#9760;</h1>
    <h1 style="font-size: 200px;">&#9856;</h1>
    
</body>
</html>

23.相等运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相等运算符</title>
    <script type="text/javascript">
        /* 相等运算符用来比较两个值是否相等,
             如果相等会返回true,否则返回false
             
            使用 == 来做相等运算
             - 当使用 == 来比较两个值时,如果值的类型不同,
                则会自动进行类型转换,将其转换为相同的类型,
                然后再比较
            
            不相等
                使用 != 来做不相等运算
                - 不相等也会对变量进行自动的类型转换,如果转换后相等也会返回false


            === 
                全等
                    - 用来判断两个值是否全等,和相等类似,不同的是
                        它不会做自动的类型转换
                         如果两个值的类型不同,直接返回false

            !==
                不全等
                    - 和不等类似,不同的是它不会做自动的类型转换
                        如果两个值的类型不同,直接返回true

         */
        console.log(1 == 1);//true

        var a = 10;
        console.log(a == 4);//false

        console.log("1" == 1);//true

        true == "1";//true

        null == 0;//false

        /* undefined 衍生自 null,
             所以这两个值做相等判断时,会返回true
         */
        undefined == null;//true

        /* NaN 不和9任何值相等,包括它本身 */
        NaN == NaN;//false

        var b = NaN;
        /* 判断b的值是否是NaN
             可以通过 isNaN()函数来判断一个值是否是NaN
              如果该值是NaN则返回true,否则返回false
         */
         console.log(isNaN(b));//true

         10 != 5;//true
         "abcd" != "abcd";//false
         "1" != 1;//false


         "123" == 123;//true
         "123" === 123;//false

         "1" != 1;//false
         "1" !== 1;//true
    </script>
</head>
<body>
    
</body>
</html>

24.条件运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件运算符</title>
    <script type="text/javascript">
        /* 条件运算符 也叫 三元运算符
            语法:
                条件表达式?语句1:语句2;
             - 执行的流程:
                    条件运算符在执行时,首先对条件表达式进行求值,
                        如果该值为true,则执行语句1,并返回执行结果
                        如果该值为false,则执行语句2,并返回执行结果
                    如果条件表达式的求值结果是一个非布尔值,
                        会将其转换为布尔值然后再运算
        */
        
        var a = 10;
        var b = 20;
        var c = 50;
        a > b ? alert("a大") : alert("b大");//b大

        var max =a > b ? a : b;//max = 20

        max = a > b ? (a > c ? a : c) : (b > c ? b : c); //max:50
    </script>
</head>
<body>
    
</body>
</html>

25.运算符的优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运算符的优先级</title>
    <script type="text/javascript">
        /*  , 运算符
                使用,可以分割多个语句,一般可以在声明多个变量时使用,
         */
        var a = 1 , b = 2 , c = 3;



        /* JS中运算符也有优先级,
                比如: 先乘除 后加减
            在js中有一个运算符优先级的表,
                在表中越靠上优先级越高,优先级越高越优先计算,
                如果优先级一样,则从左往右计算
            运算符的优先级表:
                . [] new
                ()
                ++ --
                ! ~ +(单目) -(单目) typeof void delete
                +(双目) -(双目)
                << >> >>>
                < <= > >=
                == !== ===
                &
                ^
                |
                &&
                ||
                ?:
                = += -= *= /= %= <<= >>= >>>= &= ^= |=
                ,
                如果遇到优先级不清楚,可以使用()来改变优先级
        */
    </script>
</head>
<body>
    
</body>
</html>

26.代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码块</title>
    <script type="text/javascript">
        /* 程序是由一条一条语句构成的
             语句是按照自上向下的舒徐一条一条执行的
             在JS中可以使用{}来为语句进行分组
                同一个{}中的语句称为是一组语句,
                它们要么都执行,要么都不执行
                一个{}中的语句也称为一个代码块
                在代码块的后边不用再编写;了!!!
            
            JS中的代码块,只具有分组的作用,没有其他的用途
                代码块内的内容,在外部是完全可见的
                 */
                 
        {
            var a = 10;
        }
        console.log(a);//10
    </script>
</head>
<body>
    
</body>
</html>

01.流程控制语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流程控制语句</title>
    <script type="text/javascript">
        /* 流程控制语句
             - 在JS中的程序是从上到下一行一行执行的
             - 通过流程控制语句可以控制程序执行流程,
                    使程序可以根据一定的条件来选择执行
             - 语句的分类:
                1.条件判断语句
                2.条件分支语句
                3.循环语句
                
            
            条件判断语句:
                - 使用条件判断语句可以在执行某个语句之前进行判断,
                    如果条件成立才会执行语句,条件不成立则语句不执行。
                - if语句
                  - 语法1:
                     if(条件表达式){
                        语句...
                     }
                  - if语句在执行时,会先对条件表达式进行求值判断,
                    如果条件表达式的值为true,则执行if后的语句
                    如果条件表达式的值为false,则不会执行if后的语句
                        if语句只能控制紧随其后的那个语句,
                            如果希望if语句可以控制多条语句,
                            可以将这些语句统一放到代码块中
         */

        var a = 11;
        if (a > 10){
            alert("a > 10");
            alert("hello world");
        }

        a = 15;
        if (a > 10 && a <= 20){
            alert("a > 10 并且 a <= 20");
        }
    </script>
</head>
<body>
    
</body>
</html>

02.if语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if语句</title>
    <script type="text/javascript">
        /* 
            条件判断语句:
                - 使用条件判断语句可以在执行某个语句之前进行判断,
                    如果条件成立才会执行语句,条件不成立则语句不执行。
                - if语句
                  - 语法1:
                     if(条件表达式){
                        语句...
                     }
                  - if语句在执行时,会先对条件表达式进行求值判断,
                    如果条件表达式的值为true,则执行if后的语句
                    如果条件表达式的值为false,则不会执行if后的语句
                        if语句只能控制紧随其后的那个语句,
                            如果希望if语句可以控制多条语句,
                            可以将这些语句统一放到代码块中
                  - 语法2:
                     if(条件表达式){
                         语句...
                     }else{
                         语句...
                     }

                    if...else... 语句
                        当该语句执行时,会先对if后的条件表达式进行求值判断,
                            如果该值为true,则执行if后的语句
                            如果该值为false,则执行else后的语句
                
                  - 语法3:
                     if(条件表达式){
                         语句...
                     }else if(条件表达式){
                         语句...
                     }else if{
                         语句...
                     }else{
                         语句...
                     }

                    if...else if...else
                        当该语句执行时,会从上到下依次对条件表达式进行求值判断,
                            如果值为true,则执行当前语句
                            如果值为false,则继续向下判断
                            如果所有的条件都不满足,则执行最后一个else后的语句
                            该语句中,只会有一个代码块被执行,一旦代码块执行了,则直接结束语句
                            
         */
         var a = 11;
        if (a > 10){
            alert("a > 10");
            alert("hello world");
        }

        a = 15;
        if (a > 10 && a <= 20){
            alert("a > 10 并且 a <= 20");
        }


        if (a >10){
            alert("true");
        }else{
            alert("false");
        }
    </script>
</head>
<body>
    
</body>
</html>

03.if练习-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if练习-1</title>
    <script type="text/javascript">
        /* 从键盘输入小明的期末成绩:
            当成绩为100时,'奖励一辆BMW'
            当成绩为[80 - 90]时,‘奖励一台iPhone’
            当成绩为【60 - 80】时,‘奖励一本参考书’
            其他时,什么奖励都没有
         */
        
        /* 从键盘输入
              prompt()可以弹出一个提示框,该提示框会带有一个文本框,
                用户可以在文本框中输入一段内容,该函数需要一个字符串作为参数,
                该字符串会作为提示框的提示文字
                
            用户输入的内容将会作为函数的返回值返回,可以定义一个变量来接受该内容
         */
		// 将prompt放入到一个循环中
		while (true){
			 var score = prompt("请输入小明的期末成绩");
			 
			 if (score >= 0 && score <= 100) {
			 	break;
			 }
			 alert("请输入有效的分数!!!");
		}
       

        // 判断值是否合法
        if (score > 100 || score < 0 || isNaN(score)){
            alert("不合法值");
        }else{
            if(score == 100){
                alert("奖励一辆BMW");
            }else if(score >= 80){
                alert("奖励一台iPhone");
            }else if(score >= 60){
                alert("奖励一本参考书");
            }else{
                alert("棍子一根~~~");
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

04.if练习-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if练习-2</title>
    <script type="text/javascript">
        /* 由键盘输入三个整数分别存入变量num1、num2、num3,
            对它们进行排序,并且从小到大输出
         */

        //获取用户输入的三个数:
        /* prompt()函数的返回值是String类型的 */

        var num1 = +prompt("请输入第一个数:");
        var num2 = +prompt("请输入第二个数:");
        var num3 = +prompt("请输入第三个数:");

        if(num1 < num2 && num1 < num3){
            //num1最小
            if(num2 < num3){
                //num1 num2 num3
                alert(num1+","+num2+","+num3);
            }else{
                //num1 num3 num2
                alert(num1+","+num3+","+num2);
            }
        }else if(num2 < num1 && num2 < num3){
            //num2最小
            if(num1 < num3){
                //num2 num1 num3
                alert(num2+","+num1+","+num3);
            }else{
                //num2 num3 num1
                alert(num2+","+num3+","+num1);
            }
        }else{
            //num3最小
            if(num1 < num2){
                //num3 num1 num2
                alert(num3+","+num1+","+num2);
            }else{
                //num3 num2 num1
                alert(num3+","+num2+","+num1);
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

05.条件分支语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件分支语句</title>
    <script type="text/javascript">
        /* 条件分支语句 也叫 switch语句
            语法:
                switch(条件表达式){
                    case 表达式:
                        语句...
                        break;
                    case 表达式:
                        语句...
                        break;
                    default:
                        语句...
                        break;
                }
            执行流程:
                switch...case...语句
                  在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较
                    如果比较结果为true,则从当前case处开始执行代码
                    如果比较结果为false,则继续向下比较
                    如果所有的比较结果都为false,则只执行default后的语句
         */

        //根据num的值,输出对应的中文
        var a = 1;

        /* if(num == 1){
            console.log("壹");
        }else if(num == 2){
            console.log("贰");
        }else if(num == 3){
            console.log("叁");
        } */
		
		var num = 1;
        switch(num){
            case 1:
                console.log("壹");
                //使用break可以退出switch语句
                break;
            case 2:
                console.log("贰");
                break;
            case 3:
                console.log("叁");
                break;
            default:
                console.log("非法数字~~~");
                break;
        }


        /* 对于成绩大于60的,输出合格,低于60的,输出不合格 */

        var score = 99;

        switch(parseInt(score/10)){
            case 10:
            case 9:
            case 8:
            case 7:
            case 6:
                console.log("合格");
                break;
            default:
                console.log("不合格");
                break;
        }

        switch(true){
            case score >= 60:
                console.log("合格");
                break;
            default:
                console.log("不合格");
                break;
        }

    </script>
</head>
<body>
    
</body>
</html>

06.循环语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环语句</title>
    <script type="text/javascript">
        /* 向页面中输出连续的数字 */
		// var a = 1;
		// document.write(a++ +"<br />");		
		// document.write(a++ +"<br />");
		// document.write(a++ +"<br />");
		
		/* 循环语句:
			通过循环语句可以反复的执行一段代码多次
			
			while 循环
				- 语法:
					while(条件表达式){
						语句...
					}
				- while语句在执行时,
					先对条件表达式进行求值判断,
						如果值为true,则执行循环体,
							循环体执行完毕以后,继续对表达式进行判断
							如果为true,则继续执行循环体,以此类推
						如果值为false,则终止循环
						
			do...while循环
				- 语法:
					do{
						语句...
					}while(条件表达式);
				- 执行流程:
					do...while语句在执行时,会先执行循环体,
						循环体执行完毕以后,会对while后的条件表达式进行判断,
						如果结果为true,则继续执行循环体,执行完毕继续判断 以此类推
						如果结果为false,则终止循环
						
			实际上这两个语句功能类似,不同的是while是先判断后执行,
				而do...while会先执行后判断
			do...while可以保证循环体至少执行依次,
				而while不能
				
		*/
	   var n = 1;
	   
	   //向这种将条件表达式写死为true的循环,叫做死循环
	   //该循环不会停止,除非浏览器关闭,死循环在开发中慎用
	   // 可以使用break来退出循环
	   while(true){
		   // console.log(n++);
		   document.write(n++ + "<br />");
		   // 判断n是否是10
		   if(n == 10){
				//退出循环
				break;
		   }
	   }
	   
	   // 创建一个循环,需要三个步骤:
		// 1.初始化一个变量
		var i = 0;
		// 2.在循环中设置一个条件表达式
		while(i < 10){
			// document.write(i);
			
			//3.定义一个更新表达式,每次更新初始化变量
			// i++;
			
			document.write(i++ + "<br />");
		}
    </script>
</head>
<body>
    
</body>
</html>

07.while练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>while练习</title>
		<script type="text/javascript">
			/* 假如投资的年利率为5%,试求从1000块增长到5000块,需要花费多少年 */
			
			// 当前的钱数
			var money = 1000;
			
			// 定义一个计数器
			var count = 0;
			
			while (money < 5000){
				money *= 1.05;
				
				count++;
			}
			document.write(count); 
		</script>
	</head>
	<body>
	</body>
</html>

08.for循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>for循环</title>
		<script type="text/javascript">
			/* for语句,也是一个循环语句,也称为for循环
				 在for循环中,提供了专门的位置用来放三个表达式:
					1.初始化表达式
					2.条件表达式
					3.更新表达式
				语法:
					for(初始化表达式;条件表达式;更新表达式){
						语句...
					}
			*/
					
			for(var i = 0;i < 10;i++){
				alert(i);
			}
			
			// for循环中的三个部分都可以省略,也可以写在外部
			var a = 0;
			for(;i<10;){
				alert(i++);
			}
			
			// 死循环
			// for(;;){
				// alert("hello");
			// }
		</script>
	</head>
	<body>
	</body>
</html>

09.for循环练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>for循环</title>
		<script type="text/javascript">
			// 打印1-100之间所有奇数之和
			var sum = 0;
			
			for(var i = 1;i<=100;i++){
				if(i%2!=0){
					sum=sum+i;
				}
			}
			document.write(sum);
			
			// 打印1-100之间所有7的倍数的个数及总和
			sum = 0;
			
			var count = 0;
			
			for(var i = 1;i<=100;i++){
				if(i%7==0){
					sum+=i;
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

10.水仙花数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水仙花数</title>
		<script type="text/javascript">
			/* 水仙花数是指一个三位数,它的每个位上的数字的3次幂之和等于它本身。
				例如:1^3+5^3+3^3=153
				请打印所有的水仙花数
			 */
			for(var i = 100;i<1000;i++){
				// 获取i的百位 十位 个位的数字
				// 获取百位数字
				var bai = parseInt(i/100);
				
				// 获取十位数字
				var shi = parseInt((i-bai*100)/10);
				
				// 获取个位数字
				var ge = i % 10;
				
				// 判断i是否是水仙花数
				if(bai*bai*bai + shi*shi*shi + ge*ge*ge == i){
					document.write(i+"<br />");
				}
				// document.write(i+"<br />");
			}
		</script>
	</head>
	<body>
	</body>
</html>

11.for循环练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>for循环练习</title>
		<script type="text/javascript">
			/* 在页面中接收一个用户输入的数字,并判断该数是否是质数
				 质数: 只能被1和它自身整除的数,1不是质数也不是合数,质数必须是大于1的自然数。
			*/
			var num = prompt("请输入一个大于1的整数:");
			
			// 判断输入值的合法性
			if(num <= 1){
				alert("该值不合法!!!");
			}else{
				// 创建一个变量来保存当前的数的状态
				// 默认当前num是质数
				var flag = true;
				
				// 判断num是否是质数
				// 获取2-num之间的数
				for(var i = 2;i<num;i++){
					// 判断num是否能被i整除
					if(num % i == 0){
						// 如果num能被i整除,则说明num一定不是质数
						// 设置flag为false
						flag = false;
					}
				}
				// 如果num是质数则输出
				if(flag){
					alert(num + "是质数!!!");
				}else{
					alert(num+"不是质数!!!");
				}
				
			}
		</script>
	</head>
	<body>
	</body>
</html>

12.嵌套的for循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>嵌套的for循环</title>
		<script type="text/javascript">
			// 打印5*5的矩形
			for(var i = 0;i<5;i++){
				for(var j = 0;j<5;j++){
					document.write("*&nbsp;&nbsp;");
				}
				document.write("<br />");
			}
			
			// 打印三角形
			for(var i = 0;i<5;i++){
				for(var j = 0;j<i+1;j++){
					document.write("*&nbsp;&nbsp;");
				}
				document.write("<br />");
			}
			
			// 打印倒三角形
			for(var i = 0;i<5;i++){
				for(var j = 0;j<5-i;j++){
					document.write("*&nbsp;&nbsp;");
				}
				document.write("<br />");
			}
		</script>
	</head>
	<body>
	</body>
</html>

13.打印九九乘法表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>打印九九乘法表</title>
		<script type="text/javascript">
			// 打印九九乘法表
			
			// 创建外层循环,用来控制乘法表的高度
			for(var i = 1;i <= 9;i++){
				// 创建内层循环来控制图形的宽度
				for(var j = 1;j<=i;j++){
					document.write("<span>"+j+"*"+i+"="+i*j+"</span>");
				}
				document.write("<br />");
			}
		</script>
		<style type="text/css">
			span{
				display: inline-block;
				width: 80px;
			}
		</style>
	</head>
	<body>
	</body>
</html>

14.for嵌套-质数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>质数</title>
		<script type="text/javascript">
			// 打印1-100之间所有的质数
			
			
			// 测试如下程序的性能:
			// 在程序执行前,开启计时器
			// console.time("计时器的名字")可以用来开启一个计时器
			// 它需要一个字符串作为参数,这个字符串将会作为计时器的标识
			console.time("test");

			
			// 打印2-100之间所有的数
			for(var i = 2;i<=10000;i++){
				var flag = true;
				
				for(var j=2;j<=Math.sqrt(i);j++){
					if(i%j==0){
						flag=false;
						
						// 一旦进入判断,则证明i不可能是质数了,此时循环再执行已经没有任何意义了
						// 可使用break来结束循环
						break;
					}
				}
				if(flag){
					document.write(i + "<br />");
				}
			}
			
			
			// 终止计时器
			// console.timeEnd()用来停止一个计时器,需要一个计时器的名字作为参数
			console.timeEnd("test");
			
			// Math.sqrt()计算开方
			var q = Math.sqrt(4);
			document.write(q);
		</script>
	</head>
	<body>
	</body>
</html>

15.break和continue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>break和continue</title>
		<script type="text/javascript">
			/* break关键字可以用来退出switch或循环语句
				 不能在if语句中使用break和continue
				 break关键字 会立即终止离它最近的那个循环语句
			*/
		   for(var i = 0;i<5;i++){
			   console.log(i);
			   
			   if(i==2){
				   break;
			   }
		   }
		   
		   /* 可以为循环语句创建一个label,来识别当前的循环
				label:循环语句
				使用break语句时,可以在break后跟着一个label,
				  这样break将会结束指定的循环,而不是最近的
			*/
		   outer:
		   for(var i = 0;i<5;i++){
			   console.log("@外层循环"+i);
			   for(var j=0;j<5;j++){
				   break outer;
				   console.log("内层循环:"+j);
			   }
		   }
		   
		   /* continue关键字可以用来跳过当次循环*/
		   for(var i = 0;i<5;i++){
			   if(i==2){
				   continue;
			   }
			   console.log(i);
		   }
		</script>
	</head>
	<body>
	</body>
</html>

01.对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象</title>
		<script type="text/javascript">
			/* JS中数据类型:
					- String 字符串
					- Number 数值
					- Boolean 布尔值
					- Null 空值
					- Undefined 未定义
						以上五种类型属于基本数据类型,不是五种基本数据类型,就是Object
						
					- Object 对象
					
				基本数据类型都是单一的值“hello” 123 true,
				  值和值之间没有任何的联系。
				
				在js中来表示一个人的信息(name gender age):
					var name = "孙悟空";
					var gender = "男";
					var age = 18;
				如果使用基本数据类型的数据,我们所创建的变量都是独立的,不能成为一个整体。
				
				对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性。
				
				对象的分类:
					1.内建对象
						- 由ES标准中定义的对象,在任何的ES的实现中都可以使用
						- 比如:Math String Number Boolean Function Object ...
						
					2.宿主对象
						- 由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象
						- 比如:BOM(浏览器对象模型) DOM(文档对象模型)
						
					3.自定义对象
						- 由开发人员自己创建的对象
			*/
		   
		   // 创建对象
		   /* 使用new关键字调用的函数,是构造函数constructor
				构造函数是专门用来创建对象的函数
			   使用typeof 检查一个对象时,会返回object
			*/
		   var obj = new Object();
		   // console.log(obj);
		   
		   /* 在对象中保存的值称为属性
				向对象中添加属性:
					语法: 对象.属性名 = 属性值;
			*/
		   
		   // 向obj中添加一个name属性
		   obj.name = "孙悟空";
		   
		   // 向obj中添加一个gender属性
		   obj.gender = "男";
		   
		   // 向obj中添加一个age属性
		   obj.age = "18";
		   // console.log(obj);
		   
		   /* 读取对象中的属性
				语法: 对象.属性名
				
				如果读取对象中没有的属性,不会报错而是会返回undefined
			*/
		   // console.log(obj.name);
		   // console.log(obj.hello);
		   
		   /* 修改对象的属性值
				语法:对象.属性名 = 新值
				
			*/
		   obj.name = "tom";
		   
		   /* 删除对象的属性
				语法:delete 对象.属性名
			*/
		   delete obj.name;
		   
		   console.log(obj.name);
		   
		</script>
	</head>
	<body>
	</body>
</html>

02.属性名和属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性名和属性值</title>
		<script type="text/javascript">
			var obj = new Object();
			/* 向对象中添加属性
				属性名:
					- 对象的属性名不强制要求遵守标识符的规范
					
			*/
		   obj.name = "tom";
		   obj.var = "hello";
		   
		   // console.log(obj.var);
		   // console.log(obj.name);
		   
		   // obj.123 = 234;
		   // console.log(obj.123);//Uncaught SyntaxError: Unexpected number
		   /* 如果要使用特殊的属性名,不能采用.的方式来操作
				需要使用另一种方式:
					语法:对象["属性名"] = 属性值
				读取时也要采用这种方式
				
			   使用[]这种形式去操作属性,更加的灵活,
					在[]中可以直接传递一个变量,这样变量值是多少就会读取哪一个属性
			*/
		   obj["123"] = 789;
		   
		   var n = "123";
		   // console.log(obj[n]);
		   // console.log(obj["123"]);
		   
		   
		   /* 属性值
				JS对象的属性值,可以是任意的数据类型
				
			*/
		   obj.test = "abc";
		   obj.test = 123;
		   obj.test = true;
		   obj.test = null;
		   obj.test = undefined;
		   // console.log(obj.test);
		   
		   // 创建一个对象
		   var obj2 = new Object();
		   obj2.name = "cat";
		   
		   // 将obj2设置为obj的属性
		   obj.test = obj2;
		   // console.log(obj.test);
		   
		   
		   /* in运算符
				- 通过该运算符可以检查一个对象中是否含有指定的属性
					如果有则返回true,没有则返回false
				- 语法:
					"属性名" in 对象
					
			*/
		   
		   // 检查obj中是否含有test2属性
		   // console.log("test2" in obj);//false
		   // console.log("test" in obj);//true
		</script>
	</head>
	<body>
		hello!
	</body>
</html>

03.基本和引用数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本和引用数据类型</title>
		<script type="text/javascript">
			/* 基本数据类型
					string Number Boolean Null Undefined
				
				引用数据类型
					Object
					
				JS中的变量都是保存到栈内存中的,
					基本数据类型的值直接在栈内存中存储,
					值与值之间是独立存在,修改一个变量不会影响其他的变量
					
					对象是保存到堆内存中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间,
					而变量保存的是对象的内存地址(对象的引用),如果两个变量保存的是同一个对象引用,
					当通过一个变量修改属性时,另一个也会受到影响
					
			*/
		   
		   var a = 123;
		   var b =a;
		   a++;
		   
		   // console.log("a-->"+a);
		   // console.log("b-->"+b);
		   
		   var obj = new Object();
		   obj.name = "孙悟空";
		   
		   var obj2 = obj;
		   // console.log(obj.name);//孙悟空
		   // console.log(obj2.name);//孙悟空
		   
		   // 修改obj的name属性值
		   obj.name = "猪八戒";
		   // console.log(obj.name);//猪八戒
		   // console.log(obj2.name);//猪八戒
		   
		   // 设置obj2为null
		   obj2 = null;
			
			// console.log(obj);
			// console.log(obj2);
			
			var c = 10;
			var d = 10;
			// console.log(c == d);//true
			
			var obj3 = new Object();
			var obj4 = new Object();
			obj3.name = "沙和尚";
			obj4.name = "沙和尚";
			// console.log(obj3 == obj4);//false
			/* 当比较两个基本数据类型的值时,就是比较值。
				而比较两个引用数据类型时,它是比较的对象的内存地址,
					如果两个对象是一模一样的,但是地址不同,它也会返回false*/
		</script>
	</head>
	<body>
	</body>
</html>

04.对象字面量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象字面量</title>
		<script type="text/javascript">
			// 创建一个对象
			// var obj = new Object();
			
			/* 
				使用对象字面量来创建一个对象
			 */
			var obj = {};
			
			// console.log(typeof obj);
			obj.name = "tom";
			// console.log(obj.name);
			
			/* 使用对象字面量,可以在创建对象时,直接指定对象中的属性
				语法:{属性名:属性值,属性名:属性值...}
				 对象字面量的属性名可以加引号也可以不加,建议不加,
				 如果要使用一些特殊的名字,则必须加引号
				 
				属性名和属性值是一组一组的名值对结构,
					名和值之间使用:连接,多个名值对之间使用,隔开
					如果一个属性之后没有其他属性了,就不要写,了
			*/
		   var obj2 = {
			   name:"张三",
			   age:18,
			   gender:"男",
			   test:{name:"李四"}
			};
		   // console.log(obj2.test);
			
		</script>
	</head>
	<body>
	</body>
</html>

05.函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数</title>
		<script type="text/javascript">
			/* 函数 function
				  - 函数也是一个对象
				  - 函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)
				  - 函数中可以保存一些代码在需要的时候调用
				  - 使用typeof检查一个函数对象时,会返回function
			*/
		   
		   // 创建一个函数
		   // var fun = new Function();
		   // console.log(typeof fun);
		   
		   // 可以将要封装的代码以字符串的形式传递给构造函数
		   var fun = new Function("console.log('Hello,这是我的第一个函数');");
		   // console.log(fun);
		   
		   // 封装到函数中的代码不会立即执行
		   // 函数中的代码会在函数调用的时候执行
		   /* 调用函数
				语法:函数对象()
			*/
		   // 当调用函数时,函数中封装的代码会按照顺序执行
		   // fun();
		   // 我们在实际开发中很少使用构造函数来创建一个函数对象
		   
		   
		   
		   
		   
		   
		   /* 使用 函数声明 来创建一个函数
				语法:
					function 函数名([形参1,形参2...形参N]){  //[]代表可选
						语句...
					}
					
			*/
		   function fun2(){
			   console.log("我的第二个函数。。。");
			   document.write("hello world");
			   alert("你好");
		   }
		   // console.log(fun2);
		   // 调用fun2
		   // fun2();
		   
		   
		   
		   
		   
		   
		   
		   /* 使用 函数表达式 来创建一个函数
				var 函数名 = function([形参1,形参2...形参n]){
					语句...
				}
				
			*/
		   var fun3 = function(){
			   console.log("hello");
		   };
		   // fun3();
		</script>
	</head>
	<body>
	</body>
</html>

06.函数的参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数的参数</title>
		<script type="text/javascript">
			/* 定义一个用来求两个数和的函数
				  可以在函数的()中来指定一个或多个形参(形式参数)
				  多个形参之间使用,隔开,声明形参就相当于在函数内部声明了对应的变量
				  但是并不赋值
			*/
		   function sum(a,b){
			   console.log(a+b);
		   }
		   /* 在调用函数时,可以在()中指定实参(实际参数)
				实参将会赋值给函数中对应的形参
				
			*/
		   // sum(1,2);
		   
		   /* 
				调用函数时解析器(浏览器)不会检查实参的类型
				  所以要注意,是否有可能会接受到非法的参数
			*/
		   // sum(123,"hello");//123hello
		   // sum(true,false);//1
		   
		   /* 
				调用函数时,解析器也不会检查实参的数量
				  多余实参不会被赋值
				如果实参的数量少于形参的数量,则没有对应实参的形参将是undefined
		   */
		  // sum(1,2,"hello",true,null);//3
		  // sum(1);//undefined
		   
		</script>
	</head>
	<body>
	</body>
</html>

07.返回值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>返回值</title>
		<script type="text/javascript">
			/* 创建一个函数,用来计算三个数的和
				
				可以使用 return 来设置函数的返回值
					语法: return 值
					
					return后的值将会作为函数的执行结果返回,
						可以定义一个变量,来接受该结果
						
					在函数中return后的语句都不会执行
					
					如果return语句后不跟任何值就相当于返回一个undefined,
					如果函数中不写return,则也会返回undefined
					
					return后可以跟任意类型的值
			
			*/
			function sum(a,b,c){
				// alert(a+b+c);
				
				var d = a+b+c;
				return d;
			}
			
			// 调用函数
			// 变量result的值就是函数的执行结果
			// 函数返回什么result的值就是什么
			var result = sum(1,2,3);
			
			// console.log(result);
			// sum(1,2,3);
		
			
			// 练习
			
			/* 定义一个函数,判断一个数字是否是偶数,如果是返回true,否则返回false */
			// function isOu(num){
			// 	if(num%2==0){
			// 		return true;
			// 	}else{
			// 		return false;
			// 	}
			// }
			function isOu(num){
				return num%2==0;
			}
			var res = isOu(55555555555);
			// console.log(res);
			
			
			
			/* 创建一个函数,可以在控制台输出一个人的信息
				可以输出人的name age gender address
				
				实参可以是任意的数据类型,也可以是一个对象
				  当我们参数过多时,可以将参数封装到一个对象中,然后通过对象传递
				  
			*/
		   function sayHello(o){
			   console.log(o.name+o.age+o.gender+o.address);
		   }
		   var obj = {
			   name : "tom",
			   age : 19,
			   address : "china",
			   gender : "男"
		   };
		   // sayHello(obj);
		   
		   /* 实参可以是一个对象,也可以是一个函数*/
		   function fun(a){
			   a(obj);
		   }
		   // fun(sayHello);
		   
		   /*
				sayHello()
				  -调用函数
				  - 相当于使用的函数的返回值
				sayHello
				  - 函数对象
				  - 相当于直接使用函数对象
		    */
		   
		</script>
	</head>
	<body>
	</body>
</html>

08.return

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>return</title>
		<script type="text/javascript">
			
			function fun(){
				console.log("start");
				
				for(var i = 0;i<5;i++){
					
					if(i == 2){
						// 使用break可以退出当前循环
						// break;
						
						// continue用于跳过当次循环
						// continue;
						
						// 使用return可以结束整个函数
						// return;
						
					}
					console.log(i);
				}
				
				console.log("end");
			}
			// fun();
			
			
			/* 返回值可以是任意的数据类型
				可以是一个对象,也可以是一个函数
				
			*/
		   function fun2(){
			   var obj = {name : "tom"};
			   return obj;
		   }
		   var a = fun2();
		   // console.log(a);
		   
		   function fun3(){
			   // 在函数内部再声明一个函数
			   function fun4(){
				   console.log("hello");
			   }
			   // fun4();
			   return fun4;
		   }
		   // fun3();
		   a = fun3();
		   // a();//hello
		   // fun3()();//hello
		   
		</script>
	</head>
	<body>
	</body>
</html>

09.立即执行函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>立即执行函数</title>
		<script type="text/javascript">
			// 函数对象()
			/* 立即执行函数
				  函数定义完,立即被调用,这种函数叫做立即执行函数
				  立即执行函数往往只会执行一次
				  
			*/
		   (function(){
			   // console.log("hello");
		   })();//hello
		</script>
	</head>
	<body>
	</body>
</html>

10.对象的属性值-函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象</title>
		<script type="text/javascript">
			/* 创建一个对象 */
			var obj = new Object();
			
			// 向对象中添加属性
			obj.name = "cat";
			obj.age = 12;
			
			// 对象的属性值可以是任何的数据类型,也可以是一个函数
			obj.sayName = function(){
				console.log(obj.name);
			};
			// obj.sayName();
			
			/* 函数也可以成为对象的属性
				如果一个函数作为一个对象的属性保存,
				那么我们称这个函数是这个对象的方法
				调用函数就说调用对象的方法*/
				
			var obj2 = {
				name : "张三",
				age : 12,
				sayName:function(){
					console.log(obj2.name);
				}
			};
			// obj2.sayName();
		</script>
	</head>
	<body>
	</body>
</html>

11.枚举对象中的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>枚举对象中的属性</title>
		<script type="text/javascript">
			var obj = {
				name:"孙悟空",
				age:19,
				gender:"男",
				address:"花果山"
			};
			
			// 枚举对象中的属性
			// 使用 for...in 语句
			/* 语法:
					for(var 变量 in 对象){
						
					}
				for...in 语句 对象中有几个属性,循环就会执行几次
				  每次执行时,会将对象中的一个属性的名字赋值给变量
			*/
		   for(var n in obj){
			   // console.log(n);
			   // console.log("属性名:"+n+"-->"+"属性值:"+obj[n]);
		   }
		</script>
	</head>
	<body>
	</body>
</html>

12.作用域scope

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作用域</title>
		<script type="text/javascript">
			/* 作用域
				- 作用域指一个变量的作用的范围
				- 在JS中一共有两种作用域:
					1.全局作用域
						- 直接编写在script标签中的JS代码,都在全局作用域
						- 全局作用域在页面打开时创建,在页面关闭时销毁
						- 在全局作用域中有一个全局对象window,
							它代表的是一个浏览器的窗口,它由浏览器创建,我们可以直接使用
						- 在全局作用域中:
							创建的变量都会作为window对象的属性保存
							创建的函数都会作为window对象的方法保存
						- 全局作用域中的变量都是全局变量,
							在页面的任意的部分都可以访问的到
							
					
					2.函数作用域
			*/
		   
		   // console.log(window);
		   var a = 10;
		   // console.log(window.a);
		   function fun(){
			   console.log("hello");
		   }
		   // window.fun();
		</script>
	</head>
	<body>
	</body>
</html>

13.变量的声明提前

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>变量的声明提前</title>
		<script type="text/javascript">
			/* 变量的声明提前
					- 使用var关键字声明的变量,会在所有的代码执行之前被声明(但是不会赋值)
						但是如果声明变量时不使用var关键字,则变量不会被声明提前
						
				函数的声明提前
					- 使用函数声明形式创建的函数 function 函数名(){}
						它会在所有的代码执行之前就被创建
						 所以我们可以在函数声明前来调用函数
					- 使用函数表达式创建的函数,不会被声明提前,所以不能在声明前调用
					
			*/
		   
		   
		   // fun();//fun...
		   // fun2();//UncaughtTypeError: fun2 is not a function
		   
		   // 函数声明,会被提前创建
		   function fun(){
			   console.log("fun...");
		   }
		   
		   // 函数表达式,不会被提前创建
		   var fun2 = function(){
			   console.log("fun2...");
		   };
		</script>
	</head>
	<body>
	</body>
</html>

14.函数作用域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>函数作用域</title>
		<script type="text/javascript">
			/* 函数作用域
				- 调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁
				- 每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的
				- 在函数作用域中可以访问到全局作用域的变量,
					  在全局作用域中无法访问到函数作用域的变量
				- 当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用,否则向上一级作用域中寻找
				- 在函数中要访问全局变量可以使用window对象
				
			
			*/
		   
		   // 创建一个变量
		   var a = 10;
		   function fun(){
			   console.log(a);
			   
			   var b = 20;
		   }
		   // fun();//10
		   
		   // console.log(b);//UncaughtReferenceError: b is not defined
		   
		   
		   
		   /* 在函数作用域中也有声明提前的特性,
				使用var关键字声明的变量,会在函数中所有的代码执行之前被声明
				
				函数声明也会在函数中的所有的代码执行之前执行
			*/
		   function fun3(){
			   console.log(a);
			   
			   var a = 10;
			   fun4();
			   
			   function fun4(){
				   console.log("fun4...");
			   }
		   }
		   // fun3();//undefined
		</script>
	</head>
	<body>
	</body>
</html>

15.debug

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>debug</title>
		<script type="text/javascript">
			console.log(d);
			
			var a = 10;
			var b = "hello";
			c = true;
			function fun(){
				console.log("hello");
			}
			var d = 35;
		</script>
	</head>
	<body>
	</body>
</html>

16.this

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>this</title>
		<script type="text/javascript">
			/* 解析器在调用函数时每次都会向函数内部传递一个隐含参数,
				  这个隐含的参数就是this,this指向的是一个对象,
				  这个对象我们称为函数执行的 上下文对象,
				  根据函数的调用方式的不同,this会指向不同的对象
					  1.以函数的形式调用时,this永远都是window
					  2.以方法的形式调用时,this就是调用方法的 那个对象
			*/
		   
		   function fun(){
			   console.log(this.name);
		   }
		   // fun();
		   
		   var obj = {
			   name:"tom",
			   sayName:fun
		   };
		   
		   var name = "全局的name";
		   
		   // 以方法的形式调用,this是调用方法的对象
		   // obj.sayName();//tom
		   
		   // 以函数形式调用,this就是window
		   // fun();//全局的name
		   
		   // console.log(obj.sayName == fun);  //true
		   
		   
		   var address = "花果山";
		   
		   function fun2(){
			   console.log(this.address);
		   }
		   
		   var obj = {
			   address : "高老庄	",
			   sayAddr:fun2
		   };
		   var obj2 = {
			   address : "梁山",
			   sayAddr:fun2
		   };
		   
		   // fun2();//花果山
		   // obj.sayAddr();//高老庄
		   // obj2.sayAddr();//梁山
		</script>
	</head>
	<body>
	</body>
</html>

17.使用工厂方法创建对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用工厂方法创建对象</title>
		<script type="text/javascript">
			/* 
				创建一个对象
			 */
			var obj = {
				name : "孙悟空",
				age : 18,
				gender : "男",
				sayName : function(){
					console.log(this.name);
				}
			};
			
			/* 
				使用工厂方法创建对象
				  通过该方法可以大批量的创建对象
			 */
			function createPerson(name,age,gender){
				var obj = new Object();
				
				obj.name = name;
				obj.age = age;
				obj.gender = gender;
				obj.sayName = function(){
					console.log(this.name);
				};
				
				return obj;
			}
			
			var obj2 = createPerson("孙悟空",18,"男");
			obj2.sayName();
			
		</script>
	</head>
	<body>
	</body>
</html>

18.构造函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>构造函数</title>
		<script type="text/javascript">
			/* 创建一个构造函数,专门用来创建Person对象
				 构造函数就是一个普通的函数,创建方式和普通函数没有区别,
				 不同的是构造函数习惯上首字母大写
				 
			    构造函数和普通函数的区别就是调用方式的不同
					普通函数是直接调用,而构造函数需要使用new关键字来调用
					
				
				构造函数的执行流程:
					1.立刻创建一个新的对象
					2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
					3.逐行执行函数中的代码
					4.将新建的对象作为返回值返回
					
				使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类。
				  我们将通过一个构造函数创建的对象,称为是该类的实例
				  
				  
				  
				  this的情况:
					1.当以函数的形式调用时,this就是window
					2.当以方法的形式调用时,谁调用方法this就是谁
					3.当以构造函数的形式调用时,this就是新创建的那个对象
			*/
		   function Person(name,age,gender){
			   this.name = name;
			   this.age = age;
			   this.gender = gender;
			   this.sayName = function(){
				   console.log(this.name);
			   };
		   }
		   
		   var per = new Person("孙悟空",18,"男");
		   
		   // console.log(per);
		   // per.sayName();
		   
		   
		   /* 
				使用instanceof可以检查一个对象是否是一个类的实例
				语法:
					对象 instanceof 构造函数
				如果是,返回true,否则返回false
		   */
		  // console.log(per instanceof Person);//true
		  
		  /* 
				所有的对象都是Object的后代,
				所有任何对象和Object在instanceof检查是都会返回true
				
		  */
		 // console.log(per instanceof Object);//true
		</script>
	</head>
	<body>
	</body>
</html>

19.构造函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>构造函数</title>
		<script type="text/javascript">
			/* 创建一个Person构造函数
					- 在Person构造函数中,为每一个对象都添加了一个sayName方法,
						目前我们的方法是在构造函数内部创建的,
							也就是构造函数每执行一次就会创建一个新的sayName方法
							也就是所有实例的sayName都是唯一的
							这样就导致了构造函数执行一次就会创建一个新的方法,
							完全可以使所有的对象共享一个方法
			*/
		   function Person(name,age,gender){
			   this.name = name;
			   this.age = age;
			   this.gender = gender;
			   // this.sayName = function(){
				  //  console.log(this.name);
			   // };
			   // this.sayName = fun;
		   }
		   
		   
		   // 将sayName方法在全局作用域中定义
		   /* 
				将函数定义在全局作用域,污染了全局作用域的命名空间
				  而且定义在全局作用域中也很不安全
		   */
		   // function fun(){
		   // 		console.log(this.name);
		   // }
		   Person.prototype.sayName = function(){
		   		console.log(this.name);
		   };
		   
		   var per = new Person("tom",11,"男");
		   // per.sayName();
		   
		   
		</script>
	</head>
	<body>
	</body>
</html>

20.原型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>原型</title>
		<script type="text/javascript">
			/* 原型 prototype
				
				我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype
					这个属性对应着一个对象,这个对象就是我们所谓的原型对象
				如果函数作为普通函数调用prototype没有任何作用
				当函数以构造函数的形式调用时(var mc = new Person()),
					它所创建的对象中都会有一个隐含的属性,
					指向该构造函数的原型对象,我们可以通过__proto__来访问该属性
					
				原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象
					我们可以将对象中共有的内容,统一设置到原型对象中
					
				当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有则直接使用,
					如果没有则会去原型对象中寻找,如果找到则直接使用
					
				以后创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中,
					这样不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法了
			*/
		   function Person(){
			   
		   }
		   
		   // 向Person的原型中添加属性a
		   Person.prototype.a = 123;
		   
		   // 向Person的原型中添加一个方法
		   Person.prototype.sayHello = function(){
			   console.log("hello");
		   };
		   
		   var pr = new Person();
		   var pr2 = new Person();
		   
		   // console.log(pr.a);//123
		   // console.log(pr2.a);//123
		   // pr.sayHello();
		   // pr2.sayHello();
		   
		   // console.log(Person.prototype);
		   // console.log(pr.__proto__);
		</script>
	</head>
	<body>
	</body>
</html>

21.原型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>原型</title>
		<script type="text/javascript">
			// 创建一个构造函数
			function MyClass(){
				
			}
			// 向MyClass的原型中添加一个name属性
			MyClass.prototype.name = "原型中的名字";
			
			var mc = new MyClass();
			
			// console.log(mc.name);//原型中的名字
			
			// 使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true
			// console.log("name" in mc);//true
			
			// 可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
			// console.log(mc.hasOwnProperty("name"));//false
			mc.age = 18;
			// console.log(mc.hasOwnProperty("age"));//true
			
			/* 
				原型对象也是对象,所以它也有原型,
				  当我们使用一个对象的属性或方法时,会先在自身中寻找,
					自身中如果有,则直接使用,
					如果没有则去原型对象中寻找,如果原型对象中有,则使用,
					如果没有则去原型的原型中寻找,直到找到Object对象的原型,
					Object对象的原型没有原型,如果在Object中依然没有找到,则返回undefined
			 */
		</script>
	</head>
	<body>
	</body>
</html>

22.toString

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>toString</title>
		<script type="text/javascript">
			function Person(name,age,gender){
				this.name = name;
				this.age = age;
				this.gender = gender;
			}
			
			// 创建一个Person实例
			var per = new Person("宋江",18,"男");
			
			// 修改Person原型的toString
			Person.prototype.toString = function(){
				return "Person[name = "+this.name+" , age = "+this.age+" , gender = "+this.gender+" ]";
			};
			
			// 当我们直接在页面中打印一个对象时,实际上是输出的对象的toString()方法的返回值
			// 如果希望在输出对象时不输出[object Object],可以为对象添加一个toString()方法
			// per.toString = function(){
			// 	return "Person....";
			// };
			// console.log(per.toString() == per);//true
			// console.log(per);
			// console.log(per.toString());//Person....
			// console.log(per.toString());//Person[name = 宋江 , age = 18 , gender = 男 ]
			
		</script>
	</head>
	<body>
	</body>
</html>

23.垃圾回收

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垃圾回收</title>
		<script type="text/javascript">
			/* 垃圾回收(GC)
				 - 就像人生活的时间长了会产生垃圾一样,程序运行过程中也会产生垃圾
					这些垃圾积攒过多以后,会导致程序运行的速度过慢,
					所以我们需要一个垃圾回收的机制,来处理程序运行过程中产生的垃圾
					
					
				 - 当一个对象没有任何的变量或属性对它进行引用,此时我们将永远无法操作该对象,
					此时这种对象就是一个垃圾,这种对象过多会占用大量的内存空间,导致程序运行变慢
				 - 在JS中拥有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁,
					我们不需要也不能进行垃圾回收的操作
					
				 - 我们需要做的只是要将不再使用的对象设置为null即可
			*/
		   var obj = new Object();
		</script>
	</head>
	<body>
	</body>
</html>

01.数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组</title>
		<script type="text/javascript">
			/* 
				内建对象
				宿主对象
				自定义对象
				
				数组(Array)
					- 数组也是一个对象
					- 它和普通对象功能类似,也是用来存储一些值的
					- 不同的是普通对象是使用字符串作为属性名的,
						而数组是使用数字作为索引操作元素
						
					- 索引:
						从0开始的整数就是索引
					- 数组的存储性能比普通对象要好,在开发中经常使用数组来存储一些数据
				
			 */
			
			// 创建数组对象
			var arr = new Array();
			
			// 使用typeof检查一个数组时,会返回object
			// console.log(typeof arr);//object
			
			/* 向数组中添加元素
				语法:数组[索引] = 值
				
			*/
		   arr[0] = 10;
		   arr[1] = 11;
		   arr[2] = 111;
		   arr[3] = 122;
		   arr[4] = 12;
		   // console.log(arr);//{"0":10,"1":11,"length":2}
		   
		   /* 读取数组中的元素
				语法:数组[索引]
					
				如果读取不存在的索引,不会报错而是返回undefined
			*/
		   // console.log(arr[4]);//12
		   
		   /* 获取数组的长度
				可以使用length属性来获取数组的长度(元素的个数)
				  语法:数组.length
				对于连续的数组,使用length可以获取到数组的长度
				对于非连续的数组,使用length会获取到数组的最大索引+1
					尽量不要创建非连续的数组
			*/
		   // console.log(arr.length);//5
		   
		   /* 修改length
				如果修改的length大于原长度,则多出部分会空出来
				如果修改的length小于原长度,则多出的元素会被删除
			*/
		   // arr.length = 10;
		   // console.log(arr.length);//10
		   // console.log(arr);
		   
		   // arr.length = 2;
		   // console.log(arr.length);
		   // console.log(arr);// {"0":10,"1":11,"length":2}
				
			/* 
				向数组的最后一个位置添加元素
				语法:
					数组[数组.length] = 值;
			 */
			arr[arr.length] = 100;
			// console.log(arr);//{"0":10,"1":11,"2":111,"3":122,"4":12,"5":100,"length":6}
		</script>
	</head>
	<body>
	</body>
</html>

02.数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组</title>
		<script type="text/javascript">
			// 创建一个数组
			// var arr = new Array();
			
			// 使用字面量来创建数组
			// var arr = [];
			
			// console.log(arr);
			
			// 使用字面量创建数组时,可以在创建时就指定数组中的元素
			var arr = [1,2,3,4,5,100];
			
			// console.log(arr[3]);//4
			
			/* 使用构造函数创建数组时,也可以同时添加元素,将要添加的元素作为构造函数的参数传递
				元素之间使用,隔开
			
			*/
			var arr2 = new Array(10,29,30);
			// console.log(arr2);//{"0":10,"1":29,"2":30,"length":3}
			
			// 创建一个数组中只有一个元素10
			arr = [10];
			
			// 创建一个长度为10的数组
			arr2 = new Array(10);
			// console.log(arr2.length);//10
			
			/* 
				数组中的元素可以是任意的数据类型
				
			 */
			// arr = ["hello",1,true,null,undefined];
			// console.log(arr);//0: "hello" 1: 1 2: true 3: null 4: undefined length: 5
			
			// 也可以是对象
			var obj = {name:"孙悟空"};
			arr[arr.length] = obj;
			arr = [{name:"a"},{name:"b"},{name:"c"}];
			// console.log(arr);
			// console.log(arr[1].name);//b
			
			// 也可以是函数
			arr = [function(){console.log(1);},function(){console.log(2);}];
			// arr[0]();//1
			// arr[1]();//2
			
			// 数组中也可以放数组  称为二维数组
			arr = [[1,2,3],[23,34,4],[111,222,333]];
			// console.log(arr[1]);
		</script>
	</head>
	<body>
	</body>
</html>

03.数组的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组的方法</title>
		<script type="text/javascript">
			// 创建一个数组
			var arr = ["孙悟空","猪八戒","沙和尚"];
			
			/* push()
				  - 该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度
				  - 可以将要添加的元素作为方法的参数传递
						这样这些元素将自动添加到数组的末尾
				  - 该方法会将数组新的长度作为返回值返回
			*/
		   arr.push("唐僧","白骨精");
		   
		   // console.log(arr);//{"0":"孙悟空","1":"猪八戒","2":"沙和尚","3":"唐僧","4":"白骨精",length":5}
		   
		   /* pop()
				- 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
				
			*/
		   result = arr.pop();
		   // console.log(result);//白骨精
		   
		   /* unshift()
				- 向数组开头添加一个或多个元素,并返回新的数组长度
				- 向前边插入元素以后,其他的元素索引会依次调整
			*/
		   // console.log(arr);
		   
		   arr.unshift("牛魔王","二郎神");
		   
		   // console.log(arr);
		   
		   
		   /* shift()
				- 可以删除数组的第一个元素,并将被删除的元素作为返回值返回
				
			*/
		   result = arr.shift();
		   // console.log(arr);
		   // console.log(result);//牛魔王
		</script>
	</head>
	<body>
	</body>
</html>

04.数组的遍历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组的遍历</title>
		<script type="text/javascript">
			// 创建一个数组
			var arr = ["孙悟空","猪八戒","沙和尚"];
			
			// 所谓的遍历数组,就是将数组中所有的元素都取出来
			for(var i = 0;i<arr.length;i++){
				// console.log(arr[i]);
			}
		</script>
	</head>
	<body>
	</body>
</html>

05.数组练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组练习</title>
		<script type="text/javascript">
			function Person(name,age,gender){
				this.name = name;
				this.age = age;
			}
			
			// 修改Person原型的toString
			Person.prototype.toString = function(){
				return "Person[name = "+this.name+" , age = "+this.age+"]";
			};
			
			// 创建一个Person对象
			var per = new Person("孙悟空",18);
			var per2 = new Person("猪八戒",28);
			var per3 = new Person("红孩儿",8);
			var per4 = new Person("蜘蛛精",12);
			var per5 = new Person("二郎神",44);
			
			/* 
				将这些Person对象放入到一个数组中
			 */
			var perArr = [per,per2,per3,per4,per5];
			
			/* 
				创建一个函数,可以将perArr中的满18岁的Person提取出来,
				 然后封装到一个新的数组中并返回
				 arr
					形参,要提取信息的数组
			 */
			function getAdult(arr){
				// 创建一个新的数组
				var newArr = [];
				
				// 遍历arr,获取arr中Person对象
				for(var i = 0;i<arr.length;i++){
					var p = arr[i];
					// 判断Person对象的age是否大于等于18
					if(p.age >= 18){
						// 如果大于等于18,则将这个对象添加到newArr中
						newArr.push(p);
					}
				}
				// 将新的数组返回
				return newArr;
			}
			var result = getAdult(perArr);
			// console.log(result);
		</script>
	</head>
	<body>
	</body>
</html>

06.forEach

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>forEach</title>
		<script type="text/javascript">
			/* 
				一般都是使用for循环去遍历数组,
					JS中为我们提供了一个方法,用来遍历数组
				forEach()
					- 这个方法只支持IE8以上的浏览器
						IE8及以下的浏览器均不支持该方法,所以如果需要兼容IE8,则不要使用forEach
						 还是使用for循环来遍历
			 */
			
			// 创建一个数组
			var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
			
			/* 
				forEach()方法需要一个函数作为参数
					- 像这种函数,由我们创建但不由我们调用的,我们称为回调函数
					- 数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素
						以实参的形式传递进来,可以来定义形参,来读取这些内容
					- 浏览器会在回调函数中传递三个参数:
						第一个参数,就是当前正在遍历的元素
						第二个参数,就是当前正在遍历的元素的索引
						第三个参数,就是正在遍历的数组
			 */
			arr.forEach(function(value,index,obj){
				// console.log("hello");
				// console.log(value,index,obj);
			});
		</script>
	</head>
	<body>
	</body>
</html>

07.slice和splice

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
			
			/* slice()
					- 可以用来从数组提取指定元素
					- 该方法不会改变原数组,而是将截取到的元素封装到一个新数组中返回
					- 参数:
						1.截取开始的位置的索引,包含开始索引
						2.截取结束的位置的索引,不包含结束索引
							- 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
						- 索引可以传递一个负值,如果传递一个负值,则从后往前计算
			*/
		   var result = arr.slice(1,2);//猪八戒
		   result = arr.slice(2);//沙和尚...白骨精
		   result = arr.slice(2,-1);//沙和尚 唐僧
		   // console.log(result);
		   
		   
		   
		   /* splice
				- 可以用于删除数组中的指定元素
				- 使用splice()会影响到原数组,会将指定元素从原数组中删除
					并将被删除的元素作为返回值返回
				- 参数:
					第一个,表示开始位置的索引
					第二个,表示删除的数量
					第三个及以后,
						可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边
			*/
		   // result = arr.splice(0,2);
		   
		   // console.log(result);//孙悟空 猪八戒
		   
		   // console.log(arr);//沙和尚 唐僧 白骨精
		   
		   result = arr.splice(1,1,"牛魔王","铁扇公主");
		   // console.log(result);
		   // console.log(arr);
		</script>
	</head>
	<body>
	</body>
</html>

08.数组去重练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组去重练习</title>
		<script type="text/javascript">
			// 创建一个数组
			var arr = [1,2,2,2,3,2,1,3,4,2,5];
			
			// 去除数组中重复的数字
			// 获取数组中的每一个元素
			for(var i = 0;i<arr.length;i++){
				// console.log(arr[i]);
				/* 获取当前元素后的所有元素 */
				for(var j = i+1;j<arr.length;j++){
					// console.log("--->"+j);
					/* 判断两个元素是否相等 */
					if(arr[i] == arr[j]){
						/* 如果相等则证明出现了重复的元素,则删除j对应的元素 */
						arr.splice(j,1);
						/* 当删除了当前j所在的元素以后,后边的元素会自动补位,
							此时将不会再比较这个元素,
							需要再比较依次j所在位置的元素
						*/
					   // 使j自减
					   j--;
					}
				}
			}
			// console.log(arr);//12345
		</script>
	</head>
	<body>
	</body>
</html>

09.数组的剩余方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组的剩余方法</title>
		<script type="text/javascript">
			var arr = ["孙悟空","猪八戒","沙和尚"];
			var arr2 = ["白骨精","蜘蛛精","玉兔精"];
			var arr3 = ["白骨精","蜘蛛精","玉兔精"];
			
			/* 
				concat()可以连接两个或多个数组,并将新的数组返回
				 - 该方法不会对原数组产生影响
			 */
			var result = arr.concat(arr2,arr3,"牛魔王","红孩儿");
			// console.log(result);
			
			
			/* 
				join()
					- 该方法可以将数组转换成一个字符串
					- 该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回
					- 在join()中可以指定一个字符串作为参数,该字符串将会成为数组中元素的连接符
						如果不指定连接符,则默认使用 , 作为连接符
			 */
			result = arr.join("--");
			// console.log(result);//孙悟空--猪八戒--沙和尚
			
			
			/* 
				reverse()
					- 该方法用来反转数组(前边的去后边,后边的去前边)
					- 该方法会直接修改原数组
			 */
			arr.reverse();
			// console.log(arr);//{"0":"沙和尚","1":"猪八戒","2":"孙悟空","length":3}
			
			
			/* 
				sort()
					- 可以用来对数组中的元素进行排序
					- 也会影响原数组,默认会按照Unicode编码进行排序,
					
				即使对于纯数字的数组,使用sort()排序时,也会按照Unicode编码来排序,
					所以对数字进行排序时,可能会得到错误的结果
					
				可以自己来指定排序的规则
					可以在sort()添加一个回调函数,来指定排序规则,
						回调函数中需要定义两个形参,
						浏览器会分别使用数组中的元素作为实参去调用回调函数
						使用哪个元素调用不确定,但是肯定的是在数组中a一定在b前边
					- 浏览器会根据回调函数的返回值来决定元素的顺序,
						如果返回一个大于0的值,则元素会交换位置,
						如果返回一个小于0的值,则元素位置不变,
						如果返回一个0 , 也不交换位置。
					
					- 如果需要升序排列,则返回 a-b,
						如果需要降序排列,则返回 b-a
			 */
			arr = ["d","b","e","c","a"];
			arr.sort();
			// console.log(arr);//{"0":"a","1":"b","2":"c","3":"d","4":"e","length":5} 
			
			arr = [1,3,2,5,4];
			arr.sort(function(a,b){
				/* if(a>b){
					return -1;
				}else if(a<b){
					return 1;
				}else{
					return 0;
				}//5,4,3,2,1 */
				
				/* 升序排列 */
				// return a-b;//1,2,3,4,5
				/* 降序排列 */
				// return b-a;//5,4,3,2,1
			});
			// console.log(arr.join());
		</script>
	</head>
	<body>
	</body>
</html>

10.函数的方法-call和apply

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>call和apply</title>
		<script type="text/javascript">
			function fun(a,b){
				// console.log("hello world");
				// console.log(this);
				
				console.log("a = "+a);
				console.log("b = "+b);
			}
			
			/* 
				call()和apply()
					- 这两个方法都是函数对象的方法,需要通过函数对象来调用
					- 当对函数调用call()和apply()都会调用函数执行
					- 当调用call()和apply()可以将一个对象指定为第一个参数
						 此时这个对象将会成为函数执行时的this
						 
					- call()方法可以将实参在对象之后依次传递
					- apply()方法需要将实参封装到一个数组中统一传递
					
					
					- this的情况:
						1.以函数的形式调用时,this永远都是window
						2.以方法的形式调用时,this是调用方法的对象
						3.以构造函数的形式调用时,this是新创建的那个对象
						4.使用call和apply调用时,this是指定的那个对象
			 */
			// fun.call();//hello world
			// fun.apply();//hello world
			// fun();//hello world
			
			var obj = {
				name:"obj",
				sayName:function(){
					console.log(this.name);
				}
			};
			var obj2 = {name:"obj2"};
			
			// fun.call(obj);
			// fun.call(obj,2,3);//a = 2,b = 3
			// fun.apply(obj,[2,3]);//a = 2,b = 3
			
			// obj.sayName.apply(obj2);//obj2
			// obj.sayName(obj);//obj
		</script>
	</head>
	<body>
	</body>
</html>

11.arguments

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>arguments</title>
		<script type="text/javascript">
			/**
			 * 在调用函数时,浏览器每次都会传递两个隐含的参数,
			 * 	  1.函数的上下文对象 this
			 *    2.封装实参的对象 arguments
			 * 			- arguments 是一个类数组对象,它也可以通过索引来操作数据,也可以获取长度
			 * 			- 在调用函数时,我们所传递的实参都会在arguments中保存
			 * 			- arguments.length 可以用来获取实参的长度
			 * 			- 即使不定义形参,也可以通过arguments来使用实参,
			 * 				只不过比较麻烦
			 * 				arguments[0] 表示第一个实参
			 * 
			 * 			- 它里边有一个属性叫做callee,
			 * 				这个属性对应一个函数对象,就是当前正在执行的函数的对象
			 */
			
			function fun(){
				// console.log(arguments); //(1,2,3)
				// console.log(arguments.length);//3
				// console.log(arguments[0]);//1
				// console.log(arguments.callee);// 函数体
			}
			
			fun(1,2,3);
		</script>
	</head>
	<body>
	</body>
</html>

12.Date

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Date对象</title>
		<script type="text/javascript">
			/* Date对象
				  - 在JS中使用Date对象来表示一个时间
			*/
		   
		   // 创建一个Date对象
		   // 如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间
		   var d = new Date();
		   
		   // console.log(d.toString());//Mon Jan 03 2022 19:29:44 GMT+0800 (中国标准时间)
		   // console.log(typeof d);//object
		   
		   
		   // 创建一个指定的时间对象
		   /* 需要在构造函数中传递一个表示时间的字符串作为参数*/
		   /* 日期的格式:月份/日/年 时:分:秒*/
		   var d2 = new Date("12/03/2021 11:10:30");
		   
		   // console.log(d2.toString());//Fri Dec 03 2021 11:10:30 GMT+0800 (中国标准时间)
		   
		   
		   
		   /* getDate()
				- 获取当前日期对象是几日
			*/
		   var date = d2.getDate();
		   // console.log(date);//3
		   
		   /* getDay()
				- 获取当前日期对象是周几
				- 会返回一个0-6的值
			*/
		   var day = d2.getDay();
		   // console.log(day);//5
		   
		   /* getMonth()
				- 获取当前时间对象的月份
				- 会返回一个0-11的值
					0 表示 1月
					11 表示 12月
			*/
		   var month = d2.getMonth();
		   // console.log(month);//11
		   
		   /* getFullYear()
				- 获取当前日期对象的年份
			*/
		   var year = d2.getFullYear();
		   // console.log(year);//2021
		   
		   
		   /* getTime()
				- 获取当前日期对象的时间戳
				- 时间戳,指的是从格林威治标准时间的1970年1月1日,0时0分0秒
					到当前日期所花费的毫秒数(1秒 = 1000毫秒)
				- 计算机底层在保存时间时使用的都是时间戳
			*/
		   var time = d.getTime();
		   // console.log(time.toString());//1641210668581
		   // console.log(time/1000/60/60/24/365);
		   
		   var d3 = new Date("1/1/1970 0:0:0");
		   time = d3.getTime();
		   var n = 8*60*60*1000;//8小时  中国在东八区
		   // console.log(time+n);//0
		   
		   /* 利用时间戳来测试代码的执行的性能*/
		   var start = Date.now();
		   
		   for(var i = 0;i<100;i++){
			   // console.log(i);
		   }
		   
		   var end = Date.now();
		   
		   // console.log(end - start);
		</script>
	</head>
	<body>
	</body>
</html>

13.Math

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Math</title>
		<script type="text/javascript">
			/* Math
				  - Math和其他的对象不同,它不是一个构造函数,
						它属于一个工具类,不用创建对象,它里面封装了数学运算相关的属性和方法
			*/
		   // console.log(Math.PI);//圆周率
		   // document.write(Math.PI);
		   
		   /* abs() 可以用来计算一个数的绝对值*/
		   // console.log(Math.abs(-12));//12
		   
		   
		   /* Math.ceil()
				- 可以对一个数进行向上取整2,小数位只要有值就自动进1
				- 上舍入
			*/
		   // console.log(Math.ceil(1.1));//2
		   
		   
		   /* Math.floor()
				- 可以对一个数进行向下取整,小数部分会被舍掉
				- 下舍入
			*/
		   // console.log(Math.floor(1.9));//1
		   
		   
		   /* Math.round()
				- 可以对一个数进行四舍五入取整
			*/
		   // console.log(Math.round(1.4));//1
		   
		   
		   /* Math.random()
				- 可以生成一个0-1之间的随机数
			*/
		   // console.log(Math.random());//0.880301
		   
		   
		   /* 生成一个0-10的随机数
				- 生成一个0-x之间的随机数
					Math.round(Math.random()*x)
					
				- 生成一个x-y之间的随机数
					Math.round(Math.random()*(y-x)+x)
		   */
		   for(var i = 0;i<100;i++){
			   // 生成一个0-10的随机数
			   // console.log(Math.round(Math.random()*10));
			   
			   // 生成1-6之间的随机数
			   // console.log(Math.round(Math.random()*5+1));
		   }
		   
		   
		   /* max() 可以获取多个数中的最大值
			  min() 可以获取多个数中的最小值
			*/
		   // console.log(Math.max(1,222,333,4));//333
		   // console.log(Math.min(111,2,3,333,4));//2
		   
		   
		   /* Math.pow(x,y)
				- 返回x的y次幂
			*/
		   // console.log(Math.pow(2,3));//8
		   
		   
		   /* Math.sqrt()
				- 用于对一个数进行开方运算
			*/
		   // console.log(Math.sqrt(9));//3
		</script>
	</head>
	<body>
	</body>
</html>

14.包装类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>包装类</title>
		<script type="text/javascript">
			/* 基本数据类型
					String Number Boolean Null Undefined 
				引用数据类型Object
				
				JS中提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为对象
					String()
						- 可以将基本数据类型字符串转换为String对象
					Number()
						- 可以将基本数据类型的数值转换为Number对象
					Boolean()
						- 可以将基本数据类型的布尔值转换为Boolean对象
					
					但是注意,在实际应用中不会使用基本数据类型的对象,
						如果使用基本数据类型的对象,在做一些比较时可能会带来一些不可预期的结果
			*/
		   
		   // 创建一个NUmber类型的对象
		   // num = 3;
		   var num = new Number(3);
		   var str = new String("hello");
		   var bool = new Boolean(true);
		   // console.log(num.toString());//3
		   
		   // 向num中添加一个属性
		   num.hello = "hello world";
		   // console.log(num.hello);//hello world
		   
		   
		   /* 方法和属性只能添加给对象,不能添加给基本数据类型
				当我们对一些基本数据类型的值去调用属性和方法时,
					浏览器就会临时使用包装类将其转换为对象,然后再调用对象的属性和方法
					调用完以后,再将其转换为基本数据类型
			*/
		   var s = 123;
		   
		   s = s.toString();
		   // console.log(s);//123
		   // console.log(typeof s);//String
		</script>
	</head>
	<body>
	</body>
</html>

15.字符串的相关方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字符串的相关方法</title>
		<script type="text/javascript">
			// 创建一个字符串
			var str = "hello";
			
			/* 在底层 字符串是以字符数组的形式保存的
					["h","e","l","l","o"] 
					
			*/
		   // console.log(str[1]);//e
		   
		   /* length属性
				- 可以用来获取字符串的长度
			*/
		   // console.log(str.length);//5
		   
		   
		   /* charAt()
				- 可以返回字符串中指定位置的字符
				- 根据索引获取指定的字符
			*/
		   var result = str.charAt(1);
		   // console.log(result);//e
		   
		   
		   /* charCodeAt()
				- 获取指定位置字符的字符编码(Unicode编码)
			*/
		   result = str.charCodeAt(0);
		   // console.log(result);//104
		   
		   
		   /* String.fromCharCode()
				- 可以根据字符编码去获取字符
			*/
		   result = String.fromCharCode(104);
		   // console.log(result);//h
		   
		   
		   /* concat()
				- 可以用来连接两个或多个字符串
				- 作和 + 一样
			*/
		   result = str.concat("tom","再见");
		   // console.log(result);
		   
		   
		   /* indexof()
				- 该方法可以检索一个字符串中是否含有指定内容
				- 如果字符串中含有该内容,则会返回其第一次出现的索引
					如果没有找到指定的内容,则返回-1
				- 可以指定一个第二个参数,指定开始查找的位置
					str.indexOf("h",1);  //从索引为1的位置开始查找“h”
				
			  lastIndexOf()
				-该方法的用法和indexOf()一样,
					不同的是indexOf()是从前往后找,
					而lastIndexOf()是从后往前找
			*/
		   result = str.indexOf("l");
		   // console.log(result);//2
		   
		   result = str.lastIndexOf("l");
		   // console.log(result);//3
		   
		   
		   /* slice()
				- 可以从字符串中截取指定的内容
				- 不会影响源字符串,而是将截取到的内容返回
				- 参数:
					第一个,开始位置的索引(包括开始位置)
					第二个,结束位置的索引(不包括结束位置)
						- 如果省略第二个参数,则会截取到后边所有的
					- 也可以传递一个负数作为参数,负数的话将会从后边计算
			*/
		   result = str.slice(1,4);//ell
		   result = str.slice(1,-2);//el
		   // console.log(result);
		   
		   
		   
		   /* substring()
				- 可以用来截取一个字符串,与slice()类似
				- 参数:
					- 第一个,开始截取位置的索引(包括开始位置)
					- 第二个,结束位置的索引(不包括结束位置)
					
					- 不同的是,这个方法不能接受负值作为参数,
						如果传递了一个负值,则默认使用0
					- 而且它还自动调整参数的位置,如果第二个参数小于第一个参数,则自动交换
			*/
		   result = str.substring(1,3);//el
		   // console.log(result);
		   
		   
		   /* substr()
				- 用来截取字符串
				- 参数:
					1.截取开始位置的索引
					2.截取的长度
			*/
		   result = str.substr(3,2);
		   // console.log(result);//lo
		   
		   
		   /* split()
				- 可以将一个字符串拆分为一个数组
				- 参数:
					- 需要一个字符串作为参数,将会根据该字符串去拆分数组
					
				- 如果传递一个空串作为参数,将会根据该字符串去拆分数组
			*/
		   str = "a,b,c,d,e,f,g";
		   result = str.split(",");
		   // console.log(result);
		   
		   
		   /* toUpperCase()
				- 将一个字符串转换为大写并返回
			*/
		   var str = "abcdEfg";
		   result = str.toUpperCase();//ABCDEFG
		   
		   /* toLowerCase()
				- 将一个字符串转换为小写并返回
			*/
		   str = "ABCDEfG" 
		   result = str.toLowerCase();//abcdefg
		   // console.log(result);
		</script>
	</head>
	<body>
	</body>
</html>

01.正则表达式简介

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>正则表达式简介</title>
		<script type="text/javascript">
			/* 正则表达式
					- 正则表达式用于定义一些字符串的规则,
						计算机可以根据正则表达式,来检查一个字符串是否符合规则
						或者将字符串中符合规则的内容提取出来
			*/
		   /* 创建正则表达式的对象
				- 语法:
					var 变量 = new RegExp("正则表达式","匹配模式");
				- 使用typeof检查正则表达式对象,会返回object	
				- 在构造函数中可以传递一个匹配模式作为第二个参数,
					可以是
						i 忽略大小写
						g 全局匹配模式
			*/
		   
		   var reg = new RegExp("a","i");//该正则表达式可以用来检查一个字符串中是否含有a
		   
		   var str = "a";
		   
		   /* 正则表达式的方法
				test()
					- 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则,
						如果符合则返回true,否则返回false
			*/
		   var result = reg.test(str);
		   // console.log(result);
		   // console.log(reg.test("bcbc"));//false 
		   // console.log(reg.test("Abcbc"));//true
		</script>
	</head>
	<body>
	</body>
</html>

02.正则语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>正则语法</title>
		<script type="text/javascript">
			/* 使用字面量来创建正则表达式
				  语法:
					var 变量 = /正则表达式/匹配模式
				
				使用字面量的方式创建更加简单,
					但是使用构造函数创建更加灵活 
			*/
		   var reg = new RegExp("a","i");
		   reg = /a/i;
		   
		   // console.log(reg.test("aaaddd"));//true
		   
		   /* 创建一个正则表达式,检查一个字符串中是否有a或者b
				
				使用 | 表示 或者 的意思
			*/
		   reg = /a|b/;
		   // console.log(reg.test("ajjk"));//true
		   
		   /* 
				创建一个正则表达式检查一个字符串中是否有字母
		   */
		  /* 
				[]里的内容也是或的关系
				[ab] == a|b
				[a-z] 任意小写字母
				[A-Z] 任意大写字母
				[A-z] 任意字母
				[0-9] 任意数字
		  */
		 reg = /[A-z]/;
		 // console.log(reg.test("f"));
		 
		 // 检查一个字符串中是否含有 abc 或 adc 或 aec
		 // reg = /abc|adc|aec/;
		 reg = /a[bde]c/;
		 
		 
		 /* 
			[^ ] 除了
			
		 */
		reg = /[^ab]/;
		// console.log(reg.test("abc"));//true
		// console.log(reg.test("ab"));//false
		 
		</script>
	</head>
	<body>
	</body>
</html>

03.字符串和正则相关的方法

<!DOCTYPE ht
ml>
<html>
	<head>
		<meta charset="utf-8">
		<title>字符串和正则相关的方法</title>
		<script type="text/javascript">
			var str = "1a2b3c4d5e6f";
			/* split()
					- 可以将一个字符串拆分为一个数组
					- 方法中可以传递一个正则表达式作为参数,这样方法将会根据正则表达式去拆分字符串
					- 这个方法即使不指定全局匹配,也会全都拆分
			*/
		   
		   /* 
				根据任意字母来将字符串拆分
		   */
		   var result = str.split(/[A-z]/);
		   
		   
		   /* search()
				- 可以搜索字符串中是否含有指定内容
				- 如果搜索到指定内容,则会返回第一次出现的索引,如果没有搜索到返回-1
				- search()只会查找第一个,即使设置全局匹配
			*/
		   str = "hello abc hello aec afc";
		   // result = str.search("abc");//6
		   result = str.search(/a[bef]c/);//6
		   
		   
		   /* 
				match()
					- 可以根据正则表达式,从一个字符串中将符合条件的内容提取出来
					- 默认情况下match()只会找到第一个符合要求的内容,找到以后就停止检索
						可以设置正则表达式为全局匹配模式,这样就会匹配到所有的内容
						可以为一个正则表达式设置多个匹配模式,且顺序无所谓
						
					- match() 会将匹配到的内容封装到一个数组中返回,即使只查询到一个结果
		   */
		  str = "1a2b3c4d5e6f7";
		  result = str.match(/[A-z]/g);
		  
		  
		  /* replace()
				- 可以将字符串中指定内容替换为新的内容
				- 参数:
					1.被替换的内容,可以接受一个正则表达式作为参数
					2.新的内容
				- 默认只会替换第一个
			*/
		   result = str.replace(/[a-z]/gi,"@-@");
		   result = str.replace(/[a-z]/gi,"");
		   // console.log(result);
		</script>
	</head>
	<body>
	</body>
</html>

04.正则表达式语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>正则表达式语法</title>
		<script type="text/javascript">
			// 创建一个正则表达式检查一个字符串中是否含有aaa
			/* 
				量词
					- 通过量词可以设置一个内容出现的次数
					- 量词只对它前边的一个内容起作用
					- {n} 正好出现n次
					- {m,n} 出现m-n次
					- {m,} 出现m次以上
					- + 至少一个,相当于{1,}
					- * 0个或多个,相当于{0,}
					- ? 0个或1个,相当于{0,1}
			 */
			var reg = /a{3}/;
			// console.log(reg.test("baaaac"));//true
			
			// ababab
			reg = /(ab){3}/;
			// console.log(reg.test("dababababd"));//true
			
			reg = /ab{3}d/;
			// console.log(reg.test("aaabbbddd"));//true
			
			reg = /ab{1,3}d/;
			// console.log(reg.test("abd"));//true
			
			reg =/ab{3,}d/;
			// console.log(reg.test("abbbbbd"));//true
			
			reg = /ab+d/;
			// console.log(reg.test("abbbd"));//true
			
			reg = /ab*d/;
			// console.log(reg.test("ad"));//true
			
			reg = /ab?d/;
			// console.log(reg.test("abd"));//true
			
			
			
			/* 
				检查一个字符串中是否以a开头
					^ 表示开头
					$ 表示结尾
			 */
			reg = /^a/;
			// console.log(reg.test("abd"));//true			
			
			reg = /a$/;
			// console.log(reg.test("abd2a"));//true
			
			
			
			
			/* 
				创建一个正则表达式,用来检查一个字符串是否是一个合法手机号
				
				手机号的规则:
					1 3 567890123(11位)
					
				1. 以1开头
				2. 第二位3-9任意数字
				3. 三位以后任意数字9个
			 */
			
			var phoneStr = "13567890123";
			
			var phoneReg = /^1[3-9][0-9]{9}$/;
			// console.log(phoneReg.test(phoneStr));//true
		</script>
	</head>
	<body>
	</body>
</html>

05.正则表达式语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>正则表达式语法</title>
		<script type="text/javascript">
			/* 
				检查一个字符串中是否含有 . 
				- . 表示任意字符
				- 在正则表达式中使用\作为转义字符
					\. 来表示 . 
					\\  表示 \
					
				注意,使用构造函数时,由于它的参数是一个字符串,而\是字符串中转义字符,
					如果需要使用 \ 则需要使用\\来代替
			 */
			var reg = /\./;
			reg = /\\/;
			// console.log(reg.test("aaa.sd"));//true
			// console.log(reg.test("aaa.s\\d"));//true
			
			reg = new RegExp("\.");//  /./
			reg = new RegExp("\\.");//  /\./ 
			// console.log(reg.toString());
			
			
			
			
			
			/* 
				\w
					- 任意字母、数字、_  相当于[A-z0-9_]
					
				\W
					- 除了字母、数字、_  相当于[^A-z0-9_]
				\d
					- 任意的数字 [0-9]
				\D
					- 除了数字 [^0-9]
				\s
					- 空格
				\S
					- 除了空格
				\b
					- 单词边界
				\B
					- 除了单词边界
			 */
			reg = /\w/;
			// console.log(reg.test("_"));//true
			
			/* 
				创建一个正则表达式检查一个字符串中是否含有单词child
			 */
			reg = /\bchild\b/;
			// console.log(reg.test("hello child"));//true
			
			
			// 接受一个用户的输入
			// var str = prompt("请输入你的用户名:");
			var str = "      ad min     	";
			
			// 去掉字符串中的前后的空格
			// 去掉空格就是使用""来替换空格
			// console.log(str);
			// str = str.replace(/\s/g,"");
			
			// 去除开头的空格
			// str = str.replace(/^\s*/g,"");
			// 去除结尾的空格
			// str = str.replace(/\s*$/g,"");
			
			// 去除开头和结尾的空格
			str = str.replace(/^\s*|\s*$/g,"");
			// console.log(str);
			
		</script>
	</head>
	<body>
	</body>
</html>

06.邮件的正则

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>邮件的正则</title>
		<script type="text/javascript">
			/* 正则表达式
				hello .nihao  @ abc .com.cn
				
				任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母(2-5位) .任意字母(2-5位)
				
				\w{3,}  (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}
			*/
		   var emailReg = /\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}/;
		   var email = "abc.hello@163.com";
		   // console.log(emailReg.test(email));//true
		</script>
	</head>
	<body>
	</body>
</html>

07.DOM简介

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM简介</title>
		<script type="text/javascript">
			/* 
				DOM 
					- Document Object Model 
					- 文档对象模型
					- 节点:Node 构成HTML文档最基本的单元
						- 常用节点:
							文档节点:整个HTML文档
							元素节点:HTML文档中的HTML标签
							属性节点:元素的属性
							文本节点:HTML标签中的文本内容
						- 节点的属性:
									  nodeName  nodeType  nodeValue
							文档节点  #document     9         null
							元素节点  标签名  		1		  null
							属性节点  属性名 		2		  属性值
							文本节点  #text			3		  *文本内容
			 */
		</script>
	</head>
	<body>
		<button type="button" id="btn">hello</button>
		<script type="text/javascript">
			/* 浏览器已经为我们提供 文档节点 对象,这个对象是window属性
				可以在页面中直接使用,文档节点代表的是整个网页
			*/
		   // console.log(document.toString());//[object HTMLDocument]
		   
		   // 获取到button对象
		   var btn = document.getElementById("btn");
		   // console.log(btn.toString());//[object HTMLButtonElement] 
		   
		   // 修改按钮的文字
		   btn.innerHTML = "I'm Button.";
		</script>
	</body>
</html>

08.事件简介

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件简介</title>
		<script type="text/javascript">
			/* 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间
				- JavaScript 与  HTML 之间的交互是通过事件实现的
			*/
		</script>
	</head>
	<body>
		<!-- 
			我们可以在事件对应的属性中设置一些js代码,
				这样当事件被触发时,这些代码将会执行
			这种写法称为结构和行为耦合,不方便维护
		 -->
		<!-- <button type="button" id="btn" οnclick="alert('点我干嘛???');">Button</button> -->
		<!-- <button type="button" id="btn" οndblclick="alert('点我干嘛???');">Button</button> -->
		<!-- <button type="button" id="btn" οnmοusemοve="alert('点我干嘛???');">Button</button> -->
		<button type="button" id="btn">Button</button>
		<script type="text/javascript">
			/* 
				事件,就是用户和浏览器之间的交互行为
					比如,点击按钮、鼠标移动、关闭窗口...
			 */
			
			// 获取按钮对象
			var btn = document.getElementById("btn");
			/* 
				可以为按钮的对应事件绑定处理函数的形式来响应事件
			 */
			// 绑定一个单击事件
			// 像这种为单击事件绑定的函数,我们称为单击响应函数
			btn.onclick = function(){
				alert("hello");
			};
			
		</script>
	</body>
</html>

09.文档的加载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文档的加载</title>
		<script type="text/javascript">
			/* 
				浏览器在加载一个页面时,是按照自上向下的顺序加载的,
					读取到一行就运行一行,如果将script标签写到页面的上边,
					在代码执行时,页面还没有加载,页面没有加载,DOM对象也没有加载
					会导致无法获取到DOM对象
			 */
			
			/*
				onload事件会在整个页面加载完成之后才触发
				- 为window绑定一个onload事件
					该事件对应的响应函数将会在页面加载完成之后执行,
					这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
			*/
				
		   window.onload = function(){
			 // alert("hello");  
			 
			 // 获取id为btn的按钮
			 var btn = document.getElementById("btn");
			 // 为按钮绑定一个单击响应函数
			 btn.onclick = function(){
			 	alert("hello");
			 };
		   };
		   
		</script>
	</head>
	<body>
		
		<button type="button" id="btn">Button</button>
		
		<script type="text/javascript">
			/* 
				将JS代码编写到页面的下部就是为了可以在页面加载完毕以后再执行js代码
			 */
		
			// // 获取id为btn的按钮
			// var btn = document.getElementById("btn");
			// // 为按钮绑定一个单击响应函数
			// btn.onclick = function(){
			// 	alert("hello");
			// };
		</script>
	</body>
</html>

10.dom查询

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			window.onload = function(){
				
				//为id为btn01的按钮绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){ 
					//查找#bj节点
					var bj = document.getElementById("bj");
					//打印bj
					//innerHTML 通过这个属性可以获取到元素内部的html代码
					alert(bj.innerHTML);
				};
				
				
				//为id为btn02的按钮绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//查找所有li节点
					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
					//这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
					//即使查询到的元素只有一个,也会封装到数组中返回
					var lis = document.getElementsByTagName("li");
					
					//打印lis
					//alert(lis.length);
					
					//变量lis
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
				};
				
				
				//为id为btn03的按钮绑定一个单击响应函数
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					//查找name=gender的所有节点
					var inputs = document.getElementsByName("gender");
					
					//alert(inputs.length);
					
					for(var i=0 ; i<inputs.length ; i++){
						/*
						 * innerHTML用于获取元素内部的HTML代码的
						 * 	对于自结束标签,这个属性没有意义
						 */
						//alert(inputs[i].innerHTML);
						/*
						 * 如果需要读取元素节点属性,
						 * 	直接使用 元素.属性名
						 * 		例子:元素.id 元素.name 元素.value
						 * 		注意:class属性不能采用这种方式,
						 * 			读取class属性时需要使用 元素.className
						 */
						alert(inputs[i].className);
					}
				};
				
				
				
				//查找#city下所有li节点
				//返回#city的所有子节点
				//返回#phone的第一个子节点
				//返回#bj的父节点
				//返回#android的前一个兄弟节点
				//读取#username的value属性值
				//设置#username的value属性值
				//返回#bj的文本值
				
			};
			
		
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input class="hello" type="radio" name="gender" value="male"/>
				Male
				<input class="hello" type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">查找#bj节点</button></div>
			<div><button id="btn02">查找所有li节点</button></div>
			<div><button id="btn03">查找name=gender的所有节点</button></div>
			<div><button id="btn04">查找#city下所有li节点</button></div>
			<div><button id="btn05">返回#city的所有子节点</button></div>
			<div><button id="btn06">返回#phone的第一个子节点</button></div>
			<div><button id="btn07">返回#bj的父节点</button></div>
			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
			<div><button id="btn09">返回#username的value属性值</button></div>
			<div><button id="btn10">设置#username的value属性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
		</div>
	</body>
</html>

11.图片切换的练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			img{
				width: 1000px;
			}
			#outer{
				width: 1000px;
				margin: 50px auto;
				padding: 10px;
				background-color: #f5f4f4;
				/* 设置文本居中 */
				text-align: center;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				/* 
					点击按钮切换图片
				 */
				// 获取两个按钮
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				
				/* 
					要切换图片就是要修改img标签的src属性
				 */
				
				// 获取img标签
				var img = document.getElementsByTagName("img")[0];
				
				// 创建一个数组,用来保存图片的路径
				var imgArr = ["img/a.jpg","img/b.jpg","img/c.jpg","img/d.jpg","img/e.jpg","img/f.jpg","img/g.jpg","img/h.jpg"];
				
				// 创建一个变量,来保存当前正在显示的图片的索引
				var index = 0;
				
				// 获取id为info的p元素
				var info = document.getElementById("info");
				// 设置提示文字
				info.innerHTML = "共"+imgArr.length+"张,当前第"+(index+1)+"张";
				
				// 分别为两个按钮绑定单击响应函数
				prev.onclick = function(){
					/* 
						切换到上一张,索引自减
					 */
					index--;
					
					// 判断index是否小于0
					if(index<0){
						index = imgArr.length-1;
					}
					
					// alert("prev");
					img.src = imgArr[index];
					
					// 当点击按钮后,重新设置信息
					info.innerHTML = "共"+imgArr.length+"张,当前第"+(index+1)+"张";
				};
				
				next.onclick = function(){
					// alert("next");
					
					/* 
						切换到下一张,index自增
					 */
					index++;
					
					if(index>imgArr.length-1){
						index = 0;
					}
					
					// 切换图片就是修改img的src属性
					// 要修改一个元素的属性  元素.属性 = 属性值
					img.src = imgArr[index];
					
					// 当点击按钮后,重新设置信息
					info.innerHTML = "共"+imgArr.length+"张,当前第"+(index+1)+"张";
				};
			};
		</script>
	</head>
	<body>
		<div id="outer">
			<p id="info"></p>
			<img src="img/a.jpg" alt="不速来客" >
			<button type="button" id="prev">上一张</button>
			<button type="button" id="next">下一张</button>
		</div>
	</body>
</html>

12.DOM查询

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM查询</title>
		<script type="text/javascript">
			/* 获取元素节点的子节点
					- 通过具体的元素节点调用
						1.getElementsByTagName()
							- 方法,返回当前节点的指定标签名后代节点
						2.childNodes
							- 属性,表示当前节点的所有子节点
						3.firstChild
							- 属性,表示当前节点的第一个子节点
						4.lastChild
							- 属性,表示当前节点的最后一个子节点
				
				获取父节点和兄弟节点
					- 通过具体的节点调节
						1.parentNode
							- 属性,表示当前节点的父节点
						2.previousSibling
							- 属性,表示当前节点的前一个兄弟节点
						3.nextSibling
							- 属性,表示当前节点的后一个兄弟节点
			*/
		</script>
	</head>
	<body>
	</body>
</html>

13.dom查询

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>DOM查询</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			window.onload = function(){
				
				/* 
					定义一个函数,专门用来为指定元素绑定单击响应函数
					 参数:
						idStr 要绑定单击响应函数的对象的id属性值
						fun  事件的回调函数,当单击元素时,该函数将会被触发
				*/
			   function myClick(idStr,fun){
				   var btn = document.getElementById(idStr);
				   btn.onclick = fun;
			   }
				
				//为id为btn01的按钮绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){ 
					//查找#bj节点
					var bj = document.getElementById("bj");
					//打印bj
					//innerHTML 通过这个属性可以获取到元素内部的html代码
					alert(bj.innerHTML);
				};
				
				
				//为id为btn02的按钮绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//查找所有li节点
					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
					//这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
					//即使查询到的元素只有一个,也会封装到数组中返回
					var lis = document.getElementsByTagName("li");
					
					//打印lis
					//alert(lis.length);
					
					//变量lis
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
				};
				
				
				//为id为btn03的按钮绑定一个单击响应函数
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					//查找name=gender的所有节点
					var inputs = document.getElementsByName("gender");
					
					//alert(inputs.length);
					
					for(var i=0 ; i<inputs.length ; i++){
						/*
						 * innerHTML用于获取元素内部的HTML代码的
						 * 	对于自结束标签,这个属性没有意义
						 */
						//alert(inputs[i].innerHTML);
						/*
						 * 如果需要读取元素节点属性,
						 * 	直接使用 元素.属性名
						 * 		例子:元素.id 元素.name 元素.value
						 * 		注意:class属性不能采用这种方式,
						 * 			读取class属性时需要使用 元素.className
						 */
						alert(inputs[i].className);
					}
				};
				
				
				//为id为btn04的按钮绑定一个单击响应函数
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function(){
					// 获取id为city的元素
					var city = document.getElementById("city");
					
					//查找#city下所有li节点
					var lis = city.getElementsByTagName("li");
					
					// alert(lis.length);
					
					for(var i = 0;i<lis.length;i++){
						alert(lis[i].innerHTML);
					}
				};
				
				//为id为btn05的按钮绑定一个单击响应函数
				var btn05 = document.getElementById("btn05");
				btn05.onclick = function(){
					// 获取id为city的节点
					var city = document.getElementById("city");
					//返回#city的所有子节点
					/* 
						childNodes属性会获取包括文本节点在内的所有节点
						根据DOM标准 标签间空白也会当成文本节点
						注意,在IE8及以下的浏览器中,不会将空白文本当成子节点,
						  所以该属性在IE8中会返回4个子元素而其他浏览器是9个
					 */
					var cns = city.childNodes;
					
					// for(var i = 0;i<cns.length;i++){
					// 	alert(cns[i]);
					// }
					
					/* 
						children属性可以获取当前元素的所有子元素
					 */
					var cns2 = city.children;
					alert(cns2.length);
				};
				
				//为id为btn06的按钮绑定一个单击响应函数
				var btn06 = document.getElementById("btn06");
				btn06.onclick = function(){
					// 获取id为phone的元素
					var phone = document.getElementById("phone");
					//返回#phone的第一个子节点
					// phone.childNodes[0];
					// firstChild可以获取到当前元素的第一个子节点(包括空白文本节点)
					var fir = phone.firstChild;
					// alert(fir.innerHTML);
					
					// firstElementChild获取当前元素的第一个子元素
					/*
						firstElementChild不支持IE8及以下的浏览器,
						  如果需要兼容它们尽量不要使用
					*/
				   fir = phone.firstElementChild;
				   alert(fir.innerHTML);
				};
				
				
				//为id为btn07的按钮绑定一个单击响应函数
				myClick("btn07",function(){
					// 获取id为bj的节点
					var bj = document.getElementById("bj");
					//返回#bj的父节点
					var pn = bj.parentNode;
					// alert(pn.innerHTML);
					
					/* 
						innerText
						  - 该属性可以获取到元素内部的文本内容
						  - 它和innerHTML类似,不同的是它会自动将HTML标签去除
					*/
				   alert(pn.innerText);
				});
				
				
				//为id为btn08的按钮绑定一个单击响应函数
				myClick("btn08",function(){
					// 获取id为Android的元素
					var and = document.getElementById("android");
					
					//返回#android的前一个兄弟节点(也可能获取到空白的文本)
					var ps = and.previousSibling;
					
					// previousElementSibling 获取前一个兄弟元素,IE8以下不支持
					// var pe = and.previousElementSibling;
					 // alert(pe.innerHTML);
					 alert(ps.innerHTML);
				});
				
				
				//读取#username的value属性值
				myClick("btn09",function(){
					// 获取id为username的元素
					var um = document.getElementById("username");
					
					// 读取um的value属性值
					// 文本框的value属性值,就是文本框中填写的内容
					alert(um.value);
				});
				
				//设置#username的value属性值
				myClick("btn10",function(){
					// 获取id为username的元素
					var um = document.getElementById("username");
					
					um.value = "你好!";
				});
				
				//返回#bj的文本值
				myClick("btn11",function(){
					// 获取id为bj的元素
					var bj = document.getElementById("bj");
					
					// alert(bj.innerHTML);
					
					// 获取bj中的文本节点
					// var fc = bj.firstChild;
					// alert(fc.nodeValue);
					alert(bj.firstChild.nodeValue);
				});
			};
			
		
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input class="male" type="radio" name="gender" value="male"/>
				Male
				<input class="female" type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">查找#bj节点</button></div>
			<div><button id="btn02">查找所有li节点</button></div>
			<div><button id="btn03">查找name=gender的所有节点</button></div>
			<div><button id="btn04">查找#city下所有li节点</button></div>
			<div><button id="btn05">返回#city的所有子节点</button></div>
			<div><button id="btn06">返回#phone的第一个子节点</button></div>
			<div><button id="btn07">返回#bj的父节点</button></div>
			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
			<div><button id="btn09">返回#username的value属性值</button></div>
			<div><button id="btn10">设置#username的value属性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
		</div>
	</body>
</html>

14.全选练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选练习</title>
		<script type="text/javascript">
			
			window.onload = function(){
				// 获取四个多选框items
				var items = document.getElementsByName("items");
				// 获取全选/全不选的多选框
				var checkedAllBox = document.getElementById("checkedAllBox");
					
				// 1.#checkdAllBtn
				/* 
					全选按钮
						- 点击按钮以后,四个多选框全都被选中
				 */
				// 为id为checkedAllBtn的按钮绑定一个单击响应函数
				var checkedAllBtn = document.getElementById("checkedAllBtn");
				checkedAllBtn.onclick = function(){
					// alert("hello");
					// 遍历items
					for(var i = 0;i<items.length;i++){
						// 通过多选框的checked属性可以来获取或设置多选框的选中状态
						// alert(items[i].checked);
						
						// 设置四个多选框变成选中状态
						items[i].checked = true;
					}
					
					// 将全选/全不选设置为选中
					checkedAllBox.checked = true;
				};
				
				/* 
					全不选按钮
						- 点击按钮以后,四个多选框都变成没选中的状态
				 */
				// 2.#checkedNoBtn
				// 为id为checkedNoBtn的按钮绑定一个单击响应函数
				var checkedNoBtn = document.getElementById("checkedNoBtn");
				checkedNoBtn.onclick = function(){
					for(var i = 0;i<items.length;i++){
						// 将四个多选框设置为没选中的状态
						items[i].checked = false;
					}
					
					
					// 将全选/全不选设置为不选中
					checkedAllBox.checked = false;
				};
				
				/* 
					反选按钮
						- 点击按钮以后,选中的变成没选中,没选中的变成选中
				 */
				// 3.#checkedRevBtn
				var checkedRevBtn = document.getElementById("checkedRevBtn");
				checkedRevBtn.onclick = function(){
					
					checkedAllBox.checked = true;
					
					for(var i = 0;i<items.length;i++){
						// 判断多选框状态
						
						// if(items[i].checked){
						// 	// 证明多选框已选中,则设置为没选中状态
						// 	items[i].checked = false;
						// }else{
						// 	// 证明多选框没选中,则设置为选中状态
						// 	items[i].checked = true;
						// }
						
						items[i].checked = !items[i].checked;
						
						if(!items[i].checked){
							checkedAllBox.checked = false;
						}
					}
				};
				
				
				/* 
					提交按钮
						- 点击按钮以后,将所有选中的多选框的value属性值弹出
				 */
				// 4.#sendBtn
				// 为sendBtn绑定单击响应函数
				var sendBtn = document.getElementById("sendBtn");
				sendBtn.onclick = function(){
					for(var i = 0;i<items.length;i++){
						// 判断多选框是否选中
						if(items[i].checked){
							alert(items[i].value);
						}
					}
				};
				
				
				/* 
					全选/全不选多选框
						- 当它选中时,其余的也选中,当它取消时其余的也取消
						
					在事件的响应函数中,响应函数是给谁绑定的 this就是谁
				 */
				// 5.#checkedAllBox
				// 为checkedAllBox绑定单击响应函数
				checkedAllBox.onclick = function(){
					for(var i = 0;i<items.length;i++){
						// items[i].checked = checkedAllBox.checked;
						items[i].checked = this.checked;
					}
				};
				
				// 6.items
				/* 
					如果四个多选框全都选中,则checkedAllBox也应该选中
					如果四个多选框没都选中,则checkAllBox也不应该选中
				 */
				// 为四个多选框分别绑定点击响应函数
				for(var i = 0;i<items.length;i++){
					items[i].onclick = function(){
						
						// 将checkedAllBox设置为选中状态
						checkedAllBox.checked = true;
						
						for(var j = 0;j<items.length;j++){
							// 判断四个多选框是否全选
							
							// 只要有一个没选中就不是全选
							if(!items[j].checked){
								// 一旦进入判断,则证明不是全选状态
								// 将checkedAllBox设置为没选中状态
								checkedAllBox.checked = false;
								
								// 一旦进入判断,则已经得出结果,不用再继续执行循环
								break;
							}
						}
						
					};
				}
				
			};
		</script>
	</head>
	<body>
		
		<form action="" method="post">
			你爱好的运动是?<input type="checkbox" name="" id="checkedAllBox" value="" />全选/全不选
			
			<br>
			<input type="checkbox" name="items" value="足球" />足球
			<input type="checkbox" name="items" value="篮球" />篮球
			<input type="checkbox" name="items" value="羽毛球" />羽毛球
			<input type="checkbox" name="items" value="乒乓球" />乒乓球
			<br>
			<input type="button" id="checkedAllBtn" value="全选" />
			<input type="button" id="checkedNoBtn" value="全不选" />
			<input type="button" id="checkedRevBtn" value="反选" />
			<input type="button" id="sendBtn" value="提交" />
		</form>
	</body>
</html>

15.DOM查询的其他方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM查询的其他方法</title>
		<script type="text/javascript">
			window.onload = function(){
				// 获取body标签
				var body = document.getElementsByTagName("body")[0];
				// console.log(body.toString());//[object HTMLBodyElement]
				
				
				
				/* 
					在document中有一个属性body,它保存的是body的引用
				 */
				body = document.body;
				// console.log(body.toString());//[object HTMLBodyElement]
				
				
				
				
				/*  
					document.documentElement 保存的是html根标签
				*/
			   var html = document.documentElement;
			   // console.log(html.toString());//[object HTMLHtmlElement]
			   
			   
			   
			   
			   /* 
					document.all 代表页面中所有的元素
			   */
			  var all = document.all;
			  // console.log(all.length);//12
			  
			  for(var i = 0;i<all.length;i++){
				  // console.log(all[i].toString());
			  }
			  
			  
			  all = document.getElementsByTagName("*");
			  // console.log(all.toString());//[object HTMLCollection]
			  // console.log(all.length);//12
			  
			  
			  
			  
			  /* 	
					根据元素的class属性值查询一组元素节点对象
					getElementsByClassName()可以根据class属性获取一组元素节点对象,
						但是该方法不支持IE8及以下的浏览器
					
			  */
				var box1 = document.getElementsByClassName("box1");
				// console.log(box1.length);//2
				
				// 获取页面中的所有的div
				var divs = document.getElementsByTagName("div");
				// console.log(divs.length);//3
				
				
				
				
				// 获取class为box1中的所有的div
				// .box1 div
				/* 
					document.querySelector()
						- 需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象
						- 可以使用querySelector()代替getElementsByClassName()
						- 使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个
				 */
				var div = document.querySelector(".box1 div");
				
				// console.log(div.innerHTML);//hello
				
				
				
				
				
				/* 
					document.querySelectorAll()
						- 该方法和querySelector()用法类似,不同的是它会将符合条件的元素封装到一个数组中返回
						- 即使符合条件的元素只有一个,它也会返回数组
				 */
				box1 = document.querySelectorAll(".box1");
				// console.log(box1.length);//3
				
				
				
				
			};
		</script>
	</head>
	<body>
		<div class="box1">
			<div>hello</div>
		</div>
		<div class="box1">
			<div>hello</div>
		</div>
		<div class="box1">
			<div>hello</div>
		</div>
		<div></div>
	</body>
</html>

16.DOM增删改

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			window.onload = function() {
				
				//创建一个"广州"节点,添加到#city下
				myClick("btn01",function(){
					//创建广州节点 <li>广州</li>
					//创建li元素节点  
					/*
					 * document.createElement()
					 * 	可以用于创建一个元素节点对象,
					 * 	它需要一个标签名作为参数,将会根据该标签名创建元素节点对象,
					 * 	并将创建好的对象作为返回值返回
					 */
					var li = document.createElement("li");
					
					//创建广州文本节点
					/*
					 * document.createTextNode()
					 * 	可以用来创建一个文本节点对象
					 *  需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回
					 */
					var gzText = document.createTextNode("广州");
					
					//将gzText设置li的子节点
					/*
					 * appendChild()
					 * 	 - 向一个父节点中添加一个新的子节点
					 * 	 - 用法:父节点.appendChild(子节点);
					 */
					li.appendChild(gzText);
					
					//获取id为city的节点
					var city = document.getElementById("city");
					
					//将广州添加到city下
					city.appendChild(li);
					
					
				});
				
				//将"广州"节点插入到#bj前面
				myClick("btn02",function(){
					//创建一个广州
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					li.appendChild(gzText);
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					//获取city
					var city = document.getElementById("city");
					
					/*
					 * insertBefore()
					 * 	- 可以在指定的子节点前插入新的子节点
					 *  - 语法:
					 * 		父节点.insertBefore(新节点,旧节点);
					 */
					city.insertBefore(li , bj);
					
					
				});
				
				
				//使用"广州"节点替换#bj节点
				myClick("btn03",function(){
					//创建一个广州
					var li = document.createElement("li");
					var gzText = document.createTextNode("广州");
					li.appendChild(gzText);
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					//获取city
					var city = document.getElementById("city");
					
					/*
					 * replaceChild()
					 * 	- 可以使用指定的子节点替换已有的子节点
					 * 	- 语法:父节点.replaceChild(新节点,旧节点);
					 */
					city.replaceChild(li , bj);
					
					
				});
				
				//删除#bj节点
				myClick("btn04",function(){
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					//获取city
					var city = document.getElementById("city");
					
					/*
					 * removeChild()
					 * 	- 可以删除一个子节点
					 * 	- 语法:父节点.removeChild(子节点);
					 * 		
					 * 		子节点.parentNode.removeChild(子节点);
					 */
					//city.removeChild(bj);
					
					bj.parentNode.removeChild(bj);
				});
				
				
				//读取#city内的HTML代码
				myClick("btn05",function(){
					//获取city
					var city = document.getElementById("city");
					
					alert(city.innerHTML);
				});
				
				//设置#bj内的HTML代码
				myClick("btn06" , function(){
					//获取bj
					var bj = document.getElementById("bj");
					bj.innerHTML = "昌平";
				});
				
				myClick("btn07",function(){
					
					//向city中添加广州
					var city = document.getElementById("city");
					
					/*
					 * 使用innerHTML也可以完成DOM的增删改的相关操作
					 * 一般我们会两种方式结合使用
					 */
					//city.innerHTML += "<li>广州</li>";
					
					//创建一个li 
					var li = document.createElement("li");
					//向li中设置文本
					li.innerHTML = "广州";
					//将li添加到city中
					city.appendChild(li);
					
				});
				
				
			};
			
			function myClick(idStr, fun) {
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
			
		
		</script>
		
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
				
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
			<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
			<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
			<div><button id="btn04">删除#bj节点</button></div>
			<div><button id="btn05">读取#city内的HTML代码</button></div>
			<div><button id="btn06">设置#bj内的HTML代码</button></div>
			<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
		</div>
	</body>
</html>

style/css.css :

@CHARSET "UTF-8";

body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

button {
	width: 300px;
	margin-bottom: 10px;
}

#btnList {
	float:left;
}

#total{
	width: 450px;
	float:left;
}

ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.inner li{
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float:left;
}

.inner{
	width:400px;
	border-style: solid;
	border-width: 1px;
	margin-bottom: 10px;
	padding: 10px;
	float: left;
}

17.添加删除记录-删除

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加删除记录练习</title>
<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
<script type="text/javascript">
	/* 
		删除tr的响应函数
	 */
	function delA(){
		// alert("hello");
		
		// 点击超链接以后需要删除超链接所在的那行
		// 这里我们点击哪个超链接 this就是谁
		// 获取当前tr
		var tr = this.parentNode.parentNode;
		
		// 获取要删除的员工的名字
		// var name = tr.getElementsByTagName("td")[0].innerHTML;
		var name = tr.children[0].innerHTML;
		
		// 删除之前弹出一个提示框
		/* 
			confirm()用于弹出一个带有确认和取消按钮的提示框
			  需要一个字符串作为参数,该字符串将会作为提示文字显示出来
		 */
		var flag = confirm("确认删除"+name+"的信息吗");
		
		// 如果用户点击确认
		if(flag){
			// 删除tr
			tr.parentNode.removeChild(tr);
		}
		
		/* 
			点击超链接以后,超链接会跳转页面,这个是超链接的默认行为,
			  但是此时我们不希望出现默认行为,可以通过在响应函数的最后return false来取消默认行为
		 */
		return false;
	};

	window.onload = function(){
		/* 
			点击超链接以后,删除一个员工的信息
		 */
		// 获取所有超链接
		var allA = document.getElementsByTagName("a");
		
		// 为每一个超链接都绑定一个单击响应函数
		for(var i = 0;i<allA.length;i++){
			allA[i].onclick = delA;
		}
		
		
		
		
		/* 
			添加员工的功能
				- 点击按钮以后,将员工的信息添加到表格中
		 */
		// 为提交按钮绑定一个单击响应函数
		var addEmpButton = document.getElementById("addEmpButton");
		addEmpButton.onclick = function(){
			// 获取用户填写的员工信息
			// 获取员工的名字
			var name = document.getElementById("empName").value;
			// 获取员工的Email和salary
			var email = document.getElementById("email").value; 
			var salary = document.getElementById("salary").value;
			
			/* 
				<tr>
					<td>Tom</td>
					<td>tom@tom.com</td>
					<td>5000</td>
					<td><a href="javascript:;">Delete</a></td>
				</tr>
				需要将获取到的信息保存到tr中
			 */
			// 创建一个tr
			var tr = document.createElement("tr");
			
			/* // 创建四个td
			var nameTd = document.createElement("td");
			var emailTd = document.createElement("td");
			var salaryTd = document.createElement("td");
			var aTd = document.createElement("td");
			
			// 创建一个a元素
			var a = document.createElement("a");
			
			// 创建文本节点
			var nameText = document.createTextNode(name);
			var emailText = document.createTextNode(email);
			var salaryText = document.createTextNode(salary);
			var delText = document.createTextNode("Delete");
			
			// 将文本添加到td中
			nameTd.appendChild(nameText);
			emailTd.appendChild(emailText);
			salaryTd.appendChild(salaryText);
			
			// 向a中添加文本
			a.appendChild(delText);
			// 将a添加到td中
			aTd.appendChild(a);
			
			// 将td添加到tr中
			tr.appendChild(nameTd);
			tr.appendChild(emailTd);
			tr.appendChild(salaryTd);
			tr.appendChild(aTd);
			
			// 向a中添加href属性
			a.href = "javascript:;";
			
			// 为新添加的a再绑定一次单击响应函数
			a.onclick = delA;
			 */
			
			// 设置tr中的内容
			tr.innerHTML = "<td>"+name+"</td>"+
							"<td>"+email+"</td>"+
							"<td>"+salary+"</td>"+
							"<td><a href='javascript:;'>Delete</a></td>"
			获取刚刚添加的a元素
			var a = tr.getElementsByTagName("a")[0];
			// 为新添加的a再绑定一次单击响应函数
			a.onclick = delA;
			
			// 获取table
			var employeeTable = document.getElementById("employeeTable");
			// 获取employeeTable中的tbody
			var tbody = employeeTable.getElementsByTagName("tbody")[0];
			// 将tr添加到tbody中
			tbody.appendChild(tr);
			
			
			
			
			
			
			
		};
		
		
	};
</script>
</head>
<body>

	<table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="javascript:;">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>

	<div id="formDiv">
	
		<h4>添加新员工</h4>

		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" id="empName" value="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" id="email" value="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" id="salary" value="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>

	</div>

</body>
</html>

ex_2_style/css.css :

@CHARSET "UTF-8";
#total {
	width: 450px;
	margin-left: auto;
	margin-right: auto;
}

ul {
	list-style-type: none;
}

li {
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float: left;
}

.inner {
	width: 400px;
	border-style: solid;
	border-width: 1px;
	margin: 10px;
	padding: 10px;
	float: left;
}

#employeeTable {
	border-spacing: 1px;
	background-color: black;
	margin: 80px auto 10px auto;
}

th,td {
	background-color: white;
}

#formDiv {
	width: 250px;
	border-style: solid;
	border-width: 1px;
	margin: 50px auto 10px auto;
	padding: 10px;
}

#formDiv input {
	width: 100%;
}

.word {
	width: 40px;
}

.inp {
	width: 200px;
}

18.使用DOM操作内联CSS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用DOM操作CSS</title>
		<style type="text/css">
			
			#box1{
				width: 50px;
				height: 50px;
				background-color: red;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				/* 
					点击按钮以后,修改box1的大小
				 */
				// 获取box1
				var box1 = document.getElementById("box1");
				// 为按钮绑定单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					
					// 修改box1的宽度
					/* 
						通过JS修改元素的样式
							语法:元素.style.样式名 = 样式值
						
						通过style属性设置的样式都是内联样式,
							而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示
							
						但是如果在样式中写了!important,则此时样式会有最高的优先级,
							即使通过JS也不能覆盖该样式,此时将会导致JS修改样式失败
							所以尽量不要为样式添加!important
					 */
					box1.style.width = "200px";
					box1.style.height = "200px";
					box1.style.backgroundColor = "green";
					
				};
				
				// 点击按钮2以后,读取元素的样式
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					// 读取box1的样式
					/* 
						语法:元素.style.样式名
						
						通过style属性设置和读取的都是内联样式,
							无法读取样式表中的样式
					 */
					alert(box1.style.width);
				};
				
				
			};
			
		</script>
	</head>
	<body>
		
		<button id="btn01">点我</button>
		<button id="btn02">点我2</button>
		
		<br><br>
		
		<div id="box1"></div>
	</body>
</html>

19.读取元素的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>读取元素的样式</title>
		<style type="text/css">
			#box1{
				width: 50px;
				height: 50px;
				background-color: yellow;
			}
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				//点击按钮以后读取box1的样式
				 var box1 = document.getElementById("box1");
				 var btn01 = document.getElementById("btn01");
				 btn01.onclick = function(){
					 // 读取box1的宽度
					 
					 /* 
						获取元素的当前显示的样式
						 语法:元素.currentStyle.样式名
						它可以用来读取当前元素正在显示的样式
						  如果当前元素没有设置样式,则获取它的默认值
						  
						currentStyle只有IE浏览器支持,其他的浏览器都不支持
					 */
					// alert(box1.currentStyle.backgroundColor);
					
					/* 
						在其他浏览器可以使用
							getComputedStyle()这个方法来获取元素的当前的样式
							这个方法是window的方法,可以直接使用
							- 需要两个参数
								1.要获取样式的元素
								2.可以传递一个伪元素,一般都传null
							- 该方法会返回一个对象,对象中封装了当前元素对应的样式
								可以通过 对象.样式名 来读取样式
								如果获取的样式没有设置,则会获取到真实的值,而不是默认值
								比如,如果没有设置 width,它不会获取到 auto,而是一个长度
								
								但是该方法不支持IE8及以下的浏览器
								
								通过currentStyle和getComputedStyle()读取到的样式都是只读的,
									不能修改,如果要修改必须通过style属性
					 */
					var obj = getComputedStyle(box1,null);
					// alert(obj.width);//50px
					
					// 正常浏览器的方式
					// alert(getComputedStyle(box1,null).width);
					
					// IE8的方式
					// alert(box1.currentStyle.width);
					
					getStyle(box1,"width")
				 };
				
			};
			
			
			/* 
				定义一个函数,用来获取指定元素当前的样式
				参数:
					obj 要获取样式的元素
					name 要获取的样式名
			 */
			function getStyle(obj,name){
				/* 
				if(window.getComputedStyle){
					// 正常浏览器的方式
					alert(getComputedStyle(obj,null)[name]);
				}else{
					// IE8的方式
					alert(obj.currentStyle[name]);
				}
				 */
				
				// 三目运算符
				alert(window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name]);
			}
		</script>
	</head>
	<body>
		
		<button id="btn01">点我</button>
		<br><br>
		<div id="box1"></div>
	</body>
</html>

20.其他样式操作的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>其他样式操作的属性</title>
		<style type="text/css">
			
			#box1{
				width: 50px;
				height: 50px;
				background-color: red;
				border: 10px yellow solid;
				padding: 20px;
			}
			#box2{
				padding: 100px;
				background-color: #bfa;
			}
			#box4{
				width: 200px;
				height: 300px;
				background-color: #BBFFAA;
				overflow: auto;
			}
			#box5{
				width: 450px;
				height: 600px;
				background-color: yellow;
			}
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				var box4 = document.getElementById("box4");
				
				btn01.onclick = function(){
					/* 
						clientWidth
						clientHeight
							- 这两个属性可以获取元素的可见宽度和高度
							- 这些属性都是不带px的,返回都是一个数字,可以直接进行计算
							- 会获取元素宽度和高度,包括内容区和内边距
							- 这些属性都是只读的,不能修改
					 */
					// alert(box1.clientWidth);//90 50+20+20
					
					/* 
						offsetWidth
						offsetHeight
							- 获取元素的整个的高度和宽度,包括内容区,内边距和边框
					 */
					// alert(box1.offsetWidth);//110 50+20+20+10+10
				
				
				
					/* 
						offsetParent
							- 可以获取当前元素的定位父元素
							- 会获取到离当前元素最近的开启了定位的祖先元素
								如果所有的祖先元素都没有开启定位,则返回body
					 */
					var op = box1.offsetParent;
					// alert(op.id);//获取id属性
					
					/* 
						offsetLeft
							- 当前元素相对于其定位元素的水平偏移量
						offsetTop
							- 当前元素相对于其定位元素的垂直偏移量
					 */
					// alert(box1.offsetLeft);
					
					
					/* 
						scrollWith
						scrollHeight
							- 可以获取元素整个滚动区域的宽度和高度
						
					 */
					// alert(box4.clientHeight);//300  可见的高度
					// alert(box4.scrollHeight);//600  可滚动的高度
					// alert(box4.clientWidth);//179
					// alert(box4.scrollWidth);//450
					
					/* 
						scrollLeft
							- 可以获取水平滚动条滚动的距离
						scrollTop
							- 可以获取垂直滚动条滚动的距离
					 */
					// alert(box4.scrollLeft);
					alert(box4.scrollTop);
					
					// 当满足scrollHeight - scrollTop == clientHeight
					//   说明垂直滚动条到底了
					
					
				};
			};
		</script>
	</head>
	<body>
		
		<button id="btn01">点我</button>
		<br><br>
		
		<div id="box4">
			<div id="box5"></div>
		</div>
		
		<br><br>
		<div id="box3">
			<div id="box2" style="position: relative;">
				<div id="box1"></div>
			</div>
		</div>

		
	</body>
</html>

21.练习-滚动条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#info{
				width: 300px;
				height: 500px;
				background-color: #BBFFAA;
				overflow: auto;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				
				/* 
					当垂直滚动条滚动到底时使表单项可用
					onscroll
						- 该事件会在元素的滚动条滚动时触发
				 */
				// 获取id为info的p元素
				var info = document.getElementById("info");
				// 获取两个表单项
				var inputs = document.getElementsByTagName("input");
				
				// 为info绑定一个滚动条滚动的事件
				info.onscroll = function(){
					/* 
					console.log("info.clientHeight-->"+info.clientHeight);
					console.log("info.scrollHeight-->"+info.scrollHeight);
					console.log("info.scrollTop-->"+info.scrollTop);
					console.log("-->"+Math.round(info.scrollHeight - info.scrollTop)); */
					
					// 检查垂直滚动条是否滚动到底
					if(Math.round(info.scrollHeight) - Math.round(info.scrollTop) == Math.round(info.clientHeight)){
						// 滚动条滚动到底 使表单项可用
						/* 
							disabled属性可以设置一个元素是否禁用,
								如果设置为true 则元素禁用,
								如果设置为false 则元素可用
						 */
						inputs[0].disabled = false;
						inputs[1].disabled = false;
					}
				};
			}
		</script>
	</head>
	<body>
		<h3>欢迎注册</h3>
		<p id="info">
			亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
			亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
			亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
			亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
			亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
			亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
			亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
			亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
			亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
			亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册
		</p>
		
		<!-- 如果表单项添加disabled="disabled" 则表单项将变成不可用的状态 -->
		<input type="checkbox" disabled="disabled" />我已仔细阅读协议,一定遵守
		<input type="submit" value="注册" disabled="disabled" />
	</body>
</html>

22.事件对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>事件对象</title>
<style type="text/css">
	
	*{
		margin: 0;
		padding: 0;
	}

	#areaDiv {
		border: 1px solid black;
		width: 500px;
		height: 500px;
		margin-bottom: 10px;
	}
	
	#showMsg {
		border: 1px solid black;
		width: 300px;
		height: 20px;
	}

</style>
<script type="text/javascript">

	window.onload = function(){
		/* 
			当鼠标在areaDiv中移动时,在showMsg中显示鼠标的坐标
		 */
		// 获取两个div
		var areaDiv = document.getElementById("areaDiv");
		var showMsg = document.getElementById("showMsg");
		
		/* 
			onmousemove
				- 该事件将会在鼠标在元素中移动时被触发
				
			事件对象
				- 当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数,
					在事件对象中封装了当前事件相关的一切信息,
					比如,鼠标的坐标、键盘哪个按键被按下、鼠标滚轮滚动的方向...
		*/
		areaDiv.onmousemove = function(event){
			
			/* 
				在IE8中,响应函数被触发时,浏览器不会传递事件对象,
				在IE8及以下的浏览器中,是将事件对象作为window对象的属性保存的
			 */
			
			// 解决事件对象的兼容性问题
			// 方式一:
			/* if(!event){
				event = window.event;
			} */
			// 方式二
			event = event || window.event;
			
			/* 
				clientX可以获取鼠标指针的水平坐标
				clientY可以获取鼠标指针的垂直坐标
			*/
		   var x = event.clientX;
		   var y = event.clientY;
		   
		   // 在showMsg中显示鼠标的坐标
		   showMsg.innerHTML = "x = "+x+" , y = "+y;
	   };
	};

</script>
</head>
<body>

	<div id="areaDiv"></div>
	<div id="showMsg"></div>

</body>
</html>

23.div跟随鼠标移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div跟随鼠标移动</title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				/* 
					开启box1的绝对定位
				 */
				position: absolute;
			}
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				/* 
					使div可以跟随鼠标移动
				 */
				
				// 获取box1
				var box1 = document.getElementById("box1");
				// 绑定鼠标移动事件
				document.onmousemove = function(event){
					// 解决兼容问题
					event = event || window.event;
					
					// 获取滚动条滚动的距离
					/* 
						chrome 的滚动条是body的,可以通过body.scrollTop来获取
						火狐等浏览器 的滚动条是html的
					 */
					var st = document.body.scrollTop || document.documentElement.scrollTop;
					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
					// 获取到鼠标的坐标
					/* 
						clientX和clientY
						  用于获取鼠标在当前的可见窗口的坐标
						  div的偏移量,是相对于整个页面的
						  
						pageX和pageY可以获取鼠标相对于当前页面的坐标
					 */
					var left = event.clientX;
					var top = event.clientY;
					
					// 设置div的偏移量
					box1.style.left = left + sl + "px";
					box1.style.top = top + st + "px";
					box1.innerHTML =  "x = "+ (left + sl) + "px"+" , <br> y = "+(top + st) + "px";
				};
				
				var box2 = document.getElementById("box2");
				box2.onmousemove = function(event){
					event = event || window.event;
					event.cancelBubble = true;
				};
				
			};
		</script>
	</head>
	<body style="height: 1000px;width: 2000px;">
		<div id="box2" style="width: 500px;height: 500px;background-color: #BBFFAA;font-size: 100px;">冒泡</div>
		<div id="box1">
			
		</div>
	</body>
</html>

01.事件的冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件的冒泡</title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: #abf;
			}
			#s1{
				background-color: #eda;
			}
			body{
				background-color: #BBFFAA;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				/* 
					事件的冒泡(Bubble)
						- 所谓的冒泡指的是事件的向上传导,
							当后代元素上的事件被触发时,其
							祖先元素的相同事件也会被触发
						- 在开发中大部分情况冒泡都是有用的,如果
							不希望发生事件冒泡可以通过事件对象来取消冒泡
				 */
				
				
				// 为s1绑定单击响应函数
				var s1 = document.getElementById("s1");
				s1.onclick = function(event){
					event = event || window.event;
					alert("span的单击响应函数");
					
					/* 
						取消冒泡
							- 可以将事件对象的cancelBubble设置为true,即可取消冒泡
					 */
					event.cancelBubble = true;
				};
				
				// 为box1绑定单击响应函数
				var box1 = document.getElementById("box1");
				
				box1.onclick = function(){
					event = event || window.event;
					alert("div box1的单击响应函数");
					event.cancelBubble = true;
				};
				
				// 为body绑定单击响应函数
				document.body.onclick = function(){
					alert("body的单击响应函数");
				};
				
				
				
			};
			
		</script>
	</head>
	<body>
		<div id="box1">
			我是box1
			<span id="s1">我是span</span>
		</div>
	</body>
</html>

02.事件的委派

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件的委派</title>
		<script type="text/javascript">
			window.onload = function(){
				
				var u1 = document.getElementById("u1");
				
				// 点击按钮以后添加超链接
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					// 创建一个li
					var li = document.createElement("li");
					li.innerHTML = "<a href='javascript:;' class='link'>new</a>"
					
					// 将li添加到ul中
					u1.appendChild(li);
				};
				
				
				/* 
					为每一个超链接都绑定一个单击响应函数
					
					这里我们为每一个超链接都绑定了一个单击响应函数,这种操作比较麻烦,
					  而且这些操作只能为已有的超链接设置事件,而新添加的超链接必须重新绑定
				 */
				// 获取所有的a
				var allA = document.getElementsByTagName("a");
				// 遍历
				/* for(var i = 0;i<allA.length;i++){
					allA[i].onclick = function(){
						alert("a的单击响应函数");
					};
				} */
				
				/* 
					只绑定一次事件,即可应用到多个的元素上,即使元素是后添加的
					我们可以尝试将其绑定给元素的共同的祖先元素
					
					事件的委派:
						- 指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素
							从而通过祖先元素的响应函数来处理事件
						- 事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能
				 */
				// 为ul绑定一个单击响应函数
				u1.onclick = function(event){
					event = event || window.event;
					
					/* 
						target
							- event中的target表示的触发事件的对象
					 */
					// alert(event.target);
					
					// 如果触发事件的对象是我们期望的元素,则执行否则不执行
					if(event.target.className == "link"){
						alert("ul的单击响应函数");
					}
					
					// alert("ul的单击响应函数");
				};
				
				
			};
		</script>
	</head>
	<body>
		<button id="btn01">添加超链接</button>
		
		<ul id="u1" style="background-color: #BBFFAA;">
			<li>
				<p>p元素</p>
			</li>
			
			<li><a href="javascript:;" class="link">超链接壹</a></li>
			<li><a href="javascript:;" class="link">超链接贰</a></li>
			<li><a href="javascript:;" class="link">超链接叁</a></li>
		</ul>
	</body>
</html>

03.事件的绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件的绑定</title>
		<script type="text/javascript">
			window.onload = function(){
				/* 
					点击按钮以后弹出一个内容
				 */
				// 获取按钮对象
				var btn01 = document.getElementById("btn01");
				/* 
					使用 对象.事件 = 函数  的形式绑定响应函数,
					  它只能同时为一个元素的一个事件绑定一个响应函数,
					  不能绑定多个,如果绑定了多个,则后边会覆盖掉前边的
				 */
				
				
				/* 
				// 为btn01绑定一个单击响应函数
				btn01.onclick = function(){
					alert(1);
				};
				
				// 为btn01绑定第二个响应函数
				btn01.onclick = function(){
					alert(2);
				}; */
				
				
				
				/* 
					addEventListener()
						- 通过这个方法也可以为元素绑定响应函数
						- 参数:
							1.事件的字符串,不要on
							2.回调函数,当事件触发时该函数会被调用
							3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false
					
					使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,
					  这样当事件被触发时,响应函数将会按照函数的绑定顺序执行
					  
					这个方法不支持IE8及以下的浏览器
				 */
				/* 
				btn01.addEventListener("click",function(){
					alert(1);
				},false);
				
				btn01.addEventListener("click",function(){
					alert(2);
				},false); 
				*/
				
				
				
				/* 
					attachEvent()
						- 在IE8中可以使用attachEvent()来绑定事件
						- 参数:
							1.事件的字符串,要on
							2.回调函数
							
					- 这个方法也可以同时为一个事件绑定多个处理函数,
						不同的是它是后绑定先执行,执行顺序和addEventListener()相反
				 */
				// btn01.attachEvent("onclick",function(){
				// 	alert(1);
				// });
				
				
				/* btn01.addEventListener("click",function(){
					alert(this);
				},false); //[object HTMLButtonElement]
				 */
				/*
				btn01.attachEvent("onclick",function(){
					alert(this);
				});//[object window]
				 */
				
				
				bind(btn01,"click",function(){
					alert(111); 
				});
				
				
			};
			
			
			// 定义一个函数,用来为指定元素绑定响应函数
			/* 
				addEventListener()中的this,是绑定事件的对象
				 attachEvent()中的this,是window
				  需要统一两个方法的this
			 */
			
			/* 
				参数:
					obj 要绑定事件的对象
					eventStr 事件的字符串
					callback 回调函数
			 */
			function bind(obj,eventStr,callback){
				
				if(obj.addEventListener){
					// 大部分浏览器兼容的方式
					obj.addEventListener(eventStr,callback,false);
				}else{
					
					/* 
						this是谁由调用方式决定
						callback.call(obj)
					 */
					
					// IE8及以下
					obj.attachEvent("on"+eventStr,function(){
						// 在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
				
			}
		</script>
	</head>
	<body>
		<button id="btn01">click</button>
	</body>
</html>

04.事件的传播

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件的传播</title>
		<style type="text/css">
			
			#box1{
				width: 300px;
				height: 300px;
				background-color: yellowgreen;
			}
			#box2{
				width: 200px;
				height: 200px;
				background-color: yellow;
			}
			#box3{
				width: 150px;
				height: 150px;
				background-color: skyblue;
			}
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				/* 
					分别为三个div绑定单击响应函数
				 */
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var box3 = document.getElementById("box3");
				
				/* 
					事件的传播
						- 关于事件的传播网景公司和微软公司有不同的理解
						- 微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,
							然后再向当前元素的祖先元素上传播,也就是说事件应该在冒泡阶段执行
						- 网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件,
							然后再向内传播给后代元素
						- W3C综合了两个公司的方案,将事件传播分成了三个阶段
							1.捕获阶段
								- 在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件
							2.目标阶段
								- 事件捕获到目标元素,捕获结束开始在目标元素上触发事件
							3.冒泡阶段
								- 事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
								
							- 如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true
								一般情况下我们不会希望在捕获阶段触发事件,所以这个参数一般都是false
				 
				 */
				
 				bind(box1,"click",function(){
					alert("box1的响应函数");
				});
				
				bind(box2,"click",function(){
					alert("box2的响应函数");
				});
				
				
				bind(box3,"click",function(){
					alert("box3的响应函数");
				});
				
				
				
				
			};
			
			
			
			
			// 定义一个函数,用来为指定元素绑定响应函数
			/* 
				addEventListener()中的this,是绑定事件的对象
				 attachEvent()中的this,是window
				  需要统一两个方法的this
			 */
			
			/* 
				参数:
					obj 要绑定事件的对象
					eventStr 事件的字符串
					callback 回调函数
			 */
			function bind(obj,eventStr,callback){
				
				if(obj.addEventListener){
					// 大部分浏览器兼容的方式
					obj.addEventListener(eventStr,callback,false);
				}else{
					
					/* 
						this是谁由调用方式决定
						callback.call(obj)
					 */
					
					// IE8及以下
					obj.attachEvent("on"+eventStr,function(){
						// 在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
				
			}
		</script>
	</head>
	<body>
		
		<div id="box1">
			<div id="box2">
				<div id="box3"></div>
			</div>
		</div>
	</body>
</html>

05.事件练习-拖拽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拖拽</title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			#box2{
				width: 100px;
				height: 100px;
				background-color: #bfa;
				position: absolute;
				
				left: 200px;
				top: 200px;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				/* 
					拖拽box1元素
						- 拖拽的流程
							1.当鼠标在被拖拽元素上按下时,开始拖拽  onmousedown
							2.当鼠标移动时被拖拽元素跟随鼠标移动  onmousemove
							3.当鼠标松开时,被拖拽元素固定在当前位置  onmouseup
				 */
				
				// 获取box1
				var box1 = document.getElementById("box1");
				// 为box1绑定一个鼠标按下事件
				// 当鼠标在被拖拽元素上按下时,开始拖拽  onmousedown
				box1.onmousedown = function(event){
					// 设置box1捕获所有鼠标按下的事件
					/* 
						setCapture()
							- 只有IE支持,但是在火狐中调用不会报错,
								而如果使用chrome调用,会报错
					 */
					/* 
					if(box1.setCapture){
						box1.setCapture();
					}
					 */
					box1.setCapture && box1.setCapture;
					
					event = event || window.event;
					// div的偏移量 鼠标.clientX - 元素.offsetLeft
					// div的偏移量 鼠标.clientY - 元素.offsetTop
					var ol = event.clientX - box1.offsetLeft;
					var ot = event.clientY - box1.offsetTop;
					
					// 为document绑定一个onmousemove事件
					document.onmousemove = function(event){
						event = event || window.event;
						
						// 当鼠标移动时被拖拽元素跟随鼠标移动  onmousemove
						// 获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						
						// 修改box1的位置
						box1.style.left = left + "px";
						box1.style.top = top + "px";
						
					};
					
					// 为元素绑定一个鼠标松开事件
					document.onmouseup = function(){
						// 当鼠标松开时,被拖拽元素固定在当前位置  onmouseup
						// 取消document的onmousemove事件
						document.onmousemove = null;
						
						// 取消document的onmouseup事件
						document.onmouseup = null;
						
						// 当鼠标松开时,取消对事件的捕获
						box1.releaseCapture && box1.releaseCapture();
						
					};
					/* 
						当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容,
						 此时会导致拖拽功能的异常,这个是浏览器提供的默认行为,
						 如果不希望发生这个行为,则可以通过return false来取消默认行为
					 */
					return false;
				
				};
				
					
			};
		</script>
	</head>
	<body>
		大河向东流
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>

06.测试IE8

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				// 分别为两个按钮绑定单击响应函数
				var btn01 = document.getElementById("btn01");
				var btn02 = document.getElementById("btn02");
				
				btn01.onclick = function(){
					alert(1);
				};
				
				btn02.onclick = function(){
					alert(2);
				};
				
				
				// 设置btn01对鼠标按下相关的事件进行捕获
				// 当调用一个元素的setCapture()方法以后,这个元素
					// 将会把下一次所有的鼠标按下相关的事件捕获到自身上
				btn01.setCapture();
				
			};
		</script>
	</head>
	<body>
		<button id="btn01">Button1</button>
		<button id="btn02">Button2</button>
	</body>
</html>

07.事件练习-拖拽2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拖拽</title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			#box2{
				width: 100px;
				height: 100px;
				background-color: #bfa;
				position: absolute;
				
				left: 200px;
				top: 200px;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				/* 
					拖拽box1元素
						- 拖拽的流程
							1.当鼠标在被拖拽元素上按下时,开始拖拽  onmousedown
							2.当鼠标移动时被拖拽元素跟随鼠标移动  onmousemove
							3.当鼠标松开时,被拖拽元素固定在当前位置  onmouseup
				 */
				
				// 获取box1
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var img1 = document.getElementById("img1");
				
				// 开启box1的拖拽
				drag(box1);
				
				// 开启box2的拖拽
				drag(box2);
				
				drag(img1);
			};
			
			/* 
				提取一个专门用来设置拖拽的函数
				 参数:
					obj 开启拖拽的元素
			 */
			function drag(obj){
				// 为box1绑定一个鼠标按下事件
				// 当鼠标在被拖拽元素上按下时,开始拖拽  onmousedown
				obj.onmousedown = function(event){
					// 设置box1捕获所有鼠标按下的事件
					/* 
						setCapture()
							- 只有IE支持,但是在火狐中调用不会报错,
								而如果使用chrome调用,会报错
					 */
					/* 
					if(obj.setCapture){
						obj.setCapture();
					}
					 */
					obj.setCapture && obj.setCapture;
					
					event = event || window.event;
					// div的偏移量 鼠标.clientX - 元素.offsetLeft
					// div的偏移量 鼠标.clientY - 元素.offsetTop
					var ol = event.clientX - obj.offsetLeft;
					var ot = event.clientY - obj.offsetTop;
					
					// 为document绑定一个onmousemove事件
					document.onmousemove = function(event){
						event = event || window.event;
						
						// 当鼠标移动时被拖拽元素跟随鼠标移动  onmousemove
						// 获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						
						// 修改obj的位置
						obj.style.left = left + "px";
						obj.style.top = top + "px";
						
					};
					
					// 为元素绑定一个鼠标松开事件
					document.onmouseup = function(){
						// 当鼠标松开时,被拖拽元素固定在当前位置  onmouseup
						// 取消document的onmousemove事件
						document.onmousemove = null;
						
						// 取消document的onmouseup事件
						document.onmouseup = null;
						
						// 当鼠标松开时,取消对事件的捕获
						obj.releaseCapture && obj.releaseCapture();
						
					};
					/* 
						当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容,
						 此时会导致拖拽功能的异常,这个是浏览器提供的默认行为,
						 如果不希望发生这个行为,则可以通过return false来取消默认行为
					 */
					return false;
				
				};
			}
			
			
		</script>
	</head>
	<body>
		大河向东流
		<div id="box1"></div>
		<div id="box2"></div>
		<img src="../five/img/mlsxq.jpg" alt="" id="img1" style="position: absolute;">
	</body>
</html>

08.滚轮事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滚轮事件</title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: #bfa;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				
				// 为box1绑定一个鼠标滚轮滚动的事件
				/* 
					onmousewheel鼠标滚轮滚动的事件,会在滚轮滚动时触发,
					 但是火狐不支持该属性
					 
					 在火狐中需要使用DOMMouseScroll 来绑定滚动事件
						注意该事件需要通过addEventListener()函数来绑定
				 */
				box1.onmousewheel = function(event){
					event = event || window.event;
					
					// 判断鼠标滚轮滚动的方向
					// event.wheelDelta 可以获取鼠标滚轮滚动的方向
					// 向上滚 120 向下滚 -120
					// wheelDelta 这个值不看大小,只看正负
					// alert(event.wheelDelta);
					
					// wheelDelta 这个属性火狐中不支持
					// 在火狐中使用 event.detail 来获取滚动的方向
					// 向上滚 -3 向下滚 3
					// alert(event.detail);
					
					
					/* 
						当鼠标滚轮向下滚动时,box1变长
						 当滚轮向上滚动时,box1变短
					 */
					// 判断鼠标滚轮滚动的方向
					if(event.wheelDelta>0 || event.detail<0){
						// alert("向上滚");
						
						// 向上滚,box1变短
						box1.style.height = box1.clientHeight - 10 + "px";
						
					}else{
						// alert("向下滚");
						
						// 向下滚,box1变长
						box1.style.height = box1.clientHeight + 10 + "px";
					}
					
					/* 
						使用addEventListener()方法绑定响应函数,取消默认行为时不能使用return false
						需要使用event来取消默认行为,event.preventDefault()
						但是IE8不支持event.preventDefault(),如果直接调用会报错
					 */
					event.preventDefault && event.preventDefault();
					
					
					/* 
						当滚轮滚动时,如果浏览器有滚动条,滚动条会随之滚动,
						 这是浏览器的默认行为,如果不希望发生,则可以取消默认行为
					 */
					return false;
					
				};
				
				// 为火狐绑定滚轮事件
				bind(box1,"DOMMouseScroll",box1.onmousewheel);
				
			};
			
			
			// 定义一个函数,用来为指定元素绑定响应函数
			/* 
				addEventListener()中的this,是绑定事件的对象
				 attachEvent()中的this,是window
				  需要统一两个方法的this
			 */
			
			/* 
				参数:
					obj 要绑定事件的对象
					eventStr 事件的字符串
					callback 回调函数
			 */
			function bind(obj,eventStr,callback){
				
				if(obj.addEventListener){
					// 大部分浏览器兼容的方式
					obj.addEventListener(eventStr,callback,false);
				}else{
					
					/* 
						this是谁由调用方式决定
						callback.call(obj)
					 */
					
					// IE8及以下
					obj.attachEvent("on"+eventStr,function(){
						// 在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
				
			}
		</script>
		
	</head>
	<body style="height: 2000px;">
		<div id="box1"></div>
	</body>
</html>

09.键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>键盘事件</title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				/* 
					键盘事件:
						onkeydown
							- 按键被按下
							- 对于onkeydown来说如果一直按着某个按键不松手,则事件会一直触发
							- 当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,其他的会非常快
								这种设计是为了防止误操作的发生
						onkeyup
							- 按键被松开
							
					键盘事件一般都会绑定给一些可以获取到焦点的对象(input...)或者是document
				 */
				document.onkeydown = function(event){
					event = event || window.event;
					
					/* 
						可以通过keyCode来获取按键的编码
							通过它可以判断哪个按键被按下
						除了keyCode,事件对象中还提供了几个属性
							altKey
							ctrlKey
							shiftKey
								- 这三个用来判断alt,ctrl和shift是否被按下
									如果按下则返回true,否则返回false
					 */
					
					// console.log(event.keyCode);
					
					// 判断一个y是否被按下
					if (event.keyCode === 89 && event.ctrlKey){
						console.log("y.....");
					}
				};
				/* 
				document.onkeyup = function(){
					console.log("按键被松开了");
				};
				 */
				
				// 获取input
				var input = document.getElementsByTagName("input")[0];
				
				input.onkeydown = function(event){
					event = event || window.event;
					
					// console.log(event.keyCode);
					// 数字48-57
					// 使文本框不能输入数字
					if(event.keyCode >= 48 && event.keyCode <= 57){
						// 在文本框中输入内容,属于onkeydown的默认行为
						// 如果在onkeydown中取消了默认行为,则输入的内容,不会出现在文本框中
						return false;
					}
					// console.log("按键被按下了了了");
				};
				
			};
			
		</script>
	</head>
	<body>
		
		<!-- <div id="box1" style="width: 100px;height: 100px;background-color: #bfa;"></div> -->
		<input type="text" value="不能输入数字"/>
	</body>
</html>

10.键盘移动div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>键盘移动div</title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: #BBFFAA;
				position: absolute;
			}
		</style>
		
		<script type="text/javascript">
			/* 
				使div可以根据不同的方向键向不同的方向移动
			 */
			window.onload = function(){
				// 为document绑定一个按键按下的事件
				document.onkeydown = function(event){
					event = event || window.event;
					
					// 定义一个变量,来表示移动的速度
					var speed = 10;
					
					// 当用户按了ctrl以后,速度加快
					if(event.ctrlKey){
						speed = 50;
					}
					
					// console.log(event.keyCode);
					/* 
						37 左
						38 上
						39 右
						40 下
					 */
					
					switch(event.keyCode){
						case 37:
							// alert("向左");
							box1.style.left = box1.offsetLeft - speed + "px";
							break;
						case 39:
							// alert("向右");
							box1.style.left = box1.offsetLeft + speed + "px";
							break;
						case 38:
							// alert("向上");
							box1.style.top = box1.offsetTop - speed + "px";
							break;
						case 40:
							// alert("向下");
							box1.style.top = box1.offsetTop + speed + "px";
							break;
					}
				};
				
				
				
				
			};
			
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

11.BOM-Navigator

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BOM</title>
		<script type="text/javascript">
			/* 
				BOM
					- 浏览器对象模型
					- BOM可以使我们通过JS来操作浏览器
					- 在BOM中为我们提供了一组对象,用来完成对浏览器的操作
					- BOM对象
						Window
							- 代表的是整个浏览器的窗口,同时window也是网页中的全局对象
						Navigator
							- 代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
						Location
							- 代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面
						History
							- 代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录
								由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页
								而且该操作只在当次访问时有效
						Screen
							- 代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息
							
						这些BOM对象在浏览器中都是作为window对象的属性保存的,
						 可以通过window对象来使用,也可以直接使用
			 */
			
			
			
			/* 
				Navigator
					- 代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
					- 由于历史原因,NAvigator对象中的大部分属性都已经不能帮助我们识别浏览器了
					- 一般我们只会使用userAgent来判断浏览器的信息
						userAgent是一个字符串,这个字符串包含有用来描述浏览器信息的内容,
						不同的浏览器会有不同的userAgent
					
				Firefox
					Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:95.0) Gecko/20100101 Firefox/95.0 
				Chrome
					Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36
				IE11
					Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko 
				IE10
					Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E) 
				IE9
					Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E) 
				IE8
					Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E)
			 */
			// console.log(navigator.appName);
			// console.log(navigator.userAgent);
			
			var ua = navigator.userAgent;
			document.write(ua);
			if(/firefox/i.test(ua)){
				alert("火狐");
			}else if(/chrome/i.test(ua)){
				alert("谷歌");
			}else if(/msie/i.test(ua)){
				alert("IE浏览器");
			}else if("ActiveXObject" in window){
				alert("IE11.......");
			}
			
			/* 
				如果通过UserAgent不能判断,还可以通过一些浏览器中特有的对象,来判断浏览器的信息
				比如:ActiveXObject
			 */
			
		</script>
	</head>
	<body>
	</body>
</html>

12.History

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>History</title>
		<script type="text/javascript">
			/* 
				History
					- 对象可以用来操作浏览器向前或向后翻页
			 */
			
			
			
			window.onload = function(){
				// 获取按钮对象
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					/* 
						length
							- 属性,可以获取到当次访问的链接数量
					 */
					// alert(history.length);
					
					/* 
						back()
							- 可以用来回退到上一个页面,作用和浏览器的回退按钮一样
					 */
					// history.back();
					
					/* 
						forward()
							- 可以跳转到下一个页面,作用和浏览器的前进按钮一样
					 */
					// history.forward();
					
					/* 
						go()
							- 可以用来跳转到指定的页面
							- 它需要一个整数作为参数
								1:表示向前跳转一个页面 相当于forward
								2:表示向前跳转两个页面
								-1:表示向后跳转一个页面
								-2:.....
					 */
					history.go(-2);
				};
			};
		</script>
	</head>
	<body>
		<button type="button" id="btn">点我</button>
		<h1>History</h1>
		
		<a href="11.BOM-Navigator.html">去 BOM</a>
	</body>
</html>

12.test01

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test01</title>
	</head>
	<body>
		<h1>TEST01</h1>
		<a href="12.test02.html">去test02</a>
	</body>
</html>

12.test02

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test01</title>
	</head>
	<body>
		<h1>TEST02</h1>
		<a href="12.History.html">去12.History.html2</a>
	</body>
</html>

13.Location

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Location</title>
		<script type="text/javascript">
			/* 
				Location
					- 对象中封装了浏览器的地址栏的信息
			*/
		   window.onload = function(){
			   show();
			   
				// 获取按钮对象
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					// 如果直接打印location,则可以获取到地址栏的信息(当前页面的完整路径)
					// alert(location);
					
					
					/* 
						如果直接将location属性修改为一个完整的路径,或相对路径
							则我们页面会自动跳转到该路径,并且会生成相应的历史记录
					 */
					// location = "http://www.baidu.com";
					// location = "12.test01.html";
					
					/* 
						assign()
							- 用来跳转到其他的页面,作用和直接修改location一样
					 */
					// location.assign("http://www.baidu.com");
					
					/* 
						reload()
							- 用于重新加载当前页面,作用和刷新按钮一样
							如果方法中传递一个true作为参数,则会强制清空缓存刷新页面
					 */ 
					// location.reload(true);
					
					/* 
						replace()
							- 可以使用一个新的页面替换当前页面,调用完毕也会跳转页面
								不会生成历史记录,不能使用回退按钮回退
					 */
					location.replace("12.test01.html");
				};
		   };
		   
		   function show(){
   
			   var now = new Date();
			   var year = now.getFullYear(); //得到年份
			   var month = now.getMonth()+1;//得到月份
			   var date = now.getDate();//得到日期
			   // var day = now.getDay();//得到周几
			   var hour= now.getHours();//得到小时数
			   var minute= now.getMinutes();//得到分钟数
			   var second= now.getSeconds();//得到秒数
   
			   document.getElementById("y").innerHTML=year;
			   document.getElementById("mo").innerHTML=month;
			   document.getElementById("d").innerHTML=date;
			   document.getElementById("h").innerHTML=hour;
			   document.getElementById("m").innerHTML=minute;
			   document.getElementById("s").innerHTML=second;
   
			   setTimeout(show,1000);//定时器一直调用show()函数
			   return "";
   
			}
		</script>
	</head>
	<body>
		<button type="button" id="btn">点我</button>
		<h1>Location</h1>
		
		<a href="11.BOM-Navigator.html">去 BOM</a>
		
		<input type="text" name="" id="" value="" />
		
		    <style>
		       /* *{
		            font-size: 50px;
		        } */
		        .time span {
		            display: inline-block;
		            /* width: 40px; */
		            /* height: 20px; */
		            padding-left: 20px;
		        }
		    </style>
		
		    <div class="time">当前时间:<br><br>
		        <span id="y"></span><span id="mo"></span><span id="d"></span><span id="h"></span><span id="m"></span><span id="s"></span><!-- <span id="time1">1</span> -->
		        <!-- //调用show()函数 -->
		    </div>
	</body>
</html>

14.定时调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定时调用</title>
		<script type="text/javascript">
			window.onload = function(){
				// 获取count
				var count = document.getElementById("count");
				
				// 使count中的内容,自动切换
				/* 
					JS的程序的执行速度是非常快的
					  如果希望一段程序,可以每间隔一段时间执行一次,可以使用计时器
				 */
				/* for(var i = 0;i<1000;i++){
					count.innerHTML = i;
				} */
				
				/* 
					setInterval()
						- 定时调用
						- 可以将一个函数,每隔一段时间执行一次
						- 参数:
							1.回调函数,该函数会每隔一段时间被调用一次
							2.每次调用间隔的时间,单位是毫秒
							
						- 返回值:
							返回一个Number类型的数据
							这个数字用来作为定时器的唯一标识
				 */
				var num = 1;
				var timer = setInterval(function(){
					count.innerHTML = num++;
					
					if(num == 10){
						// 关闭定时器
						clearInterval(timer);
					}
				},1000);
				
				console.log(timer);
				
				/* 
					clearInterval()
						- 可以用来关闭一个定时器
						- 方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器
				 */
				// clearInterval(timer);
				
				
				
			};
			
		</script>
	</head>
	<body>
		<h1 id="count"></h1>
	</body>
</html>

15.切换图片练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>切换图片练习</title>
		<style type="text/css">
			img{
				width: 70%;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				/* 
					使图片可以自动切换
				 */
				
				// 获取img标签
				var img1 = document.getElementById("img1");
				
				// 创建一个数组来保存图片的路径
				var imgArr = ["../five/img/a.jpg","../five/img/b.jpg","../five/img/c.jpg","../five/img/d.jpg","../five/img/e.jpg","../five/img/f.jpg","../five/img/g.jpg","../five/img/h.jpg"];
				
				// 创建一个变量,用来保存当前图片的索引
				var index = 0;
				
				// 创建一个变量,用来保存定时器的标识
				var timer;
				
				// 为btn01绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					/* 
						目前,我们每点击一次按钮,就会开启一个定时器,
						  点击多次就会开启多个定时器,这就导致图片的切换速度过快,
						  并且只能关闭最后一次开启的定时器
						
					 */
					// 在开启定时器之前,需要将当前元素上的其他定时器关闭
					clearInterval(timer);
					
					
					/*
						开启一个定时器,来自动切换图片
					 */
					timer = setInterval(function(){
						// 使索引自增
						index++;
						
						// 判断索引是否超过最大索引
						if(index >= imgArr.length){
							// 则将index设置为0
							index = 0;
						}
						// index = index % imgArr.length;
						
						// 修改img1的src属性
						img1.src = imgArr[index];
						
					},1000);
				};
				
				// 为btn02绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					// 点击按钮以后,停止图片的自动切换,关闭定时器
					/* 
						clearInterval()可以接收任意参数,
							如果参数是一个有效的定时器的标识,则停止对应的定时器
							如果参数不是一个有效的标识,则什么也不做
					 */
					clearInterval(timer);
				};
			};
		</script>
	</head>
	<body>
		<img id="img1" src="../five/img/c.jpg" >
		<br><br>
		<button id="btn01">开始</button>
		<button id="btn02">停止</button>
	</body>
</html>

16.键盘移动div+定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>键盘移动div</title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: #BBFFAA;
				position: absolute;
			}
		</style>
		
		<script type="text/javascript">
			/* 
				使div可以根据不同的方向键向不同的方向移动
			 */
			window.onload = function(){
				
				// 定义一个变量,来表示移动的速度
				var speed = 10;
				
				// 创建一个变量表示方向
				// 通过修改dir来影响移动的方向
				var dir = 0;
				
				// 开启一个定时器,来控制div的移动
				setInterval(function(){
					/*
						37 左
						38 上
						39 右
						40 下
					 */
					switch(dir){
						case 37:
							// alert("向左");
							box1.style.left = box1.offsetLeft - speed + "px";
							break;
						case 39:
							// alert("向右");
							box1.style.left = box1.offsetLeft + speed + "px";
							break;
						case 38:
							// alert("向上");
							box1.style.top = box1.offsetTop - speed + "px";
							break;
						case 40:
							// alert("向下");
							box1.style.top = box1.offsetTop + speed + "px";
							break;
					}
				},30);
				
				
				
				// 为document绑定一个按键按下的事件
				document.onkeydown = function(event){
					event = event || window.event;
					

					
					// 当用户按了ctrl以后,速度加快
					if(event.ctrlKey){
						speed = 50;
					}else{
						speed = 10;
					}
					
					// 使dir等于按键的值
					dir = event.keyCode;
					
					
					// console.log(event.keyCode);
				};
				
				// 当按键松开时,div不再移动
				document.onkeyup = function(){
					// 设置方向为0
					dir = 0;
				};
				
				
				
			};
			
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

17.延时调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>延时调用</title>
		<script type="text/javascript">
			var num = 1;
			/* 
			// 开启一个定时器
			setInterval(function(){
				console.log(num++);
			},1000);
			 */
			
			/* 
				延时调用
					延时调用一个函数不马上执行,而是隔一段时间以后再执行,而且只会执行一次
					
				延时调用和定时调用的区别
					定时调用会执行多次,而延时调用只会执行一次
					
				延时调用和定时调用实际上是可以互相代替的,在开发中可以根据自己需要去选择
			 */
			var timer = setTimeout(function(){
				console.log(num++);
			},2000);
			
			// 使用clearTimeout()来关闭一个延时调用
			clearTimeout(timer);
			
		</script>
	</head>
	<body>
	</body>
</html>

18.定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定时器</title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			#box1{
				width: 100px;
				height: 100px;
				background-color: #dbd;
				position: absolute;
				left: 0;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				
				// 获取box1
				var box1 = document.getElementById("box1");
				// 获取btn01
				var btn01 = document.getElementById("btn01");
				// 获取btn02
				var btn02 = document.getElementById("btn02");
				// 定义一个变量,用来保存定时器的标识
				var timer;

				
				/* 
					点击按钮以后,使box1向右移动(left值增大)
				 */
				btn01.onclick = function(){
					
					// 关闭上一个定时器
					clearInterval(timer);
					
					// 开启一个定时器,用来执行动画效果
					timer = setInterval(function(){
						
						// 获取box1的原来的left值
						var oldValue = parseInt(getStyle(box1,"left"));
						
						// 在旧值的基础上增加
						var newValue = oldValue + 11;
						
						// 判断newValue是否大于800
						if(newValue > 800){
							newValue = 800;
						}
						
						// 将新值设置给box1
						box1.style.left = newValue + "px";
						
						// 当元素移动到800px时,使其停止执行动画
						if(newValue == 800){
							// 达到目标,关闭定时器
							clearInterval(timer);
						}
						
						
					},30);
					
				};
				
				
				/*
					点击按钮以后,使box1向左移动(left值减小)
				 */
				btn02.onclick = function(){
					
					// 关闭上一个定时器
					clearInterval(timer);
					
					// 开启一个定时器,用来执行动画效果
					timer = setInterval(function(){
						
						// 获取box1的原来的left值
						var oldValue = parseInt(getStyle(box1,"left"));
						
						// 在旧值的基础上增加
						var newValue = oldValue - 10;
						
						// 判断newValue是否<0 
						if(newValue < 0){
							newValue = 0;
						}
						
						// 将新值设置给box1
						box1.style.left = newValue + "px";
						
						// 当元素移动到0px时,使其停止执行动画
						if(newValue == 0){
							// 达到目标,关闭定时器
							clearInterval(timer);
						}
						
						
					},30);
					
				};
				
			};
			
			/* 
				- 用来获取指定元素的当前的样式
				- 参数
					obj  要获取样式的元素
					name  要获取的样式名
			 */
			
			function getStyle(obj,name){
				if(window.getComputedStyle){
					// 正常浏览器的方式,具有getComputedStyle()方法
					return getComputedStyle(obj,null)[name];
				}else{
					// IE8的方式
					return obj.currentStyle[name];
				}
			}
			
		</script>
	</head>
	<body>
		
		<button id="btn01">点击按钮以后box1向右移动</button>
		<button id="btn02">点击按钮以后box2向左移动</button>
		<br><br><br>
		
		<div id="box1"></div>
		<div style="width: 0;height: 1000px;border-left: 1px black solid;position: absolute;left: 800px;top: 0;"></div>
	</body>
</html>

18.定时器2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定时器2</title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			#box1{
				width: 100px;
				height: 100px;
				background-color: #dbd;
				position: absolute;
				left: 0;
			}
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				
				// 获取box1
				var box1 = document.getElementById("box1");
				// 获取btn01
				var btn01 = document.getElementById("btn01");
				// 获取btn02
				var btn02 = document.getElementById("btn02");
				

				
				/* 
					点击按钮以后,使box1向右移动(left值增大)
				 */
				btn01.onclick = function(){
					move(box1,800,10);
				};
				
				
				/*
					点击按钮以后,使box1向左移动(left值减小)
				 */
				btn02.onclick = function(){
					move(box1,0,10);
				};
				
			};
			
			
			// 定义一个变量,用来保存定时器的标识
			var timer;
			/* 
				创建一个可以执行简单动画的函数
				参数
					obj  要执行动画的对象
					target  执行动画的目标位置
					speed  移动的速度
			 */
			function move(obj,target,speed){
				
				// 关闭上一个定时器
				clearInterval(timer);
				
				// 获取元素目前的位置
				var current = parseInt(getStyle(obj,"left"));
				
				/* 
					判断速度的正负值
						如果从0向800移动,则speed为正
						如果从800向0移动,则speed为负
				 */
				if(current > target){
					// 此时速度应为负值
					speed = -speed;
				}
				
				
				// 开启一个定时器,用来执行动画效果
				timer = setInterval(function(){
					
					// 获取box1的原来的left值
					var oldValue = parseInt(getStyle(obj,"left"));
					
					// 在旧值的基础上增加
					var newValue = oldValue + speed;
					
					// 向左移动时,需要判断newValue是否小于target
					// 向右移动时,需要判断newValue是否大于target
					if((speed < 0 && newValue < target) || (speed > 0 && newValue > target) ){
						newValue = target;
					}
					
					// 将新值设置给box1
					obj.style.left = newValue + "px";
					
					// 当元素移动到0px时,使其停止执行动画
					if(newValue == target){
						// 达到目标,关闭定时器
						clearInterval(timer);
					}
					
					
				},30);
			}
			
			/* 
				- 用来获取指定元素的当前的样式
				- 参数
					obj  要获取样式的元素
					name  要获取的样式名
			 */
			
			function getStyle(obj,name){
				if(window.getComputedStyle){
					// 正常浏览器的方式,具有getComputedStyle()方法
					return getComputedStyle(obj,null)[name];
				}else{
					// IE8的方式
					return obj.currentStyle[name];
				}
			}
			
		</script>
	</head>
	<body>
		
		<button id="btn01">点击按钮以后box1向右移动</button>
		<button id="btn02">点击按钮以后box2向左移动</button>
		<br><br><br>
		
		<div id="box1"></div>
		<div style="width: 0;height: 1000px;border-left: 1px black solid;position: absolute;left: 800px;top: 0;"></div>
	</body>
</html>

18.定时器3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定时器2</title>
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			#box1{
				width: 100px;
				height: 100px;
				background-color: #dbd;
				position: absolute;
				left: 0;
			}
			#box2{
				width: 100px;
				height: 100px;
				background-color: #bfa;
				position: absolute;
				left: 0;
				top: 200px;
			}
		</style>
		<script src="../tools.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function(){
				
				// 获取box1
				var box1 = document.getElementById("box1");
				// 获取box2
				var box2 = document.getElementById("box2");

				
				
				/* 
					点击按钮以后,使box1向右移动(left值增大)
				 */
				// 获取btn01
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					move(box1,"left",800,10);
				};
				
				
				/*
					点击按钮以后,使box1向左移动(left值减小)
				 */
				// 获取btn02
				var btn02 = document.getElementById("btn02");
				
				btn02.onclick = function(){
					move(box1,"left",0,10);
				};
				
				// 获取btn03
				var btn03 = document.getElementById("btn03");
				btn03.onclick =function(){
					move(box2,"left",800,10);
				};
				
				// 获取btn04
				var btn04 = document.getElementById("btn04");
				btn04.onclick =function(){
					// move(box2,"width",800,10);
					// move(box2,"height",800,10);
					// move(box2,"left",800,10);
					// move(box2,"top",800,10);
					move(box2,"width",800,10,function(){
						move(box2,"height",400,10,function(){
							move(box2,"top",0,10,function(){
								move(box2,"width",100,10,function(){
									move(box2,"height",100,10,function(){
										
									});
								});
							});
						});
					});
				};
				
			};
			
			
			// 定义一个变量,用来保存定时器的标识
			/* 
				目前的定时器标识由全局变量timer保存,
				 所有的正在执行的定时器都在这个变量中保存
			 */
			// var timer;
			
			

			
		</script>
	</head>
	<body>
		<br>
		<button id="btn01">点击按钮以后box1向右移动</button>
		<button id="btn02">点击按钮以后box1向左移动</button>
		<button id="btn03">点击按钮以后box2向右移动</button>
		<button id="btn04">测试按钮</button>
		<br><br><br>
		
		<div id="box1"></div>
		<div id="box2"></div>
		<div style="width: 0;height: 1000px;border-left: 1px black solid;position: absolute;left: 800px;top: 0;"></div>
	</body>
</html>

19.轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			img{
				width: 1000px;
			}
			/* 
				设置outer的样式
			 */
			#outer{
				width: 1020px;
				height: 333px;
				margin: 50px auto;
				background-color: #bfa;
				padding: 10px 0;
				position: relative;
				
				overflow: hidden;
			}
			/* 
				设置imgList
			 */
			#imgList{
				list-style: none;
				/* width: 8200px; */
				position: absolute;
				left: 0px;
			}
			
			/* 
				设置图片的li
			 */
			#imgList li{
				float: left;
				margin: 0 10px;
			}
			
			#navDiv{
				position: absolute;
				bottom: 15px;
				
			}
			
			#navDiv a{
				
				float: left;
				width: 15px;
				height: 15px;
				background-color: black;
				margin: 0 5px;
				
				/* 设置透明 */
				opacity: 0.5;
				/* 兼容IE8透明 */
				filter:alpha(opacity=50);
			}
			
			/* 设置鼠标移入的效果 */
			#navDiv a:hover{
				background-color: red;
			}
			
		</style>
		<script src="../tools.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function(){
				// 设置imgList的宽度
				// 获取imgList
				var imgList = document.getElementById("imgList");
				
				// 获取页面中所有的img标签
				var imgArr = document.getElementsByTagName("img");
				
				// 设置imgList的宽度
				imgList.style.width = 1020*imgArr.length + "px";
				
				/* 设置导航按钮居中 */
				// 获取navDiv
				var navDiv = document.getElementById("navDiv");
				// 获取outer
				var outer = document.getElementById("outer");
				// 设置navDiv的left值
				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
				
				// 默认显示图片的索引
				var index = 0;
				// 获取所有的a
				var allA = document.getElementsByTagName("a");
				// 设置默认选中的效果
				allA[index].style.backgroundColor = "red";
				
				/* 
					点击超链接切换到指定的图片
				 */
				// 为所有的超链接都绑定单击响应函数
				for(var i = 0;i<allA.length;i++){
					
					// 为每一个超链接都添加一个num属性
					allA[i].num = i;
					
					allA[i].onclick = function(){
						
						// 关闭自动切换的定时器
						clearInterval(timer);
						
						// 获取点击超链接的索引,并将其设置为index
						index = this.num;
						
						// 切换图片
						// imgList.style.left = -1020*index + "px";
						
						// 设置选中的a
						setA();
						
						// 使用move函数来切换图片
						move(imgList,"left",-1020*index,30,function(){
							// 动画执行完毕,开启自动切换
							autoChange();
						});
						
					};
				}
				
				// 开启自动切换图片
				autoChange();
				
				/* 
					创建一个方法来设置选中的a
				*/
			   function setA(){
				   // 判断当前索引是否是最后一张图片
				   if(index >= imgArr.length - 1){
					   // 则将index设置为0
					   index = 0;
					   
						// 此时显示的最后一张图片,而最后一张图片和第一张是一模一样
						// 通过css将最后一张切换成第一张
						imgList.style.left = 0;
				   }
				   
				   // 遍历所有a,并将他们的背景颜色设置为黑色
				   for(var i = 0;i<allA.length;i++){
					   allA[i].style.backgroundColor = "";
				   }
				   
				   // 将选中的a设置为红色
				   allA[index].style.backgroundColor = "red";
			   }
				
				
				/* 
					创建一个函数,用来开启自动切换图片
				 */
				// 定义一个自动切换定时器的标识
				var timer;
				function autoChange(){
					
					// 开启一个定时器,用来定时去切换图片
					timer = setInterval(function(){
						// 使索引自增
						index++;
						
						// 判断index的值
						index %= imgArr.length;
						
						// 执行动画,切换图片
						move(imgList,"left",-1020*index,20,function(){
							// 修改导航按钮
							setA();
						});
						
					},2000);
				}
				
				
			};
			
			
		</script>
	</head>
	<body>
		<!-- 创建一个外部的div,来作为大的容器 -->
		<div id="outer">
			<!-- 创建一个ul,用来放置图片 -->
			<ul id="imgList">
				<li>
					<img src="../five/img/a.jpg" >
				</li>
				<li>
					<img src="../five/img/b.jpg" >
				</li>
				<li>
					<img src="../five/img/c.jpg" >
				</li>
				<li>
					<img src="../five/img/d.jpg" >
				</li>
				<li>
					<img src="../five/img/e.jpg" >
				</li>
				<li>
					<img src="../five/img/f.jpg" >
				</li>
				<li>
					<img src="../five/img/g.jpg" >
				</li>
				<li>
					<img src="../five/img/h.jpg" >
				</li>
				<li>
					<img src="../five/img/a.jpg" >
				</li>
			</ul>
			
			<!-- 创建导航按钮 -->
			<div id="navDiv">
				<a href="javascript:void(0);"></a>
				<a href="javascript:void(0);"></a>
				<a href="javascript:void(0);"></a>
				<a href="javascript:void(0);"></a>
				<a href="javascript:void(0);"></a>
				<a href="javascript:void(0);"></a>
				<a href="javascript:void(0);"></a>
				<a href="javascript:void(0);"></a>
			</div>
		</div>
	</body>
</html>

01.类的操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>类的操作</title>
		<style type="text/css">
			.b1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.b2{
				/* width: 200px; */
				height: 200px;
				background-color: yellowgreen;
			}
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				// 获取box
				var box = document.getElementById("box");
				// 获取btn01
				var btn01 = document.getElementById("btn01");
				
				// 为btn01绑定单击响应函数
				btn01.onclick = function(){
					
					// 修改box的样式
					/* 
						通过style属性来修改元素的样式,每修改一个样式,浏览器就需要重新渲染一次页面
						 这样的执行的性能是比较差的,而且这种形式当我们要修改多个样式时,也不太方便
					 */
					// box.style.width = "200px";
					// box.style.height = "200px";
					// box.style.backgroundColor = "yellow";
					
					/* 
						一行代码同时修改多个样式
							可以通过修改元素的class属性来间接的修改样式
							 这样一来,只需要修改一次,即可同时修改多个样式,
							 浏览器只需要重新渲染页面一次,性能比较好,
							 并且这种方式,可以使表现和行为进一步的分离
							
					 */
					// 修改box的class属性
					// box.className += " b2";
					// addClass(box,"b2");
					// removeClass(box,"b2");
					toggleClass(box,"b2");
					
				};
				
			};
			
			/* 
				定义一个函数,用来向一个元素中添加指定的class属性值
				 参数:
					obj  要添加class属性的元素
					cn  要添加的class值
			 */
			function addClass(obj,cn){
				// 检查obj中是否含有cn
				if(!hasClass(obj,cn)){
					obj.className += " "+cn;
				}
			}
			
			/* 
				判断一个元素中是否含有指定的class属性值
					如果有该class,则返回true,没有则返回false
			*/
		   function hasClass(obj,cn){
			   // 判断obj中有没有cn这个class
			   // 创建一个正则表达式
			   // var reg = /\bb2\b/;
			   var reg = new RegExp("\\b"+cn+"\\b");
			   
			   return reg.test(obj.className);
		   }
			/* 
				删除一个元素的指定的class属性
			 */
			function removeClass(obj,cn){
				// 创建一个正则表达式
				var reg = new RegExp("\\b"+cn+"\\b");
				
				// 删除class
				obj.className = obj.className.replace(reg,"");
			}
			/* 
				toggleClass可以用来切换一个类
				  如果元素中具有该类,则删除
				  如果元素中没有该类,则添加
			 */
			function toggleClass(obj,cn){
				// 判断obj中是否含有cn
				if(hasClass(obj,cn)){
					// 有,则删除
					removeClass(obj,cn);
				}else{
					// 没有,则添加
					addClass(obj,cn);
				}
			}
			
		</script>
	</head>
	<body>
		<button id="btn01">点击按钮以后修改box的样式</button>
		
		<br><br>
		
		<div id="box" class="b1"></div>
	</body>
</html>

02.二级菜单

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>二级菜单</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			
			a,img {
				border: 0;
				text-decoration: none;
			}
			
			body {
				font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
			}
		</style>

		<link rel="stylesheet" type="text/css" href="css/sdmenu.css" />
		
		<script type="text/javascript" src="../tools.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				
				/* 
					每一个菜单都是一个div
					  当div具有collapse这个类时,div就是折叠的状态
					  当div没有这个类时,div就是展开的状态
				 */
				
				/* 
					点击菜单,切换菜单的显示状态
				 */
				
				// 获取所有的class为menuSpan的元素
				var menuSpan = document.querySelectorAll(".menuSpan");
				
				// 定义一个变量,来保存当前打开的菜单
				var openDiv = menuSpan[0].parentNode;
				
				// 为span绑定单击响应函数
				for(var i = 0;i<menuSpan.length;i++){
					menuSpan[i].onclick = function(){
						 
						// this代表当前点击的span
						// 获取当前span的父元素
						var parentDiv = this.parentNode;
						
						// 切换菜单的显示状态
						toggleMenu(parentDiv);
						
						// 判断openDiv和parentDiv是否相同
						if(openDiv != parentDiv && !hasClass(openDiv,"collapsed")){
							// 打开菜单以后,应该关闭之前打开的菜单
							/* 
								为了可以统一处理动画过渡效果,在这将addClass改为toggleClass
							 */
							// addClass(openDiv,"collapsed");
							// 此处toggleClass()不需要有移除的功能
							// toggleClass(openDiv,"collapsed");
							
							// 切换菜单的显示状态
							toggleMenu(openDiv);
						}
						
						// 修改openDiv为当前打开的菜单
						openDiv = parentDiv;
					};
				}
				
				
				/* 
					用来切换菜单折叠和显示状态
				 */
				function toggleMenu(obj){
					// 在获取类之前,获取元素的高度
					var begin = obj.offsetHeight;
					
					// 切换parentDiv的显示
					toggleClass(obj,"collapsed");
					
					// 在切换类之后获取一个高度
					var end = obj.offsetHeight;
					// console.log("begin = "+begin+" , end = "+end);
					
					// 动画效果就是将高度从begin向end过渡
					// 将元素的高度重置为begin
					obj.style.height = begin + "px";
					
					// 执行动画,从begin向end过渡
					move(obj,"height",end,10,function(){
						// 动画执行完毕,内联样式已经没有存在的意义了,删除之
						obj.style.height = "";
					});
				}
				
			};
			
			
		</script>
		
	</head>

	<body>

		<div id="my_menu" class="sdmenu">
			<div>
				<span class="menuSpan">在线工具</span>
				<a href="#">图像优化</a>
				<a href="#">收藏夹图标生成器</a>
				<a href="#">邮件</a>
				<a href="#">htaccess密码</a>
				<a href="#">梯度图像</a>
				<a href="#">按钮生成器</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">支持我们</span>
				<a href="#">推荐我们</a>
				<a href="#">链接我们</a>
				<a href="#">网络资源</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">合作伙伴</span>
				<a href="#">JavaScript工具包</a>
				<a href="#">CSS驱动</a>
				<a href="#">CodingForums</a>
				<a href="#">CSS例子</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">测试电流</span>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
			</div>
		</div>
	</body>
</html>

css/sdmenu.css :

@charset "utf-8";

/* sdmenu */

div.sdmenu {
	width: 150px;
	margin: 0 auto;
	font-family: Arial, sans-serif;
	font-size: 12px;
	padding-bottom: 10px;
	background: url(bottom.gif) no-repeat right bottom;
	color: #fff;
}

div.sdmenu div {
	background: url(title.gif) repeat-x;
	overflow: hidden;
}

div.sdmenu div:first-child {
	background: url(toptitle.gif) no-repeat;
}

div.sdmenu div.collapsed {
	height: 25px;
}

div.sdmenu div span {
	display: block;
	height: 15px;
	line-height: 15px;
	overflow: hidden;
	padding: 5px 25px;
	font-weight: bold;
	color: white;
	background: url(expanded.gif) no-repeat 10px center;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
}

div.sdmenu div.collapsed span {
	background-image: url(collapsed.gif);
}

div.sdmenu div a {
	padding: 5px 10px;
	background: #eee;
	display: block;
	border-bottom: 1px solid #ddd;
	color: #066;
}

div.sdmenu div a.current {
	background: #ccc;
}

div.sdmenu div a:hover {
	background: #066 url(linkarrow.gif) no-repeat right center;
	color: #fff;
	text-decoration: none;
}

03.JSON

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSON</title>
		
		<!-- 
			如果需要兼容IE7及以下的JSON操作,则可以通过引入一个外部的JS文件来处理
		 -->
		 <script src="json2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			/* 
				JSON
					- JS中的对象只有JS自己认识,其他的语言都不认识
					- JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别,
						并且可以转换为任意语言中的对象,JSON在开发中主要用来数据的交互
					- JSON
						- JavaScript Object Notation  JS对象表示法
						- JSON和JS对象的格式一样,只不过JSON字符串中的属性名必须加双引号
							其他的和JS语法一致
							
					- JSON分类:
						1.对象 {}
						2.数组 []
						
					- JSON中允许的值:
						1.字符串
						2.数值
						3.布尔值
						4.null
						5.对象
						6.数组
			 */
			
			// 创建一个JSON对象
			var obj = '{"name":"孙悟空","age":18,"gender":"男"}';
			// JSON数组
			var arr = '[1,2,3,"hello",true]';
			var obj2 = '{"arr":[1,2,3]}';
			var arr2 = '[{"name":"孙悟空","age":18,"gender":"男"},{"name":"孙悟空","age":18,"gender":"男"}]'
			
			
			/* 
				将JSON字符串转换为JS中的对象
				 在JS中,为我们提供了一个工具类,就叫JSON
				 这个对象可以帮助我们将一个JSON转换为JS对象,也可以将一个JS对象转换为JSON
			 */
			var json = '{"name":"孙悟空","age":18,"gender":"男"}';
			/* 
				json --> JS对象
					JSON.parse()
						- 可以将JSON字符串转换为JS对象
						- 它需要一个JSON字符串作为参数,会将该字符串转换为JS对象并返回
			 */
			var o = JSON.parse(json);
			// console.log(o.name);//孙悟空
			
			var o2 = JSON.parse(arr);
			// console.log(o2[3]);//hello
			
			
			var obj3 = {name:"猪八戒",age:28,gender:"男"};
			/* 
				JS对象 --> JSON
				 JSON.stringify()
					- 可以将一个JS对象转换为JSON字符串
					- 需要一个JS对象作为参数,会返回一个JSON字符串
			 */
			var str = JSON.stringify(obj3);
			console.log(str);//{"name":"猪八戒","age":28,"gender":"男"}
			/* 
				JSON这个对象在IE7及以下的浏览器中不支持,所以在这些浏览器中调用时会报错
			 */
		</script>
	</head>
	<body>
	</body>
</html>

json2.js :

//  json2.js
//  2016-05-01
//  Public Domain.
//  NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
//  See http://www.JSON.org/js.html
//  This code should be minified before deployment.
//  See http://javascript.crockford.com/jsmin.html

//  USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO
//  NOT CONTROL.

//  This file creates a global JSON object containing two methods: stringify
//  and parse. This file is provides the ES5 JSON capability to ES3 systems.
//  If a project might run on IE8 or earlier, then this file should be included.
//  This file does nothing on ES5 systems.

//      JSON.stringify(value, replacer, space)
//          value       any JavaScript value, usually an object or array.
//          replacer    an optional parameter that determines how object
//                      values are stringified for objects. It can be a
//                      function or an array of strings.
//          space       an optional parameter that specifies the indentation
//                      of nested structures. If it is omitted, the text will
//                      be packed without extra whitespace. If it is a number,
//                      it will specify the number of spaces to indent at each
//                      level. If it is a string (such as "\t" or "&nbsp;"),
//                      it contains the characters used to indent at each level.
//          This method produces a JSON text from a JavaScript value.
//          When an object value is found, if the object contains a toJSON
//          method, its toJSON method will be called and the result will be
//          stringified. A toJSON method does not serialize: it returns the
//          value represented by the name/value pair that should be serialized,
//          or undefined if nothing should be serialized. The toJSON method
//          will be passed the key associated with the value, and this will be
//          bound to the value.

//          For example, this would serialize Dates as ISO strings.

//              Date.prototype.toJSON = function (key) {
//                  function f(n) {
//                      // Format integers to have at least two digits.
//                      return (n < 10)
//                          ? "0" + n
//                          : n;
//                  }
//                  return this.getUTCFullYear()   + "-" +
//                       f(this.getUTCMonth() + 1) + "-" +
//                       f(this.getUTCDate())      + "T" +
//                       f(this.getUTCHours())     + ":" +
//                       f(this.getUTCMinutes())   + ":" +
//                       f(this.getUTCSeconds())   + "Z";
//              };

//          You can provide an optional replacer method. It will be passed the
//          key and value of each member, with this bound to the containing
//          object. The value that is returned from your method will be
//          serialized. If your method returns undefined, then the member will
//          be excluded from the serialization.

//          If the replacer parameter is an array of strings, then it will be
//          used to select the members to be serialized. It filters the results
//          such that only members with keys listed in the replacer array are
//          stringified.

//          Values that do not have JSON representations, such as undefined or
//          functions, will not be serialized. Such values in objects will be
//          dropped; in arrays they will be replaced with null. You can use
//          a replacer function to replace those with JSON values.

//          JSON.stringify(undefined) returns undefined.

//          The optional space parameter produces a stringification of the
//          value that is filled with line breaks and indentation to make it
//          easier to read.

//          If the space parameter is a non-empty string, then that string will
//          be used for indentation. If the space parameter is a number, then
//          the indentation will be that many spaces.

//          Example:

//          text = JSON.stringify(["e", {pluribus: "unum"}]);
//          // text is '["e",{"pluribus":"unum"}]'

//          text = JSON.stringify(["e", {pluribus: "unum"}], null, "\t");
//          // text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]'

//          text = JSON.stringify([new Date()], function (key, value) {
//              return this[key] instanceof Date
//                  ? "Date(" + this[key] + ")"
//                  : value;
//          });
//          // text is '["Date(---current time---)"]'

//      JSON.parse(text, reviver)
//          This method parses a JSON text to produce an object or array.
//          It can throw a SyntaxError exception.

//          The optional reviver parameter is a function that can filter and
//          transform the results. It receives each of the keys and values,
//          and its return value is used instead of the original value.
//          If it returns what it received, then the structure is not modified.
//          If it returns undefined then the member is deleted.

//          Example:

//          // Parse the text. Values that look like ISO date strings will
//          // be converted to Date objects.

//          myData = JSON.parse(text, function (key, value) {
//              var a;
//              if (typeof value === "string") {
//                  a =
//   /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value);
//                  if (a) {
//                      return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],
//                          +a[5], +a[6]));
//                  }
//              }
//              return value;
//          });

//          myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) {
//              var d;
//              if (typeof value === "string" &&
//                      value.slice(0, 5) === "Date(" &&
//                      value.slice(-1) === ")") {
//                  d = new Date(value.slice(5, -1));
//                  if (d) {
//                      return d;
//                  }
//              }
//              return value;
//          });

//  This is a reference implementation. You are free to copy, modify, or
//  redistribute.

/*jslint
    eval, for, this
*/

/*property
    JSON, apply, call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours,
    getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join,
    lastIndex, length, parse, prototype, push, replace, slice, stringify,
    test, toJSON, toString, valueOf
*/


// Create a JSON object only if one does not already exist. We create the
// methods in a closure to avoid creating global variables.

if (typeof JSON !== "object") {
    JSON = {};
}

(function () {
    "use strict";

    var rx_one = /^[\],:{}\s]*$/;
    var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g;
    var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g;
    var rx_four = /(?:^|:|,)(?:\s*\[)+/g;
    var rx_escapable = /[\\\"\u0000-\u001f\u007f-\u009f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;
    var rx_dangerous = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g;

    function f(n) {
        // Format integers to have at least two digits.
        return n < 10
            ? "0" + n
            : n;
    }

    function this_value() {
        return this.valueOf();
    }

    if (typeof Date.prototype.toJSON !== "function") {

        Date.prototype.toJSON = function () {

            return isFinite(this.valueOf())
                ? this.getUTCFullYear() + "-" +
                        f(this.getUTCMonth() + 1) + "-" +
                        f(this.getUTCDate()) + "T" +
                        f(this.getUTCHours()) + ":" +
                        f(this.getUTCMinutes()) + ":" +
                        f(this.getUTCSeconds()) + "Z"
                : null;
        };

        Boolean.prototype.toJSON = this_value;
        Number.prototype.toJSON = this_value;
        String.prototype.toJSON = this_value;
    }

    var gap;
    var indent;
    var meta;
    var rep;


    function quote(string) {

// If the string contains no control characters, no quote characters, and no
// backslash characters, then we can safely slap some quotes around it.
// Otherwise we must also replace the offending characters with safe escape
// sequences.

        rx_escapable.lastIndex = 0;
        return rx_escapable.test(string)
            ? "\"" + string.replace(rx_escapable, function (a) {
                var c = meta[a];
                return typeof c === "string"
                    ? c
                    : "\\u" + ("0000" + a.charCodeAt(0).toString(16)).slice(-4);
            }) + "\""
            : "\"" + string + "\"";
    }


    function str(key, holder) {

// Produce a string from holder[key].

        var i;          // The loop counter.
        var k;          // The member key.
        var v;          // The member value.
        var length;
        var mind = gap;
        var partial;
        var value = holder[key];

// If the value has a toJSON method, call it to obtain a replacement value.

        if (value && typeof value === "object" &&
                typeof value.toJSON === "function") {
            value = value.toJSON(key);
        }

// If we were called with a replacer function, then call the replacer to
// obtain a replacement value.

        if (typeof rep === "function") {
            value = rep.call(holder, key, value);
        }

// What happens next depends on the value's type.

        switch (typeof value) {
        case "string":
            return quote(value);

        case "number":

// JSON numbers must be finite. Encode non-finite numbers as null.

            return isFinite(value)
                ? String(value)
                : "null";

        case "boolean":
        case "null":

// If the value is a boolean or null, convert it to a string. Note:
// typeof null does not produce "null". The case is included here in
// the remote chance that this gets fixed someday.

            return String(value);

// If the type is "object", we might be dealing with an object or an array or
// null.

        case "object":

// Due to a specification blunder in ECMAScript, typeof null is "object",
// so watch out for that case.

            if (!value) {
                return "null";
            }

// Make an array to hold the partial results of stringifying this object value.

            gap += indent;
            partial = [];

// Is the value an array?

            if (Object.prototype.toString.apply(value) === "[object Array]") {

// The value is an array. Stringify every element. Use null as a placeholder
// for non-JSON values.

                length = value.length;
                for (i = 0; i < length; i += 1) {
                    partial[i] = str(i, value) || "null";
                }

// Join all of the elements together, separated with commas, and wrap them in
// brackets.

                v = partial.length === 0
                    ? "[]"
                    : gap
                        ? "[\n" + gap + partial.join(",\n" + gap) + "\n" + mind + "]"
                        : "[" + partial.join(",") + "]";
                gap = mind;
                return v;
            }

// If the replacer is an array, use it to select the members to be stringified.

            if (rep && typeof rep === "object") {
                length = rep.length;
                for (i = 0; i < length; i += 1) {
                    if (typeof rep[i] === "string") {
                        k = rep[i];
                        v = str(k, value);
                        if (v) {
                            partial.push(quote(k) + (
                                gap
                                    ? ": "
                                    : ":"
                            ) + v);
                        }
                    }
                }
            } else {

// Otherwise, iterate through all of the keys in the object.

                for (k in value) {
                    if (Object.prototype.hasOwnProperty.call(value, k)) {
                        v = str(k, value);
                        if (v) {
                            partial.push(quote(k) + (
                                gap
                                    ? ": "
                                    : ":"
                            ) + v);
                        }
                    }
                }
            }

// Join all of the member texts together, separated with commas,
// and wrap them in braces.

            v = partial.length === 0
                ? "{}"
                : gap
                    ? "{\n" + gap + partial.join(",\n" + gap) + "\n" + mind + "}"
                    : "{" + partial.join(",") + "}";
            gap = mind;
            return v;
        }
    }

// If the JSON object does not yet have a stringify method, give it one.

    if (typeof JSON.stringify !== "function") {
        meta = {    // table of character substitutions
            "\b": "\\b",
            "\t": "\\t",
            "\n": "\\n",
            "\f": "\\f",
            "\r": "\\r",
            "\"": "\\\"",
            "\\": "\\\\"
        };
        JSON.stringify = function (value, replacer, space) {

// The stringify method takes a value and an optional replacer, and an optional
// space parameter, and returns a JSON text. The replacer can be a function
// that can replace values, or an array of strings that will select the keys.
// A default replacer method can be provided. Use of the space parameter can
// produce text that is more easily readable.

            var i;
            gap = "";
            indent = "";

// If the space parameter is a number, make an indent string containing that
// many spaces.

            if (typeof space === "number") {
                for (i = 0; i < space; i += 1) {
                    indent += " ";
                }

// If the space parameter is a string, it will be used as the indent string.

            } else if (typeof space === "string") {
                indent = space;
            }

// If there is a replacer, it must be a function or an array.
// Otherwise, throw an error.

            rep = replacer;
            if (replacer && typeof replacer !== "function" &&
                    (typeof replacer !== "object" ||
                    typeof replacer.length !== "number")) {
                throw new Error("JSON.stringify");
            }

// Make a fake root object containing our value under the key of "".
// Return the result of stringifying the value.

            return str("", {"": value});
        };
    }


// If the JSON object does not yet have a parse method, give it one.

    if (typeof JSON.parse !== "function") {
        JSON.parse = function (text, reviver) {

// The parse method takes a text and an optional reviver function, and returns
// a JavaScript value if the text is a valid JSON text.

            var j;

            function walk(holder, key) {

// The walk method is used to recursively walk the resulting structure so
// that modifications can be made.

                var k;
                var v;
                var value = holder[key];
                if (value && typeof value === "object") {
                    for (k in value) {
                        if (Object.prototype.hasOwnProperty.call(value, k)) {
                            v = walk(value, k);
                            if (v !== undefined) {
                                value[k] = v;
                            } else {
                                delete value[k];
                            }
                        }
                    }
                }
                return reviver.call(holder, key, value);
            }


// Parsing happens in four stages. In the first stage, we replace certain
// Unicode characters with escape sequences. JavaScript handles many characters
// incorrectly, either silently deleting them, or treating them as line endings.

            text = String(text);
            rx_dangerous.lastIndex = 0;
            if (rx_dangerous.test(text)) {
                text = text.replace(rx_dangerous, function (a) {
                    return "\\u" +
                            ("0000" + a.charCodeAt(0).toString(16)).slice(-4);
                });
            }

// In the second stage, we run the text against regular expressions that look
// for non-JSON patterns. We are especially concerned with "()" and "new"
// because they can cause invocation, and "=" because it can cause mutation.
// But just to be safe, we want to reject all unexpected forms.

// We split the second stage into 4 regexp operations in order to work around
// crippling inefficiencies in IE's and Safari's regexp engines. First we
// replace the JSON backslash pairs with "@" (a non-JSON character). Second, we
// replace all simple value tokens with "]" characters. Third, we delete all
// open brackets that follow a colon or comma or that begin the text. Finally,
// we look to see that the remaining characters are only whitespace or "]" or
// "," or ":" or "{" or "}". If that is so, then the text is safe for eval.

            if (
                rx_one.test(
                    text
                        .replace(rx_two, "@")
                        .replace(rx_three, "]")
                        .replace(rx_four, "")
                )
            ) {

// In the third stage we use the eval function to compile the text into a
// JavaScript structure. The "{" operator is subject to a syntactic ambiguity
// in JavaScript: it can begin a block or an object literal. We wrap the text
// in parens to eliminate the ambiguity.

                j = eval("(" + text + ")");

// In the optional fourth stage, we recursively walk the new structure, passing
// each name/value pair to a reviver function for possible transformation.

                return (typeof reviver === "function")
                    ? walk({"": j}, "")
                    : j;
            }

// If the text is not JSON parseable, then a SyntaxError is thrown.

            throw new SyntaxError("JSON.parse");
        };
    }
}());

03.JSON-IE7

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSON</title>
		<script type="text/javascript">
			
			var str = '{"name":"孙悟空","age":18,"gender":"男"}';
			
			/* 
				eval()
					- 这个函数可以用来执行一段字符串形式的JS代码,并将执行结果返回
					- 如果使用eval()执行的字符串中含有{},它会将{}当成是代码块
						如果不希望将其当成代码块解析,则需要在字符串前后各加一个()
						
					- eval()这个函数的功能很强大,可以直接执行一个字符串中的JS代码,
						但是在开发中尽量不要使用,首先他的执行性能比较差,然后它还具有安全隐患
			 */
			var str2 = "alert('hello');";
			// eval(str2);
			var obj = eval("("+str+")");
			// console.log(obj);//{"age":18,"gender":"男","name":"孙悟空"}
		</script>
	</head>
	<body>
	</body>
</html>

tools.js

			/* 
				创建一个可以执行简单动画的函数
				参数
					obj  要执行动画的对象
					attr  要执行动画的样式 比如:left top width height
					target  执行动画的目标位置
					speed  移动的速度
					callback  回调函数
			 */
			function move(obj, attr, target, speed, callback) {

				// 关闭上一个定时器
				clearInterval(obj.timer);

				// 获取元素目前的位置
				var current = parseInt(getStyle(obj, attr));

				/* 
					判断速度的正负值
						如果从0向800移动,则speed为正
						如果从800向0移动,则speed为负
				 */
				if (current > target) {
					// 此时速度应为负值
					speed = -speed;
				}


				// 开启一个定时器,用来执行动画效果
				// 向执行动画的对象中添加一个timer属性,用来保存它自己的定时器标识
				obj.timer = setInterval(function() {

					// 获取box1的原来的left值
					var oldValue = parseInt(getStyle(obj, attr));

					// 在旧值的基础上增加
					var newValue = oldValue + speed;

					// 向左移动时,需要判断newValue是否小于target
					// 向右移动时,需要判断newValue是否大于target
					if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
						newValue = target;
					}

					// 将新值设置给box1
					obj.style[attr] = newValue + "px";

					// 当元素移动到0px时,使其停止执行动画
					if (newValue == target) {
						// 达到目标,关闭定时器
						clearInterval(obj.timer);

						// 动画执行完毕,调用回调函数
						callback && callback();
					}


				}, 30);
			}

			/* 
				- 用来获取指定元素的当前的样式
				- 参数
					obj  要获取样式的元素
					name  要获取的样式名
			 */

			function getStyle(obj, name) {
				if (window.getComputedStyle) {
					// 正常浏览器的方式,具有getComputedStyle()方法
					return getComputedStyle(obj, null)[name];
				} else {
					// IE8的方式
					return obj.currentStyle[name];
				}
			}

			/*
				定义一个函数,用来向一个元素中添加指定的class属性值
				 参数:
					obj  要添加class属性的元素
					cn  要添加的class值
			 */
			function addClass(obj, cn) {
				// 检查obj中是否含有cn
				if (!hasClass(obj, cn)) {
					obj.className += " " + cn;
				}
			}

			/* 
				判断一个元素中是否含有指定的class属性值
					如果有该class,则返回true,没有则返回false
			*/
			function hasClass(obj, cn) {
				// 判断obj中有没有cn这个class
				// 创建一个正则表达式
				// var reg = /\bb2\b/;
				var reg = new RegExp("\\b" + cn + "\\b");

				return reg.test(obj.className);
			}
			/* 
				删除一个元素的指定的class属性
			 */
			function removeClass(obj, cn) {
				// 创建一个正则表达式
				var reg = new RegExp("\\b" + cn + "\\b");

				// 删除class
				obj.className = obj.className.replace(reg, "");
			}
			/* 
				toggleClass可以用来切换一个类
				  如果元素中具有该类,则删除
				  如果元素中没有该类,则添加
			 */
			function toggleClass(obj, cn) {
				// 判断obj中是否含有cn
				if (hasClass(obj, cn)) {
					// 有,则删除
					removeClass(obj, cn);
				} else {
					// 没有,则添加
					addClass(obj, cn);
				}
			}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值