jQuery 基础入门速成下篇
jQuery高级
事件冒泡
什么是事件冒泡？
在一个对象上触发某类事件，此对象上定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直到它被处理，或者到达对象层次的最顶层，即document对象；
事件冒泡作用？
事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上)，它还可以让你在对象层的不同级别捕获事件。
阻止事件冒泡？
事件的冒泡有时候是不需要的，是多余的，需要阻止掉，通过event.stopPropagation()阻止
// 外层box1 里层box2
$(function(){
var $obox1 = $('.box1')
var $obox2 = $('.box2')
$obox1.click(function(){console.log(1)});
$obox2.click(function(){console.log(2)});
})
// 冒泡结果 2 1
// 阻止冒泡
$obox2.click(function(event){ event.stopPropagation(); console.log(2); })合并阻止操作？
// 阻止冒泡
event.stopPropagation()
// 阻止默认行为
event.preventDefault()
// 合并写法
return false
$obox2.click(function(event){
// event.stopPropagation();
console.log(2);
return false
})案例 —— 弹窗
完成下面这张图的效果，起初弹窗默认是关闭的，通过按钮控制弹窗将其开启，会出现中间的主体和外面的遮罩层，点击遮罩层可以实现关闭弹窗，也可以通过手动关闭按钮来关闭弹窗，点击到中间的主体范围不会触发关闭弹窗，因为这个弹窗可能需要做其他操作，比如这个更新按钮点击，或者是提交一些别的信息，所以主体这块内容需要进行冒泡的处理。
【小白解析思路：首先为按钮来添加点击事件控制弹窗的显示和隐藏，以及为关闭按钮设置点击事件，隐藏和显示的方法可以用hide()和show()
$('#btn').click(function(){ $('#main').show() })
$('#close').click(function(){ $('#main').hide() })外部的遮罩层可以用这个document对象
$(document).click(function(){ $('#main').hide() })使用这个方法你会发现它的一个问题，点击之后没反应，这里不是没反应，是太快了！点击input按钮之后会进行冒泡到body，所以从开始的hide() —— show() —— hide() : 用定时器测试一下：
// 测试 ：input冒泡 —— body —— document
$(document).click(function(){
setTimeout(function(){
$('#main').hide()
},2000)
})那么这里需要来做的就是来阻止事件的一个冒泡行为；
主体的内容是这个 class = "content" 的内容，当鼠标点击主体内容的范围会发生这个冒泡，从这个content 向 class = "main" ... 向外冒泡，所以需要阻止class="content"向外冒泡的行为。
$('.content').click(function(){ return false })最后将整体的代码放置在下面，样式的话自行编写！】
事件的委托
事件的委托就是利用冒泡的原理，将事件绑定在父级上，子集发生的事件都会冒泡到父级，父级通过判断子级的特征给它特定的操作。事件委托首先可以极大减少事件的绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
// 一般写法
$(function(){
$li = $('#list li');
$li.click(function(){
$(this).css({ color:'red' })
})
})
- 1
- 2
- 3
- 4
事件委托写法性能更好；
// 事件委托
$ul = $('#list');
$ul.delegate('li','click',function(){
$(this).css({ color:'red' })
})DOM操作
元素节点操作指的是改变html的标签结构，它有两种情况：
1. 移动现有标签的位置
2. 将新创建的标签插入到现有的标签中
创建新标签
var $div = $('') // 创建一个空div
var $div = $('这是一个div元素')
移动或插入标签的方法
1. append() 和 appendTo() ，在现存元素的内容，从后面放入元素
var $span = $('这是一个span元素')
$('#obox').append($span)
$span.appendTo('#obox')
2. 2. prepend() 和 prependTo ，在现存元素的内容，从前面放入元素
3. after() 和 insertAfter() ，在现存元素的内容，从后面放入元素
4. before() 和 insertBefore() ，在现存元素的内容，从前面放入元素
5. remove() 删除标签
// remove() 删除标签
$('#obox').remove()
案例 —— 待办事项
【小白思路解析：这个案例想必很多人都挺熟悉的了，一个类似待办备忘录的例子，主要通过输入框来获取输入的数据（ val() ），通过添加按钮触发点击事件( click )，将内容和模板内容插入到对应的节点上( append() )，同时可以对插入的节点进行DOM操作，删除上移下移操作，删除操作的动画是向右边移动逐渐消失被删除( animate() )，这个在上一篇的内容中的动画讲到了可以进行结合复习一下，这里对应的上下图标用的是font-awesome】
附上地址：Font Awesome，一套绝佳的图标字体库和CSS框架
Document
List 待办 | To do
-
记录今天有趣的待办事情吧！
删除
Ajax
局部刷新和异步刷新
ajax 可以实现局部刷新，也称无刷新，无刷新指的是页面整体不进行刷新，只做局部刷新，ajax可以自己发送http数据请求，不需要通过浏览器的url地址栏，所以页面整体不会进行刷新，ajax获取后台数据，更新页面显示数据的部分，就做到了页面局部刷新
ajax 请求
$.ajax使用方法，参数
url 请求地址
type 请求方式,默认是'GET',常用的还有'POST'
dataType 设置返回数据的格式,常用的是'json'格式
data 设置发送给服务器的数据
success 请求成功后的回调函数
error 请求失败后的回调函数
async 设置是否异步，默认true,表同步
1 ）过去的写法
$.ajax({
url:'/api/swiperList',
type:'GET',
dataType:'json',
data:{ 'code':0 }
success:function(data){
alert(data);
}
error:function(err){
alert(err);
}
})
2 ）新的写法推荐
$.ajax({
url:'/api/swiperList',
type:'GET',
dataType:'json',
data:{ 'code':0 }
})
.done(function(data){
alert(data)
})
.fail(function(err){
alert(err)
})
这里来测试一下，需要用到测试数据的结构，这里可以看一下 微信小程序搭载node.js服务器
搭载的测试接口服务器，内容比较简单容易上手，下面就使用它来做$.ajax() 请求测试：
读取文件
ajax 读取txt文件，将读取的内容显示在页面上。在Node.js服务器上创建这样一个接口，读取public中的test.txt文件，将读取的内容返回到客户端即可。
test.txt 文件内容
这是一个测试文本
接口测试可以拿到数据，下面通过 ajax 来读取并显示在页面上：
读取 json数据
ajax 读取 json文件，将读取的文件显示在页面上。
test.json
{
"name":"syan",
"age":"18"
}
接口测试可以拿到数据，下面通过 ajax 来读取并显示在页面上：
本篇内容就到此结束了，感谢大家的支持！！！附上前一篇内容的链接，感兴趣的读者可以前往阅读。
附 ： jQuery 基础入门速成上篇
