JS&jQuery

1、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（欧洲计算机制造商协会），将JS提交给了ECMA。从此JS的核心更名为EMCA Script简称ES
JS的组成：
1、核心—EMCA Script：包含了JS的最基本的语法规范
2、文档对象模型（Document Object Model）简称DOM
允许JS操作HTML网页上的内容
DOM的规范是有W3C来制定的
3、浏览器对象模型（Browser Object MOdel）简称BOM
允许JS操作浏览器

2、使用JS（JS引用）
1、使用元素事件执行JS脚本代码
事件：用户在元素上所激发的行为操作
1、onclick事件：当用户点击元素时做的操作
语法：
<ANY >
JS脚本代码：
console.log（‘向控制台中输出的内容‘）;
2、嵌入在网页中的<script></script>
语法：<script></script>在任何位置都可以
特点：
网页加载的时候就开始执行
document.write():向网页输出一句话
注意：如果通过按钮的单击事件执行document.write()的话，则会刷新网页内容
示例：
<script>
document.write("<h1>hello world<h1>")
<script>
3、将JS脚本写在外部的JS文件中
步骤：
1、创建JS文件（XXX.js）并编写脚本
2、在网页中对js文件进行引入
<script src="js文件路径">此处不能写js代码</script>
3、JS基础语法
1、语法规范
1、JS都是由语句组成的
1、由运算符，表达式，关键字组成的称为语句
2、严格区分大小写
3、每条语句必须以；分号表示结束
2、JS中的注释
1、单行注释：//注释内容
2、多行注释：/*注释内容*/
4、JS中的变量 和 常量
1、变量
1、声明变量的语法
声明：var 变量名;
赋值：变量名 = 值;
声明并赋值：var 变量名=值;
注意：
1、声明变量时，尽量使用var关键字，如果省略，也可以，但是容易处问题（全局污染）
2、声明变量但未赋值的话，默认值为undefined
2、变量名的命名规范
1、不能使用JS中的关键字或保留关键字
2、有字母，数字，下划线（_）和$组成
3、不能以数字开头
4、尽量不要重复
5、尽量见名知意
6、如无特殊需求（团队要求）的话，尽量使用小驼峰命名法
2、常量
1、什么是常量：一经声明就不允许修改的数据就是常量
2、语法
const 常量名 = 值;
注意：常量名采用全大写的形式

5、数据类型
1、作用：约束了数据在内存中所占空间大小问题的
2、JS数据类型分类
1、基本数据类型（值类型）
1、number类型
数字类型，可以表示32位的整数或64位的浮点数
整数：
表示十进制，八进制，十六进制
十进制：var num = 111；
八进制：var num = 010；
十六进制：var num = 0x10；
小数：
小数点计数法：var num = 123.456；
科学计数法：var num = 1.5e2；
2、string类型（所占内存为2-4字节）
字符串：都是由Unicode的字符，数字，标点组成的
1、查看字符的Unicode码(可以根据的Unicode码对应的二进制判断所占内存（多少字节）)
var str = "张三丰";
var uCode =str.charCodeAt(0).toString(2)
2、如果将Unicode码转换成对应的字符(只能转16进制的，如果是二进制或八进制需要先转换成16进制)
已知Unicode码：5f20
var str = ‘\u5f20‘;
console.log(str);
3、文中范围
‘\u4e00‘~‘\u9fa5‘
4、转义字符
\n: 换行
\t: 制表符
\": "
\‘: ‘
\\: \
3、boolean类型
布尔类型，只用于表示真（true）或假（false）
注意：
在参与数字运算时，true当做1运算，false当做0
4、查看数据类型
使用typeof() 或 typeof 都可以查看变量的数据类型
2、引用数据类型


