不需编译，由浏览器解释运行来控制网页的行为
开发用ES6版本需要webpack打包为ES5版本才能被现在的浏览器支持
入门
注意：JavaScript标签要成对出现：<>和</>
JavaScript标签的外部引入和内部引入
alert作用：弹出窗口显示内容
支持条件语句，输出语句，定义变量
严格区分大小写，支持注释：//和/**/
浏览器实现断点
点击行数设置断点，刷新页面开始调试，右侧列表顶部有跳转下一行的按钮
数据类型：数值，文本，图形，音频，视频
变量名不能以数字和#开头，可以为中文
number：实数（包括小数和整数，正数和负数），大数用科学计数法（1.123e3），当数值太大输出时为“Infinity”表示无限大，输出“NaN”表示不是一个数字
布尔值，逻辑运算符：和Java相同
字符和字符串：都用’'或“”括起来
比较运算符：
1、赋值：=
2、相等：（和Java不同，只需值（number）一样允许类型不同）
3、绝对相等：=（等同于java的 ==），所以判断相不相等应该用三个等于号而不能用两个等于号
不相等则在前面加上!
注意：
1️⃣ NaN和所有的数值都不绝对相等（包括它自己），只能通过 isNaN(参数) 方法来判断一个数是否为NaN
2️⃣ 要避免出现浮点数之间的比较（因为JavaScript存在精度问题），真要比较应该利用：console.log(Math.abs(a-b)<0.000000001)
null表示空，undefined表示未定义
数组：可以用 var 或 new 创建数组，输出数组用console.log(参数写法和Java相同)，下面是数组越界的时输出的结果
对象
取出对象的成员：person.name
严格检查模式 strict（ES5）
将 'user strict'; 写在JavaScript标签的第一行，可以对下面的代码附加严格检查，建议一定写上
要设置好IDEA的设置👇
字符串
ES6新特性：支持模板字符串👇
字符串长度：字符串名.length
不能修改字符串的某一索引位置上的字符，就算修改了，该字符串也不会发生改变
字符串的一些方法：
数组
JavaScript也支持多维数组（这里省略不讲）
对象
JavaScript中所有的键都是字符串，值为任意对象
集合
流程控制
函数
函数定义：不要求一定要有返回值
后端风格：
function 函数名(参数列表){
方法体
}
调用时：函数名(参数列表)
前端风格：将函数结果返回给定义的变量
var 变量名 = function(参数列表){
方法体
}
调用时：变量名(参数列表)
JavaScript中不允许函数重载，如果定义了同名的函数，则后面的函数会覆盖前面的函数（不论参数列表是否一致）
调用函数
若调用时发现没有定义该函数，则结果为NaN
调用函数时可以传入任意个数的参数，也可以不传入参数
如何判断变量是否为目标类型：typeof 变量或值 !== '类型' ，其中类型可以为number等等
可以用语句：throw '字符串'; 抛出内容为此字符串的异常信息，常用于控制语句中
arguments：是函数的所有参数组成的数组，类似于Java中的静态主函数的参数：args，故可以用遍历获得arguments中的所有参数
rest：也是用于存放参数的数组，因为JavaScript支持任意个参数，所以ES6开始使用 rest ，
在函数声明时，在其参数列表末尾加上 ,...rest
作用：
形参列表为(a,b,c,…rest)时，rest 的元素为除了a,b,c之外的其他所有参数，同理，rest中存放的参数其实就是省略号：… 中的所有参数
变量的作用域
我们习惯写法是：变量的定义和赋值分开写，且所有的变量的定义都放在最前面，更加安全且可读性更好
全局变量就是直接定义在Script标签中的变量或者函数（函数可以作为变量，详见上方第二种函数定义，alert函数也是window中的全局变量），全局变量会被绑定在全局对象：window 中，即 window.全局变量或全局函数 是全局变量的完整写法
唯一全局变量：当要避免多个程序员同时使用windo中的全局变量以避免出现bug时，就需要用到唯一全局变量，作用：将程序员各自定义的变量放入自己定义的唯一空间
局部作用域：ES6 新增了let命令，用来声明局部变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，而且有暂时性死区的约束。
在ES6之前，我们都是用var来声明变量，而且JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。ES6开始有了 let 关键字，由于解决局部作用域冲突，为了实现局部作用域，所以建议使用 let 定义
function a(){
for(var i = 0; i<100 ; i++){}
console.log(i);
}
结果：能输出i，因为var指定的变量可以在全局中使用，显然不符合局部作用域的规范
function a(){
for(let i = 0; i<100 ; i++){}
console.log(i);
}
结果：不能输出i且报错
常量
ES6之前没有定义常量的方式，只能是不去修改一个变量的值从而把它当做常量使用
ES6就有了关键字：const
定义常量：const 常量名 = 值;
方法
JavaScript中方法的调用形式与Java一样
apply
使用apply可以改变具有给定this值的函数的 this 的指向，apply(参数1,参数2) 第一个参数为this值，第二个参数为参数数组，把apply()写在目标函数的后面：getAge.apply( cat , 参数数组 ); 相当于 cat.apply(参数数组)
内部对象
双数行为结果👇
Date
JSON
下面的js对象和json对象的转换与前后端交互有关，不过下面的转换方法比较原始，SpringMVC中会使用更高级的方式
面向对象编程
创建对象
关键字：Class 是在ES6之后引入的
ES6之前，给一个对象添加一个新的方法：
对象名.prototype.新添加进去的方法名 = function () {
方法体
}
//以后此对象就可以调用新添加进去的方法使用该方法：此对象名.方法名
ES6之后：可以用 Class 创建对象👇
继承见 原型链与JavaScript实现继承的6种方式【转载】
原型链是一个首尾相连的圈
操作BOM对象
Navigator 和 screen 略
window
location
document
登陆淘宝时，淘宝网站通过JavaScript劫持cookie实现：你的天猫获得了刚刚登陆淘宝时的cookie从而自动登录天猫👇
<script src = "aa.js"></script>
在服务器端可以设置cokkie：HTTPOnly使得cookie不会被劫持
history
操作DOM节点（用于操控CSS）
插入节点
操作表单（用于提交信息）
提交表单
jQuery
包含许多JavaScript的方法的库
导入jQuery
头部内：<script src="jQuery包的相对路径"></sriipt>
或者
头部内：<script src="jQuery CDN在线连接"></sriipt>
使用jQuery
公式：$(选择器).动作，关于这个公式的实际应用可以查阅 在线API文档 ，文档里对每种选择器的jQuery用法都列举了代码示例
注意：每个 $(选择器).动作 都要放在 $(function())({}); 的{}内才能实现响应， $(function())({}); 的完整写法是 $(document).ready.(function(){});
$(function())({}); 用于页面加载完成后响应页面的动态
事件：
常用的鼠标事件：mousedown——按下鼠标，mouseleave——松开按键，mousemove——移动鼠标，mouseove——点击结束
案例👇
效果👇
jQuery 对象的本质是 dom 对象的数组 + jQuery 提供的一系列功能函数。jQuery 对象不能使用 DOM 对象的属性和方法，DOM 对象也不能使用 jQuery 对象的属性和方法
参数：选择器 的常见语法及操作DOM
传入参数为 [ 函数 ] 时：表示页面加载完成之后。相当于 window.onload = function(){}
传入参数为 [ HTML 字符串 ] 时：会对我们创建这个 html 标签对
传入参数为 [ 选择器字符串 ] 时：
$(“#id 属性值”); id 选择器，根据 id 查询标签对象
$(“标签名”); 标签名选择器，根据指定的标签名查询标签对象
$(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象
传入参数为 [ DOM 对象 ] 时：会把这个 dom 对象转换为 jQuery 对象
html() 它可以设置和获取起始标签和结束标签中的内容。
text() 它可以设置和获取起始标签和结束标签中的文本。
val() 它可以设置和获取表单项的 value 属性值。
val 方法同时设置多个表单项的选中状态：
$("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);
attr() 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等
attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj
prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等
基本选择器
$(function () {
//1.选择 id 为 one 的元素 "background-color","#bbffaa"
$("#btn1").click(function () {
// css() 方法 可以设置和获取样式
$("#one").css("background-color","#bbffaa");
});
//2.选择 class 为 mini 的所有元素
$("#btn2").click(function () {
$(".mini").css("background-color","#bbffaa");
});
});
层次选择器
$(document).ready(function(){
//1.选择 body 内的所有 div 元素
$("#btn1").click(function(){
$("body div").css("background", "#bbffaa");
});
//2.在 body 内, 选择与body构成父子关系的div元素（即div和其他标签的子div元素不会被选中）
$("#btn2").click(function(){
$("body > div").css("background", "#bbffaa");
});
//3.选择 id 为 one 的下一个 div 元素
$("#btn3").click(function(){
$("#one+div").css("background", "#bbffaa");
});
//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
$("#btn4").click(function(){
$("#two~div").css("background", "#bbffaa");
});
});
基本的过滤选择器
$(document).ready(function(){
$("#btn1").click(function(){
//1.选择第一个 div 元素
$("div:first").css("background", "#bbffaa");
});
$("#btn2").click(function(){
//2.选择最后一个 div 元素
$("div:last").css("background", "#bbffaa");
});
$("#btn3").click(function(){
//3.选择class不为 one 的所有 div 元素
$("div:not(.one)").css("background", "#bbffaa");
});
$("#btn4").click(function(){
//4.选择索引值为偶数的 div 元素
$("div:even").css("background", "#bbffaa");
});
$("#btn5").click(function(){
//5.选择索引值为奇数的 div 元素
$("div:odd").css("background", "#bbffaa");
});
$("#btn6").click(function(){
//6.选择索引值为大于 3 的 div 元素
$("div:gt(3)").css("background", "#bbffaa");
});
$("#btn7").click(function(){
//7.选择索引值为等于 3 的 div 元素
$("div:eq(3)").css("background", "#bbffaa");
});
$("#btn8").click(function(){
//8.选择索引值为小于 3 的 div 元素
$("div:lt(3)").css("background", "#bbffaa");
});
$("#btn9").click(function(){
//9.选择所有的标题元素
$(":header").css("background", "#bbffaa");
});
$("#btn10").click(function(){
//10.选择当前正在执行动画的所有元素
$(":animated").css("background", "#bbffaa");
});
$("#btn11").click(function(){
//11.选择没有执行动画的最后一个div
$("div:not(:animated):last").css("background", "#bbffaa");
});
});
内容过滤选择器
$(document).ready(function(){
//1.选择 含有文本 'di' 的 div 元素
$("#btn1").click(function(){
$("div:contains('di')").css("background", "#bbffaa");
});
//2.选择不包含子元素(或者文本元素) 的 div 空元素
$("#btn2").click(function(){
$("div:empty").css("background", "#bbffaa");
});
//3.选择含有 class 为 mini 元素的 div 元素
$("#btn3").click(function(){
$("div:has(.mini)").css("background", "#bbffaa");
});
//4.选择含有子元素(或者文本元素)的div元素
$("#btn4").click(function(){
$("div:parent").css("background", "#bbffaa");
});
});
属性过滤选择器
$(function() {
//1.选取含有 属性title 的div元素
$("#btn1").click(function() {
$("div[title]").css("background", "#bbffaa");
});
//2.选取 属性title值等于'test'的div元素
$("#btn2").click(function() {
$("div[title='test']").css("background", "#bbffaa");
});
//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
$("#btn3").click(function() {
$("div[title!='test']").css("background", "#bbffaa");
});
//4.选取 属性title值 以'te'开始 的div元素
$("#btn4").click(function() {
$("div[title^='te']").css("background", "#bbffaa");
});
//5.选取 属性title值 以'est'结束 的div元素
$("#btn5").click(function() {
$("div[title$='est']").css("background", "#bbffaa");
});
//6.选取 属性title值 含有'es'的div元素
$("#btn6").click(function() {
$("div[title*='es']").css("background", "#bbffaa");
});
//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
$("#btn7").click(function() {
$("div[id][title*='es']").css("background", "#bbffaa");
});
//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
$("#btn8").click(function() {
$("div[title][title!='test']").css("background", "#bbffaa");
});
});
元素筛选
$(function(){
//1.对表单内 可用input 赋值操作
$("#btn1").click(function(){
// val()可以操作表单项的value属性值
// 它可以设置和获取
$(":text:enabled").val("我是万能的程序员");
});
//2.对表单内 不可用input 赋值操作
$("#btn2").click(function(){
$(":text:disabled").val("管你可用不可用，反正我是万能的程序员");
});
//3.获取多选框选中的个数 使用size()方法或length获取选取到的元素集合的元素个数
$("#btn3").click(function(){
alert( $(":checkbox:checked").length );
});
//4.获取多选框，每个选中的value值
$("#btn4").click(function(){
// 获取全部选中的复选框标签对象
var $checkboies = $(":checkbox:checked");
// 老式遍历
// for (var i = 0; i < $checkboies.length; i++){
// alert( $checkboies[i].value );
// }
// each方法是jQuery对象提供用来遍历元素的方法
// 在遍历的function函数中，有一个this对象，这个this对象，就是当前遍历到的dom对象
$checkboies.each(function () {
alert( this.value );
});
});
//5.获取下拉框选中的内容
$("#btn5").click(function(){
// 获取选中的option标签对象
var $options = $("select option:selected");
// 遍历，获取option标签中的文本内容
$options.each(function () {
// 在each遍历的function函数中，有一个this对象。这个this对象是当前正在遍历到的dom对象
alert(this.innerHTML);
});
});
})
更多用法详见jQuery的API文档
案例1
案例2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
select {
width: 100px;
height: 140px;
}
div {
width: 130px;
float: left;
text-align: center;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 页面加载完成
$(function () {
//select:eq(0)是左边的框（此select标签在body中的index为0）
//select:eq(1)是右边的框（此select标签在body中的index为1）
// 第一个按钮 【选中添加到右边】
$("button:eq(0)").click(function () {
//选择左边的框中被选中的option
$("select:eq(0) option:selected").appendTo($("select:eq(1)"));
});
// 第二个按钮 【全部添加到右边】
$("button:eq(1)").click(function () {
$("select:eq(0) option").appendTo($("select:eq(1)"));
});
// 第三个按钮 【选中删除到左边】
$("button:eq(2)").click(function () {
$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
});
// 第四个按钮 【全部删除到左边】
$("button:eq(3)").click(function () {
$("select:eq(1) option").appendTo($("select:eq(0)"));
});
});
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt01">选项1</option>
<option value="opt02">选项2</option>
<option value="opt03">选项3</option>
<option value="opt04">选项4</option>
<option value="opt05">选项5</option>
<option value="opt06">选项6</option>
<option value="opt07">选项7</option>
<option value="opt08">选项8</option>
</select>
<button>选中添加到右边</button>
<button>全部添加到右边</button>
</div>
<div id="rigth">
<select multiple="multiple" name="sel02">
</select>
<button>选中删除到左边</button>
<button>全部删除到左边</button>
</div>
</body>
</html>
案例3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//删除用户的方法
function delA(){
//获取要删除员工的名字
var name = $(this).parents("tr").find("td:eq(0)").text();
//弹出一个确认框
var flag = confirm("确认删除"+name+"吗？");
if(flag){
//删除当前a所在的tr
$(this).parents("tr").remove();
}
//取消默认行为
return false;
}
//删除用户
//$("a").click(delA);
$("a").live("click" , delA);
//添加员工
$("#addEmpButton").click(function(){
//获取用户填写的内容
var name = $("#empName").val();
var email = $("#email").val();
var salary = $("#salary").val();
//创建tr
/*
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="#">Delete</a></td>
</tr>
*/
$("<tr></tr>").append("<td>"+name+"</td>")
.append("<td>"+email+"</td>")
.append("<td>"+salary+"</td>")
.append("<td><a href='#'>Delete</a></td>")
.appendTo("#employeeTable");
});
});
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="#">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="#">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="#">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS 样式操作
addClass() 添加样式
removeClass() 删除样式
toggleClass() 有就删除，没有就添加样式。
offset() 获取和设置元素的坐标。
jQuery 动画
基本动画
show() 将隐藏的元素显示
hide() 将可见的元素隐藏。
toggle() 可见就隐藏，不可见就显示。
以上动画方法都可以添加参数。
1、第一个参数是动画 执行的时长，以毫秒为单位
2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)
淡入淡出动画
fadeIn() 淡入（慢慢可见）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
fadeToggle() 淡入/淡出 切换
$(function(){
//显示 show()
$("#btn1").click(function(){
$("#div1").show(1000,alert($("#btn1").length));
});
//隐藏 hide()
$("#btn2").click(function(){
$("#div1").hide(1000);
});
//切换 toggle()
$("#btn3").click(function(){
$("#div1").toggle(1000);
});
//淡入 fadeIn()
$("#btn4").click(function(){
$("#div1").fadeIn(500);
});
//淡出 fadeOut()
$("#btn5").click(function(){
$("#div1").fadeOut(500);
});
//淡化到 fadeTo()
$("#btn6").click(function(){
$("#div1").fadeTo("slow",Math.random());
});
//淡化切换 fadeToggle()
$("#btn7").click(function(){
$("#div1").fadeToggle("slow","linear");
});
})
其他需要注意的
事件的冒泡
什么是事件的冒泡？
事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去
响应。
那么如何阻止事件冒泡呢？
在子元素事件函数体内，return false; 可以阻止事件的冒泡传递
javaScript 事件对象
事件对象，是封装有触发的事件信息的一个 javascript 对象。
我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。
如何获取呢 javascript 事件对象呢？
在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。
这个 event 就是 javascript 传递参事件处理函数的事件对象。
比如：
原生 javascript 获取 事件对象
window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
console.log(event);//会在控制台输出显示该事件对象包含的信息
}
}
jQuery 代码获取 事件对象
$(function () {
$("#areaDiv").click(function (event) {
console.log(event);
});
});
使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
//bind方法可以一次性绑定多个事件（用空格隔开）
$("#areaDiv").bind("mouseover mouseout",function (event) {
if (event.type == "mouseover") {
console.log("鼠标移入");
} else if (event.type == "mouseout") {
console.log("鼠标移出");
}
});
案例 事件 图片跟随
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
text-align: center;
}
#small {
margin-top: 150px;
}
#showBig {
position: absolute;
display: none;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#small").bind("mouseover mouseout mousemove",function (event) {
if (event.type == "mouseover") {
$("#showBig").show();
} else if (event.type == "mousemove") {
console.log(event);
$("#showBig").offset({
left: event.pageX + 10,
top: event.pageY + 10
});
} else if (event.type == "mouseout") {
$("#showBig").hide();
}
});
});
</script>
</head>
<body>
<img id="small" src="img/small.jpg" />
<div id="showBig">
<img src="img/big.jpg">
</div>
</body>
</html>
补充内容
blur
焦点处理主要包括focus（获取焦点）和blur（失去焦点）事件类型。所谓焦点，就是激活表单字段，使其可以响应键盘事件
当单击或使用Tab键切换到某个表单元素或超链接对象时，会触发该事件
注意：如果隐藏字段（< input type=“hidden” >），或者使用CSS的display和visibility隐藏字段显示，设置其获取焦点将引发异常
$(function () {
$("#username").blur(function () {
当光标跳到其他表单项时，blur事件就会触发
})
})
1860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
