python前端jQuery高級

知識點預習
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 = /^[\w!@#$%^&*]{6,20}$/;
//手機號碼驗證：
var rePhone = /^1[34578]\d{9}$/;

• 注冊表單驗證提示內容
  xx不能為空!
  用戶名只能是6到20位字母數字,還包含"_"
  密碼只能是6到20位字母數字,還包含"_!@#$%^&*"字符
  br/>提示內容
  xx不能為空!
  用戶名只能是6到20位字母數字,還包含"_"
  密碼只能是6到20位字母數字,還包含"_!@#$%^&*"字符
  你輸入的郵箱格式不正確
  1.判斷輸入是否為空,如果為空彈不能為空提示2.如果不為空,就用正則匹配輸入是否符合規則

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