人工智能（PythonWeb）—— JS

       1、1992年Nombas公司开发了一款脚本语言，能够运行在网页中，名称 CMM(C--),更名为 ScriptEase
       2、1995年Netscape(网景)为自己的浏览器Navigator2.0开发了另一款脚本语言 - LiveScript,后更名为 JavaScript
       3、1996年Microsoft，为自己的浏览器IE3.0开发了一款JavaScript的克隆版本JScript
       4、1997年Netscape找到了ECMA(欧洲计算机制造商联合会)。Netscape将JS的核心交给了ECMA，从此JS的核心被更名为 ECMA Script，简称ES

       完整的JS组成：
           1、核心 - ECMAScript
               包含了JS中最基本的语法规范
           2、浏览器对象模型 - BOM模型
               Browser Object Model
               提供了一系列的可操作方法和属性用于和浏览器进行交互
           3、文档对象模型 - DOM模型
               Document Object Model
               提供了一系列的可操作方法和属性用于和文档进行交互

二、JS的使用方式

1、在元素事件中编写JS代码

        事件：用户在元素上所激发的行为操作
           onclick：当用户单击元素时激发的操作
       语法：
           <标记 οnclick="JS执行代码">
           JS可执行代码：
               console.log("向控制台中输出一句话");
               console.log('向控制台中输出一句话');

2、将代码嵌入在网页的<script></script>里

        语法：
           在网页的任意位置处，均可以嵌入
           <script>
               可执行的JS代码
           </script>
       特点：
           网页加载时就执行

           document.write("向网页中输出的一句话!");
           注意：将document.write编写在按钮中的话，在执行时，会刷新网页中的内容
       练习：
           在一个按钮中，单击时，执行 document.write()

3、将JS代码编写在外部的JS文件中

        1、创建一个js文件(xxx.js)，编写JS代码
       2、在使用的网页中对js文件进行引入
           <script src="JS文件路径"></script>

           注意：在引入的JS标记中是不能编写JS脚本的
   练习：
       1、使用元素事件方式，向控制台中输出一句话"我的第一个JS练习"
           <button οnclick="console.log('我的第一个JS练习')"></button>
       2、使用<script></script>，向网页中输出一句话"我的第一个JS练习"
           <script>
               document.write("我的第一个JS练习");
           </script>
       3、使用外部JS文件的方式，在网页中弹出一句话"我的第一个JS练习"
           xxx.js:
               window.alert("我的第一个JS练习");
           xxx.html
               <script src="xxx.js"></script>

三、JS的基础语法

   1、JS都是由语句来组成的
       1、由运算符，关键字和表达式构成的
       2、JS中严格区分大小写
           console.log("..."); 正确
           Console.log("..."); 错误
       3、每条语句必须以 ; 表示结束
       4、所有的标识符，符号必须都是英文的
           console.log("");
           console.log(“”)；
   2、JS中的注释
       单行：//
           //这是一段有注释的内容，其中文字包含比较多，自动换行了
       多行：/* */

四、JS中的变量和常量

1、变量

       1、声明变量
           声明：var 变量名;
           赋值：变量名 = 值;
           声明并赋值：var 变量名=值;
           ex:
               声明一个变量名称为 uname，值为王小明
               var uname = "王小明";
               console.log(uname);
               document.write(uname);
               window.alert(uname);

               var name = ""; //尽量不要用 name 做变量
       2、注意
           1、在声明变量时，尽量使用 var 关键字，如果省略var的话，也可以，但容易出问题。
           2、声明变量如果未赋值的话，默认值为 undefined
       3、变量名的命名规范
           1、不能是JS中的关键字和保留关键字
           2、由字母，数字，下划线(_)和$
               var $ = 35;
               var _46 = 46;
           3、数字不能开头
           4、尽量不要重复
           5、尽量要见名知意
           6、如无特殊需求，尽量使用小驼峰命名法
               var age;
               var gender;
               var userName;
       4、变量的使用方式
           1、为变量赋值
               只要变量出现在赋值(=)符号的左边,一律都是赋值操作
               var age = 35;
               var newAge = age;
           2、获取变量的值
               只要变量没出现在赋值(=)符号的左边，一律都是取值操作
                   console.log(uname);
                   var age = 35;//赋值
                   age = age + 35;

               赋值操作：
                   1、先运算赋值符号右面表达式或值，再赋值给左边的变量
                   2、赋值符号的左边只能是变量

2、常量

       1、什么是常量
           一经声明就不允许被修改的数据就是常量
       2、语法
           const 常量名=值;
           注意：
               1、常量声明好之后是不允许被修改的，所以一定要赋值
               2、常量名一般采用全大写形式

       练习：
           1、创建一个网页06-JS-const-exer.html
           2、声明一个常量PI，赋值为3.14
           3、声明一个变量 r，表示一个圆的半径，随意赋值
           4、通过PI和r计算圆的周长，并将结果保存在变量 l 中（2*π*r）
           5、通过PI和r计算圆的面积，并将结果保存在变量 s 中（π*r*r）
               半径为...的圆的周长是...
               半径为...的圆的面积是...
           保留到小数点 n 位
               var l = 62.8000000000004;
               l = l.toFixed(n);

五、数据类型

1、什么是数据类型

数据的类型，约束了数据在内存中所占的空间大小

2、JS的数据类型分类

        1、基本数据类型(原始类型)
           1、number类型
               数字类型，可以表示32位(4字节)的正数或64位(8字节)的浮点数
               整数：
                   允许表示十进制，八进制和十六进制
                   十进制：var num = 321;
                   八进制：var num = 010;
                   十六进制：var num = 0x35;
               小数：
                   小数点计数法：var num = 123.456;
                   指数计数法：var num = 1.5e3;
           2、string类型
               字符串类型
               由Unicode的字符，数字和标点组成
               注意：字符串在使用时必须用' ' 或 " "引起来

               每个字符都有自己的Unicode码
               1、查看字符的Unicode码
                   var str = "张";

                   //得到十进制Unicode
                   var r = str.charCodeAt() ;
                   //将 r 转换为十六进制的字符串
                   r = r.toString(16);
               2、如何将Unicode码转换为对应的字符
                   已知Unicode码：5f20
                   var str = "\u5f20"; //正确写法
                   var s1 = "\u"+5f20; //错误写法
               3、中文范围
                   "\u4e00" ~ "\u9fa5"
               4、转义字符
                   \n:换行
                   \t:制表符
                   \":"
                   \':'
                   \\:\
           3、boolean类型
               布尔类型，只用于表示真(true)或假(false)
               注意：
                   boolean类型是可以参与到数字运算中的
                   true当成1运算
                   false当成0运算

                   var r = 1 + true; // 2
                   var r = 3685 * false; // 0
                   var r = true + false; // 1
           4、undefined类型
               产生undefined场合：
               1、声明变量未赋值
               2、访问对象不存在的属性时
           5、查看数据类型
               使用typeof()或typeof查看变量的数据类型
                   var num = 35;
                   var t1 = typeof(num);
                   var t2 = typeof num;
       2、引用数据类型

六、数据类型转换

不同的数据类型之间的数据在进行运算时是如何转换的。

