一、上堂回顾
1.什么是ajax
异步的javascript和xml
2.作用：
a.与服务器之间进行异步交互
b.页面的局部刷新
3.表单的get和post
get和post之间的区别
4.ajax中的get和post
ajax的工作流程
a.创建核心对象【XMLHttpRequest/ActiveObject】
b.打开与服务器之间的连接：open()
c.发送数据：send()
d.建立监听,监听服务器的响应
onreadyStateChange事件
readyState:当前服务器的状态
status:状态码
responseText:响应
二、jQuery和AJAX
1.load方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <!-- load(url[,data,callback]) 可以在一个指定的标签上直接加载一个html页面 url:请求html页面的url地址 data：可选参数，发送给服务器的数据，以key:value的形式传递 callback：回调函数，请求完成的时候自动调用 ，无论请求是否成功 BOM window.location.href = "xx.html" window.location.assign("xx.html") window.location.replace("xx.html") --> <div id="box"></div> <button id="btn">请求数据</button> <script> $(function(){ /*$("#btn").click(function(){ $("#box").load("red.html"); });*/ $("#btn").click(function(){ $("#box").load("red1.html",function(){ console.log("over"); }); }); }) </script> </body> </html>
2. .post()
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <form> <input type="text" id="username" /> <input type="text" id="content" /> <!--submit：点击按钮的时候会将当前表单刷新--> <input type="button" id="btn" value="提交"/> <!--加载服务器的响应--> <div id="responseText"></div> </form> <script> $(function(){ /* * $.get(url[,data,callback,type]),类似于ajax的原生的get * url:请求的服务器的地址 * data：发送给服务器的数据，以key:value的形式传递 * callback:请求完成之后的回调函数，可以获取服务器的响应，注意：回调函数中有默认参数 * type:预判服务器数据的类型，可以省略，jQuery可以自动判断 * */ /*$("#btn").click(function(){ //和服务器之间进行交互 $.get("http://127.0.0.1/get1.php",{username:$("#username").val(),content:$("#content").val()},function(data){ //console.log(data); //服务器返回的结果为一个json var result = JSON.parse(data); console.log(result); //将服务器的响应显示到div上 $("#responseText").html("用户名：" + result.username + "内容：" + result.content); }) });*/ /* * $.post(url[,data,callback,type]),类似于ajax的原生的post * url:请求的服务器的地址 * data：发送给服务器的数据，以key:value的形式传递 * callback:请求完成之后的回调函数，可以获取服务器的响应，注意：回调函数中有默认参数 * type:预判服务器数据的类型，可以省略，jQuery可以自动判断 * */ $("#btn").click(function(){ //和服务器之间进行交互 $.post("http://127.0.0.1/post1.php",{username:$("#username").val(),content:$("#content").val()},function(data){ //console.log(data); //服务器返回的结果为一个json var result = JSON.parse(data); console.log(result); //将服务器的响应显示到div上 $("#responseText").html("用户名：" + result.username + "内容：" + result.content); }) }); }) </script> </body> </html>
3.$.getscript()方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <!--<script type="text/javascript" src="js/test.js"></script>--> </head> <body> <!-- $.getScript(url,callback) url:需要加载的js文件的路径 callback：js文件加载完成之后的回调函数 使用$.getScript函数之后，不仅可以像script标签一样加载js文件，而且js文件在代码运行的过程中可以自动执行 提供了页面的工作效率 --> <div id="box">hello</div> <button id="btn">点击</button> <script> $(function(){ $.getScript("js/test.js",function(){ //console.log("over"); $("#btn").click(function(){ $("#box").css("background-color","red"); }) }) }) </script> </body> </html>
4.$.ajax()
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <!-- $.ajax(options) 自定义封装的ajax函数 options：字典，以key:value的方式传参， 参数包含: 请求的方式type【get、post】, 请求的服务器的地址url， 上传给服务器的数据data[key:value] 请求完成之后的回调函数success 作用：综合了$.get和$.post函数的功能 --> <form> <input type="text" id="username" /> <input type="text" id="content" /> <!--submit：点击按钮的时候会将当前表单刷新--> <input type="button" id="btn" value="提交"/> <!--加载服务器的响应--> <div id="responseText"></div> </form> <script> $(function(){ $("#btn").click(function(){ $.ajax({ type:"get", url:"http://127.0.0.1/get1.php", data:{username:$("#username").val(),content:$("#content").val()}, success:function(responseText){ //console.log(responseText); var result = JSON.parse(responseText); $("#responseText").html("ajax用户名：" + result.username + "ajax内容：" + result.content); } }); }) }) </script> </body> </html>
三、Bootstrap
主要用于开发响应式布局
响应式布局：根据浏览器或者移动端设备的屏幕大小标签的自适配
1.基本模板
加载cdn资源
<!DOCTYPE html> <html lang="zh-CN"> <head> <!--配置信息--> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--页面的宽度跟当前设备的宽度相同，初始的放大倍数为1--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 注意：上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- 加载Bootstrap中的css --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好，世界！</h1> <!-- jQuery ，注意：Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边 --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> </body> </html>加载本地资源
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title></title> <!--引入css文件--> <link type="text/css" rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /> </head> <body> </body> </html>
2.基本使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title></title> <!--引入css文件--> <link type="text/css" rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /> </head> <body> <!--按钮--> <a class="btn btn-default" href="#" role="button">Link</a> <button class="btn btn-default" type="submit">Button</button> <input class="btn btn-default" type="button" value="Input"> <input class="btn btn-default" type="submit" value="Submit"> <!--预定义样式--> <!-- Standard button --> <button type="button" class="btn btn-default">（默认样式）Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons --> <button type="button" class="btn btn-primary">（首选项）Primary</button> <!-- Indicates a successful or positive action --> <button type="button" class="btn btn-success">（成功）Success</button> <!-- Contextual button for informational alert messages --> <button type="button" class="btn btn-info">（一般信息）Info</button> <!-- Indicates caution should be taken with this action --> <button type="button" class="btn btn-warning">（警告）Warning</button> <!-- Indicates a dangerous or potentially negative action --> <button type="button" class="btn btn-danger">（危险）Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior --> <button type="button" class="btn btn-link">（链接）Link</button> <!--表单--> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> <div class="table-responsive"> <table class="table table-hover"> <tr> <td>111</td> <td>2222</td> </tr> <tr> <td>111</td> <td>2222</td> </tr> <tr> <td>111</td> <td>2222</td> </tr> <tr> <td>111</td> <td>2222</td> </tr> </table> </div> </body> </html>
3.栅格系统
<!DOCTYPE html> <html lang="zh-CN"> <head> <!--配置信息--> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--页面的宽度跟当前设备的宽度相同，初始的放大倍数为1--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 注意：上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- 加载Bootstrap中的css --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="row"> <div class="col-md-1"> </div> <div class="col-md-1"> </div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </body> </html》
四、VUE.js
1.简介
前端框架：jQuery，Angular，React，VUE等，VUE同时具备Angular和React框架的特点
优点：轻量级，api简单，文档齐全
Vue.js,类似view，是一套构建用户界面的渐进式框架
什么是渐进式框架？
原始的前端开发【html，css，js】中，为了完成某些功能，需要通过js在html页面中获取标签对象【dom节点】，随后获得的dom节点可以在其中绑定事件，进行一系列的操作，如果功能量大的情况下，原生的js实现的代码后期维护比较困难
解决：可以将js分为三部分：数据【Model】，逻辑控制【*】，视图【View】，Model只负责数据部分，View只负责更改样式，逻辑控制负责联系数据和视图，好处：如果某个部分发生改变，对其他的部分不会造成影响
开发模式，就是所谓的MV*模式，包括MVC,MVT,MVVM等，都是让数据和视图分离
具有响应式的vue实例中，DOM状态只是数据状态的一个映射，UI=VM，当等式右边的数据发生改变的时候，页面展示部分的UI也会随着发生改变
2.安装和简单使用
2.1安装
a.可以从官网下载https://cn.vuejs.org
使用方式：用script标签引入，和普通js文件的引入方式完全相同，注意：vue会被注册为一个全局变量
b.引入cdn
c.npm
注意：需要先安装Node环境，npm是Node.js的管理工具
因为npm安装速度比较慢，可采用淘宝的镜像
2.2第一个vue程序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入vue库--> <!--<script src="https://unpkg.com/vue/dist/vue.js"></script>--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="box"> <p>{{ text }}</p> <h2>{{ func1() }}</h2> </div> </body> <script> /* * 每个vue应用都需要进行实例化，语法： * var vm = new Vue({ * //选项 * }) * * 说明vue构造器中的参数： * a.整个参数实际上是一个json对象【在json，{}代表一个对象，[]代表一个数组】 * b.el,element,表示DOM元素中的id属性的值，作用：在vue代码中修改的内容跟指定标签的内部有关，外部标签不受任何影响 * c.data,用于定义属性，注意：其中的属性需要自定义，text为自定义的标识符 * d.methods,用于定义函数，函数的定义和调用和js中的用法完全相同，func1为函数名 */ //创建一个vue的实例，使用new关键字 new Vue({ el:"#box", data:{ text:"hello vue.js" }, methods:{ func1:function(){ return "第一个vue.js程序"; } } }); </script> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>需要注意的问题</title> <!--引入vue库--> <!--<script src="https://unpkg.com/vue/dist/vue.js"></script>--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="box"> <p>{{ name }}</p> <p>{{ age }}</p> <p>{{ sex }}</p> </div> </body> <script> /*特殊情况一：当一个vue实例创建完成之后，它向vue的响应式系统中添加data对象 * 当相应的属性值发生改变的时候，html视图也会随着发生改变 */ //数据对象 var data = {name:"张三",age:18,sex:"女"}; //vue的对象 var per = new Vue({ el:"#box", data:data, methods:{ show:function(){ return "姓名：" + this.name + "年龄：" + this.age + "性别:" + this.sex; } } }) /* * class Person(): * def __init__(self,name,age,sex): * self.name = name; * .... * def show(self): * return "姓名：" + self.name; * * per = Person("",36,""); * print(per.show()) */ //结果为true。说明两个变量引用了同一个对象 document.write(per.name == data.name); //true document.write("<br />"); //查看对象属性和原始数据之间的关系 //1.修改对象属性，查看原始数据？ per.name = "jack"; document.write(data.name); document.write("<br />"); //2.修改原始数据，查看对象属性？ data.name = "rose"; document.write(per.name); //结论：原始数据和对象数据之间有着联系，一个改变，另外一个随着改变 /* * 特殊情况二：vue属性提供了一些带有前缀$的属性和方法，为了和用户自定义的属性或者方法区分开 */ /* * ==和 ===之间的区别 * ==：只比较值，不比较类型 * 1 == 1 true * 1 == "1" true * ===:用于严格比较，不会进行自动转换，同时比较值和类型，如果二者都相同，才返回true * 1 === 1 true * 1 === "1" fasle */ document.write(per.$data === data); //true document.write("<br />"); document.write(per.$el === document.getElementById("box")); //true </script> </html>
2.3核心思想
a.数据驱动【双向的数据绑定】
DOM是数据的一种双向映射
vue中的双向：html标签数据绑定到vue的对象上，将vue的数据加载到html标签上
b.组件化
扩展html元素，封装可重用的代码
可以自定义html标签：
3.模板指令
a.文本内容：使用{{ … }}
b.html内容：使用v-html指令
c.属性：使用v-bind指令
d.参数：v-bind:参数=值
完整语法 <a v-bind:href="url"></a> 简写 <a :href="url"></a>e.用户输入：使用v-model指令
f.事件，使用v-on指令
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入vue库--> <!--<script src="https://unpkg.com/vue/dist/vue.js"></script>--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style> .cls1{ background-color: red; } </style> </head> <body> <!--1.文本内容--> <div id="box1"> <p>{{ message1 }}</p> </div> <!--2.html内容--> <div id="box2"> <div v-html="message2"></div> </div> <!--3.参数--> <div id="box3"> <!--<a v-bind:href="url">超链接</a>--> <a :href="url">超链接</a> </div> <!--4.属性--> <div id="box4"> <!--true:需要使用类选择器--> <div v-bind:class="{'cls1':use}">hello</div> </div> <!--5.用户输入--> <div id="box5"> <p>{{ text }}</p> <input v-model="text" /> </div> <!--6.事件绑定--> <div id="box6"> <input type="button" value="按钮一" v-on:click="func1" /> <input type="button" value="按钮二" @click="func1"/> </div> </body> <script> //1.文本内容 var vueObj1 = new Vue({ el:"#box1", data:{ message1:"hello js" } }) //2.html内容 new Vue({ el:"#box2", data:{ message2:"<p>学生信息</p>" } }) //3.参数 new Vue({ el:"#box3", data:{ url:"http://www.baidu.com" } }) //4.属性 new Vue({ el:"#box4", data:{ use:false } }) //5.用户输入 new Vue({ el:"#box5", data:{ text:"请输入内容" } }) //6.事件绑定 new Vue({ el:"#box6", methods:{ func1:function(){ alert("事件的绑定"); } } }) </script> </html>
4.条件和循环语句
4.1v-if/v-show
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入vue库--> <!--<script src="https://unpkg.com/vue/dist/vue.js"></script>--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="box"> <!-- if isShow: xxx --> <!-- v-if是根据属性值为true还是false来决定是否要插入指定的元素 --> <p v-if="isShow">hello</p> <p v-show="isShow">hello</p> </div> </body> <script> new Vue({ el:"#box", data:{ isShow:false } }) </script> </html>
4.2v-for
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入vue库--> <!--<script src="https://unpkg.com/vue/dist/vue.js"></script>--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <ul class="cls"> <!--for 变量 in 数组--> <li v-for="item in list"> {{ item.text }} </li> </ul> </body> <script> new Vue({ el:".cls", data:{ list:[//数组 {text:"01.js"}, {text:"02.html"}, {text:"03.css"} ] } }) </script> </html>
5.重要选项
el:元素
data：数据对象，用来给html元素绑定数据，vue框架会自动监视data里面数据的变化，自动将数据更新到对应的html元素上
工作原理：vue会自动将data里面的数据进行递归抓取转换成getter和setter，然后就会自动更新html标签上的内容
methods：函数，代表vue对象的方法，方法中的this关键字自动绑定到当前的vue实例
computed:计算属性，在做数据绑定的过程中，数据要经过处理才能显示到html页面上，属性可以是一个方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入vue库--> <!--<script src="https://unpkg.com/vue/dist/vue.js"></script>--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="box"> {{ showStr }} </div> </body> <script> new Vue({ el:"#box", data:{ totalPrice:30 }, computed:{ //vue的计算属性 //计算属性，该属性是一个方法 showStr:function(){ if(this.totalPrice < 20){ return "金额小于20，没有优惠"; }else{ return "金额大于20，可以享受优惠"; } } } }) </script> </html>watch：监听
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入vue库--> <!--<script src="https://unpkg.com/vue/dist/vue.js"></script>--> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="box"> 千米：<input type="text" v-model="qianmi"/> 米：<input type="text" v-model="mi"/> </div> <!--记录修改前后的值--> <p id="change"></p> </body> <script> var vm = new Vue({ el:"#box", data:{ qianmi:0, mi:0 }, //监听 watch:{ //默认参数val， qianmi:function(val){ this.qianmi = val; this.mi = val * 1000; }, mi:function(val){ this.qianmi = val / 1000; this.mi = val; } } }) //$watch()是一个实例方法 //参数：监听的名称，需要触发的函数 vm.$watch("qianmi",function(nValue,oValue){ document.getElementById("change").innerHTML = "修改前：" + oValue + "修改后:" + nValue; }) </script> </html>