JQuery高級

事件冒泡

• 定義：在一個對象上觸發某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那麼此事件就會調用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那麼這個事件會向這個對象的父級對象傳播，從裏到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。
• 作用：冒泡允許多個操作被集中處理（把事件處理器添加到一個父級元素上，避免把事件處理器添加到多個子級元素上），它還可以讓你在對象層的不同級別捕獲事件。
• 阻止：冒泡機制有時候是不需要的，需要阻止掉，通過 event.stopPropagation() 來阻止

$(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');
    });
})
......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>
# 阻止默認行爲
# 阻止表單提交

$('#form1').submit(function(event){
    event.preventDefault();
})
# 合併阻止操作 
# 實際開發中，一般把阻止冒泡和阻止默認行爲合併起來寫，合併寫法可以用
// event.stopPropagation();
// event.preventDefault();

// 合併寫法：
return false;

事件委託

• 委託就是利用冒泡的原理，把事件加到父級上，通過判斷事件來源的子集，執行相應的操作，事件委託首先可以極大減少事件綁定次數，提高性能；其次可以讓新加入的子元素也可以擁有相同的操作.

# 一般事件綁定寫法
$(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>
# 事件委託寫法
$(function(){
    $list = $('#list');
              //(真實事件源，事件類型，匿名函數)
        //作用：1.提高代碼執行效率 2.給未來元素綁定命令（通過程序添加到頁面的標籤就是未來元素）
        //拓展: 工作中給未來元素綁定事件--on
        //$('li').on(事件類型，匿名函數)
    $list.delegate('li', '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>

jquery元素節點操作

• 指改變html的標籤結構（節點：標籤、內容、屬性）

# 兩種情況
1.移動現有標籤的位置
2.將新創建的標籤插入到現有的標籤中

# 追加節點的步驟
# 創建新標籤
# 1.聲明變量保存想要追加的節點數據
var $div = $('<div>'); //創建一個空的div
var $div2 = $('<div>這是一個div元素</div>');
# 2.使用 追加函數（子級追加、同級追加）將節點變量追加到頁面
# 移動或者插入標籤的方法

# 子級 單個時：在對象的子級後追加 ；多個時：在每個對象的子級後追加；移動已有元素到對象後
1.append()和appendTo():在現存元素的內部，從後面放入元素
var $span = $('<span>這是一個span元素</span>');
$('div').append($span);
// 或 $span.appendTo($('div'));
......
<div id="div1"></div>
# 子級 單個時：在對象的子級前追加 ；多個時：在每個對象的子級前追加；移動已有元素到對象前
2.prepend()和prependTo()：在現存元素的內部，從前面放入元素
# 同級 單個時：在對象後追加 ；多個時：在每個對象後追加；移動已有元素到對象後
3.after()和insertAfter()：在現存元素的外部，從後面放入元素
# 同級 單個時：在對象前追加 ；多個時：在每個對象前追加；移動已有元素到對象前
4.before()和insertBefore()：在現存元素的外部，從前面放入元素

# 刪除標籤
$('#div1').remove();
# 清空節點
empty();
# a的href取值javascript:;(等價於javascript:void(0)) 表示的含義是不做任何的跳轉，具體功能看js如何綁定命令

表單驗證

• 正則：能讓計算機讀懂的字符串匹配規則

# 寫法
var re=new RegExp('規則', '可選參數');
var re=/規則/參數;

# 規則中的字符
1.普通字符匹配
2.轉義字符匹配
3.量詞：對左邊的匹配字符定義個數
4.任意一個或者範圍
5.限制開頭結尾
# 修飾參數
- g： global，全文搜索，默認搜索到第一個結果接停止
- i： ingore case，忽略大小寫，默認大小寫敏感

# 常用函數test
用法：正則.test(字符串) 匹配成功，就返回真，否則就返回假

# 正則默認規則
匹配成功就結束，不會繼續匹配，區分大小寫
# 常用正則規則
# //用戶名驗證：(數字字母或下劃線6到20位)
var reUser = /^\w{6,20}$/;

# //郵箱驗證：        
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;

# //密碼驗證：
var rePass = /^[\w!@#$%^&*]{6,20}$/;

# //手機號碼驗證：
var rePhone = /^1[34578]\d{9}$/;