文章目录
八、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>