1、隐式转换

       1、数字 + 字符串
           将数字先转换为字符串，再进行拼接
           var num = 15;
           var str = "18";
           var r = num + str; //1518

           var r = "15"+18+15; //151815
           var r = 15+18+"15"; //3315
           var r = "15"+(18+15); //1533
       2、数字 + 布尔
           将布尔类型转换为数字
       3、布尔 + 字符串
           将布尔转换为字符串，再拼接
           var b = true;
           var s = "你好";
           var r = b + s;
           r:"true你好"
       注意：
           1、任意类型与字符串做加法运算时，都是将其他类型先转换为字符串再拼接
           2、字符串与数字进行运算时
               加法：拼接
               其余操作(-,*,/,%)：先将字符串转换成数字，再做运算

2、显示转换(转换函数、强制转换)

       1、toString()
           将任意类型的数据转换为字符串，并返回转换后的结果
           语法：
               var r = 变量.toString();
           ex:
               var num = 18;
               var r = num.toString();

               var num = 18;
               var r = num+"";
       2、parseInt()
           作用：将任意类型的数据转换成整数，如果实在无法转换的话，则返回NaN(Not a Number)
           语法：
               var r = parseInt(数据);
           ex:
               1、
                   var r = parseInt("13");
                   r : 13
               2、
                   var r = parseInt("13.5");
                   r : 13
               3、
                   var r = parseInt("13你好");
                   r : 13
               4、
                   var r = parseInt("你好13");
                   r : NaN
       3、parseFloat()
           作用等同于parseInt()，允许转换为小数
           1、
               var r = parseFloat("35.5");
               结果为:35.5
           2、
               var r = parseFloat("35.5abc");
               结果为:35.5
           3、
               var r = parseFloat("abc35.5");
               结果为:NaN
       4、Number()
           作用：将任意类型数据转换为数字，只要包含非法字符的话，结果就为NaN
           1、
               var r = Number("35.5");
               结果为: 35.5
           2、
               var r = Number("35");
               结果为: 35
           3、
               var r = Number("35你好");
               结果为: NaN
       练习：
           1、创建网页04-dataType-exer.html
           2、网页中弹出一个输入提示框，允许输入数据
               var input = window.prompt("提示文字：");
               input中保存的就是用户输入的数据
           3、在输入提示框中输入一个数字
           4、将输入的数据 + 10 ，并打印计算后的结果
           5、使用typeof查看输入的数据的数据类型
           6、将输入的数据转换为数字后，再+10

七、运算符

1、算术运算符

+，-，*，/，%，++，--
% ：模

       ++：自增运算符，在自身数据的基础上只做+1运算
       --：自减运算符，在自身数据的基础上只做-1运算

       ex:
           var a = 15;
           a++;
           ++a;

       ++做前缀：
           对变量先自增，再使用
       ++做后缀：
           先使用，在对变量自增
       ex:
           var num = 5;
           console.log(num++);//先输出5，再变为6
           console.log(num);//输出 6

           var num = 5;
           console.log(++num);//先变为6，在输出6
           console.log(num);//输出 6

           var num = 5;
           ++num;
           console.log(num); // 输出6

           var num = 5;
           console.log(num--);//输出5，再变为4
           console.log(num);//输出4

           var num = 5;
           console.log(num++);//5,先输出5，再变为6
           console.log(++num);//7,先变为7，再输出7
           console.log(++num);//8,先变为8，再输出8
           console.log(num++);//8,先输出8，再变为9
           console.log(num);//9

           var num = 5;
                    5(6)    (7)7    7(8)    (9)9    9
           var r = num++ + ++num + num++ + ++num + num;
           r : 37 (5+7+7+9+9)

2、关系运算符(比较运算符)

       >,<,>=,<=,==,!=,===,!==
       1、10 > 5 : true
       2、"10" > 5 : true
           如果运算符的两端有一个操作数是数字的话，那么另外一个会自动通过Number()进行转换，然后再进行比较
       3、"3" > 5 : false
           先将"3"通过Number()转换成数字，再与5比较
       4、"10a" > 5 : false
       5、"10a" < 5 : false
           先将"10a"通过Number()转换为数字，再与5比
           "10a"通过Number()转换为数字，结果 NaN
           NaN 只有做!=结果才是true，其余比较都是false
       6、"张三丰" > "张无忌"
           比较每位字符的Unicode码
           最终比较"三"和"无"的Unicode码
           "三":19977
           "无":26080
           最终结果为 false
       7、"10" > "5" : false
       8、"50" > "5" : true

       === 和 !==
       1、
           "5" == 5 : true
           5 == 5 : true
           "5" == "5" : true

=== :
比较数据的数值和数据类型都相等的情况下，结果才为真

           "5" === 5 : false
       !== :
           比较数据的数值和数据类型只要有一个不等，结果就是真
           "5" !== 5 : true

3、逻辑运算符

       !:非，对现有条件取反，等同于python not
       &&:逻辑与，等同于python and
       ||:逻辑或，等同于python or

       条件1 && 条件2 ：
           条件1为真，条件2为假，整体结果为假
           条件1为假，条件2为真，整体结果为假
           条件1为假，条件2为假，整体结果为假
           条件1为真，条件2为真，整体结果为真

       条件1 || 条件2 ：
           只要有一个条件为真，整体结果为真

!条件:
非真即假，非假即真

       练习1：
           1、创建网页 05-logic.html
           2、从弹框中输入一个四位整数表示年份
           3、判断该年是否为闰年并输出 true 或 false
           闰年：
               能被4整除但不能被100整除或能被400整除
       练习2:
           从弹框中录入一个字符，判断是什么类型字符

           从弹框中录入：K
           是数字吗?false
           是英文吗?true
           是汉字吗?false

0 : \u0030
9 : \u0039

4、位运算符

1、按位与：&
3 & 5 : 1

           3:011
           5:101
           ==========
              001
           场合：判断一个数字的奇偶性
               任意数字与1做按位与操作，结果为1是奇数，结果为0是偶数

               ex: 5 & 1
               5:101
               1:001
               ===========
                  001
       2、按位或：|
           任意小数与0做按位或操作，快速取整(抛弃小数位，保留整数位)
       3、按位异或：^
           两个数字的二进制位进行比较，不同则为1，相同则为0
           3 ^ 5 : 6
           3:011
           5:101
           ================
              110   : 6

           ^的作用：在不借助第三方变量的前提下，交换两个数字的位置
           var a = 5;
           var b = 3;

           Step1 : a = a ^ b;
               3:011
               5:101
               =====
                  110 : 6 ; 结果：a = 6;
           Step2 : b = b ^ a;
               3:011
               6:110
               =====
                  101 : 5 ; 结果：b = 5;
           Step3 : a = a ^ b;
               6:110
               5:101
               =====
                  011 : 3 ; 结果：a = 3;

5、条件运算符

       单目运算符/一元运算符:有一个操作数的运算符
           ++,--,!,typeof,
       双目运算符/二元运算符:有两个操作数的运算符
           +，-，*，/，%，...，&&，||，&，|
       三目运算符/三元运算符:有三个操作数的运算符
           ? :

       条件运算符：
           条件表达式 ? 表达式1 : 表达式2;
           先判断条件表达式的值，如果为true，则执行表达式1的操作，否则则执行表达式2的操作

