文章目录
- 八、jQuery事件
- 8.1 常用事件
- 九、事件代理
- 9.1 事件代理介绍
- 十、JavaScript自定义对象
- 10.1 JavaScript对象的介绍
- 10.2 JavaScript创建对象操作
- 十一、json
- 11.1 json的介绍
- 11.2 json的格式
- 11.2.1 对象格式
- 11.2.2 数组格式
- 11.3 json数据转JavaScript换成对象
- 十二、ajax
- 12.1 ajax的介绍
- 12.2 ajax的使用
- 十三、Jquery和vue对比
- 13.1 jquery介绍
- 13.2 vue介绍
- 13.3 vue和jquey对比
- 13.4 举例说明
八、jQuery事件
8.1 常用事件
- click()鼠标单击
- blur()元素失去焦点
- focus()元素获得焦点
- mouseover()鼠标进入(进入子元素也触发)
- mouseout()鼠标离开(离开子元素也触发)
- ready()DOM加载完成
// jQuery事件 $(function(){ var $lis = $('ul li'); // 获取所有li标签 var $btn = $('#btn1'); // 获取按钮标签 var $text = $('#txt1'); //获取文本输入框标签 var $div = $('div'); //获取所有div // 点击标签，字体变红 $lis.click(function(){ //获取当前点击的标签，原生js写法,点击变红 this.style.color = 'red'; // jQuery标准写法 $(this).css({'color': 'orange'}); alert($(this).index()); //获取当前点击标签的索引方法 }); // 点击按钮时获取文本框输入的内容 $btn.click(function(){ alert($text.val());//获取文本框输入的内容 }); //文本框获取焦点时，背景变黄 $text.focus(function(){ $text.css({'background': 'yellow'}); // 设置文本框背景颜色 $(this).css({'background': 'yellow'}); // 设置文本框背景颜色 }); // 文本框失去焦点时，背景变黑 $text.blur(function(){ $text.css({'background': 'white'}); // 设置文本框背景颜色 $(this).css({'background': 'white'}); // 设置文本框背景颜色 }); //div标签设置鼠标进入事件 $div.mouseover(function(){ $(this).css({'background': 'green'}); // 设置div背景绿色 }); //div标签设置鼠标移除事件 $div.mouseout(function(){ $(this).css({'background': 'white'}); // 设置div背景白色 }); });
九、事件代理
9.1 事件代理介绍
事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递)把事件加到父级上,通过判断事件来源,执行相应的子元素的操作·事件代理首先可以极大减少事件绑定次数提高性能;其次可以让新加入的子元素也可以拥有相同的操作。
// 事件代理，事件冒泡就是事件会向它的父级一级一级传递 $(function(){ var $btn = $('#btn1'); var $div = $('div'); var $lis = $('li'); var $ul = $('ul'); // 按钮点击事件 $btn.click(function(){ alert('我是按钮'); // 取消事件冒泡，不让事件向父级控件传递,如果不取消，会向上传递 return false; }); // 父级div点击事件 $div.click(function(){ alert('我是div'); }); // 通过事件代理，让父控件代理子控件的事件，然后执行子控件的相关操作,只需绑定一次，并且新增的子控件都可以触发相同的事件 $ul.delegate('li', 'click', function(){ $(this).css({'color': 'red'}); }); //扩展：可以代理不同子控件的事件,多个子控件选择器用逗号分隔 $('#div1').delegate('h1, p，#box1', 'click', function(){ $(this).css({'color': 'red'}); }); });
十、JavaScript自定义对象
10.1 JavaScript对象的介绍
JavaScript中的所有事物都是对象：字符串、数值、数组、函数等都可以认为是对象,此外 JavaScript允许自定义对象，对象可以拥有属性和方法。
10.2 JavaScript创建对象操作
创建自定义 javascript对象有两种方式：
- 通过顶级object类来实例化一个对象
- 通过对象字面量创一个对象
// 创建自定义 javascript对象有两种方式： // 1. 通过顶级object类来实例化一个对象 var oPerson = new Object(); // 实例化一个object对象 oPerson.name = 'zhangsan'; // 设置属性name并赋值 oPerson.age = 18; // 设置属性age并赋值 alert(oPerson.name); // 读取name属性 oPerson.show = function(){ // 自定义一个函数 alert('我是一个好热'); }; oPerson.show(); // 调用自定义函数 // 2. 通过对象字面量创一个对象 var oStudent = { name: '李四', // 设置属性name并赋值 age: 20, // 设置属性age并赋值 show: function(){ // 自定义一个函数 alert('李四是个学生'); }, }; alert(oStudent.name + oStudent.age); // 读取name和age属性 oStudent.show(); // 调用自定义函数
十一、json
11.1 json的介绍
json是 JavaScript Object Notation的首字母缩写,翻译过来就是javascript对象表示法,这里说的json就是类似于 javascript对象的字符串·它同时是一种数据格式目前这种数据格式比较流行,逐渐替换掉了传统的xml数据格式。
11.2 json的格式
json有两种格式:对象格式和数组格式
11.2.1 对象格式
对象格式的json数据,使用一对大括号()大括号里面放入key value形式的键值对,多个键值对使用逗号分隔。
{ "name": "zhangsan", "age": 18 }
json中的(key)属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。
11.2.2 数组格式
数组格式的json数据·使用一对中括号([]），中括号里面的数据使用逗号分隔。
["tom", 18, "programmer"]
11.3 json数据转JavaScript换成对象
json本质上是字符串,如果在js中操作json数据,可以通过JSON.parse(json字符串)方法，将json字符串转化为JavaScript对象。
// json 数据就是类似javascript的字符串，同时还是一种数据格式，在web开发时，经常使用json数据格式。 // json使用双引号，有两个格式：对象格式和数组格式 // 1.对象格式：最外层是大括号，key和字符串都用双引号 var sJson1 = '{"name": "lisi", "age": 18}'; //定义字符串的json var oPerson = JSON.parse(sJson1); //转成js对象 console.log(oPerson); //控制台输出 console.log(oPerson.name + oPerson.age);//控制台输出 // 2.数组格式：最外层是中括号，每项数据之间用逗号分隔 var sJson2 = '[{"name": "lisi", "age": 18},{"name": "zhangsan", "age": 20},{"name": "zhaosi", "age": 25}]' var aArrary = JSON.parse(sJson2); console.log(aArrary); console.log(aArrary[1].name); // 扩展:浏览器给 python服务器的json数据, python服务器程序可以解析成字典或者列表
十二、ajax
12.1 ajax的介绍
ajax是 Asynchronous JavaScript and XML的简写。ajax是一个前后台配合的技术，它可以让javascript发送异步的http请求，与后台通信进行数据的获取。ajax最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住,当前端页面想和后台服务器进行数据交互就可以使用ajax了。
这里提示一下大家，在html页面使用ajax需要在web服务器环境下运行，一般向自己的web服务器发送ajax请求。
12.2 ajax的使用
jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。
ajax方法的参数说明:
1.url请求地址
2.type请求方式,默认是’GET’,常用的还有’POST’
3.dataType设置返回的数据格式常用的是json格式
4.data设置发送给服务器的数据,没有参数不需要设置
5.success设置请求成功后的回调函数
6.error设置请求失败后的回调函数
7.async设置是否异步,默认值是true表示异步,一般不用写
8.同步和异步说明
- 同步是一个aja请求完成另外一个才可以请求,需要等待上一个ajax请求完成,好比线程同步。
- 异步是多个ajax同时请求,不需要等待其它ajax请求完成好比线程异步
// ajax // 向web服务器发送一个ajax请求，本质就是http请求 $.ajax({ url: "data.json", //不指定ip地址和端口号，表示请求的是自己的服务器数据 type: "GET", //请求方式 GET POST dataType: "JSON", //指定返回数据解析的格式 data: {"name": "李四"}, //发送给服务器的数据 success: function(data){ //请求成功执行的函数 console.log(data.name); //查看请求回来的数据 //请求回来的数据可以绑定给html中的标签控件，实现局部刷新 }, error: function(data) { //请求失败执行的函数 alert('网络异常！'); }, async: true, //是否使用异步请求，默认true });
简写方式
// 发送get方式的ajax请求的简写方式 // 1.请求的地址 // 2.请求给web服务器的参数 // 3.请求成功的回调函数 // 4.返回数据的解析方式 // error失败执行的回调函数 $.get("data.json", {"name": "李四"}, function(data){ console.log(data.name); }, "JSON").error(function(data) { alert('网络异常！'); });
post请求
// 发送post方式的ajax请求的简写方式 $.post("data.json", {"name": "李四"}, function(data){ console.log(data.name); }, "JSON").error(function(data) { alert('网络异常！'); });
十三、Jquery和vue对比
很多人说jquey和vue没有什么可比的，应该和Angular，React来比吧，我到觉得他们倒没有多大的可比性，都是基于mvvm思想设计的框架，无非就是实现的方式不一样，在不同场景下性能上会有一些差异。然而从jquery到vue或者说是到mvvm的转变则是一个思想想的转变，是将原有的直接操作dom的思想转变到操作数据上去，难道不是一个根本性的改变吗？
13.1 jquery介绍
想必大家都用过jquery吧，这个曾经也是现在依然最流行的web前端js库，可是现在无论是国内还是国外他的使用率正在渐渐被其他的js库所代替，随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的实现，jquery的使用率将会越来越低
13.2 vue介绍
vue是一个兴起的前端js库，是一个精简的MVVM。从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。当然还有很多其他的mvmm框架如Angular，React都是大同小异，本质上都是基于MVVM的理念。 然而vue以他独特的优势简单，快速，组合，紧凑，强大而迅速崛起
13.3 vue和jquey对比
jQuery是使用选择器（
）选取
D
O
M
对象，对其进行赋值、取值、事件绑定等操作，其实和原生的
H
T
M
L
的区别只在于可以更方便的选取和操作
D
O
M
对象，而数据和界面是在一起的。比如需要获取
l
a
b
e
l
标签的内容：
）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：
）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：(“lable”).val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。
13.4 举例说明
场景：列表添加一个元素,下图为vue和jquery两种操作的代码，我们从中可以看出vue只需要向数据message里面push一条数据即可完成添加一个li标签的操作，而jquery则需要获取dom元素节点，并对dom进行添加一个标签的操作，如果dom结构特别复杂，或者添加的元素非常复杂，则代码会变得非常复杂且阅读性低
- vue:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <ul> <!--根据数组数据自动渲染页面--> <li v-for="item in message">{{item}}</li> </ul> <button @click="add">添加数据</button> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: ["第1条数据","第2条数据"], i:2 }, methods:{ //向数组添加一条数据即可 add:function(){ this.i++ this.message.push("第"+this.i+"条数据") } } }) </script>
- jquery:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <ul id="list"> <li>第1条数据</li> <li>第2条数据</li> </ul> <button id="add">添加数据</button> </div> </body> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function() { var i=2; $('#add').click(function() { i++; //通过dom操作在最后一个li元素后手动添加一个标签 $("#list").children("li").last().append("<li>第"+i+"条数据</li>") }); }); </script>
