前端JQuery應用實戰筆記 2 - AJAX 應用 (下)

ex.9 選單事件·多重事件綁定

一般選單想要有移入移出效果，利用更換中英文也是其中一種效果。
ex.9 練習

index.html

<div id="menu"></div>
<div class="content">
  這是文件內容
</div>

menu.html 加上 data-* 屬性

<a href="#" data-english="First">第一</a>
<a href="#" data-english="Second">第二</a>
<a href="#" data-english="Third">第三</a>
<a href="#" data-english="Fourth">第四</a>
<a href="#" data-english="Fifth">第五</a>

all.js

$(function () {
  $("#menu").load("menu.html", function () {   
    $(this).find("a").on("mouseenter mouseleave", function () {     //用on方法綁定滑入滑出事件，中間空格隔開事件
      var temp = $(this).text();                                    //用.text()取出this裡的文字
      $(this).text($(this).data("english"));                        //抓取出data-*裡的文字
      $(this).data("english", temp);                                //用.data()替換data-*的屬性內容
    });
  });
});

• mouseenter 跟 mouseleave 本來是兩個事件，使用 on 合併成一個事件處理。
• var temp = $(this).text(); 把目前選單擷取中文暫存到 temp 變數裡。
• $(this).text($(this).data(“english”)); 把目前的選單文字換成 data-english 裡的英文字。
• $(this).data(“english”, temp); 把原本存在 temp 變數裡的中文字，替換到 data-english 裡面。
• 滑入執行一次替換，滑出又在執行一次，用on就可以合併一次執行

• 若多個事件執行相同 function，可使用 on 方法來綁定多個事件。
• data 方法可以取得或設定 HTML5 中的 data-* 屬性內容。
• find 方法可以從原本選取器底下尋找元素並回傳新選取器。

text() 取出文字 / text(e) 寫進參數。
data 取值比較快，效能快 / data-* 會把值寫進畫面，效能慢又大。

---

ex.10 選單事件-多重事件判断

用來判斷移入移出效果及點擊事件。
ex.10 練習

index.html / menu.html 同 ex.9

all.js

$(function () {
  $("#menu").load("menu.html", function () {
    $(this).find("a").on("mouseenter mouseleave click", function (e) {  //用on方法綁定滑入滑出點擊事件
      if (e.type != "click") {                                          //用e.type判斷，!= 不等於意思
        var temp = $(this).text();                                      //滑入滑出事件
        $(this).text($(this).data("english"));
        $(this).data("english", temp);
      } else {
        $(".content").load($(this).attr("href"));                        //點擊事件
        e.preventDefault();
      }
    });
  });
});

• if (e.type != “click”) e.type是目前的狀態，用 != 不等於 click 事件。
• 不等於 click 事件也就是 ex.9 練習的滑入滑出動作。
• else 就是點擊後要處理的事件，也就是點擊後連結頁面去。
• e.preventDefault(); 讓原本 a 的超連結取消作用

• 大部分 function 都有回傳參數，可提供事件詳細資訊或操作方法。
• e.type 方法可以判斷目前事件是由哪一個發生。

---

ex.11 選單事件-使用 on 註冊事件

用on來綁定事件，用於註冊之後產生的元素身上。
ex.11 練習

index.html / menu.html 同 ex.9

all.js

$(function() {
    $("#menu").on("mouseenter mouseleave click", "a", function(e) { //用on來綁定事件，用於之後產生a元素身上 
        if (e.type != "click") {
            var temp = $(this).text();
            $(this).text($(this).data("english"));
            $(this).data("english", temp);
        } else {
            $(".content").load($(this).attr("href"));
            e.preventDefault();
        }
    });
    $("#menu").load("menu.html");   //load事件無法放入function，如套件之類，才會移出先綁定事件  
});

• $(“#menu”).on(“mouseenter mouseleave click”, “a”, function(e) 使用 on 預先綁定 a。
• $(“#menu”).load(“menu.html”); 把等於 load 事件移出先綁定事件，獨立操作。

• 選取器綁定事件必須要選取目前存在元素。
• 使用 on 方法傳入三個參數來綁定之後才會產生元素的事件。

非同步不一定是由上往下順序處理程序，處理較費時功能的幾乎是非同步操作。
等待完成後才會執行回呼函式 ( callback function )。

同步非同步參考筆記
AJAX非同步大解密 (筆記)
sync 同步 & async 非同步

---

ex.12 選單事件-使用 off 移除事件

用 off 來移除綁定事件，用會員勾選同意與否來判斷是否要移除事件。
ex.12 練習

index.html

<div class="outbox">
    <h3>會員註冊</h3>
    <div class="content">
      為了確保會員之個人資料、隱私~~略：<br>
      1. 蒐集之目的僅在於提供六角學院相關訊息~~略。<br>
      2. 六角學院於網站內蒐集的個人資料包括會員之姓名、電子郵件等資訊。<br>
    </div>
    <div class="checkbox">
      <input type="checkbox" id="checkbox">
      <label for="checkbox">我已閱讀並接受</label>
      <div id="register" class="a_btn">確認</div>
    </div>
  </div>

all.js

$(function () {
  $("#checkbox").change(function () {         //假如有change事件
    if ($(this).is(":checked")) {             //is判斷是否跟前面選的一樣， 
      $("#register").click(function () {
        location.href = "ok.html";
      });
    } else {                                 
      $("#register").off("click");            //用off移除click事件 
    }
  }).change();                                //立即重新觸發
});

• $(“#checkbox”).change(function () 表單使用 change 判斷狀態，有無勾選。
• if ($(this).is(“:checked”)) 使用 is 檢查 this 本身的選擇器有無等於 :checked，有就執行勾選事件。
• $(“#register”).off(“click”); 在沒勾選時，用 off 移除按鈕的 click 事件
• .change(); 因為瀏覽器本身會記憶表單，回上頁都會記錄，按鈕本身狀態會記錄，但程式並沒有紀錄，所以必須每次載入強迫重新使用。

• 使用 off 方法可以移除綁定事件，off()會移除全部同樣事件。
• 若只想移除某個 click 事件，綁定事件的時候可以設定事件命名空間，例:click.name。
• change 方法若不帶入 function 則表示立即觸發該事件。

---

概述:jQuery版本差異

目前jQuery 的版本區分為三種:

• 1.x 仍支援 IE6/7/8 版瀏覧器，目前最新版本 1.12.4。(32.3KB)
  若須支援 IE 舊版瀏覧器，請選擇這個版本·
• 2.x 不支援 IE6/7/8 版瀏覽器，目前最新版本 2.2.4。(28.7KB)
  若不須考慮 IE 舊版瀏覧器，原始檔案將會更小。
• 3.x 不支援 IE6/7/8 版瀏覧器，目前最新版本 3.4.1。(29.2KB)
  部分功能調整及修正，未來新功能都會在此版本擴充。

※ 輕量化 jQuery : Zepto.js
只保留核心，事件、Ajax、表單、IE10+支援，目前最新版本 1.2.0。(9.6KB)