3、数据类型转换
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
2、数字+布尔：将布尔转为数字做加法（true转为1，false转为0）
3、字符串+布尔：将布尔转为字符串做连接
var boo = true；
var str = ‘Hello’；
var r = boo+str；//trueHello
4、布尔+布尔：都转为数字做加法运算
2、强制转换（转换函数）
1、toString（）：将任意类型的数据转为字符串，并返回转换后的结果
语法：
var r = 变量.toString();
var r = 变量+‘‘;
2、parseInt（）
作用：将指定的数据尽量转换为整数，如果实在无法转换的话，则返回NaN（Not a Number）
示例：
1、var r = parseInt（‘456’）；
r：456
2、var r = parseInt（‘123.556’）；
r：123
3、var r = parseInt（‘123Hello’）；
r：123
4、var r = parseInt（‘hello123’）；
r：NaN
3、parseFloat（）
作用：尽量将任意类型的数据转为小数，如果实在无法转换的话，那么结果为NaN
示例：
1、var r = parseFloat(‘3.14‘);
r:3.14
2、var r = parseFloat(‘3.14hello‘);
r:3.14
3、var r = parseFloat(‘hello3.14‘)
r:NaN
4、Number（）
作用：将任意类型的数据转为数字，只要包含非法字符，结果就是NaN
示例：
1、var r = Number(‘123hello‘);
r:NaN
6、运算符
1、算数运算符
1、+ - * / %
2、++ --
++：自增运算符，在自身基础上做+1操作
--：自减运算符，在自身基础上做-1操作
后缀：
var num = 10；
num++；
特点：先使用num的值，然后再做自增运算
var num = 10；
console.log(num++);输出10
console.log(num); 输出11
前缀：
var num = 10；
++um；
特点：先对变量进行自增，然后再使用变量的值
var num = 10；
console.log(++num);输出11
console.log(num); 输出11
练习：
var num = 5；
var result = num + ++num + num++ + ++num +num;
5 + (6)6 + 6(7) + (8)8 + 8
2、关系运算符（比较运算符）
> < >= <= == != === !==
1、10>5:true
2、‘10‘>5:true
运算符两端如果有一个是数字的话，那么另外一个会自动转换（通过Number）成数字，再进行比较
3、‘10a‘ > 5:false
4、"10a" < 5:false
NaN除了 != 运算时为true，其他都为false
5、"10" > "5":false
比较的是字符1的ASCII 和 字符5的ASCII
6、"张三丰" > "张无忌"：false
比较三和无的Unicode码的大小
7、’10‘ == 10 ：true
===、判断数值和数据类型必须全相等时才返回true
!==、只要数值或数据类型中有一个不相等即返回true
3、逻辑运算符
！：逻辑非，等同于python中的not
&&：逻辑与，and
||：逻辑或，or
4、为运算符
1、按位与 &：两个数字的二进制进行比较，对应位都为1，则该结果为1，否则 为0
场合：奇偶性验证，将一个数与1按位求与，结果为1则为奇数，否则为偶数
7 & 1 =1
7:111
1:001
2、按位或 |：只要有1即为1，
3、按位异或^:不同则为1，相同则为0
场合：不借助第三方变换两个数字
示例:
var a = 3;
var b = 5;
a = a ^ b; 110
3:011
5:101
b = b ^ a; 011
b(5):101
a(6):110
a = a ^ b; 101
a(6):110
b(3):011
5、条件运算符（三目运算）
语法：？：
条件表达式 ？ 表达式1 ：表达式2;
当条件表达式的结果为true的时候，执行表达式1中的内容，并将表达式1的结果作为整体表达式的结果，否则执行表达式2
练习：
BMI计算器
1、分两次从弹框中输入数据
1、第一次：输入 身高（m）
2、第二次：输入 体重（kg）
2、计算bmi
bmi = 体重 /(身高*身高)
3、
如果bmi的值小于20，提示偏瘦
如果bmi的值大于25，提示偏胖
否则：提示正常
6、赋值运算符
+= -= *= /= ^=
a ^= b 等价于 a =


a^b
7、流程控制
1、程序控制结构
1、顺序结构
2、分支结构/选择结构
3、循环结构
2、分支结构
1、if结构
1、if结构
语法：
if（条件表达式）{
语句块；
}
2、if...else结构
语法：
if（条件表达式）{
语句块1；
}else{
语句块2；
}
3、if ...else if...结构
语法：
if（条件表达式）{
语句块1
}else if（条件表达式2）{
语句块2；
}else if（条件表达式n）{
语句块n；
}else{
语句块n+1；
}
练习：
1、分三次从弹框中输入年，月，日
2、判断该日是概念的第几天

