共计 8503 个字符,预计需要花费 22 分钟才能阅读完成。
概述
本章会介绍:
1.事件冒泡的原理及用法
2.事件委托
3.什么是Dom?Dom的操作
4.Js对象的创建
5.Json的介绍
6.ajax&Jsonp技术的介绍及应用
一. 事件冒泡
什么是事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。
事件冒泡的作用
事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。
阻止事件冒泡
事件冒泡机制有时候是不需要的,需要阻止掉,通过 event.stopPropagation() 来阻止
<script>
$(function(){
var $father = $('.father');
var $son = $('.son');
var $grandson = $('.grandson');
$father.click(function() {
alert('father');
});
$son.click(function() {
alert('son');
});
$grandson.click(function(event) {
alert('grandson');
event.stopPropagation();
});
$(document).click(function(event) {
alert('grandfather');
});
})
</script>
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>
阻止默认行为
阻止表单提交
$('#form1').submit(function(event){
event.preventDefault();
})
合并阻止操作
实际开发中,一般把阻止冒泡和阻止默认行为合并起来写,合并写法可以用
// event.stopPropagation();
// event.preventDefault();
// 合并写法:
return false;
总结:
- 事件冒泡是一种常用的思想
- 事件冒泡是 js 对对象事件的处理策略,是 js 是的一种实现机制
- 事件冒泡: 子元素会把事件, 传递给它的父级, 以此类推
- 我们可以阻止事件冒泡: 使用: stopPropagation( )的方法
- 我们也可以通过调用某些事件, 然后以 return false 的形式,阻止事件冒泡
- 阻止默认行为: preventDefault( )
二. 事件委托
事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作
事件委托首先可以极大减少事件绑定次数,提高性能;
其次可以让新加入的子元素也可以拥有相同的操作。
一般绑定事件的写法
$(function(){
$ali = $('#list li');
$ali.click(function() {
$(this).css({background:'red'});
});
})
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
事件委托的写法
<script>
$(function(){
$ul = $('#list');
$ul.delegate('li', 'click', function() {
$(this).css({background:'red'});
});
})
</script>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
总结:
- 事件委托就是将本体不方便做的事情,委托给别的对象
- 事件委托是我们集中处理某些事件的一种方式
- 事件委托用的是delegate方法, 其中的参数为:
- 第一个参数: 请求委托的对象
- 第二个参数: 请求委托的事件类型
- 第三个参数: 请求委托的处理方式(回调函数)
三. Dom操作
元素节点操作指的是改变 html 的标签结构,它有两种情况:
1、移动现有标签的位置
2、将新创建的标签插入到现有的标签中
创建新标签
var $div = $('<div>'); //创建一个空的div
var $div2 = $('<div>这是一个div元素</div>');
移动或者插入标签的方法
append( )
在元素内部添加,从后面放入
使用方法:
$(selector).append(content)
例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('#app')
var $span = $('<span>这是一个span元素</span>')
$div.append($span)
})
</script>
</head>
<body>
<div id="app">div元素</div>
</body>
效果:
div元素这是一个span元素
appendTo( )
在元素内部添加,从后面放入
使用方式:
$(content).appendTo(selector)
例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div1 = $('#app')
var $div2 = $('#box')
var $span = $('<span>这是一个span元素11</span>')
$span.appendTo($div1)
$('<em>哈哈哈,斜体</em>').appendTo($div2)
})
</script>
</head>
<body>
<div id="app">第一个div元素</div>
<div id="box">第二个div元素</div>
</body>
结果:
第一个div元素这是一个span元素11
第二个div元素哈哈哈,斜体
prepend( )
在元素内部添加,从前面放入
使用方式:
$(selector).prepend(content)
例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div1 = $('#app')
$div1.prepend('<a href="#">a标签</a>')
})
</script>
</head>
<body>
<div id="app">第一个div元素</div>
</body>
结果:
a标签第一个div元素
prependTo( )
在元素内部添加,从前面放入
使用方法:
$(content).prependTo(selector)
例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div1 = $('#app')
$('<a href="#">a标签</a>').prependTo($div1)
})
</script>
</head>
<body>
<div id="app">第一个div元素</div>
</body>
结果:
a标签第一个div元素
after( )
在元素外部添加,从后面放入
使用方式:
$(selector).after(content)
例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div1 = $('#app')
$div1.after("<em>哈哈,斜体</em>")
})
</script>
</head>
<body>
<div id="app">第一个div元素</div>
</body>
结果:
第一个div元素
哈哈,斜体 // 斜的,这里可能看不出来...
insertAfter( ):
在元素外部添加,从后面放入
注释:如果该方法用于已有元素,这些元素会被从当前位置移走,然后被添加到被选元素之后。
使用方法:
$(content).insertAfter(selector)
例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div1 = $('#app')
$('<em>哈哈,斜体</em>').insertAfter($div1)
})
</script>
</head>
<body>
<div id="app">第一个div元素</div>
</body>
结果:
第一个div元素
哈哈,斜体
before( )
在被选元素前插入指定的内容。
使用方式:
$(selector).before(content)
例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div1 = $('#app')
$div1.before("<em>哈哈,斜体</em>")
})
</script>
</head>
<body>
<div id="app">第一个div元素</div>
</body>
结果:
哈哈,斜体
第一个div元素
insertBefore( )
insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
使用方式:
$(content).insertBefore(selector)
例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div1 = $('#app')
$('<em>哈哈,斜体</em>').insertBefore($div1)
})
</script>
</head>
<body>
<div id="app">第一个div元素</div>
</body>
结果:
哈哈,斜体
第一个div元素
删除标签
使用方式:
$(selector).remove()
例如:
<head>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div1 = $('#app')
$div1.remove()
})
</script>
</head>
<body>
<div id="app">第一个div元素</div>
<div id="box">第二个div元素</div>
</body>
结果:
第二个div元素
总结:
- Dom 元素这里指的就是 HTML标签,有时候大家会听到 DOM树的概念, 那是因为 HTML 中的标签,就像是树一样, 根部是
<html>
标签, 然后是<body>
和<head>
,再然后一级一级往下排,最终形成树形结构 - 我们可以通过 jquery 来动态的修改 HTML 的结构,使用的就是上述的方法
- append( ) 方法可以在元素内部后方, 添加新的元素, appendTo( ) 也差不多, 只是添加的顺序进行了调换
- prepend( ) 方法可以在元素内部前方, 添加新的元素, prependTo( ) 与之类似, 添加的顺序进行了调换.
- after( ) 方法是指在当前元素外部,从后方插入一个新的元素
- before( ) 这个方法则正好和after( ) 方法相反, 在当前元素前方,插入一个新的元素
- insertBefore( ) 则是在指定的元素之前插入子元素, 这些内容大家只需要简单了解, 使用起来的时候能够想的起来即可, 实在是忘记了, 可以到时候查一下文档.
- 删除某个元素不必多说就是: 某个想要删除的元素调用remove( ) 方法即可.
四. JavaScript对象
JavaScript 中的对象,可以理解成是一个键值对的集合,键是调用每个值的名称,值可以是基本变量,还可以是函数和对象。
创建 JavaScript 对象有两种方法:
- 一种是通过顶级 Object 类来实例化一个对象,然后在对象上面添加属性和方法:(此方法不常使用)
常用方法:
var person = new Object();
// 添加属性:
person.name = 'tom';
person.age = '25';
// 添加方法:
person.sayName = function(){
alert(this.name);
}
// 调用属性和方法:
alert(person.age);
person.sayName();
- 还可以通过对象直接量的方式创建对象:( 经常使用 )
var person2 = {
name:'Rose',
age: 18,
sayName:function(){
alert('My name is' + this.name);
}
}
// 调用属性和方法:
alert(person2.age);
person2.sayName();
总结:
- JS 对象和我们在 python 中了解的对象略有不同, 最主要的区别还是 JS 对象不要类也可以定义
- 我们一般会在 JS 中使用 { } 直接创建对象的形式来使用
五. Json
json 是 JavaScript Object Notation 的首字母缩写,单词的意思是 javascript 对象表示法,这里说的 json 指的是类似于 javascript 对象的一种数据格式对象,目前这种数据格式比较流行,逐渐替换掉了传统的 xml 数据格式。
json 数据对象类似于JavaScript 中的对象,但是它的键对应的值里面是没有函数方法的,值可以是普通变量,不支持 undefined,值还可以是数组或者 json 对象。
与 JavaScript 对象写法不同的是,json 对象的属性名称和字符串值需要用双引号引起来,用单引号或者不用引号会导致读取数据错误。
json 格式的数据:
{
"name":"tom",
"age":18
}
json 的另外一个数据格式是数组,和 javascript 中的数组字面量相同。
["tom",18,"programmer"]
还可以是更复杂的数据机构:
{
"name":"jack",
"age":29,
"hobby":["reading","travel","photography"]
"school":{
"name":"Merrimack College",
"location":'North Andover, MA'
}
}
总结:
- json 是现在市面上普遍使用的数据传输形式.
- json 中如果是字符串, 则需要使用双引号, 如果是数字, 则不需要
- json 的数据和是和对象非常相似, 这点需要注意
- 现在市场上使用 json 比较多的原因是这种数据传输方式非常方便, 简洁.
六. ajax 与 jsonp
ajax 技术的目的是让 javascript 发送 http 请求,与后台通信,获取数据和信息。ajax技术的原理是实例化 xml http 对象,使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行,从而实现异步。
同步和异步
现实生活中,同步指的是同时做几件事情,异步指的是做完一件事后再做另外一件事,程序中的同步和异步是把现实生活中的概念对调,也就是程序中的异步指的是现实生活中的同步,程序中的同步指的是现实生活中的异步。
局部刷新和无刷新
ajax 可以实现局部刷新,也叫做无刷新,无刷新指的是整个页面不刷新,只是局部刷新,ajax可以自己发送http请求,不用通过浏览器的地址栏,所以页面整体不会刷新,ajax获取到后台数据,更新页面显示数据的部分,就做到了页面局部刷新。
数据接口
数据接口是后台程序提供的,它是一个 url 地址,访问这个地址,会对数据进行增、删、改、查的操作,最终会返回 json 格式的数据或者操作信息,格式也可以是text、xml等。
$.ajax使用方法
使用方法:
$.ajax({
url:'请求地址',
type: '请求方式: 默认是'GET',常用的还有'POST' ',
dataType: '设置返回的数据格式,常用的是'json'格式,也可以设置为'html' ',
data: '设置发送给服务器的数据',
success: '设置请求成功后的回调函数',
error: '设置请求失败后的回调函数',
async: '设置是否异步,默认值是'true',表示异步'
})
常用参数:
1、url 请求地址
2、type 请求方式,默认是’GET’,常用的还有’POST’
3、dataType 设置返回的数据格式,常用的是’json’格式,也可以设置为’html’
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步,默认值是’true’,表示异步
以前的写法:
$.ajax({
url: '/change_data',
type: 'GET',
dataType: 'json',
data:{'code':300268}
success:function(dat){
alert(dat.name);
},
error:function(){
alert('服务器超时,请重试!');
}
});
新的写法(推荐):
$.ajax({
url: '/change_data',
type: 'GET',
dataType: 'json',
data:{'code':300268}
})
.done(function(dat) {
alert(dat.name);
})
.fail(function() {
alert('服务器超时,请重试!');
});
例如:
<script src="./jquery-1.12.4.min.js"></script>
<script>
// {"movieType":"in_theaters","pageIndex":2,"start":0,"count":10}
$(function(){
$.ajax({
url:'http://localhost:3008/getMovieListData?message={"movieType":"in_theaters","pageIndex":2,"start":0,"count":10}',
type:'get',
dataType:'json'
}).done(function(data){
console.log(data)
})
})
</script>
$.ajax的简写方式
$.ajax
按照请求方式可以简写成$.get
或者$.post
方式
$.get("/change_data", {'code':300268},
function(dat){
alert(dat.name);
});
$.post("/change_data", {'code':300268},
function(dat){
alert(dat.name);
});
同源策略
ajax 请求的页面或资源只能是同一个域下面的资源,不能是其他域的资源,这是在设计 ajax 时基于安全的考虑。特征报错提示:
XMLHttpRequest cannot load https://www.baidu.com/. No
'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.
jsonp
ajax 只能请求同一个域下的数据或资源,有时候需要跨域请求数据,就需要用到 jsonp 技术,jsonp 可以跨域请求数据,它的原理主要是利用了
<script>
标签可以跨域链接资源的特性。jsonp 和 ajax 原理完全不一样,不过 jquery 将它们封装成同一个函数。
一般 ajax 数据接口和 jsonp 数据接口的区别
开发返回数据的接口,如果是一般的 ajax 接口,让接口直接返回 json 格式的数据字符串就可以了,这种接口的数据是不能跨域请求的,如果要跨域请求数据,需要开发jsonp的接口,开发jsonp的接口,需要获取请求地址中的参数,也就是’callback’键对应的值,然后将这个值和json数据拼装成一个函数调用的形式的字符串返回,就完成了一个jsonp的接口,这个键值对是由$.ajax函数自动产生的。比如:’callback’键对应的值一般是这样的:jQuery1124018787969015631711_1522330257607,所以:
- 一般接口返回的数据形式:
‘{“iNum”:12,’sTr’:’abc’}’; - jsonp返回的数据形式:
‘jQuery1124018787969015631711_1522330257607({“iNum”:12,”sTr”:”abc”})’;
总结:
- $.ajax的使用方法
- 现在市面上数据请求的形式比较多, 普遍有 get post jsonp
- 异步指的是多个步骤同时进行. 同步指的是多个步骤一步一步执行.