表达式1 和表达式2 的位置处，还可以是一个条件表达式

6、赋值运算符

a op= b;

var num = 5;
num += 6; // num = num + 6

var a = 3;
var b = 5;

       a = a ^ b; // a ^= b;
       b = b ^ a; // b ^= a;
       a = a ^ b; // a ^= b;

       作业：
           BMI指数计算
           要求从弹框中录入身高(m)
           要求从弹框中录入体重(kg)
           bmi = 体重 / (身高 * 身高);
           如果bmi小于18.5 属于偏瘦
           如果bmi大于23.9 属于偏胖
           否则：正常

八、流程结构

顺序结构/分支结构(选择结构)/循环结构

1、分支结构

       1、作用
           根据条件，选择某一段代码去执行
       2、if 结构
           1、
               if(条件){
                   满足条件要执行的代码块
               }

               注意：
                   1、if 后的 {}是可以省略的，如果省略的话，则只控制该结构下的第一条语句
                   2、条件尽量是boolean类型的，如果不是，以下条件当成假运算：
                       1、if(0){}
                       2、if(0.0){}
                       3、if(""){}
                       4、if(NaN){}
                       5、if(undefined){}
                       6、if(null){}
                   ex:
                       if("吕泽帅吗"){}
           2、
               if(条件){
                   语句块1
               }else{
                   语句块2
               }
           3、
               if(条件1){
                   语句块1
               }else if(条件2){
                   语句块2
               }else if(条件3){
                   语句块3
               }else{
                   语句块n
               }
           练习：
               日期计算器
               分三次从弹框中录入年，月，日
               计算该日是该年的第?天
               1.3.5.7.8.10.12：31天
               4.6.9.11：30天
               2：平年28天，闰年：29天

               2018.1.15 ：15
               2018.2.3 ：34 (31+3)
               2018.3.15 : 74(31+28+15)
       3、switch 结构
           场合：只有在等值判断时使用
           语法：
               switch(变量){
                   case 值1:
                       语句块1
                       break;//可以省略
                   case 值2:
                       语句块2
                       break;
                   ... ...
                   default:
                       语句块n;
                       //只有所有的case块都未匹配上时，才执行default
               }
               注意：
                   1、变量和各个case块后面得知，是使用===的方式来判断的
                   2、如果case后不增加break的话，则从匹配的case开始，向下依次执行(不判断)，直到结束或碰到break为止
               练习：
                   从弹框中输入1-7中的任意一个数字，表示星期1 ~ 星期日
                   输入1：输出今天吃红烧肉
                   输入2：输出今天吃红烧鱼
                   输入3：输出今天吃红烧排骨
                   输入4：输出今天吃红烧甲鱼
                   输入5：输出今天吃红烧皮皮虾
                   输入6：输出今天休息
                   输入7：输出今天休息
                   其他：输入有误！

2、循环结构

       1、循环的作用
           重复的执行相同或相似的代码
       2、循环二要素
           1、循环条件
           2、循环操作(循环体)

           ex:
               1、想打印100遍的Hello World
                   条件：从第1遍开始，到第100遍结束
                   操作：打印Hello World
               2、想打印1-100之间所有的数字
                   条件：从第1遍开始，到第100遍结束
                   操作：打印条件的值
       3、while 循环
           1、语法
               while(条件){
                   循环体
               }

               ex:打印100遍的Hello World
               //声明循环条件，从1开始
               var i=1;
               while(i <= 100){
                   console.log("Hello World");
                   //更新循环条件
                   i++;//++i,i=i+1,i+=1
               }
               练习：
                   1、打印1-100之间所有的数字
                   2、打印1-100之间所有数字的和
                   3、打印1-100之间所有的3的倍数的数字

               问题：循环的从弹框中录入数据，并且将录入的数据打印在控制台上，直到输入 exit 为止
       4、do ... while 循环
           1、语法
               do{
                   循环体
               }while(条件);
           2、流程
               1、先执行循环体
               2、判断循环条件
               3、如果条件为真，则继续执行循环操作，否则退出循环

           1、改版日期计算器
               使用循环(while 或 do...while)
           2、猜数字游戏(do...while)
               1、随机生成一个1-100之间的数字
                   Math.random() 生成一个0-1之间的随机数
               2、允许用户输入一个数字与随机数进行比较
                   1、比随机数大，提示猜大了，并重新输入
                   2、比随机数小，提示猜小了，并重新输入
                   3、与随机数相等提示猜对了，并退出
                   4、用户输入 exit 也退出游戏
       5、循环的流程控制
           1、break
               用在循环体内，用于跳出整个循环结构
           2、continue
               用在循环体内，用于跳出本次循环，继续执行下次循环

           while(true){
               switch(n){
                   case 1:
                       console.log("...");
                       break;
               }
           }

           while(true){
               switch(n){
                   case 1:
                       continue;
               }
           }

           swtich(n){
               case 1:
                   continue;
           }
       6、for循环
           1、while
               var i=1;//循环条件的声明
               while(i <= 100){//循环条件的判断
                   console.log(i);//循环操作
                   i++;//更新循环变量
               }
           2、for语法
               for(表达式1;表达式2;表达式3){
                   循环操作
               }
               表达式1：循环条件的声明
               表达式2：循环条件的判断
               表达式3：更新循环变量

               流程：
                   1、先执行表达式1，声明循环条件(执行1次)
                   2、再判断表达式2的值，true 或 false
                   3、如果为true，则执行循环操作
                       如果为false，则退出循环
                   4、执行完循环操作之后，再执行表达式3
                   5、再判断表达式2的值，同步骤2
           3、for VS while
               1、相同点
                   先判断循环条件，再执行循环操作的结构
               2、不同点
                   while:优先用在不确定循环次数的场合下
                   for:优先用在确定循环次数的场合下
           练习：
               1、判断素数(质数)
                   从弹框中随意录入一个数字，判断其是否为素数
                   素数：只能被1和它自己整除的数字

                   ex:
                       输入 3
                       输出：3是素数

输入 6
输出：6不是素数

           作业：
               在弹框中分三次输入年，月，日
               判断该日是星期几

前提：1900年1月1日是星期一

九、循环的嵌套

允许在一个循环的内部再出现循环

   for(var i=1;i<=10;i++){
       for(var j=1;j<=10;j++){
           for(var k=1;k<=10;k++){

           }
       }
   }
   练习：
       1、在控制台上打印输出
               *        1 : 4个空格1个星
           ***       2 : 3个空格3个星
           *****      3 : 2个空格5个星
       *******     4 : 1个空格7个星
       *********    5 : 0个空格9个星
       *******
          *****
           ***
              *
       空格:5-行数
       星星:2*行数-1
       console.log()
       2、在控制台上打印九九乘法表
       *
       **
       ***
       ****
       *****

       1*1=1
       1*2=2 2*2=4
       1*3=3 2*3=6 3*3=9

十、函数

1、什么是函数

       函数，即 function，是一段预定义好，可以独立执行并包含多条执行语句的代码块
       优点:
           1、多条执行语句的封装
           2、实现了代码的复用

