2025-02-10

 

嘿嘿,今天是傳說中的百年難得一遇的神棍節,先祝願所有的光棍們明年能過上父親節哈!

雖然關於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的(二),復雜選擇符 一篇裡,最後我提到過,全選有很多的做法,並且說過讓大傢試下做,今天就揭曉下吧,功能要求是這樣的:隻要選中一個或以上,全選就選中,再點就是不選,它有三層意思

  1. 選中一個或以上時,全選自動勾上.
  2. 單獨點擊全選為勾上時,這時候全部都選中。
  3. 取消全選時就取消所有的選中

 

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *