http://jquery.cuishifeng.cn/callbacks.add.html 在线手册
1、介绍和基本使用
1.1、javascript概述
-
JavaScript历史
要了解JavaScript，我们首先要回顾一下JavaScript的诞生。在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。为什么起名叫JavaScript？原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推广，但事实上JavaScript除了语法上有点像Java，其他部分基本上没啥关系。
1.2、嵌入页面的方式
HTML 中的脚本必须位于 标签之间。脚本可被放置在 HTML 页面的
和 部分中。1、行间事件（主要用于事件）
2、页面script标签嵌入
3、外部引入
2、基本语法
1、注释
我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。
- 单行注释：以 // 开头。
- 多行注释：以 /* 开始，以 */ 结尾。
2、变量
-
变量命名：
- 变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
- 驼峰式命名
-
变量声明
javaScript中变量可以先声明后赋值，
var x;
x = 20;
也可以在声明的时候赋值。
var y=3;
同时给多个变量赋值
var a = 100;b = 200,c = 300;
3、数据类型：
字符串、数字、布尔、Null、Undefined、数组
-
number 数字类型
var y=3; -
string 字符串类型
var st='python' -
boolean 布尔类型
-
只有 true 或 false两个值
-
-
undefined 类型，
-
变量声明未初始化，它的值就是undefined
var unde -
-
null类型，
-
表示空对象，类似于python中的None
var tr = null -
-
arry 数组
-
数值类似于python中的列表，可以通过下标取值
//创建数组 var skill= Array("html","css","js"); alter(skill[0]); -
length属性：获取数组长度：
alter(skill.length) -
pop() 方法从数组中删除最后一个元素
skill.pop() -
push() 方法（在数组结尾处）向数组添加一个新的元素
skill.push('jquery')1
-
4、运算符
-
算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
-
赋值运算符：=、 +=、 -=、 *=、 /=、 %= 、++
-
条件运算符：、=、>、>=、<、<=、!=、
-
逻辑运算符：&&(而且 )、||(或者 )、!(否 )
5、条件语句
通过条件来控制程序的走向，就需要用到条件语句。
-
if 语句
var a = 199; if(a>200){ alert('大于200'); } -
else 语句
var a = 199; if(a>200){ alert('大于200'); } else { alert(a); } -
else if 语句
-
类似python中的 elif
var a = 199; if(a>200){ alert('大于200'); } else if(a>100){ alert('大于100') } else { alert(a); } -
-
switch语句
switch(表达式) { case n1: 代码块 break; case n1: 代码块 break; default: 默认代码块 }-
计算一次 switch 表达式
-
把表达式的值与每个 case 的值进行对比
-
如果存在匹配，则执行关联代码
-
遇到 break 关键词，它会跳出 switch 代码块。
-
case 匹配不存在时，运行default 的代码：
-
案例
var a =0 ; var b = 1; switch (a+b) { case 1: alert(1); break; case 2: alert(2); break; default: alert(3) }
-
6、函数
-
函数定义：
-
定义函数的关键词 function，函数内的代码块，包裹在花括号中：
// 函数的定义 使用function function func() { alter(999) } // 函数调用 func() -
提示：JavaScript 对大小写敏感。关键词 function 必须是小写的
-
-
函数参数：
function addNumber(var1,var2) { alert(var1 + var2;); } addNumber(11,22) -
函数返回值：
-
使用 return 来返回值。在使用 return 语句时，函数会停止执行，并返回指定的值。
function addNumber(var1, var2) { return var1 + var2; } var res = addNumber(11,222); alert(res)
-
7、对象
-
创建对象
对象由花括号分隔。在括号内部，
-
方式一：
objA = new Object();-
方式二：类式于python中的字典，
var objA={}; -
-
对象属性
-
对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var objA={name : "python",age : 18,id :123}; -
创建对象属性声明可横跨多行：
var objA={ name : "python", age : 18, id :123 };
-
-
对象方法
-
对象方法是作为属性来存储的函数。
var objC = { // 创建对象 ：方式3 name: 'abc', age: 19, fun: function (var1,var2) { alert(var1); alert(var2); alert(this.age * 2); } }; objC.fun(111,222)
-
8、循环
-
while循环
while（条件语句){ 循环体 }-
案例循环弹出1-5
var 1 =0; while (i<=5){ alert(i); i++ } -
a++ ：的含义等价——> a+=1
-
-
for 循环
for (语句1,语句2，语句3 ){ 循环体代码 }-
语句1：在循环开始之前执行
-
语句2：循环条件（成立则执行循环体）
-
语句3：每一轮循环之后执行的语句
-
案例：遍历数组
var aList = Array(11, 22, 33); for (var a = 0; a < aList.length; a++) { alert(aList[a]) }
-
-
for in 循环
for (x in arrayr){ 循环体代码 }-
遍历数组，x为数组的下标
-
遍历对象，x为对象的属性
-
案例:遍历数组
var aList = Array(11, 22, 33); for (x in aList) { alert(aList[x]); }-
案例：遍历对象
var objC = {name: 'abc', age: 19}; // 遍历对象 for (x in objC){ alert(x); alert(objC[x]); } -
3、JS操作页面
-
DOM简介
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
[图片上传失败...(image-1354e7-1567523677953)]
-
节点树中的节点彼此拥有层级关系。
-
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）
-
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- 如何改变 HTML 元素的内容 (innerHTML)
- 如何改变 HTML 元素的样式 (CSS)
- 如何对 HTML DOM 事件对做出反应
- 如何添加或删除 HTML 元素
1、获取页面标签
1、获取标签的方式
通常，通过 JavaScript操作 HTML 元素,可以使用内置对象document的方法来找到该标签。。
-
通过 id 找到 HTML 元素（常用）
- document.getElementById（）
-
通过标签名找到 HTML 元素
-
获取出来的是列表
getElementsByTagName()
-
-
通过类名找到 HTML 元素（通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。）
-
取出来的是列表
getElementsByClassName()
-
2、获取标签注意问题
的getElementById方法来获取页面上设置了id属性的元素，
这是div元素
上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，
解决方法：
- javascript放到页面最下边
这是div元素
-
放入window.onload触发的函数里面
window.onload函数在页面加载完后才执行，就不会出错了。
这是div元素
1
2、操作标签内容
-
innerHTML 属性
-
获取元素内容的最简单方法是使用 innerHTML 属性。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
-
-
读取节点文本
var odv1 = document.getElementById('box'); var content1 = odv1.innerHTML; alert(content1) -
写入节点文本
var odv1 = document.getElementById('box'); odv1.innerHTML = 哈哈哈;
3、修改标签属性
-
操作属性的方法
-
1、“.” 操作
-
2、“[ ]”操作
-
-
读取属性
// 读取属性 var odv1 = document.getElementById('input_user'); var idValue = odv1.id; var nameValue = odv1['name']; alert(idValue); alert(nameValue); -
修改属性
柠檬班 // 修改属性 a1 = document.getElementById('a1'); // a1.href = 'http://www.lemonban.com'; a1['href'] = 'http://www.lemonban.com'; -
注意点：操作class属性的时候，要将属性名字改为className
a1.className = 'hied'; -
修改css样式
-
方式一：节点.style.样式名
-
方式二：节点.style['样式名']
这个是div1//修改css样式 var odv1 = document.getElementById('dv01'); odv1.style.width = '300px'; odv1.style['height'] = '200px'; odv1.style.background = 'cyan'; -
4、onclick事件
-
onclick事件：点击了该 HTML 元素
-
事件属性添加 JavaScript 代码：
// 给div定义一个onclick事件，触发该事件的时候，调用该事件指定的函数
这个是div1
// 定义一个函数，负责弹框
function tank() {
alert('hello')
}
四、jquery
1、jquery介绍和引用
jQuery是目前使用最广泛的javascript函数库。
jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。
jquery的口号和愿望 Write Less, Do More（写得少，做得多）
-
官方网站：http://jquery.com/
-
在线手册：https://www.runoob.com/manual/jquery/
-
下载
-
版本下载：https://code.jquery.com/
-
-
引入页面
-
jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。
2、jquery选择器
jquery用法思想一 选择某个网页元素，然后对它进行某种操作
-
jquery基本的选择器
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。
// id选择器 $('#btn1') // 类选择器 $('.box1') // 标签选择器 $('li') // 层级选择器 $('#ul li span') // 属性选择器 $('input[name=user]') -
选择同胞和父辈元素
//选择div元素前面紧挨的同辈元素 $('div').prev(); //选择div元素之前所有的同辈元素 $('div').prevAll(); //选择div元素后面紧挨的同辈元素 $('div').next(); //选择div元素后面所有的同辈元素 $('div').nextAll(); //选择div的父元素 $('div').parent(); //选择div的所有子元素 $('div').children(); //选择div的同级元素 $('div').siblings(); //选择div内的class等于cs的元素 $('div').find('#cs li'); -
选择过滤
// 选择包含p元素的div元素 $('div').has('p'); //选择class不等于cs的div元素 $('div').not('.cs'); //选择class等于cs的div元素 $('div').filter('.cs'); //选择第6个div元素 $('div').eq(5); -
获取元素的索引值
有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取
var $li = $('.list li').eq(1); alert($li.index()); // 弹出1- 1
- 2
- 4
- 5
- 6
3、jquery操作样式
-
获取元素样式
// 获取div的样式
$("div").css("width");
$("div").css("color");
-
修改元素样式
//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});
-
添加或者移除class属性
// 添加class属性
$("#div1").addClass("cs2")
// 移除class属性
$("#div1").removeClass("cs2")
// 重复切换样式
$("#div1").toggleClass("cs2")
4、绑定click事件
给元素绑定click事件，可以用如下方法：
$('#btn1').click(function(){
// 内部的this指的是原生对象
// 使用jquery对象用 $(this)
})
-
jquery链式调用：
jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写
$(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp(); -
案例1：层级菜单制作
-
案例2：弹出框的制作
5、jquery操作属性
| 方法 | 描述 |
|---|---|
| attr() | 设置或返回匹配元素的属性和值。 |
| removeAttr() | 从所有匹配的元素中移除指定的属性。 |
6、jquery操作元素
-
获取文本内容：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
-
添加新的 HTML 内容
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
-
删除元素/内容
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
-
案例3：动态插入选项框
7、jquery效果函数
| 方法 | 描述 |
|---|---|
| animate() | 对被选元素应用“自定义”的动画 |
| fadeIn() | 逐渐改变被选元素的不透明度，从隐藏到可见 |
| fadeOut() | 逐渐改变被选元素的不透明度，从可见到隐藏 |
| hide() | 隐藏被选的元素 |
| show() | 显示被选的元素 |
| slideDown() | 通过调整高度来滑动显示被选元素 |
| slideToggle() | 对被选元素进行滑动隐藏和滑动显示的切换 |
| slideUp() | 通过调整高度来滑动隐藏被选元素 |
| stop() | 停止在被选元素上运行动画 |
| toggle() | 对被选元素进行隐藏和显示的切换 |
-
案列4：选项卡的实现
8、jquery事件
click() // 鼠标单击
change() // 元素改变
mouseover() // 鼠标进入（进入子元素也触发）
mouseout() // 鼠标离开（离开子元素也触发）
mouseenter() // 鼠标进入（进入子元素不触发）
mouseleave() // 鼠标离开（离开子元素不触发）
hover() // 同时为mouseenter和mouseleave事件指定处理函数
ready() // DOM加载完成
resize() // 浏览器窗口的大小发生改变
scroll() // 滚动条的位置发生变化
submit() // 用户递交表单
9、ajax
ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。
同步和异步 现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。
局部刷新和无刷新 ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。
同源策略 ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。特征报错提示：
$.ajax使用方法 常用参数： 1、url 请求地址 2、type 请求方式，默认是'GET'，常用的还有'POST' 3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html' 4、data 设置发送给服务器的数据 5、success 设置请求成功后的回调函数 6、error 设置请求失败后的回调函数 7、async 设置是否异步，默认值是'true'，表示异步
以前的写法：
$.ajax({
url: 'js/data.json',
type: 'GET',
dataType: 'json',
data:{'aa':1}
success:function(data){
alert(data.name);
},
error:function(){
alert('服务器超时，请重试！');
}
});
-
jsonp
jsonp ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，只需要将dataType:设置为jsonp,就可以跨域请求数据(前提是服务器允许跨域请求)
// 跨域请求
$('#dl').click(function () {
//获取账号密码
var user = $('#username').val();
var pwd = $('#password').val();
$.ajax({
url: 'http://test.lemonban.com/futureloan/mvc/api/member/login',
dataType: 'jsonp',
method: 'POST',
data: {"mobilephone": user, "pwd": pwd},
}).done(function (data) {
console.log(data);
alert('登录成功')
}).fail(function () {
alert('登录失败')
})
})
遇到的问题： 动态修改的元素绑定的事件不生效
我们可以通过 $(document).on('click', '#xxx', callback) 这种形式解决。
原因，一般情况下，我们是通过 (function(){}) 的时候绑定了回调，而动态添加上去的，我们并没有去绑定。
所以动态添加的元素，点击的时候并不会触发我们想要的效果。但是实际上，在我们点击的时候，还是产生了点击事件，只是这个事件没有被我们的预期回调处理，因为我们的回调没有和这个元素关联起来
动态添加输入框
添加用例参数