一、事假冒泡:

1. 什么是事件冒泡 :

事件是可以传播的;
事件冒泡不仅存在于JQ,原生JS也是存在事件冒泡的;
事件冒泡就是传播的一种形式;
事件的传播形式: 冒泡和捕获 ;
事件冒泡:子元素的时间被处罚, 父盒子元素的同类事件也会被触发。大多数情况下,冒泡是要被取消的;

2.事件冒泡的作用

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

3.阻止事件冒泡:

方法一: return flase;
方法二:阻止事件传播:event.stopPropagation();
既可以阻止冒泡也可以阻止捕获

3.1 浏览器默认行为:

表单的提交
a链接点击后的跳转
按键盘后，浏览器能够输入内容。
获取焦点事件后，input能够获取焦点。

3.2 案例2: 弹窗

强行来一波事件冒泡:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例_事件冒泡实现弹窗</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-1.11.1.js"></script>
    <script>
        $(function(){
            // 需求1: 点击按钮显示盒子，点击X号隐藏盒子。
            //  点击按钮,显示弹窗
            $("#btn01").click(function() {
                $("#pop").show(400)
                return false
            })

            // 点击关闭按钮,隐藏
            $("#shutoff").click(function() {
                $("#pop").hide(200)
            })
            
            // 需求2:强行使用一波冒泡,实现点击mask遮罩,完成对弹窗的隐藏
            $(document).click(function() {
                $("#pop").hide(200)
            })

            // 提示框中的所有内容不应该有冒泡
            $(".pop_con").click(function() {
                return false;
            })
        })
    </script>
</head>
<body>
    <!-- 按钮 -->
    <input type="button" value="弹出弹框" id="btn01">

    <!-- 整个显示隐藏的大盒子 -->
    <div class="pop_main" id="pop">
        <!-- 部分一: 登录框 -->
        <div class="pop_con">
            <div class="pop_title">
                <h3>系统提示</h3>
                <!-- 用于隐藏的X号 -->
                <a href="#" id="shutoff">×</a>
            </div>
            
            <div class="pop_detail">
                <p class="pop_text">亲！请关注近期的优惠活动！</p>
            </div>

            <div class="pop_footer">                
            </div>
        </div>
        
        <!-- 部分二: 遮罩层 -->
        <div class="mask"></div>
    </div>
</body>
</html>

二、事件委托:

1.什么是事件委托:

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

2.一般绑定事件的写法:

问题:新创建出来的元素,没有老事件
解决:可以使用createElement()创建新的标签,以保证原来的标签的事件不丢失,但是,新建的元素依然没有老事件。

3.事件委托的写法:

让新创建出来的标签也有事件,就是事件委托

方法一:(事件委托):
$('ul').delegate('li', 'click', function(){事件逻辑;})
方法二:(事件委托):
('ul').on('li', 'click', function(){事件逻辑;})
事件不委托:
('li').on('click', function(){事件逻辑;})

4.总结:

以后如果出现创建新元素,name绑定事件的时候最好用事件委托;
冒泡:
- 出问题了的时候能够回取消冒泡;
- 知道事件委托的底层原理就是冒泡;

三、DOM操作:

1.DOM操作:

Dom操作也叫做元素节点操作，它指的是改变html的标签结构，它有两种情况：

移动现有标签的位置;
将新创建的标签插入到现有的标签中;

2. 创建,添加,删除,复制,替换:

(参考代码06)

创建元素:

创建元素的格式 var $newEel = $(’’); 一定要有尖括号(<>)
var $newLi = $(‘

我是JQuery新创建的li标签…

’)

子元素添加:

append():向父标签的最末行条件
appendTo():

$('ul').append($newLi)
 $newLi.appendTo($('ul'))    // 将newLi添加到ul后边

prepend():向父标签的最前端添加
prependTo():

// 子元素添加: 添加到ul子元素的最前边
$('ul').prepend($newLi)
$newLi.prependTo($('ul'))

兄弟元素之后添加:

after():放在兄弟元素之后;
insertAfter()：

// 兄弟元素添加:添加在"#box"之后
$("#box").after($newLi)
$newLi.insertAfter($('#box')

兄弟元素之前添加:

before():
insertBefore()

// 兄弟元素添加:添加到"#box"之前
$("#box").before($newLi)
$newLi.insertBefore($("#box"))

删除元素:

$(’#div1’).remove();

复制:

clone():参数传true,保存元素事件

3.案例:to do list

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ToDoList</title>
    <link rel="stylesheet" href="css/todolist.css">

    <script src="js/jquery-1.11.1.js"></script>
    <script>
        $(function() {
            // 需求:添加,删除,向上,向下移动
            // 添加
            $("#btn1").click(function() {
                // 判断是否为空字符串
                if($('#txt1').val() == ""){
                    alert("内容为空,不能添加...")
                    return;
                }
                // 创建li标签
                var $newLi = $('<li>'+
                    '<span>'+ $("#txt1").val() +'</span>'+
                    '<a href="javascript:;" class="up"> ↑ </a>'+
                    '<a href="javascript:;" class="down"> ↓ </a>'+
                    '<a href="javascript:;" class="del">删除</a>'+
                    '</li>')
                
                // 放入ul中
                $('#list').prepend($newLi)

                // 清空输入框,获取插入条光标
                $("#txt1").val("").focus()
            })

            // 删除,向上,向下移动:使用事件委托实现
            $("#list").delegate('a', 'click',function() {
                // 判断点击了那一个a标签
                if($(this).attr('class') == "del") {
                    // 删除
                    $(this).parent().remove()
                } else if($(this).attr('class') == "down") {
                    // 向下
                    // 判断已经是最下边的了
                    var currentLi = $(this).parent()
                    if(currentLi.next().length == 0){
                        alert("已经是最后一个了")
                        return;
                    }
					currentLi.next().after(currentLi)
                }else if($(this).attr('class') == "up") {
                    // 向上
                    var currentLi = $(this).parent()
                    // 判断已经是第一个了
                    if(currentLi.index() == 0) {
                        alert("已经是第一个了")
                        return;
                    }
					currentLi.prev().before(currentLi)
                }
            })
        })
    </script>
</head>
<body>
    <div class="list_con">
        <h2>To do list</h2>
        <!-- 添加内容区域 -->
        <input type="text" name="" id="txt1" class="inputtxt">
        <!-- 添加按钮 -->
        <input type="button" name="" value="增加" id="btn1" class="inputbtn">     
        <!-- 将来放入这个ul标签中 -->
        <ul id="list" class="list">
            <!-- 一条信息的构成 -->
            <li>
                <span>学习html</span>
                <a href="javascript:;" class="up"> ↑ </a>
                <a href="javascript:;" class="down"> ↓ </a>
                <a href="javascript:;" class="del">删除</a>
            </li>
            <li>
                <span>学习css</span>
                <a href="javascript:;" class="up"> ↑ </a>
                <a href="javascript:;" class="down"> ↓ </a>
                <a href="javascript:;" class="del">删除</a>
            </li>
            <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
        </ul>
    </div>   
</body>
</html>

ToDoList效果展示

二十五、python学习之前端(八): JQuery高级