参考源码：https://github.com/hilqiqi0/AI/tree/master/3.Web/js

一、JavaScript概述

1、什么是JavaScript

2、JS发展史

二、JS的使用方式

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

2、将代码嵌入在网页的里

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

三、JS的基础语法

四、JS中的变量和常量

1、变量

2、常量

五、数据类型

1、什么是数据类型

2、JS的数据类型分类

六、数据类型转换

1、隐式转换

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

七、运算符

1、算术运算符

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

3、逻辑运算符

4、位运算符

5、条件运算符

6、赋值运算符

八、流程结构

1、分支结构

2、循环结构

九、循环的嵌套

十、函数

1、什么是函数

2、在JS中创建函数

3、函数的调用

4、变量的作用域

十一、数组 - Array

1、什么是数组

2、创建数组

3、数组的使用

4、获取数组的长度

5、常用API

6、进出栈操作

7、二维数组

十一、字符串 - string

1、声明字符串

2、length 属性

3、常用函数 - String API

4、截取子字符串

5、分割字符串

6、模式匹配

十二、其他内置对象

1、JS中对象分类

2、RegExp 对象

3、Math 对象

4、Date对象

十三、外部对象

1、BOM 和 DOM

2、window对象(BOM模型)

3、document对象(DOM模型)

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

1、根据ID查询节点

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

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

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

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

十五、DOM - 增加和删除

1、增加节点

2、删除节点

十六、事件

1、什么是事件

2、触发事件的行为

3、绑定事件的方式

4、事件行为

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

6、事件冒泡

十七、jQuery

1、jQuery介绍

2、使用jQuery

3、jQuery对象

十八、jQuery选择器

1、作用

2、常用选择器

十九、jQuery操作DOM

1、基本操作

2、样式操作

3、遍历节点

4、创建对象

5、插入元素

6、删除元素

二十、jQuery中的事件处理

1、页面加载后的执行

2、jQuery的事件绑定

3、事件对象 - event

二十一、补充

二十二、附录：目录

参考源码：https://github.com/hilqiqi0/AI/tree/master/3.Web/js

一、JavaScript概述

1、什么是JavaScript

JavaScript 简称"JS",是一种运行于JS解释器或执行引擎中的解释性脚本语言

2、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）

二十二、附录：目录

人工智能（PythonWeb）—— 目录汇总

人工智能（PythonWeb）—— JS相关推荐

AI人工智能ml5.js在线实现图片变卡通图像，照片变卡通图像
一直以来都在寻找能直接通过网页js实现人工智能应用的例子,今天果然找到了一个通过使用ml5.js这个js库是针对tensorflow.js的封装能最大限度的屏蔽tensorflow的细节,直接应用于A ...
人工智能风口，Python程序员的狂欢与企业主的哀嚎
人工智能风口有多火?估计很多人已经感受到了,我在这里引用一下新智元的报道: 2017年短短不到三个月的时间,国内AI获投项目已有36个,千万级别融资占据半数以上. 嗯,就是那么霸道.两会刚刚结束,&q ...
人工智能风口，Python程序员的狂欢与企业主的哀嚎。
人工智能风口有多火?估计很多人已经感受到了,我在这里引用一下新智元的报道: 2017年短短不到三个月的时间,国内AI获投项目已有36个,千万级别融资占据半数以上. 嗯,就是那么霸道.两会刚刚结束,&q ...
python可以做特效吗_学习mel语言，Python，JavaScript到什么程度才能做一下大型特效，要自已开发插件脚本呢？...
感谢邀请.首先自己要在某一方面要擅长,认准一个定位. 比如android是钥匙做前端应用软件的,python可以做爬虫及其人工智能,js做全段网页,java主要是做后端的 1.我们程序员对于开发软件来 ...
2018 Github优秀开源项目整理
目前开源社区Github涌现出不少优秀的项目,关注和使用这些项目,一方面可以很好的提升开发效率与质量,另一方面研究开源项目的源码,参与其贡献,也是提升技术能力一个不错的方法. 基于自己团队的需求,以后 ...
2017 Github优秀开源项目整理
所有项目整理到一张思维导图: http://chenhaoact.com/github-project-recommend.html github项目地址(每周更新,欢迎star): https:// ...
node后台快速开发框架
任何可以用 JavaScript 来写的应用,最终都将用 JavaScript 来写 node.js是用JS语言编写的,JaveScript已经是世界上最流行的语言之一.用它可以实现任何功能需求,无论 ...
蒲公英 · JELLY技术周刊 Vol.03
蒲公英 · JELLY技术周刊 Vol.03 「蒲公英」期刊全新升级--JELLY技术周刊!深度挖掘业界热点动态,来自团队大咖的专业点评,带你深入了解团队研究的技术方向. 登高远眺天高地迥,觉宇宙之 ...
人工智能（PythonWeb）—— Django
目录参考源码:https://github.com/hilqiqi0/AI/tree/master/3.Web/django 一.WEB.服务器和框架 1.WEB 与服务器 2.框架二.Djan ...

人工智能（PythonWeb）—— JS

参考源码：https://github.com/hilqiqi0/AI/tree/master/3.Web/js

一、JavaScript概述

1、什么是JavaScript

2、JS发展史

二、JS的使用方式

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

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

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

三、JS的基础语法

四、JS中的变量 和 常量

1、变量

2、常量

五、数据类型

1、什么是数据类型

2、JS的数据类型分类

六、数据类型转换

1、隐式转换

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

七、运算符

1、算术运算符

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

3、逻辑运算符

4、位运算符

5、条件运算符

6、赋值运算符

八、流程结构

1、分支结构

2、循环结构

九、循环的嵌套

十、函数

1、什么是函数

2、在JS中创建函数

3、函数的调用

4、变量的作用域

十一、数组 - Array

1、什么是数组

2、创建数组

3、数组的使用

4、获取数组的长度

5、常用API

6、进出栈操作

7、二维数组

十一、字符串 - string

1、声明字符串

2、length 属性

3、常用函数 - String API

4、截取子字符串

5、分割字符串

6、模式匹配

十二、其他内置对象

1、JS中对象分类

2、RegExp 对象

3、Math 对象

4、Date对象

十三、外部对象

1、BOM 和 DOM

2、window对象(BOM模型)

3、document对象(DOM模型)

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

1、根据ID查询节点

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

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

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

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

十五、DOM - 增加和删除

1、增加节点

2、删除节点

十六、事件

1、什么是事件

2、触发事件的行为

3、绑定事件的方式

4、事件行为

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

6、事件冒泡

十七、jQuery

1、jQuery介绍

2、使用jQuery

3、jQuery对象

十八、jQuery选择器

四、JS中的变量和常量