jQuery事件冒泡委托及元素节点操作

1，事件冒泡

在子元素与复元素绑定同类事件如（click）,在触发子元素的同时其父级元素的绑定事件也会被触发。
例：

$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})

若不想让父级元素绑定的事件受到影响即可阻止事件冒泡，阻止事件冒泡的方法是：event.stopPropagation();
例：

$(function(event){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
        event.stopPropagation();
    });
    $box3.click(function(event) {
        alert('grandson');
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})

1.1阻止表单的默认行为：event.preventDefault();
event.stopPropagation();和 event.preventDefault();
的合并写法为：return false;

2，事件委托

事件委托的原理是利用冒泡，把事件添加到父级上，通过判断事件来源的子集执行相关操作，优点是极大的减少了事件绑定的次数，其次可以让新加入的子元素也可以执行相应的操作。
例：

$(function(){
    $list = $('ul');
    $list.delegate('li', 'click', function() {
        $(this).css({background:'red'});
    });
})

3，节点的创建、添加、和删除

3.1创建：$("<li></li>")
3.2内部添加内容：
element.append(‘内容’); 把内容放到匹配元素的最后面，相当于原生的appendChild()。
appendTo(content)；用于被追加的内容。
element.prepend(‘内容’) 把内容放到匹配元素的前面。
prependTo(content) 追加内容到元素的前面。
3.3外部添加：
element,after('内容’) 把内容放到目标元素后面。
element.before('内容’) 把内容放到目标元素的前面。
3.4插入标签
insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
insertBefore() 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
3.5 删除元素：
element.remove() 删除匹配的元素。
element.empty() 删除匹配的元素集合中所有的子节点。
element.html("") 清空匹配的元素内容。

remove()删除的是元素的本身，empty()与html()作用相同，只不过html()还可以设置内容。

3.6其他操作： wrap(html|ele|fn) 把所有匹配的元素用其他元素的结构化标记包裹起来。 unwrap() 移除父级元素。 replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素。例：

<body>
    <ul>
        <li>原li</li>
    </ul>
    <p>今天天气不错</p>
    <div class="test">原div</div>
    <script>
        $(function() {
            // 1. 创建元素
            var li = $("<li>创建的li</li>");
            // 2. 添加元素

            // (1) 内部添加
            // $("ul").append(li);  内部添加并且放到内容的最后面 
            //$("li").appendto("ul")   把li追加到ul的后面
            $("ul").prepend(li); // 内部添加并且放到内容的最前面
            //$("li").prependTo("ul")    把li追加到ul前面

            // (2) 外部添加
            var div = $("<div>添加的</div>");
            // $(".test").after(div);
            $(".test").before(div);
            //$("p").insertAfter("div");把p标签插入到div的后面。
            //$("p").insertBefore("ul");把p标签插入到ul的前面。
            
            // 3. 删除元素
            // $("ul").remove(); 可以删除匹配的元素 自杀
            // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
            $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
            //4，其他
            //$("p").wrap("<div class='wrap'></div>");将所有匹配的p标签用新创建的div包裹起来。
             //$("p").unwrap();将包裹p标签的div取消。
             //$("p").replaceWith("<b>Paragraph. </b>");将所匹配的p标签用b标签替换。

        })
    </script>
</body>