1、介绍和基本使用
1.1、javascript概述
-
JavaScript历史
要了解JavaScript，我们首先要回顾一下JavaScript的诞生。在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错，这哥们只用了10天时间。为什么起名叫JavaScript？原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推广，但事实上JavaScript除了语法上有点像Java，其他部分基本上没啥关系。
1.2、嵌入页面的方式
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
1、行间事件（主要用于事件）
<input type="button" name="" onclick="alert('ok！');">
2、页面script标签嵌入
<script type="text/javascript">
alert('ok！');
</script>
3、外部引入
<script type="text/javascript" src="js/index.js"></script>
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 布尔类型
-
undefined 类型，
var unde -
null类型，
var tr = null -
arry 数组
4、运算符
-
算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
-
赋值运算符：=、 +=、 -=、 *=、 /=、 %= 、++
-
条件运算符：<mark style="box-sizing: border-box;">、</mark>=、>、>=、<、<=、!=、
-
逻辑运算符：&&(而且 )、||(或者 )、!(否 )
5、条件语句
通过条件来控制程序的走向，就需要用到条件语句。
-
if 语句
var a = 199; if(a>200){ alert('大于200'); } -
else 语句
var a = 199; if(a>200){ alert('大于200'); } else { alert(a); } -
else if 语句
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: 默认代码块 }
6、函数
7、对象
8、循环
-
while循环
while（条件语句){ 循环体 } -
for 循环
for (语句1,语句2，语句3 ){ 循环体代码 } -
for in 循环
for (x in arrayr){ 循环体代码 }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操作页面
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
[图片上传失败...(image-1354e7-1567523677953)]
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- 如何改变 HTML 元素的内容 (innerHTML)
- 如何改变 HTML 元素的样式 (CSS)
- 如何对 HTML DOM 事件对做出反应
- 如何添加或删除 HTML 元素
1、获取页面标签
1、获取标签的方式
通常，通过 JavaScript操作 HTML 元素,可以使用内置对象document的方法来找到该标签。。
-
通过 id 找到 HTML 元素（常用）
- document.getElementById（）
-
通过标签名找到 HTML 元素
-
通过类名找到 HTML 元素（通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。）
2、获取标签注意问题
的getElementById方法来获取页面上设置了id属性的元素，
<script type="text/javascript">
var bo = document.getElementById('box');
//box对应的div这个元素定义在下面，此时获取不到，就会出错
</script>
<div id="box">这是div元素</div>
上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，
解决方法：
- javascript放到页面最下边
<div id="box">这是div元素</div>
<script type="text/javascript">
var bo = document.getElementById('box');
</script>
</body>
-
放入window.onload触发的函数里面
window.onload函数在页面加载完后才执行，就不会出错了。
<script type="text/javascript">
window.onload = function(){
var bo = document.getElementById('box');
}
</script>
<div id="box">这是div元素</div>
1
2、操作标签内容
-
innerHTML 属性
-
读取节点文本
var odv1 = document.getElementById('box'); var content1 = odv1.innerHTML; alert(content1) -
写入节点文本
var odv1 = document.getElementById('box'); odv1.innerHTML = 哈哈哈;
3、修改标签属性
-
操作属性的方法
-
读取属性
<input type="text" id="input_user" name="user" value="python"> // 读取属性 var odv1 = document.getElementById('input_user'); var idValue = odv1.id; var nameValue = odv1['name']; alert(idValue); alert(nameValue); -
修改属性
<a href="" id="a1" >柠檬班</a> // 修改属性 a1 = document.getElementById('a1'); // a1.href = 'http://www.lemonban.com'; a1['href'] = 'http://www.lemonban.com'; -
注意点：操作class属性的时候，要将属性名字改为className
a1.className = 'hied'; -
修改css样式
<div class="dv1" id="dv01" >这个是div1</div> //修改css样式 var odv1 = document.getElementById('dv01'); odv1.style.width = '300px'; odv1.style['height'] = '200px'; odv1.style.background = 'cyan';
4、onclick事件
// 给div定义一个onclick事件，触发该事件的时候，调用该事件指定的函数
<div class="dv1" id="dv01" onclick="tank()">这个是div1</div>
// 定义一个函数，负责弹框
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/
-
下载
-
引入页面
-
jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
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 <ul class="list"> <li>1</li> <li>2</li> <li>4</li> <li>5</li> <li>6</li> </ul>
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属性
$("#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() | 对被选元素进行隐藏和显示的切换 |
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 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(){}) 的时候绑定了回调，而动态添加上去的，我们并没有去绑定。
所以动态添加的元素，点击的时候并不会触发我们想要的效果。但是实际上，在我们点击的时候，还是产生了点击事件，只是这个事件没有被我们的预期回调处理，因为我们的回调没有和这个元素关联起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态添加输入框</title>
<script type="text/javascript" src="jquery_study/jquery-1.12.4.min.js"></script>
</head>
<body>
<H3>添加用例参数</H3>
<form action="">
<!-- <input type="text" name="user" id="user"> <br>
<input type="password" name="pwd" id="pwd"> <br>
<input type="button" id="dj" value="点击登陆"> -->
<div class="div">
参数名：<input class="key" type="text" name="key" id="key"> 参数值：<input type="text" name="value" id="value" class="value"><br>
</div>
</form>
<script>
$(function(){
$(document).on('change', '.key', function(){
cone = '参数名：<input class="key" type="text" name="key" id="key"> 参数值：<input type="text" name="value" id="value" class="value"><br>'
$('.div').append(cone)
})
}
)
</script>
</body>
</html>