2、在JS中创建函数

       function 函数名(参数列表){
           函数体
           [返回值]
       }

       参数列表：
           如果没有参数，可以为空
           如果有参数，就编写参数列表。如果参数是多个的话，各个参数之间使用","隔开。
           有参数的函数，在调用时就要传参，如果未传参的话，参数的值就是undefined

       ex1:
           function show(){
               console.log("这是一个无参函数");
               console.log("调用时不需要传参");
           }
       ex2:
           function show(name){
               console.log(name);
           }

           function show(name,age){
               console.log(name);
               console.log(age);
           }

       返回值：
           在函数体内，经过运算后，需要传递给函数调用者的一个值，就是返回值。
           返回值是可选的，有返回值的话，需要使用 return 进行返回，最多只能返回一个值

           ex
               function show(name){
                   return "你好:"+name;
               }

3、函数的调用

在任意的JS合法的位置处，都允许做函数的调用

var ret = 函数名(参数列表);

           有参数，则传参，否则，为空
           有返回值，可以接收，否则不接收
       练习：
           改版日期计算器为函数版本
           1、整体功能要封装到函数中
           2、将闰年判断的功能提出来独立成一个函数
               1、接收一个参数表示年份
               2、返回一个boolean值表示是否为闰年的结果
           3、整体功能中，所有的闰年判断通过函数调用完成
           4、通过按钮的单击操作，来调用日期计算器

4、变量的作用域

       1、什么是变量的作用域
           变量的作用域指的是变量的可访问范围
       2、作用域的分类
           1、局部变量
               使用var关键字声明在某个函数内的变量，都是局部变量

               局部变量只能在声明的函数内使用，出了函数则无法使用
           2、全局变量
               1、在function之外声明的变量都是全局变量
               2、声明变量不使用var关键字的时候，都是全局变量

全局变量可以应用在各个函数中以及各个位置处

注意：全局变量，推荐放在所有的function之外，使用var关键字去声明

十一、数组 - Array

1、什么是数组

数组(Array)是一个用于保存批量数据的数据结构
数组是按照线性结构来保存数据的

2、创建数组

       1、创建一个空数组
           var 数组名 = [];
       2、创建数组并初始化元素
           var 数组名 = [元素1,元素2,... ...];
       3、创建一个空数组
           var 数组名 = new Array();
       4、创建数组并初始化元素
           var 数组名 = new Array(元素1,元素2,...);
       注意：
           var 数组名 = new Array(length);
           length 表示是初始化的长度，length为number类型
       练习：
           1、创建网页04-array.html
           2、创建一个数组分别保存
               奥巴马，特朗普，金正恩，普京，默克尔
           3、在控制台中打印数组中的值

3、数组的使用

       获取或设置数组的元素值，一律使用下标
       下标从0开始，到数组元素个数-1结束
       1、将 arr1 数组中的第一个元素更改为"马克龙"
           arr1[0] = "马克龙";
       2、打印输出 arr1 数组中的第三个元素
           console.log(arr1[2]);

4、获取数组的长度

       属性：length
       用法：数组名.length
       1、使用场合
           1、能够找到数组中，最新要插入元素的位置(即向数组尾部增加元素时使用)
               var names = ["刘德华","张学友","郭富城","谭咏麟"];
               //向 names 的尾部追加新元素
               names[names.length] = "黎明";
               练习：
                   让用户循环的从弹框中录入数据，并将录入的数据保存在一个数组中，直到输入 exit 结束(exit不存)。最后打印数组中所有的内容
           2、清空数组
               将数组的length属性设置为0，即表示清空数组中所有的元素
           3、配合循环，遍历数组中的每一个元素
               var arr = ["金正恩","金正日","金日成"];
               //从头遍历到尾
               for(var i=0;i<arr.length;;i++){
                   console.log(arr[i]);
               }
               //从尾遍历到头
               for(var i=arr.length-1;i>=0;i--){
                   console.log(arr[i]);
               }
           练习：
               1、创建一个包含若干整数的数组，找出该数组中的最大值，并打印
               2、创建一个只包含三个数字的数组，将三个数字按照从小到大的方式存放在数组中，并打印
               3、声明一个数组包含若干数字；从弹框中录入一个数字，判断该数字在数组中的下标是多少
                   如果存在：提示下标
                   如果不存在：提示数据不存在

5、常用API

1、toString()
作用：将数组转换成字符串,将转换后的字符串进行返回

           var arr = ["孙悟空","猪八戒","沙僧"];
           console.log(arr.toString());
           结果：孙悟空,猪八戒,沙僧

           console.log("数组:"+arr);
       2、join(seperator)
           作用：返回一个由seperator连接的数组元素的字符串

           var arr = ["孙悟空","猪八戒","沙僧"];
           var str=arr.join('-');
           console.log(str);
           /*孙悟空-猪八戒-沙僧*/
       3、reverse()
           作用：反转
           注意：该函数会改变现有数组的结构
       4、sort()
           1、作用
               对现有数组的内容进行排序
               默认是按照元素的unicode码升序排序
           2、注意
               该函数会改变现有数组的结构
           3、允许通过自定义的排序规则(排序函数)来指定数字的排序方式
               语法：arr.sort(排序函数);

               1、升序的排序函数
                   function sortAsc(a,b){
                       return a-b;
                   }

                   1、将sortAsc指定为排序函数
                   2、数组会自动的将相邻的两个数字传递到参数的位置处
                   3、如果返回值是 > 0的数字的话，则交换两个数字的位置，否则不变

                   指定排序函数：
                       arr.sort(sortAsc);
               2、使用匿名函数指定排序规则
                   匿名函数：是一个没有名称的函数，只为某一功能而存在

                   arr.sort( function(a,b){return a-b;} );

           作业：
               随意从弹框中输入一个数字
               将该数字转换成二进制再输出
               [除二取余法]

6、进出栈操作

       栈式操作：提供了快速操作数组头部和尾部元素的方法
       1、push()
           入栈，压栈，向数组尾部增加新元素，并返回新数组的长度
               arr[arr.length] = "张三丰";
               arr.push("张三丰");
       2、pop()
           出栈，弹栈，删除并返回数组尾部的元素
       3、unshift()
           向数组的头部添加新元素并返回数组的长度
       4、shift()
           删除并返回数组头部的元素

7、二维数组

       1、什么是二维数组
           数组中的每个元素又是一个数组
       2、声明二维数组
           var books = [
               ["西游记","三国演义","水浒传","红楼梦"],
               ["老人与海","雾都孤儿","海底两万里"]
           ];

           获取 "三国演义"
           books[0][1]

十一、字符串 - string

1、声明字符串

       var str1 = "字符串1";
       var str2 = String("字符串2");
       var str3 = new String("字符串3");

2、length 属性

作用：返回当前字符串中字符的个数

