知識點預習
1、jQuery事件冒泡2、事件委託 3、元素節點操作 4、正則表示式及表單驗證例項

01- submit事件

//監聽 提交的事件
$("form").submit(function (abc) {
    //阻止系統的預設行為
   // abc.preventDefault();
    return false;
})

• 事件冒泡的原理在一個物件上觸發某類事件（比如單擊onclick事件），如果此物件定義了此事件的處理程式，那麼此事
  件就會呼叫這個處理程式，如果沒有定義此事件處理程式或者事件返回true，那麼這個事件會向這個物件的
  父級物件傳播，從裡到外，直至它被處理（父級物件所有同類事件都將被啟用），或者它到達了物件層次的最
  頂層，即document物件（有些瀏覽器是window）。
  事件冒泡驗證
  事件的傳遞: 子 --> 父-->祖父-->window
  冒泡: 父元素 有同樣的事件
  事件冒泡機制有時候是不需要的，需要阻止掉
  通過 event.stopPropagation() 來阻止
  合併寫法：return false; 可以阻止冒泡也可以阻止事件的預設行為

04- 彈框案例
點選按鈕顯示,但要注意阻止它的冒泡點選document物件隱藏
點選提示框時不隱藏提示框,阻止冒泡
點選關閉按鈕時隱藏提示框,單獨實現,因為父級阻止冒泡了

05- 事件冒泡小結
只有在父子都要處理相同事件時才去考慮事件冒泡問題,一般情況不用關心它!優點
如果父子有相同事件,而且相同事件的功能都一樣 時,可以只用給父級新增事件,減少新增繫結事件次數,減少程式碼量,提升效能效率

弊端:
如果父子有相同事件,但相同事件的功能不一樣 時,就要阻止冒泡

06- 事件委託
事件委託就是利用冒泡的原理，把事件加到父級上，通過判斷事件來源的子集，執行相應的操作，事件委託首先可以極大減少事件繫結次數，提高效能；其次可以讓新加入的子元素也可以擁有相同的操作。
事件委託的優點:
1.減少事件繫結次數,減少程式碼量
2.後面新新增的子元素也可以正常執行事件

07- 節點操作
建立節點

var $div = $('<div>'); // 空節點/空標籤
var $div2 = $('<div>這是一個div元素</div>');
插入節點
1、在現存元素的內部，從後面插入元素
現存元素.append('插入的元素')插入的元素.appendTo('現存元素')2、在現存元素的內部，從前面插入元素 現存元素.prepend('插入的元素') 插入的元素.prependTo('現存元素')3、在現存元素的外部，從後面插入元素 現存元素.after('插入的元素') 插入的元素.insertAfter('現存元素')4、在現存元素的外部，從前面插入元素 現存元素.before('插入的元素') 插入的元素.insertBefore('現存元素')刪除節點

$('#div1').remove();
TODOList案例
1.獲取元素2.判斷是否為空 3.將新增的內容 新增到列表 4.刪除 上移動 下移動 5. 判斷 到頭 和到尾

09- 正則複習
1、什麼是正則表示式：
能讓計算機讀懂的字串匹配規則。
2、正則表示式的寫法：

var re=new RegExp('規則', '可選引數');
var re=/規則/引數;
規則中的字元

1）普通字元匹配： 如：/a/ 匹配字元 ‘a’，/a,b/ 匹配字元 ‘a,b’
2）轉義字元匹配：
\d 匹配一個數字，即0-9
\D 匹配一個非數字，即除了0-9
\w 匹配一個單詞字元（字母、數字、下劃線）
\W 匹配任何非單詞字元。等價於A-Za-z0-9_
\s 匹配一個空白符
\S 匹配一個非空白符
\b 匹配單詞邊界
\B 匹配非單詞邊界
.匹配一個任意字元
var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配純數字字串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //彈出true
alert(re02.test(sTr01)); //彈出false
4、量詞：對左邊的匹配字元定義個數

? 出現零次或一次（最多出現一次）
"+" 出現一次或多次（至少出現一次）
"*" 出現零次或多次（任意次）
{n} 出現n次
{n,m} 出現n到m次
{n,} 至少出現n次
、任意一個或者範圍

xxxxxxxxxx [abc123] : 匹配‘abc123’中的任意一個字元[a-z0-9] : 匹配a到z或者0到9中的任意一個字元
限制開頭結尾
^ 以緊挨的元素開頭$ 以緊挨的元素結尾
修飾引數：

g： global，全文搜尋，預設搜尋到第一個結果接停止
i： ingore case，忽略大小寫，預設大小寫敏感
8、常用函式

1、test
用法：正則.test(字串) 匹配成功，就返回真，否則就返回假
2、replace
用法：字串.replace(正則，新的字串) 匹配成功的字元去替換新的字元
正則預設規則
匹配成功就結束，不會繼續匹配，區分大小寫

var sTr01 = 'abcdefedcbaCef';
var re01 = /c/;
var re02 = /c/g;
var re03 = /c/gi;
var sTr02 = sTr01.replace(re01,'*');
var sTr03 = sTr01.replace(re02,'*');
var sTr04 = sTr01.replace(re03,'*');
alert(sTr02); // 彈出 ab*defedcbaCef
alert(sTr03); // 彈出 ab*defed*baCef
alert(sTr04); // 彈出 ab*defed*ba*ef
常用正則規則

//使用者名稱驗證：(數字字母或下劃線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 = /^[\[email protected]#$%^&*]{6,20}$/;
//手機號碼驗證：
var rePhone = /^1[34578]\d{9}$/;

• 登錄檔單驗證密碼只能是6到20位字母數字,還包含"[email protected]#$%^&*"字元
  br/>提示內容
  xx不能為空!
  使用者名稱只能是6到20位字母數字,還包含"_"
  密碼只能是6到20位字母數字,還包含"[email protected]#$%^&*"字元
  兩次輸入的密碼不一致!
  你輸入的郵箱格式不正確
  1.判斷輸入是否為空,如果為空彈不能為空提示2.如果不為空,就用正則匹配輸入是否符合規則

3.密碼確認,只需要判斷兩個密碼是否一樣
4.只要點選文字輸入框就隱藏提示
5.單選框的判斷
js寫法:單選框標籤物件.checked == truejQuery寫法:單選框標籤物件.is(:checked) == true
6.定義bool變數用來記錄輸入是否正確,注意因為單選框預設就是勾選,所以用來判斷它的變數預設值要能通過判斷
當所有輸入都沒有問題之後才能提交資料