2、switch结构
1、作用：等值判断
2、语法
switch（变量）{
case 值1：
语句块1；
break；//跳出switch结构，可以选
case 值：
语句块2；
break；//跳出switch结构，可以选
.......
default：
语句块n；
/*所有case都未匹配上时，才执行default*/
}
注意：
1、变量 和 case后的值的判断，采用===来判断的
2、break，如果省略break的话，则从匹配的case块开始，依次向下执行（执行下面所有case块的内容，或default块内容）直到遇见break或执行结束
3、练习：
从弹框中输入1-7任意一个数字表示1-星期日
输入1：今天吃红烧肉
输入2：今天吃红烧鱼
输入3：今天吃清蒸甲鱼
输入4：今天吃红烧皮皮虾
输入5：今天吃红烧排骨
输入6：今天休息
输入7：今天休息
其他：输入有误！
3、循环结构
1、作用：重复执行相同或相似的代码
2、循环的二要素
1、循环条件：循环从什么时候开始，到什么时候结束
2、循环操作：循环中要做的事情（要执行的代码）
3、while循环
1、语法
while（循环条件）{
循环操作
}
流程：
1、判断循环条件（boolean值/表达式）
2、如果条件为真，则执行循环操作
2.1、执行完操作后，再回来判断条件
3、如果条件为假，则退出循环
4、do...while循环
语法：
do{
循环操作；
}while（条件）；
流程
1、先执行循环操作
2、再判断循环条件
3、如果条件为真，再继续执行循环条件，当条件为假时结束循环
5、循环的流程控制
1、break：跳出循环结构
2、continue：结束本次循环，继续执行下次循环
6、for循环
1、while
打印1-100之间的所有数字
var i = 1;//循环条件的初始化
while(i <= 100){//循环条件的判断
console.log(i);//循环操作
i++;//更新循环条件
}
2、语法：
for（表达式1；表达式2；表达式3）{
循环操作；
}
表达式1：循环条件的初始化
表达式2：循环条件的判断
表达式3：更新循环条件
流程：
1、先执行表达式1，即循环条件初始化（执行1次）
2、判断表达式2的值，true 或 false
3、如果表达式2的结果为true则执行循环操作，如果为false则退出循环
4、执行循环操作后，再执行表达式3
5、再判断表达式2，同步骤2
for(var i = 1; i<=100; i++){
console.log(i)
}
7、循环嵌套
允许在一个循环中再出现另一个循环
for(var i=1; i<=10;i++){//外层循环
for(var j=1;j<1=0;j++){//内层循环

}
}
外层循环走一次，内层循环走一轮

8、函数-function
1、函数的声明
function 函数名(参数列表){
函数体
}
1、参数列表
参数列表，允许声明0或多个参数，多个参数的话使用，逗号隔开，没有默认参数
2、返回值
返回值是可选的，如果需要返回值的话，通过return 值；进行返回
2、函数调用
在任意JS的合法位置处，都允许做函数调用
函数名(参数列表);
3、由ES提供的函数（内嵌函数）
在网页中无需声明，就可以直接使用
parseInt（）/parseFolat（）/Number（）
1、isNaN（value）：判断value是否为非数字，返回true表示不是数字，返回false表示是数字
示例：
1、isNaN（1）//false
2、isNaN（‘1’）//false
3、isNaN（‘hello’）//true
2、eval（）：执行由字符串来表示的JS代码
4、局部变量与 全局变量
1、全局变量：一经声明，在JS的任何位置处都能使用的变量就是全局变量
1、在<script></script>内部在函数体外边
2、或则在函数内部不适用var声明的变量也是全局变量（不建议使用）
2、局部变量：使用var关键字，并且声明在function中的变量
局部变量的作用于只在声明的函数内，出了函数就不能使用

9、数组（在python中称为列表）
1、什么是数组
数组（Array）是一个用于保存批量数据的结构，即一个变量中允许保存多个数据。是按照线性结构的方式来保存数据的
说明：字符串与数组相加，会将数组准变为字符串
示例：
‘names’+[‘张无忌‘,‘张翠山‘,‘张三丰‘,‘金毛狮