3、常用函数 - String API

       1、大小写转换函数
           1、toUpperCase()
               返回当前字符串的完全大写形式
           2、toLowerCase()
               返回当前字符串的完全小写形式
           练习：
               1、创建一个数组，并初始化若干数据(由英文大小写以及数组0-9组成)
               2、生成一个四位随机验证码
                   Math.random()
               3、将生成四位随机验证码通过prompt提示给用户去看并接收用户的数据
               4、比较用户输入的数据与生成的随机验证码是否一致并给出提示(忽略大小写)
       2、获取指定位置的字符或字符的 Unicode码
           1、获取指定位置的字符
               函数：str.charAt(index)
               ex:
                   var str = "Hello World";
                   var s = str.charAt(3);
                   console.log(s); // l
                   console.log(str.charAt(6)); //W
           2、获取指定位置的字符的Unicode码
               函数：str.charCodeAt(index)
               ex:
                   var str = "Hello World";
                   var r = str.charCodeAt(3);
                   console.log(r); // l的Unicode码(十进制)
       3、检索字符串
           1、indexOf(value,fromIndex)
               value:要查找的子字符串
               fromIndex:从哪个下标位置处开始查找，如果省略，则从第一个字符处开始查找
               返回值：返回value第一次出现的下标，如果没有查询到子字符串的话，则返回-1
           2、lastIndexOf(value,fromIndex)
               作用：查找value最后一次出现的下标

           练习：
               判断一个字符串是否满足邮箱的格式
               1、字符串中必须包含@符号
               2、字符串中必须包含.符号
               3、最后一个.必须在 @ 之后
               zsf@163.com
               sanfeng.zhang@163.com

4、截取子字符串

           函数：substring(start,end)
           作用：返回从start到end-1之间的字符串，如果省略end的话，则截取到整个字符串的尾部。
           练习：
               1、从指定邮箱中截取用户名
                   sanfeng.zhang@163.com
               2、从指定邮箱中提取服务商名称
                   sanfeng.zhang@163.com
               3、从身份证号码中提取生日
                   220102196008012216
                   生日：1960年08月01日

5、分割字符串

作用：将一个由指定连接符的字符串，按照连接符给拆开，拆分成一个字符串数组
函数：split(seperator)

ex:
zsf_zwj_zcs_yss_zm

练习：
1045_5&10221_8&73569_6

                   共买了3类商品
                   编号：1045
                   数量：5
                   编号：10221
                   数量：8
                   编号：73569
                   数量：6

6、模式匹配

           1、作用
               配合着正则表达式完成字符串的查找和替换
           2、正则表达式
               语法： /正则格式/修饰符
                   修饰符：
                       i:ignorcase(忽略大小写)
                       g:global(全局匹配)
                       m:multiple(允许多行匹配)
                   ex:
                       1、/\d{2,6}/g
                       2、/垃圾/g
           3、函数
               1、replace(substr/regexp,replacement)
                   作用：在一个字符串中，将substr或满足regexp格式的字符串替换成replacement
               2、match(substr/regexp)
                   按照指定的子字符串或正则表达式进行匹配，并返回满足格式的子字符串(数组)
               练习：
                   Microsoft is a big company,microsoft's color is red and has MICROSOFT logo like microsoft
                   1、将所有的 microsoft(大小写) 都替换成"微软"
                   2、输出共替换了多少处

十二、其他内置对象

1、JS中对象分类

       1、内置对象 - ES提供
       2、外部对象
           1、window(BOM)
           2、document(DOM)
       3、自定义对象 - function

       对象：包含属性和方法(函数)
           对象.属性
           对象.方法()

2、RegExp 对象

       RegExp - Regular Expression
       1、创建RegExp对象
           1、var regExp = /匹配模式/修饰符;
               var reg = /垃圾/igm
           2、var regExp = new RegExp("匹配模式","修饰符");
               var reg = new RegExp("垃圾","g");
       2、RegExp 对象的方法
           1、test(string)
               string:要验证的字符串
               作用：验证string是否满足当前正则表达式对象的格式。如果string满足正则表达式的话，则返回true，否则返回false

3、Math 对象

       1、作用
           执行与数学相关的运算和数据
       2、属性
           Math.PI : 表示π
           Math.E : 表示自然对数
       3、方法
           1、三角函数
               Math.sin()
               Math.cos()
               Math.tan()
           2、计算函数
               Math.sqrt(x) : 开平方
               Math.log(x) : 求对数
               Math.pow(x,y) : 求x的y次方
           3、数值函数
               Math.abs(x) : 求x的绝对值
               Math.max(a,b,c,d) : 求一组数据中的最大值
               Math.min(a,b,c,d) : 求一组数据中的最小值
               Math.random() : 生成 0-1 之间的随机数
               Math.round(x) : 将x四舍五入到整数

4、Date对象

       1、作用
           获取客户端的日期时间
       2、创建Date对象
           1、获取当前日期时间
               var now = new Date();
           2、初始化自定义日期时间对象
               var date = new Date("2018/06/13 17:20:20");
       3、方法
           1、读取或设置当前时间的毫秒数
               1、getTime()
                   返回自1970-1-1 00:00:00 到 date 对象所经过的毫秒数
               2、setTime(毫秒数)
                   根据给定的毫秒数，结合1970-1-1 计算日期
           2、读取时间分量
               1、getFullYear()
                   获取当前日期对象的四位年份数
               2、getYear()
                   返回自1900年以来，到当前日期对象所经过的年数
               3、getMonth()
                   返回0-11的数字来表示1-12月
                   需要得到当前月份的值，需+1
               4、getDate()
                   返回当前日期对象的日
               5、getDay()
                   返回当前日期对象的星期?
                   返回0-6表示星期日-星期六
               6、获取时间
                   getHours() : 获取小时
                   getMinutes() : 获取分
                   getSeconds() : 获取秒
                   getMilliseconds() : 获取毫秒
               7、转换为字符串
                   1、toString()
                   2、toLocaleString()
                   3、toLocaleTimeString()
                   4、toLocaleDateString()

               练习：
                   1、获取当前系统日期时间
                   2、按照以下格式输出
                       xxxx年xx月xx日 xx时xx分xx秒星期三
                       2018年06月13日 17时50分01秒星期三

十三、外部对象

1、BOM 和 DOM

       BOM : Browser Object Model
           浏览器对象模型
           将浏览器比喻成一个对象 - window(网页初始化时会自动创建)，可以通过该对象灵活的操作浏览器
       DOM : Document Object Model
           文档对象模型
           将HTML文档比喻成一个对象 - document，可以灵活的操作网页上的内容，该对象属于window的属性之一，使用时不用声明

