一、事件冒泡定义
事件冒泡是指在一个对象触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，甚至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层级的最顶层，即document对象（有些浏览器是window）.。
二、事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
三、阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过event.stopPropagation（）来阻止
四、阻止默认行为
如：阻止右键菜单
五、合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法如下：
六、事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
1、一般绑定事件的写法：
2、事件委托的写法：（实际开发中，如果是对大量子元素进行操作时，应该用事件委托的方式，提高性能）
七、取消事件委托
用法：$("委托对象").undelegate()
八、jQuery元素节点操作1、创建节点
2、插入节点
a、append()和appendTo() 在现存元素的内部，从后面插入元素
输出结果为：
b、prepend()和prependTo() 在现存元素的内部，从前面插入元素
输出结果：
c、after()和insertAfter() 在现存元素的外部，从后面插入元素
输出结果：
d、before()和insertBefore() 在现存元素的外部，从前面插入元素
输出结果：
3、删除节点
$(selector).remove();
4、to do list（计划列表）实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/reset.css" rel="external nofollow" rel="external nofollow" >
<style>
.con{
width:360px;
margin:30px auto;
}
.con > h3{
margin-bottom:15px;
}
.con input{
width:290px;
height:30px;
}
.con button{
width:60px;
height:34px;
border:0;
}
.con ul li{
display: flex;
margin-top:15px;
border-bottom:1px solid #ccc;
justify-content: space-between;
}
.con li p{
/*清除a元素之间的间隙*/
font-size:0;
}
.con li p a{
color:#1b5fdd;
font-size:16px;
margin-left:10px;
}
/*弹框样式*/
.pop_con{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background:#000;
display: none;
}
.pop{
width:400px;
height:220px;
position:absolute;
left:50%;
margin-left:-200px;
top:50%;
margin-top:-150px;
background:#fff;
}
.pop .pop_title{
padding:15px;
display: flex;
justify-content: space-between;
}
.pop .pop_title a{
width:36px;
height:36px;
line-height:36px;
border-radius:50%;
background:#c7254e;
color:#fff;
text-align: center;
position:absolute;
top:-18px;
right:-18px;
transition: all 1s ease;
}
.pop_title h3{
letter-spacing: 2px;
font-weight: normal;
}
.pop_title a:hover{
transform: rotate(360deg);
}
.pop_message{
height:110px;
line-height:110px;
text-align: center;
}
.pop_confirm{
height:36px;
text-align: center;
}
.pop_confirm button{
height:36px;
line-height: 36px;
padding:0 15px;
background: #c7254e;
border:none;
color:#fff;
outline: none;
}
</style>
<script src="../js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//声明变量
var $input = $("#input");
$(".pop").click(function(){
return false;
});
$(".pop_confirm").click(function(){
$(".pop_con").fadeOut();
});
$(".close").click(function(){
$(".pop_con").fadeOut();
});
$(".pop_con").click(function(){
$(this).fadeOut();
});
//点击增加按钮，新增元素
$("#add").click(function(){
var $inputVal = $input.val();
//如果输入值为空，出现弹框提示
if($inputVal == ""){
$(".pop_con").fadeIn();
return false
}
$input.val("");
var $li = $("<li><h3>"+$inputVal+"</h3><p><a class='delete' href='javascript:void(0);'>删除</a><a class='prev' href='javascript:void(0);'>上移</a><a class='next' href='javascript:void(0);'>下移</a></p></li>");
$("ul").append($li);
});
//使用事件委托写在一起，提高性能
$("ul").delegate("li a","click",function(){
//首先判断点击的是哪个a
if($(this).attr("class") == "prev"){
//判断是否存在该元素
if($(this).closest("li").prev().length ==0){
$(".pop_message").html("已到顶部!");
$(".pop_con").fadeIn();
return false
}
$(this).closest("li").prev().before($(this).closest("li"));
}else if($(this).attr("class") == "next"){
if($(this).closest("li").next().length ==0){
$(".pop_message").html("已到底部!");
$(".pop_con").fadeIn();
}
$(this).closest("li").next().after($(this).closest("li"));
}else{
$(this).closest("li").remove();
}
})
})
</script>
&