嘿嘿,今天是傳說中的百年難得一遇的神棍節,先祝願所有的光棍們明年能過上父親節哈!
雖然關於jquery回憶錄已經三天瞭,但節奏還是很慢,主要是照顧新人們瞭,因為可能每個人的接受能力不同,有的人,拿起jquery API看一下就知道怎麼用瞭,有的人可能連事件是什麼都不清楚,勤能補拙吧,多努努力,別把時間浪費在牢騷上,當然,我寫這個可不是因為無事可做瞭,也不是所謂的大無謂分享精神,我也不是老師,隻是對以往知識的一種梳理,又正好老婆要轉向前端,所以我以她的接受能力來講解,可能下次我回錄下視頻吧,不過前面的都還很簡單,可以用文字來描述,我的技術有限,如果有不正確的地方,歡迎大夥指正。另設Q群交流:70210212.
本文的案例請點擊這裡。
說到事件,到底神馬才是事件呢?所謂事件:就是你主動對頁面上發出的任何指令,然後它對指令產生瞭回應,這就是事件瞭,你的任何操作都會產生一個信號,例如,你點擊瞭鼠標,系統就會去處理鼠標點擊這個事件瞭,再例如,你按下瞭鍵盤,鍵盤的事件就觸發瞭,這似乎是很理所當然的事,但我能不能點鍵盤的時候觸發鼠標的事件呢?這個要求似乎有點過分瞭,實際上是不是可行的呢?一半一半吧,為什麼會說一半一半呢,這裡就要引入一個概念瞭,系統事件和用戶事件,比如你想打開一個頁面時想調用Ctrl+D,添加收藏夾,這樣是不行的,必須使用鍵盤操作。說得有點繞口瞭,還是看圖講故事吧,請看大屏幕↓
事件類又分鍵盤事件和鼠標事件,如下圖:
是不是有點小復雜瞭?這些都隻作參考,因為我們今天要講的隻是鼠標事件中的一個小小的Click事件,所以不要被嚇著瞭。 click事件是在鼠標點擊後松開時觸發的,這裡就有有個問題瞭,如果我一個頁面上有個按鈕,我在body上寫瞭一個事件方法,然後點擊按鈕,這時會不會觸發body的點擊事件瞭?好,我們看代碼:
html:
<input type="submit" id="mybtn" value="提 交"/>
js:
$("#mybtn").click(function(e){
console.log("this is button");
e.preventDefault();
});
$("body").click(function(){
console.log("this is body");
});
結果在firebug的控制臺裡打印出:
這說明,點擊按鈕是先觸發瞭button之後,然後再往外層觸發它的父級的。 這就是所謂的冒泡事件瞭,不管你套多少層,它都會從裡到外一層層的冒泡執行。所以一般點擊事件的執行順序是,當用戶點擊一個DOM節點時,一個點擊事件發送到目標節點,它的父節點、祖節點等,一直到文檔樹的最外層。這個過程就叫做冒泡。你可能在有些情況下想要阻止冒泡,讓事件隻發生在目標節點上,你可以使用事件的參數e.stopPropagation();剛才上面的代碼還有一個e.preventDefault(),它的意思就是阻止系統默認事件,因為我用的是submit控件,所以我要阻止表單的提交,就用瞭這個,當然,你還可以用return false;來阻止。可以看出jquery的事件編寫方法是$("domquery").click(function(e){….});這個e在不需要的時候可以參略,如果我們想得到它本身節點的話就可以在function裡調用$(this);
好,我們用剛剛學習到的知識來做一個表單提交不為空的判斷,隻有在強大理論的依據下做出實際的東西來,才算學好瞭,不然,你隻是隨便看看,像瀏覽八卦一樣的話,我勸你還是放棄吧,八卦肯定比我寫的爛文好看多瞭。言歸正傳,我先貼出我的代碼,你可以先不看代碼的情況下自己寫寫。
html:
<form id="myform">
<p>
*姓名:<input type="text" name="name"/>
</p>
<p>
*性別:<input type="radio" value="1" name="sex"/>男<input type="radio" value="0" name="sex"/>女
</p>
<p>
*收入:<select name="money">
<option value="-1">請選擇</option>
<option value="1">低收入</option>
<option value="2">中等收入</option>
<option value="3">高收入</option>
</select>
</p> www.aiwalls.com
<input type="submit" id="mybtn" value="提 交"/>
</form>
JS:
<script>
$(function(){
$("#mybtn").click(function(e){
var nameValue=$("[name='name']").val();
var sexValue=$("[name='sex']:checked").val();
var moneyValue=$("[name='money']").val();
if(nameValue.length<6){
alert('姓名長度不能少於六個字符!');
$("[name='name']").select();
return false;
}
if (!sexValue) //null、undefined、“” 、false
{
alert("請選擇性別!")
$("[name='sex']").focus();
return false;
}
if (moneyValue==-1)
{
alert('請選擇收入');
$("[name='money']").focus();
return false;
}
console.log($("[name='money']").val())
return true;
//e.stopPropagation();//阻止冒泡事件
//e.preventDefault();//阻止系統事件,如表單提交
});
});
</script>
執行結果如下圖:
我們首先來看html,在html裡沒有任何的JS,包括節點的onclick,完全的就是剛排好版的樣式,這也是JS庫的一個好處,你寫$(…).clcik(function(){})時,就是在給這個節點定義事件,如果你不帶這個函數($(…).click(空))就是在調用這個節點的點擊事件,它讓HTML和JS達到瞭分離的效果。JS部分需要註意的是,取checkbox的值要取選中項的值,必須$(":checkbox:checked").val(),如果直接對控制取val() 的話會不選中也取到瞭值,radio也是如此。然而奇怪的是select控件你又不能取$(":selected).val();真是百思不得其解,但你可以通過它取得選中的option,取值的話$("#sel").val()直接取就行瞭。判斷字符串長度就是length屬性瞭,它不會分別漢字占兩個英文長度,所以如果你要把漢字當兩個字符處理的話就要寫正則表達式瞭,這個下回再說。
到這裡基本上click事件就說完瞭,真是口幹舌燥啊,不希望我如此的累,你還是敷衍我,所以呢,好好再看一遍,做一遍吧,花不瞭半小時的。
在我是如何去瞭解jquery的(二),復雜選擇符 一篇裡,最後我提到過,全選有很多的做法,並且說過讓大傢試下做,今天就揭曉下吧,功能要求是這樣的:隻要選中一個或以上,全選就選中,再點就是不選,它有三層意思
- 選中一個或以上時,全選自動勾上.
- 單獨點擊全選為勾上時,這時候全部都選中。
- 取消全選時就取消所有的選中
HTML代碼如下:
<table class="list">
<thead>
<tr><th>全選<input type="checkbox" name="chkAll"/></th><th>姓名</th><th>性別</th><th>收入</th></tr></thead>
<tbody>
<tr><td><input type="checkbox"/></td><td>張三</td><td>男</td><td>低</td></tr>
<tr><td><input type="checkbox"/></td><td>李四</td><td>男</td><td>中</td></tr>
<tr><td><input type="checkbox"/></td><td>王五</td><td>男</td><td>低</td></tr>
<tr><td><input type="checkbox"/></td><td>范冰冰</td><td>女</td><td>高</td></tr>
<tr><td><input type="checkbox"/></td><td>李冰冰</td><td>女</td><td>高</td></tr>
</tbody>
</table>
JS代碼如下:
/*****************全選功能******************/
$(".list [name='chkAll']").click(function(){
$(this).closest("table").find(":checkbox").not($(this)).attr("checked", $(this).attr("checked"));
});
$(".list :checkbox").click(function(){
if($(this).attr("checked"))
$(this).closest("table").find("[name='chkAll']").attr("checked",true);
}); 如果這個還是看不太懂的話,可以再看一下上一篇文章:我是如何去瞭解jquery的(二),復雜選擇符
你有任何的疑問都不要來問我,請反復閱讀本文,或加入我的Q群70210212進行討論。祝光棍節快活!
本文的案例請點擊這裡。
作者:田想兵 博客地址:http://www.cnblogs.com/tianxiangbing