2、window对象(BOM模型)

        1、作用
           在JS中表示浏览器窗口
           window下的属性和方法在使用的过程中，可以省略window. 而直接使用属性和方法
               window.alert() -> alert()
               window.document -> document
               window.histor -> history
       2、window中的对话框
           1、警告框
               window.alert() / alert()
           2、输入框
               window.prompt() / prompt()
           3、确认框
               window.confirm("") / confirm("")
               点击"确定"按钮的话，返回 true
               其余的所有的操作，返回 false
               练习：
                   1、创建网页02-confirm.html
                   2、创建一个按钮
                   3、点击按钮时，显示确认框
                       点击确定：您点击了确定
                       否则：您点击了取消
       3、window中的定时器
           1、周期性定时器
               1、特点
                   每间隔一段时间后，就执行一遍程序，反复执行
               2、声明定时器
                   var ret = setInterval(fun,duration)
                       fun:要周期性执行的操作，可以是匿名函数
                       duration:要间隔的时间周期，以ms为单位
                       ret:返回创建好的定时器对象(清除定时器时使用)
               3、清除定时器
                   clearInterval(timer)
                   timer:要清除的定时器对象
               练习：
                   1、创建两个按钮(开始，暂停)
                   2、点击开始时
                       在控制台上打印打印当前的系统日期时间(年月日时分秒)，每隔一秒钟打印一次
                   3、点击暂停时
                       暂停打印
           2、一次性定时器
               1、特点
                   在指定的时间间隔后，只执行一次操作
               2、声明一次性定时器
                   var ret = setTimeout(fun,time)
                       fun:等待一定时间后执行的操作
                       time:要等待的时长
                       ret:已启动的定时器对象
               3、清除定时器
                   clearTimeout(timer);
               练习：
                   1、网页中创建一个按钮
                   2、点击按钮时，弹出一个确认对话框
                       询问用户是否要关闭网页
                   3、如果点击确定，5s之后，关闭网页
                       window.close(); /*关闭网页*/
       4、window中的属性
           1、screen属性
               作用：获取客户端显示器的相关信息
               属性：
                   1、width / height
                   2、availWidth / availHeight
           2、history属性
               1、作用
                   包含当前窗口所访问过的url地址们
               2、属性 & 方法
                   1、属性
                       length：所访问过的url的数量
                   2、方法
                       1、back() : 后退
                       2、forward() : 前进
                       3、go(num)
                           在当前网页的基础上前进或后退几步
                           num：取值为正数，前进
                           num：取值为负数，后退
           3、location属性
               1、作用
                   表示浏览器上地址栏的信息
               2、属性 & 方法
                   1、属性：href
                       表示当前窗口中正在浏览的网页的地址
                       如果为href赋值，相当于实现网页跳转功能
                   2、方法：reload()
                       重新加载当前网页，相当于刷新
                   练习：
                       点击按钮时，能够通过JS跳转到http://www.google.cn
           4、navigator属性
               1、作用
                   包含浏览器的相关信息
               2、属性
                   userAgent : 显示信息

3、document对象(DOM模型)

1、document的概述
document对象，是DOM模型中的顶层对象，封装了所有和HTML元素相关的属性、方法以及事件

网页在加载的时候，会在内存中生成一颗节点树(DOM树)。DOM树会封装网页上所有的内容。网页上的每一个元素，每一个属性，每一段文本(包括注释)，都会被封装成DOM树上的一个单独的节点。

           节点分为以下类型：
               1、元素节点 - 表示网页中的一个元素
               2、属性节点 - 表示元素中的一个属性
               3、文本节点 - 表示元素中的文本内容
               4、注释节点 - 表示网页中的注释内容
               5、文档节点 - 表示整个HTML文档
           DOM中所提供的操作：
               1、查找节点
               2、读取节点信息
               3、修改节点信息
               4、删除节点
               5、创建节点
       2、查找节点
           1、通过元素id查找节点
               前提：元素一定要具备id属性，否则无法查找

               var elem=document.getElementById("元素ID");
                   elem：对应ID的元素在JS中表现 - DOM对象/DOM元素
               DOM属性：
                   1、innerHTML
                       修改/获取/设置当前DOM对象的HTML文本
                   2、innerText
                       修改/获取/设置当前DOM对象的普通文本
                   3、value
                       该属性只针对表单控件，允许获取或设置表单控件的值
                   练习：
                       1、创建网页
                           一个文本框，一个div，一个按钮
                       2、点击按钮的时候
                           将文本框中的文字，以一级标题的形式显示在div中
       3、读取节点信息
           1、节点的类型
               属性：nodeType
               值：
                   返回1：元素节点
                   返回2：属性节点
                   返回3：文本节点
                   返回8：注释节点
                   返回9：文档节点
           2、节点的名称
               属性：nodeName
                   元素节点 & 属性节点：元素名或属性名
                   文本节点：返回 #text
                   文档节点：返回 #document
                   注释节点：返回 #comment
       4、获取或设置元素节点的属性值
           1、getAttribute(attrName)
               作用：获取指定属性的值
               返回值：attrName属性对应的值
           2、setAttribute(attrName,attrValue)
               作用：修改或设置指定属性的值
               attrName:要修改或设置的属性名
               attrValue:要修改或设置的值
           3、removeAttribute(attrName)
               作用：将attrName属性从节点中移除出去
           4、通过 dom对象.属性名获取或设置属性值
               注意：class属性不适用于该方式

           练习：
               1、创建一个网页 ...
               2、创建一个a标记，链接到百度
               3、创建一个按钮，文本为修改
               4、点击按钮，将a标记更改为：
                   1、超链接地址：http://www.google.cn
                   2、超链接的文本：谷歌
       5、元素的样式（css）
           1、使用 setAttribute 设置 class 属性的值
               elem.setAttribute("class","类选择器");
           2、使用元素的className属性修改class值
               var div = $("container");
               div.className = "red";
               注意：
                   不能使用 elem.class="类选择器名称"
           3、使用内联方式设置属性值
               elem.style.css属性名=值;
               elem.style.color="red";

               注意：
                   如果css属性名中包含"-",那么"-"要取消，并且后面单词的第一个字符变大写
                   1、font-size
                       elem.style.fontSize="12px";
                   2、border-right-color
                       elem.style.borderRightColor="red";

十四、DOM - 查询节点（重点——单独列出）

1、根据ID查询节点

document.getElementById()

2、根据层级节点结构查询

       1、parentNode
           根据当前的节点的层级结构，返回父元素节点
       2、childNodes
           根据当前的节点的层级结构，返回当前元素的所有子元素数组
           注意：能够获取所有的文本节点和元素节点
       3、children
           根据当前的节点的层级结构，返回当前元素的所有子元素节点数组
       4、nextSibling
           获取当前节点的下一个兄弟节点
       5、nextElementSibling
           获取当前节点的下一个元素兄弟节点
       6、previousSibling
           获取当前节点的上一个兄弟节点
       7、previousElementSibling
           获取当前节点的上一个元素兄弟节点

3、通过标签名称获取页面元素

语法：document|elem.getElementsByTagName("标签名")
返回值：返回包含指定标记的元素数组们

4、通过元素的name属性值获取元素

语法：document.getElementsByName("name");
返回值：包含指定name属性值的元素的数组

5、通过元素的class属性值获取元素

语法：document|elem.getElementsByClassName("class")
返回值：返回包含指定class属性值的所有元素

var div = document.getElementById("container");
div.class = "red"; //错误

十五、DOM - 增加和删除

1、增加节点

       1、创建节点
           语法：
               var elem=document.createElement("元素名");
               练习：
                   1、通过按钮动态创建一对div
                   2、设置div的id值为 container
                   3、设置div的文本为 "动态创建的div"
                   4、将div打印在控制台上
       2、增加节点
           将创建好的元素增加到网页中
           1、document.body.appendChild(elem)
               向body中追加elem新元素
           2、parentNode.appendChild(elem)
               向parentNode的内部追加elem新元素
               parentNode可以表示页面上的任意一个节点
           3、parentNode.insertBefore(newElem,oldElem)
               将newElem插入到parentNode中oldElem之前

