python前端jQuery高級

知識點(diǎn)預(yù)習(xí)
1、jQuery事件冒泡2、事件委托 3、元素節(jié)點(diǎn)操作 4、正則表達(dá)式及表單驗(yàn)證實(shí)例

創(chuàng)新互聯(lián)建站專業(yè)成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)，集網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作于一體，網(wǎng)站seo、網(wǎng)站優(yōu)化、網(wǎng)站營銷、軟文推廣等專業(yè)人才根據(jù)搜索規(guī)律編程設(shè)計(jì)，讓網(wǎng)站在運(yùn)行后，在搜索中有好的表現(xiàn)，專業(yè)設(shè)計(jì)制作為您帶來效益的網(wǎng)站！讓網(wǎng)站建設(shè)為您創(chuàng)造效益。

01- submit事件

//監(jiān)聽 提交的事件
$("form").submit(function (abc) {
    //阻止系統(tǒng)的默認(rèn)行為
   // abc.preventDefault();
    return false;
})

事件冒泡的原理在一個(gè)對象上觸發(fā)某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事
件就會調(diào)用這個(gè)處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個(gè)事件會向這個(gè)對象的
父級對象傳播，從里到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達(dá)了對象層次的最
頂層，即document對象（有些瀏覽器是window）。
事件冒泡驗(yàn)證
事件的傳遞: 子 --> 父-->祖父-->window
冒泡: 父元素有同樣的事件
事件冒泡機(jī)制有時(shí)候是不需要的，需要阻止掉
通過 event.stopPropagation() 來阻止
合并寫法：return false; 可以阻止冒泡也可以阻止事件的默認(rèn)行為

04- 彈框案例
點(diǎn)擊按鈕顯示,但要注意阻止它的冒泡點(diǎn)擊document對象隱藏
點(diǎn)擊提示框時(shí)不隱藏提示框,阻止冒泡
點(diǎn)擊關(guān)閉按鈕時(shí)隱藏提示框,單獨(dú)實(shí)現(xiàn),因?yàn)楦讣壸柚姑芭萘?/p>

05- 事件冒泡小結(jié)
只有在父子都要處理相同事件時(shí)才去考慮事件冒泡問題,一般情況不用關(guān)心它!優(yōu)點(diǎn)
如果父子有相同事件,而且相同事件的功能都一樣時(shí),可以只用給父級添加事件,減少添加綁定事件次數(shù),減少代碼量,提升性能效率

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

06- 事件委托
事件委托就是利用冒泡的原理，把事件加到父級上，通過判斷事件來源的子集，執(zhí)行相應(yīng)的操作，事件委托首先可以極大減少事件綁定次數(shù)，提高性能；其次可以讓新加入的子元素也可以擁有相同的操作。
事件委托的優(yōu)點(diǎn):
1.減少事件綁定次數(shù),減少代碼量
2.后面新添加的子元素也可以正常執(zhí)行事件

07- 節(jié)點(diǎn)操作
創(chuàng)建節(jié)點(diǎn)

var $div = $('

'); // 空節(jié)點(diǎn)/空標(biāo)簽
var $div2 = $('

這是一個(gè)div元素

');
插入節(jié)點(diǎn)
1、在現(xiàn)存元素的內(nèi)部，從后面插入元素
現(xiàn)存元素.append('插入的元素')插入的元素.appendTo('現(xiàn)存元素')2、在現(xiàn)存元素的內(nèi)部，從前面插入元素現(xiàn)存元素.prepend('插入的元素') 插入的元素.prependTo('現(xiàn)存元素')3、在現(xiàn)存元素的外部，從后面插入元素現(xiàn)存元素.after('插入的元素') 插入的元素.insertAfter('現(xiàn)存元素')4、在現(xiàn)存元素的外部，從前面插入元素現(xiàn)存元素.before('插入的元素') 插入的元素.insertBefore('現(xiàn)存元素')刪除節(jié)點(diǎn)

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

09- 正則復(fù)習(xí)
1、什么是正則表達(dá)式：
能讓計(jì)算機(jī)讀懂的字符串匹配規(guī)則。
2、正則表達(dá)式的寫法：

var re=new RegExp('規(guī)則', '可選參數(shù)');
var re=/規(guī)則/參數(shù);
規(guī)則中的字符

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

? 出現(xiàn)零次或一次（最多出現(xiàn)一次）
"+" 出現(xiàn)一次或多次（至少出現(xiàn)一次）
"*" 出現(xiàn)零次或多次（任意次）
{n} 出現(xiàn)n次
{n,m} 出現(xiàn)n到m次
{n,} 至少出現(xiàn)n次
、任意一個(gè)或者范圍

xxxxxxxxxx [abc123] : 匹配‘a(chǎn)bc123’中的任意一個(gè)字符[a-z0-9] : 匹配a到z或者0到9中的任意一個(gè)字符
限制開頭結(jié)尾
^ 以緊挨的元素開頭$ 以緊挨的元素結(jié)尾
修飾參數(shù)：

g： global，全文搜索，默認(rèn)搜索到第一個(gè)結(jié)果接停止
i： ingore case，忽略大小寫，默認(rèn)大小寫敏感
8、常用函數(shù)

1、test
用法：正則.test(字符串) 匹配成功，就返回真，否則就返回假
2、replace
用法：字符串.replace(正則，新的字符串) 匹配成功的字符去替換新的字符
正則默認(rèn)規(guī)則
匹配成功就結(jié)束，不會繼續(xù)匹配，區(qū)分大小寫

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
常用正則規(guī)則

//用戶名驗(yàn)證：(數(shù)字字母或下劃線6到20位)
var reUser = /^\w{6,20}$/;
//郵箱驗(yàn)證：        
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
//密碼驗(yàn)證：
var rePass = /^[\w!@#$%^&*]{6,20}$/;
//手機(jī)號碼驗(yàn)證：
var rePhone = /^1[34578]\d{9}$/;

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

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

分享題目：python前端jQuery高級
網(wǎng)頁鏈接：http://weahome.cn/article/pscosj.html