3. JavaScript
3.1 JavaScript概述
JS 介绍：简称JS，是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果，用户交互及前后端的数据传输等。
JS 组成
1. 核心语法 -ECMAScript 规范了JS的基本语法
2. 浏览器对象模型 -BOM
Browser Object Model，提供了一系列操作浏览器的方法
3. 文档对象模型 -DOM
Document Object Model ，提供了一系列操作的文档的方法
3.2 使用方式
1. 元素绑定事件
事件 ：指用户的行为（单击，双击等）或元素的状态（输入框的焦点状态等）常用事件：onclick (单击事件)
事件处理：元素监听某种事件并在事件发生后自动执行事件处理函数。
语法 ：将事件名称以标签属性的方式绑定到元素上，自定义事件处理。
例如：
<!--实现点击按钮在控制台输出-->
<button onclick="console.log('Hello World');">点击</button>
2. 文档内嵌
使用<script type="text/javascript"></script>标签书写 JS 代码
语法 ：
<script>
alert("网页警告框");
</script>
注意 ：<script></script>标签可以书写在文档的任意位置，书写多次，一旦加载到script标签就会立即执行内部的JS代码，因此不同的位置会影响代码最终的执行效果。通常放在head中的js会在点击等事件发生时调用，而放在body中的js往往是为了生成一定的内容。
3. 外部链接
创建外部的JS文件 XX.js，在HTML文档中使用<script src=""></script>引入
例如：
<script src="index.js"></script>
注意 ：<script></script>既可以实现内嵌 JS 代码，也可以实现引入外部的 JS 文件，但是只能二选一。
3.3 基础语法
3.3.1 语法规范
1. JS是由语句组成,语句由关键字,变量,常量,运算符,方法组成。分号可以作为语句结束的标志,也可以省略；
2. JS严格区分大小写；
3. 注释语法
单行注释使用 //
多行注释使用 /* */
3.3.2 JS的变量与常量
变量：
1. 作用 : 用于存储程序运行过程中可动态修改的数据
2. 语法 : 使用关键var声明,自定义变量名
举例：
var a; //变量声明
a = 100; //变量赋值
var b = 200; //声明并赋值
var m,n,k; //同时声明多个变量
var j = 10,c = 20; //同时声明并赋值多个变量
3. 命名规范 :
变量名,常量名,函数名,方法名自定义,可以由数字,字母,下划线,$组成,禁止以数字开头
禁止与关键字冲突(var const function if else for while do break case switch return class)
变量名严格区分大小写
变量名尽量见名知意,多个单词组成采用小驼峰,例如："userName"
4. 使用注意 :
变量如果省略var关键字,并且未赋值,直接访问会报错
变量使用var关键字声明但未赋值,变量初始值为undefined
变量省略var关键字声明,已被赋值,大多可正常使用，某些浏览器严格条件下会报错，不建议这么做。
3.3.3 基本数据类型
1. number 数值类型
整数：var a = 100;
小数：var m = 1.2345;
2. string 字符串类型
由一个或多个字符组成,使用""或''表示,每一位字符都有对应Unicode编码
例如：var s = "100";
3. boolean 布尔类型
只有真和假两个值，布尔值与number可互相转换。True：1，false：0
例如：
var isSave = true;
var isChecked = false;
4. undefined (程序返回的值)：特殊值,变量声明未赋值时显示undefined
var a;
console.log(a);//undefined
5. null 空类型 (主动使用的）
解除对象引用时使用null,表示对象为空
6. 数组类型
var arr = [1,2,3,4,5];
console.log(arr[0]);
7. 对象
var obj = {one:1,two:2}; // 注意键不必加引号也可以
console.log(obj.one);
console.log(obj["one"]);
3.3.4 数据类型转换
不同类型的数据参与运算时,需要转换类型
* 强制类型转换
1. 转换字符串类型，方法 : toString()，返回转换后的字符串
例如：
var a = 100;
a = a.toString(); //"100"
var b = true;
b = b.toString(); //"true"
2. 转换number类型，方法 ： Number(param)
参数是要进行数据类型转换的变量或值，返回转换后的结果:
如果转换成功,返回number值；
如果转换失败,返回NaN,(Not a Number)，只要数据中存在非number字符,一律转换失败，返回 NaN
* 隐式类型转换（自动转换）
当字符串与其他数据类型进行"+"运算时,表示字符串的拼接，不再是数学运算，程序会将非字符串类型的数据转换成字符串之后进行拼接，结果为字符串
3.3.5 运算符
* 赋值运算符（将右边的值赋给左边变量）： =
* 算数运算符：+ 、- 、* 、/ 、%
* 复合运算符：+= 、-= 、*= 、/= 、%=
* 自增或自减运算符：++、--
变量的自增和自减指的是在自身基础上进行 +1或-1 的操作。需注意：如果自增或自减运算符与其他语句结合使用时，做前缀表示先进行自增/减++/--,再使用自增/减后的值参与语句，如果做后缀，就先结合其他语句，再进行自增/减++ / --
* 关系运算符/比较运算符：< 、> 、>= 、<=、 ==(相等)、!=(不相等)、 ===(全等)、!==(不全等)
1. 关系运算符用来判断表达式之间的关系,结果永远是布尔值 true/false
2. 相等与全等
相等 : 不考虑数据类型,只做值的比较(包含自动类型转换)
全等 : 不会进行数据类型转换,要求数据类型一致且值相等为True
* 逻辑运算符
1. && 逻辑与 条件1&&条件2
表达式同时成立,最终结果才为true;
2. || 逻辑或 条件1||条件2
表达式中只要有一个成立,最终结果即为true;
3. ! 逻辑非 !条件
对已有表达式的结果取反
3.4 流程控制
作用：控制代码的执行顺序
3.4.1 分支/选择结构
1. if语句
if(条件1){
//条件1成立时执行的代码段
}else if(条件2){
//条件2成立时执行的代码段
}...else{
//条件不成立时执行的代码段
}
注意 : 除零值以外，其他值都为真，以下条件为假值false
if(0){}
if(0.0){}
if(""){} //空字符串
if(undefined){}
if(NaN){}
if(null){}
特殊写法 :只有if时{ }可以省略,一旦省略，if语句只控制其后的第一行代码
If语句
If...else语句
If...else if ...else
if(条件){
代码块
}
if(条件){
代码块
}
else(条件){
代码块
}
if(条件){
代码块
}
else if(条件){
代码块
}
else(条件){
代码块
}
2. switch语句
switch(value){
case 值1 :
//value与值1匹配全等时,执行的代码段
break; //结束匹配
case 值2 :
//value与值2匹配全等时,执行的代码段
break;
case 值3 :
//value与值3匹配全等时,执行的代码段
break;
default:
//default关键字，匹配所有case失败后默认执行的语句
break;
}
使用 :
1. switch语句用于值的匹配，case用于列出所有可能的值；只有switch()表达式的值与case的值匹配全等时，才会执行case对应的代码段
2. break用于结束匹配，不再向后执行；，break一旦省略，会从当前匹配到的case开始，继续向后执行所有的代码语句，直至结束或碰到break跳出
3. default表示所有case都匹配失败的情况，一般写在末尾，做默认操作
4. 多个case共用代码段
case 值1:
case 值2:
case 值3:
//以上任意一个值匹配全等，都会执行的代码段
3.4.2 循环结构
作用：根据条件，重复执行某段代码
1. while循环：循环先判断循环条件，条件成立才执行循环体
定义循环变量;
while(循环条件){
条件满足时执行的代码段
更新循环变量;
}
2. do-while循环：循环不管条件是否成立，先执行一次循环体
do{
循环体;
更新循环变量
}while(循环条件);
3. for 循环
for(定义循环变量;循环条件;更新循环变量){
循环体;
}
for循环
for...in
for(语句1；语句2；语句3){
循环体;
}
for(var in 对象){
循环体;
}
语句1：循环变量，在循环开始前执行，可选，可为任意个数
语句2：循环条件
语句3：更新循环变量，增加变量的值
var声明变量，
循环控制 :
1. break 强制结束循环
2. continue 结束当次循环，开始下一次循环
循环嵌套 :在循环中嵌套添加其他循环
break
continue
跳出循环体，用于for、while、switch
跳过该条件执行下一次循环
3.5 函数
作用：封装一段待执行的代码
3.5.2 语法
//函数声明，函数在调用时，参数的顺序必须与定义时一致
function 函数名(var1,var2){
函数体
//执行return语句会直接退出函数
return 返回值;
}
//函数调用
函数名(参数列表);
3.5.3 使用
函数名自定义，见名知意，命名规范参照变量的命名规范。普通函数以小写字母开头，用于区分构造函数(构造函数使用大写字母开头，定义类)
3.5.4 匿名函数
匿名函数：省略函数名的函数。语法为：
- 匿名函数自执行
(function (形参){
代码块
})(实参);
- 定义变量接收匿名函数
var fn = function (){
代码块
};
fn(); //函数调用
//定义一个匿名函数
(function (){
代码块
});
//执行代码
(function (){
代码块
})()；
3.5.5 作用域
JavaScript 中作用域分为全局作用域和函数作用域，以函数的{ }作为划分作用域的依据
1. 全局变量和全局函数
只要在函数外部使用 var 关键字定义的变量或函数，都是全局变量和全局函数，在任何地方都可以访问
2. 局部变量/局部函数
在函数内部定义的变量或函数为局部变量/局部函数，只能在当前作用域中使用，外界无法访问
3. 作用域链
局部作用域中访问变量或函数，首先从当前作用域中查找，当前作用域中没有的话，向上级作用域中查找，直至全局作用域
3.6 DOM节点操作
DOM全称为 “Document Object Model”，文档对象模型，提供操作HTML文档的方法。（注：每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。）
3.6.1 节点对象
JavaScript 会对 html 文档中的元素、属性、文本进行封装，统称为节点对象，获取节点对象后可以通过方法操作相关的属性内容。
元素节点 ( 用于操作标签）
方法
描述
document.getElementById('id’)
通过元素 id 来查找元素
document.getElementsByTagName('name’)
通过标签名来查找元素
document.getElementsByClassName('name')
通过类名来查找元素
3.6.2 操作标签的属性和内容
1. 元素节点对象提供了以下属性来操作元素内容
innerHTML : 读取或设置元素文本内容,可识别标签语法
innerText : 读取或设置元素文本内容,不能识别标签语法
2. 操作 DOM 树中的属性值，用于操作标签属性
element.id = "d1"; //set 方法 注意属性值都要写成字符串形式
console.log(element.id); //get 方法
elem.getAttribute("attrname");//根据指定的属性名返回对应属性值
elem.setAttribute("attrname","value");//为元素添加或修改属性,参数为属性名和属性值
elem.removeAttribute("attrname");//移除指定属性
3. 操作元素样式：
为元素添加 id、class属性，或操作元素的行内样式，访问元素节点的style属性，获取样式对象；样式对象中包含CSS属性，使用点语法操作。
elem.style = "width:300px;";
elem.style.color = "white";
elem.style.fontSize = "20px";
注意 :
- 属性值以字符串形式给出，单位不能省略
- 如果css属性名包含连接符，使用JS访问时，一律去掉连接符,改为驼峰， font-size -> fontSize
====================================================================
4. jQuery
4.1 介绍
jQuery 由 John Resig 于 2006 年创建。它旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax。十多年来，jQuery 一直是世界上最受欢迎的 JavaScript 库。
优点：容易学习、简化了JavaScript编程书写、使用方便
4.2 使用
4.2.1 引入
需先引入jquery文件，才能使用jquery语法
1. CDN引入： 需要有网（备用）
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
2. 本地文件（常用）
<script src="jquery-1.11.3/jquery.min.js"></script>
4.2.2 基本语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。基础语法是：$(selector).action()
- 美元符号定义 jQuery 标识
- 选择符（selector）用于查询HTML元素。可以创建元素节点或将原生JavaScript对象转换为jquery对象
- jQuery 的action()执行对元素的操作，jQuery定义了很多操作方法
例如 :
// 节点选择的特点，与样式选择器一致
$("h1").hide() 隐藏h1元素节点
$("#d1").show() 显示id="d1"的元素
$(".c1").click() 点击class="c1"的元素
$("body,h1,p").hide() 同时隐藏多个元素
4.2.3 JavaScript对象与jQuery对象转换
原生JavaScript对象与jQuery对象的属性和方法不能混用。可以根据需要，互相转换 :
1. 原生JavaScript转换jQuery对象
$(原生对象)，返回 jQuery 对象
2. jQuery对象转换原生JavaScript对象
方法一 : 根据下标取元素,取出即为原生对象
var div = $("div")[0];
方法二 : 使用jQuery的get(index)取原生对象
var div2 = $("div").get(0);
4.2.4 jQuery选择器
jQuery通过选择器获取元素，使用格式为： $("选择器")
1. 基础选择器
标签选择器：$("div")
ID 选择器：$("#d1")
类选择器：$(".c1")
群组选择器：$("body,p,h1")
2. 层级选择器
后代选择器： $("div .c1")
子代选择器： $("div>span")
3. 过滤选择器，需要结合其他选择器使用。
:first 匹配第一个元素 例:$("p:first")
:last 匹配最后一个元素 例:$("p:last")
:odd 匹配奇数下标对应的元素
:even 匹配偶数下标对应的元素
:eq(index) 匹配指定下标的元素
:lt(index) 匹配下标小于index的元素
:gt(index) 匹配下标大于index的元素
:not(选择器)否定筛选,除()中选择器外,其他元素
4.2.5 操作元素内容
html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法
text() //设置或读取标签内容,等价于innerText,不能识别标签
val() //设置或读取表单元素的值,等价于原生value属性
4.2.6 操作标签属性
1. attr("attrName","value")：设置或读取标签属性
2. prop("attrName","value")：设置或读取标签属性
注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,而对于自定义的属性则使用attr才能获取
3. removeAttr("attrName")：移除指定属性
4. 针对类选择器,提供操作class属性值的方法
addClass("className") //添加指定的类名
removeClass("className")//移除指定的类型,如果参数省略,表示清空class属性值
toggleClass("className")//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加
4.2.7 元素的创建,添加,删除
1. 作为子元素添加
生成一个新的jQ元素节点对象： var newObj = $("<h1></h1>");
$obj.append(newObj); //在$obj的末尾添加子元素newObj
$obj.prepend(newObj); //作为第一个子元素添加至$obj中
$obj.after(newObj); //在$obj的后面添加新元素
$obj.before(newObj); //在$obj的前面添加新元素
2. 移除元素 ：$obj.remove(); //移除$obj
4.2.8 操作标签样式
css("属性名","属性值") //设置行内样式
css(JS对象) //设置一组CSS样式 JS对象标记
JSON格式举例 :
{
"width":"200px",
"height":"200px",
"color":"red"
}
新元素创建并设置属性样式：使用$("标签语法")，返回创建好的元素:
var div = $("<div></div>"); //创建元素
div.html("动态创建").attr("id","d1").css("color","red"); //链式调用，设置内容和属性
var h1 = $("<h1 id='d1'>一级标题</h1>"); //创建的同时设置内容，属性和样式
4.2.9 jQuery函数
1. $(selector).hide() 隐藏节点
2. $(selector).show() 显示节点
3. $(selector).each() 方法规定，为每个匹配元素规定运行的函数。
$(selector).each(function(index,element){})
index* ：选择器的 index 位置
element ： 当前的元素
4. $.each()函数是框架提供的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理
$.each(Object, function(index, data){});
index ： 选择器的 index 位置
data ： 当前的数据
4.2.10 jQuery事件处理
1. 文档加载事件
原生JavaScript 方法:
window.onload = function (){
//文档加载完毕后执行
}
jQuery方法:
$(function(){
//文档加载完毕后执行
})
2. 事件绑定方式
//on("事件名称"，function)
$("div").on("click",function(){});//新版本使用的多些
//bind("事件名称",function)
$("div").bind("click",function(){});//1.6-1.8间的版本
//事件名作为方法名
$("div").click(function(){}); 常用事件
jQ中的常用事件与dom类似，写法上就是把dom时间名称前面的on去掉就可以了，比如 onclick 变成 click，onmouseover变成mouseover。
4.3 应用举例
* 页面元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery应用</title>
<script src="jquery.min.js"></script>
</head>
<body>
<form action="">
<select name="" id="city"></select>
<select name="请选择" id="area"></select>
</form>
</body>
</html>
* 数据部分
var arr = [
{
"name":"请选择",
"value":0,
"child":[
{
"cname":"请选择",
"cvalue":0
}
]
},
{
"name":"北京",
"value":"bj",
"child":[
{
"cname":"海淀",
"cvalue":"b1"
},
{
"cname":"朝阳",
"cvalue":"b2"
}
]
},
{
"name":"上海",
"value":"sh",
"child":[
{
"cname":"静安",
"cvalue":"s1"
},
{
"cname":"崇明",
"cvalue":"s2"
}
]
}
]
* 绑定城市
$.each(arr,function(i,o){
$("#city").append(`<option value="${o.value}">${o.name}</option>`)
})
* 绑定地区
$("#area").append(`<option value='0'>请选择</option>`)
// 当对象发生变化时触发 onchange
$("#city").on("change",function(){
$("#area option").remove() // 删除元素
$.each(arr,function(i,o){
if(o.value == $("#city").val()){
$.each(o.child,function(i,o){
$("#area").append(`<option value="${o.cvalue}">${o.cname}</option>`)
})
}
})
})
附录：js事件
属性
发生事件的场景
onabort
图像加载被中断
onerror
当加载文档或图像时发生某个错误
onload
某个页面或图像被完成加载
onkeydown
某个键盘的键被按下
onkeypress
某个键盘的键被按下或按住
onkeyup
某个键盘的键被松开
onfocus
元素获得焦点
onblur
元素失去焦点
onresize
窗口或框架被调整尺寸
onselect
文本被选定
onchange
用户改变域的内容
onclick
鼠标点击某个对象
ondblclick
鼠标双击某个对象
onmousemove
鼠标被移动
onmouseover
鼠标被移到某元素之上
onmouseout
鼠标从某元素移开
onmousedown
某个鼠标按键被按下
onmouseup
某个鼠标按键被松开
onreset
重置按钮被点击
onsubmit
提交按钮被点击
onunload
用户退出页面