2、删除节点

       在DOM中，删除节点的行为只能由父元素发起
       1、删除body中的子元素
           document.body.removeChild(elem);
       2、删除其他元素的子元素
           parentNode.removeChild(elem);
           删除parentNode中的elem子元素

十六、事件

1、什么是事件

通常由用户的行为来激发的操作

2、触发事件的行为

       所有的事件在绑定的时候，前面要加 on
       1、鼠标事件
           click:鼠标单击事件
           mouseover:鼠标移入进元素激发的事件
           mouseout:鼠标移出元素激发的事件
           mousemove:鼠标在元素内移动时的事件
       2、键盘事件
           keydown:键位按下时事件
           keypress:键位按下时事件
           keyup:键位抬起时事件
       3、状态改变事件
           load:当元素加载完成时激发的事件
           change:元素发生改变时激发的事件(<select>)
           focus:当元素获取焦点时触发的事件
           blur:当元素失去焦点时触发的事件
           submit:当表单被提交时触发的事件

3、绑定事件的方式

       1、在元素中绑定事件
           语法：<标记 on事件名="执行函数()">
           ex:
               1、为div元素绑定鼠标移入事件
                   <div οnmοuseοver=""></div>
               2、为body绑定load事件
                   <body οnlοad=""></body>
       2、在js中动态的为元素绑定事件
           var div = document.getElementById("d1");
           div.on事件名=function(){
               事件操作
           }

           var d1 = document.getElementById("d1");
           1、动态的为d1绑定click事件
           2、动态的为d1绑定mouseout事件

注意：
在动态绑定事件中，在事件处理函数内，允许通过this关键字，来表示当前的元素(DOM元素)

4、事件行为

       1、load 事件
           常用：为body绑定load事件，目的是为了在所有内容都加载完成之后再执行的操作要放在此处
           1、<body οnlοad=""></body>
           2、JS中动态绑定
               window.onload = function(){

               }
       2、submit 事件
           只有在表单被提交时才会触发
           注意：该事件需要一个boolean的返回值来通知表单是否要提交。返回为true，可以提交表单，返回为false则阻止表单提交

5、事件对象(事件参数对象，event对象)

       1、什么是事件对象
           任何一个事件在触发后，都会自动产生一个event对象。
           event对象中包含与当前事件相关的一些属性和方法
       2、获取 event 对象
           1、在html元素中绑定事件
               <标记 οnclick="btn(event)">

               function btn(event){
                   //事件处理函数
               }
           2、在JS中动态为元素绑定事件
               var d1 = $("d1");

               d1.οnclick=function(event){
                   event表示的就是事件对象
               }
       3、事件对象的常用属性
           1、事件源
               1、什么是事件源
                   触发当前事件的元素是谁
               2、获取事件源
                   通过 event.target 获取事件源
                   事件源是一个DOM对象
           2、鼠标事件(事件对象的常用属性)
               鼠标事件：
                   click,mouseover,mouseout,mousemove
               1、offsetX，offsetY
                   获取鼠标在元素上的坐标点
                   以元素的左上角为(0,0)
               2、clientX，clientY
                   获取鼠标在网页上的坐标点
               3、screenX,screenX
                   获取鼠标在屏幕上的坐标点
           3、键盘事件(事件对象的常用属性)
               键盘事件：keypress,keydown,keyup
               1、keypress
                   只有在输入字符的前提下，才会被激发
                   1、which
                       当前按下的字符的ASCII
                   2、key
                       当前按下的字符
                   注意：该事件允许通过一个返回值，通知元素是否要处理该事件。返回值为true，则正常显示输入的字符，返回值为false，则终止显示
               2、keydown
                   只要按下键盘键位时就会被触发，无论是否有字符的输入
                   1、which
                       当前按下键位的键位码
                       只区分按键，并不区分大小写
                       大小写字符，是同一键位，所以键位码相同
                   返回值同keypress

6、事件冒泡

       1、什么是事件冒泡
           当激发子元素事件时，同时把父元素对应的事件也给执行了
           场合：
               1、必须是父子结构或具备层级关系的元素
               2、必须同时设置了相同的事件
       2、阻止事件冒泡
           让该事件在当前元素中执行，不向上冒泡
               event.stopPropagation();

十七、jQuery

1、jQuery介绍

       jQuery是一个轻量级的JS库 - 是一个被封装好的JS文件，提供了更为简便的元素操作方式
       jQuery封装了DOM
       jQuery核心理念：Write Less Do More
       jQuery版本：
           jQuery 2.x 不再兼容IE6,7,8
           jQuery 1.11.x

2、使用jQuery

       1、引入jQuery文件
           <script src="jquery-1.11.3.js"></script>
           注意：该文件的引入操作必须要放在其他的jQuery操作之前
       2、使用jQuery

3、jQuery对象

       1、什么是jQuery对象
           jQuery对象是由jQuery对页面元素进行封装后的一种体现
           jQuery中所提供的所有操作都只针对jQuery对象其他对象(DOM对象)无法使用
       2、工厂函数 - $()
           想要获取jQuery对象的话，则必须使用工厂函数$()

在$()中允许传递一个选择器/DOM对象作为参数，$()能够将选择器和 DOM对象全部封装成jQuery对象再进行返回

       3、DOM对象和 JQuery对象之间的转换
           DOM对象：不能使用jQuery提供的操作
           jQuery对象：不能使用DOM提供的操作

           1、将DOM对象转换为jQuery对象
               语法：
                   var 变量=$(DOM对象);
                   注意：所有的jQuery对象在起名的时候，最好在变量前加 $,主要用于和DOM对象的区分
           2、将jQuery对象转换为DOM对象
               1、var dom对象=jQuery对象[0];
               2、var dom对象=jQuery对象.get(0);

十八、jQuery选择器

1、作用

获取页面上的元素们，返回值都是由jQuery对象所组成的数组
语法：$("选择器")

2、常用选择器

       1、基本选择器
           1、ID选择器
               $("#id");
               返回：返回页面中指定ID值的元素
           2、类选择器
               $(".className")
               返回：页面中指定className的所有元素
           3、元素选择器
               $("element")
               返回：页面中指定标记的所有元素
           4、群组选择器 / 复合选择器
               $("selector1,selector2,...")
               返回：返回满足函数内所有选择器的函数们
       2、层级选择器
           1、$("selector1 selector2")
               后代选择器
           2、$("selector1>selector2")
               子代选择器
           3、$("selector1+selector2")
               名称：相邻兄弟选择器
               作用：匹配紧紧跟在selector1后面且满足selector2选择器的元素
           4、$("selector1~selector2")
               名称：通用兄弟选择器
               作用：匹配selector1后面所有满足selector2选择器的元素
       3、基本过滤选择器
           过滤选择器通常都会配合着其他的选择器一起使用
           1、:first
               只匹配一组元素中的第一个元素
               $("p:first")
           2、:last
               只匹配一组元素中的最后一个元素
           3、:not("selector")
               在一组元素中，将满足selector选择器的元素排除出去
           4、:odd
               匹配偶数行元素(奇数下标)
           5、:even
               匹配奇数行元素(偶数下标)
           6、:eq(index) -- equals
               匹配下标等于 index 的元素
           7、:gt(index)
               匹配下标大于 index 的元素
           8、:lt(index)
               匹配下标小于 index 的元素

           练习：
               使用 p 标记显示以下内容

               床前明月光
               疑是地上霜
               举头望明月
               低头思故乡
               百日依山尽
               黄河入海流
               欲穷千里目
               更上一层楼
       4、属性过滤选择器
           依托于html元素的属性来进行元素过滤的
           1、[attribute]
               作用：匹配包含指定属性的元素
               ex:
                   div[id]:匹配具备id属性的div元素
           2、[attribute=value]
               作用：匹配attribute属性值为value的元素
               ex:
                   input[type=text]
                   input[type=password]
           3、[attribute!=value]
               作用：匹配attribute属性值不是value的元素
           4、[attribute^=value]
               作用：匹配attribute属性值是以value字符开头的元素
               ex:
                   p[class^=col]
           5、[attribute$=value]
               作用：匹配attribute属性值是以value字符结尾的元素
           6、[attribute*=value]
               作用：匹配attribute属性值中包含value字符的元素
       5、子元素过滤选择器
           1、:first-child
               匹配属于其父元素中的首个子元素
           2、:last-child
               匹配属于其父元素中的最后一个子元素
           3、:nth-child(n)
               匹配属于其父元素中第n个子元素

十九、jQuery操作DOM

1、基本操作

       1、html()
           作用：获取或设置 jQuery对象中的html内容
           ex:
               console.log($("#main").html());
               $("#main").html("");
       2、text()
           作用：获取或设置 jQuery对象中的text内容
       3、val()
           作用：获取或设置 jQuery对象中的value值(表单控件)
           练习：
               创建一个文本框，定义id
               创建一个按钮，内容为显示
               创建一个div
               点击按钮时，将文本框的内容读取出来，构建成一级标题的样式，在显示在div中
       4、属性操作
           1、attr()
               作用：读取或设置jQuery对象的属性值
               ex:
                   1、$obj.attr("id");
                       获取 $obj 的id属性值
                   2、$obj.attr("id","main");
                       设置$obj对象的id属性值为main
           2、removeAttr("attrName")
               删除jQuery对象的attrName属性
               ex:
                   $obj.removeAttr("class");

2、样式操作

       1、attr()
           $obj.attr("class","redBack");
       2、addClass("className")
           作用：将className 添加到元素的class值之后
           ex:
               $obj = $obj.addClass("c1");
               $obj = $obj.addClass("c2");
           连缀调用：
               $obj.addClass("c1").addClass("c2");
       3、removeClass("className")
           如果无参的话，则清空类选择器
           如果有参数的话，则删除对应的类选择器
           ex:
               1、$obj.removeClass("c1")
                   将c1类选择器从$obj移除出去
               2、$obj.removeClass()
                   清空$obj的所有类选择器
       4、toggleClass("className")
           切换样式：
               元素如果具备className选择器，则删除
               元素如果没有className选择器，则添加
       5、css("属性名")
           $obj.css("width");
           获取$obj对象的width属性值
       6、css("属性名","属性值")
           $obj.css("background-color","yellow");
           设置$obj对象的background-color的属性值为yellow
       7、css(JSON对象)
           JSON对象：
               是一种约束了格式的对象表现形式
               JSON:JavaScript Object Notation
           JSON对象的表示方式：
               1、JSON对象必须使用{}括起来
               2、使用键值对的方式来声明数据(表示属性和值)
               3、所有的属性在使用时必须使用""括起来，值如果是字符串的话，也必须使用""括起来
               4、属性和值之间使用:连接
               5、多对属性和值之间使用 , 隔开
           ex:
               $obj.css({
                   "color":"red",
                   "font-size":"32px",
                   "float":"left"
               });

3、遍历节点

       1、children() / children("selector")
           获取某jQuery对象的所有子元素或带有指定选择器的子元素
           注意：只考虑子代元素，不考虑后代元素
       2、next() / next("selector")
           获取某jQuery对象的下一个兄弟元素 / 满足selector的下一个兄弟元素
       3、prev() / prev("selector")
           获取某jQuery对象的上一个兄弟元素 / 满足selector的上一个兄弟元素
       4、siblings() / siblings(selector)
           获取某jQuery对象的所有兄弟元素 / 满足selector的所有兄弟元素
       5、find("selector")
           查找满足selector选择器的所有后代元素
       6、parent()
           查找某jQuery对象的父元素

4、创建对象

       语法：$("创建的标记")
       ex:
           1、创建一对div
               var $div = $("<div></div>");
               $div.html("动态创建的div");
               $div.attr("id","container")
               $div.css("color","red");
           2、创建一对div
               var $div = $("<div id='container' style='color:red;'>动态创建的div</div>");

5、插入元素

       作用：将创建好的元素插入到网页中
       1、内部插入
           作为元素的子元素插入到网页中
           1、$obj.append($new);
               将$new元素插入到$obj元素中的最后一个子元素位置处(追加)
           2、$obj.prepend($new);
               将$new元素插入到$obj元素中的第一个子元素位置处
       2、外部插入
           作为元素的兄弟元素插入到网页中
           1、$obj.after($new);
               将$new元素作为$obj的下一个兄弟元素插入进来
           2、$obj.before($new);
               将$new元素作为$obj的上一个兄弟元素插入进来

6、删除元素

$obj.remove();
将$obj元素删除出去

二十、jQuery中的事件处理

1、页面加载后的执行

       类似于window.onload 但不同于 window.onload
       jQuery加载后执行的特点：
           在DOM树加载完毕的时候就开始执行
       1、
           $(document).ready( function(){
               //页面的初始化操作
               //DOM树加载完成后就开始运行
           } );
       2、
           $().ready( function(){
               //页面的初始化操作
               //DOM树加载完成后就开始运行
           } );
       3、
           $( function(){
               //页面的初始化操作
               //DOM树加载完成后就开始运行
           } );

2、jQuery的事件绑定

       1、方式1
           $obj.bind("事件名称",事件处理函数);
           ex:
               $obj.bind("click",function(){
                   //事件的行为操作
                   console.log("... ....");
               });
       2、方式2
           $obj.事件名称(function(){
               //事件处理函数
           });

           ex:
               $obj.click(function(){
                   //通过 this 来表示触发该事件的DOM对象
               });

3、事件对象 - event

       在绑定事件的时候，允许传递 event 参数来表示事件对象
       1、
           $obj.bind("click",function(event){
               //event表示当前事件的事件对象
           });
       2、
           $obj.click(function(event){
               //event表示当前事件的事件对象
           });

           event的使用方式与原生JS事件中的event使用方式一致。
               event.stopPropagation() : 阻止事件冒泡
               event.offsetX:
               event.offsetY:
               event.target:获取事件源

二十一、补充

       sublime设置
               字体大小颜色
               文本编码格式
               tab空格数量
               ctrl+B：打开默认浏览器
               行号、折叠、竖线
               去掉备份功能
               tab自动补全
               自动生成文字：Lorem （按tab）、Lorem100（按tab生成100个单词）
               html新建快捷键：ctrl+shift+N

FastStone Capture 快捷键设置
（取色alt+c；尺子alt+r）