jQuery.extend()

常常在別人的 jQuery library 裡看到很多 jQuery function，應該要來瞭解一下。

第一個找簡單的 jQuery.extend()。

jQuery.extend() 功能簡單的講就是「物件屬性的聯集」，屬性包括 property 與 function。

例如：

var a = { name: 'Neil', say: function(){ alert('a'); } };
var b = { sex: 'M', say: function(){ alert('b'); } };
$.extend(a, b); // a  變成 { name: 'Neil', sex: 'M', say: function(){ alert('b'); } }

以 a 為底，將 b 的所有屬性包括 function 都複製到 a 裡，沒有同名就新增，有同名就覆蓋。

還可以同時聯集多個物件。

var a = { name: 'Neil', say: function(){ alert('a'); } };
var b = { sex: 'M', say: function(){ alert('b'); } };
var c = { name: 'Neil Chan', skill: 'js', say: function(){ alert('c'); } };
$.extend(a, b, c); // a  變成 { name: 'Neil Chan', sex: 'M', skill: 'js', say: function(){ alert('c'); } }

以 a 為底，先將 b 的所有屬性包括 function 都複製到 a 裡，再將 c 的所有屬性包括 function 都複製到 a 裡，沒有同名就新增，有同名就覆蓋，可以無限制的聯集 N 個物件。

以上用法有一個副作用，就是 a 會被玷污，改善的方法很簡單。

jQuery Checkbox 全選與取消全選

會有這篇筆記，一切都是起因於 jQuery 1.6 做了一些衝動的事：改寫了 attr(...) 的用法，詳情太囉唆，請看以下網址：

jQuery 1.6.1上場救援，不用改寫attr()囉
jQuery 1.6 .attr() 和 .prop()

也就是我習慣用的 attr(...) 變得很奇怪，尤其在控制 checkbox 的勾與不勾時，行為非常詭異，詭異到我不想去了解發生了什麼事。

解法很簡單，改用 prop(...) 就好了。

// 勾選或取消「全選」時，checkbox 的 checked 屬性（prop）跟著 checkboxAll 走就可以
$('.checkboxAll').click(function(){
  $('.checkbox').prop('checked', $('.checkboxAll').prop('checked'));
});
// 單獨勾選或取消 checkbox 時，須同步狀態到 checkboxAll 
$('.checkbox').click(function(){
  var checkedLength = $('.checkbox:checked').length;
  var checkboxLength = $('.checkbox').length;
  $('.checkboxAll').prop('checked', checkedLength == checkboxLength);
});

prop(...) 只會回傳 true 或 false，不會回傳空字串、undefined 或 checked，事情變得簡單多了。
---
---
---

jQuery 與 Quirks Mode

最近遇到的問題，$(window).width() 與 $(window).height() 都回傳 0，但只限於 IE 某些版本，PM 最後鎖定是 Quirks Mode 才會有的問題。

Google 後發現，jQuery 1.8.1 以後就不支援 Quirks Mode 了。

嗯，先了解一下什麼是 Quirks Mode，維基百科這麼說，嗯，有看沒有懂，再翻成中文看一次，有點概念，到底能不能講人話啊。

最後得到的理解是：

• 相對於 Quirks Mode，有一個 Standard Mode（標準模式）。
• Standard Mode 指的是瀏覽器完整支援 HTML/CSS，而 Quirks Mode 則是在標準出現以前，或者說 HTML/CSS 成為標準以前，各家瀏覽器各自表述的情形。
• 然後當 HTML/CSS 成為標準，且各家瀏覽器開始完全支援時，在這之前已經開發的網頁怎麼辦？
• 瀏覽器為了向前相容，所以切成兩種模式，也就是 Standard Mode 與 Quirks Mode。
• 遇到舊的網頁就用 Quirks Mode 顯示，遇到新的網頁就用 Standard Mode 顯示。
• 那怎麼區分新舊網頁呢？加上 DOCTYPE 就是新網頁，預設就會用 Standard Mode 顯示，舊的網頁沒有 DOCTYPE 就會用 Quirks Mode 顯示。

小結一下我遇到的問題：

• 沒有加上 DOCTYPE  的網頁被舊版 IE 以 Quirks Mode 顯示。
• 然後不小心用了新版的 jQuery。
• 所以$(window).width()與$(window).height()都回傳 0。

可能的解法：

• 改用 jQuery 1.8.1 以前的版本。
• 為網頁加上 DOCTYPE，記得要加在網頁的最最最前面，在 DOCTYPE 之前不能有任何字元，不然貼心的 IE 就會自動進入怪異模式（Quirks Mode）。

<!DOCTYPE html>
<html>...</html>

---
---
---

好用的 jQuery plugin - Validation

官網  文件

當開發的鐘擺愈往 client 端靠近時，server 端要負責的事情也漸漸地搬到 client 端，表單驗證就是一例。

使用者輸入資料送出，經過 server 進到資料庫，這過程至少有三個關卡可以做資料驗證。

從後面看回來，首先，資料庫是一定要檔的，不然就會收到一 堆很容易讓程式（與工程師）爆炸的資料；接下來是 server，也就是在我接觸到 Validation 之前偏好的方式，為此也做了一些功課，就是 Spring MVC 提供的驗證功能；最後就是 client 端，也就是在 Web 用 Javascript 做驗證，在我剛寫 Web 的時候，那時候 Struts 1.x 正紅，也提供了自動產生 Javascript 驗證碼的功能，後來琵琶別抱，掉入 Spring 之後，就漸漸遺忘 client 端驗證了，在遇到 jQuery Validataion 之前，只用來做一些簡單的驗證，因為要 hard code 所以挺累的，就一直不是我喜愛的驗證主角。

LimeJS 的 mouseover 與 mouseout 有問題，結合 jQuery 來處理

剛摸 LimeJS，只知道他是基於 HTML 5，有兩種 Render Engine（DOM 與 CANVAS）。

只是想實做一個簡單的 mouseover 與 mouseout 來改變圖片，用了下面註解掉的 code，卻發現只有第一次有用，第二次以後圖片就不會再切換，加入 alert 後發現，第一次觸發 mouseover，以後只要游標還在整個 Director 裡，就不斷地觸發 mouseout。

這情況我讓想到 在 jQuery 用 mouseenter 與 mouseleave 取代 mouseover 與 mouseout，那就用 jQuery 來試試。

// 先建立一個方形區域並放入圖片
var closeIcon = new lime.Sprite().setFill('images/x.gif').setAnchorPoint(0.5,0).setPosition(ag.gameW/2+150,120);
layer.appendChild(closeIcon);

/* 按照 LimeJS 官方的作法，有問題
goog.events.listen(closeIcon, [ 'mouseover' ], function(e) {
closeIcon.setFill('images/x2.gif');
e.swallow([ 'mouseout' ], function() {
closeIcon.setFill('images/x.gif');
});
});
*/

// 結合 jQuery 可以解決這問題
var closeIconJ = $(closeIcon.getDeepestDomElement());
closeIconJ.css('cursor', 'pointer'); // 附加價值，LimeJS 不知怎設定 cursor
closeIconJ.mouseenter(function(){
closeIcon.setFill('images/x2.gif');
});
closeIconJ.mouseleave(function(){
closeIcon.setFill('images/x.gif');
}); 

嗯，可行。

也許本來這種簡單的功能，就不應該用 LimeJS 來處理。
---

Hello Jsoup 1.6.3

處理 HTML 的好工具。

讀 HTML 有兩種方式：

• DOM Navigation - 幾乎是 DOM 與 jQuery 的 Java 版本，API 幾乎一樣
• CSS Selector - 會 CSS 的就知道好用！

除了讀，還可以寫，API 幾乎是 jQuery 的翻版，還可以更正錯誤的 HTML 並輸出。

更棒的是，可以將相對路徑轉成絕對路徑！

用 jQuery 種一顆簡單樹（Tree）

小時候要用 Javascript 做一個下面這種樹狀圖，應該要報個幾十個人天吧。

如果再加上右鍵功能，嗯，「PM，請給我幾個人月吧」！

最大的問題應該出在瀏覽器相容性，以及少了一些很好用的 function 吧。

這些問題 jQuery 都解決了，所以今天種一顆樹簡單多了。

Javascript closure

Javascript closure 對 Java programmer 來說是個陌生又奇怪的概念。

原本以為 closure 就是 callback function，可以將 function 當參數傳給別個 function，稍後可以執行，今天發現一個邏輯上的問題，才搞清楚什麼是 closure。

當宣告 function 時，可以在 function 參照（也就是使用）當下 scope 看得到的所有變數，重點來了，但是當 function 被當作 callback 傳出去時，function裡用到的變數就會是問題，如果是 global 變數當然沒問題，任何地方都可以看得到 global 變數，但是 local 變數呢？出了這個村就看不到 local 變數啦！

Javascript function context - this 指的是誰？

在 Java 裡，this 指的是所在的 class instance，多半是在 method 裡呼叫 this；但是在 Javascript 裡，function 可以是 top-level object，也可以指派給某個物件，那 function 裡的 this 指的到底是誰？

要看 context，執行時的 context，不是定義時的 context，更白話點，就是「掛在誰身上執行」。

在 jQuery 驅動 Event

在 jQuery 驅動 Event 有四種方式：

系統或使用者驅動

嗯，就是...........你知道的。

$('div').trigger('click')

程式驅動，與上一種只差在沒有游標位置（mouse）或者按鍵資訊（key）。

$('div').triggerHandler('click')

程式驅動，與上一種差在，沒有泡泡作用、預設行為（例如連結開啟新網址） 與 live events。

aFunction(whereIsE)

直接呼叫 handler ，不僅上面提到的都沒有，最大問題還在於沒有 Event object。

好用卻有點難懂的 jQuery live function

先講好用的部份，live 可以為尚未存在的 Dom 物件註冊 Event Listener，先不管怎麼辦到的，Ajax 是現在網頁的常客，當 Ajax 修改頁面時，還要為新增加的 Dom 物件註冊 Event Listener 就真的有點累，尤其是這些 Event Listener 已經註冊過了，還要小心不要替舊有的 Dom 物件又註冊一次，這時 live 就很好用了。

$('div.d').live('click', function(e){

    log(e, 'from live');

});

只要這麼做，不管已經出生的還是未出生的 div.d，都可以得到這個 click 註冊，實務上，在實做樹狀結構時，因為目錄開開關關的，檔案來來去去的，要逐一註冊 Listener 真的會瘋掉，用 live 就可以「一招斃命」了。

jQuery Event Object

有沒有按下 Alt、Ctrl 或 Shift 鍵？

• altKey
• ctrlKey / metaKey
• shiftKey 

true 表示按下，false 則沒有。

三個 target？

• target - 案發地點，也就是 Event 被觸發的物件
• currentTarget - 泡泡經過的物件。
• relatedTarget - mouse 相關的物件，mouseover 或 mouseenter 的 target 表示進入的物件，在進入的同時，也離開了某個物件，而 relatedTarget 就是表示離開的物件；反過來 ，mouseout 或 mouseleave 的 target 表示離開的物件，而 relatedTarget 就是表示進入的物件。

jQuery unbind Event Listeners

為物件加上 Event Listener 是用 bind(...)，或者 click(...)、mouseover(...) 等簡易版的 bind(...)。
移除 Event Listener 是用 unbind(...)，有好幾種用法。


$('div.a').unbind('click', aFunction);

最精確的用法，移除指定 Event Type 的指定 Listener，其中一個條件不符就不會移除，若 bind 時是用 inline function，沒有 aFunction 可用來指定 Listener 話，可以用 event 來取代。


$('div.a').unbind(event); 

這個 event 就是傳入 aFunction 的 Event 物件，這個方式大概只能用在 aFunction 裡，注意不用指定 Event Type，因為 event 裡有所有必要的資訊了。

在 jQuery 用 mouseenter 與 mouseleave 取代 mouseover 與 mouseout

一般常用的 mouse 進出物件的 Event type 為 mouseover（進入）與 mouseout（離開），但是有兩個難用的地方：

• 沒有父層物件的概念
• Event Bubbling

$(function(){
    $('div').mouseover(function(e){
        log(e);
    });
    $('div').mouseout(function(e){
        log(e);
    });
});
function log(e) {
    neil.log(e.type + '(T)' + e.target.tagName + '.' + e.target.id + '(C)' + e.currentTarget.tagName + '.' + e.currentTarget.id + '(R)' + e.relatedTarget.tagName + '.' + e.relatedTarget.id);
}

以上圖結構與程式測試，滑鼠從 body 進入 DIV.a、DIV.b 與 DIV.c，再反向出來，得到以下結果。

用 jQuery 取得 Div 的寬度與高度（Width, Padding, Border, Margin）

這邊講的不一定是 div，所有 Block 物件都可以適用。

什麼是 Block 物件？

簡單講就是會斷行的物件，像 div 或 p 都是；相對於 Block 物件的叫做 Inline 物件，也就是不會斷行的物件，像是 span 或 img。

有關 Block 物件的寬度與高度有個專有名詞，叫做「Box Model」，有興趣 google 一下 Box Model 的圖片就知道了。

用 jQuery 取得 HTML 文件高度（Document）與瀏覽器視窗高度（Viewport）

文件高度（Document Height）指的是整篇 HTML 的高度，若少於瀏覽器 Viewport 高度則不會出現 Scrollbar，反之則會。

Document Height 是用 Javascript 提供的 document 物件來取得。

var h = $(document).height();

視窗高度（Viewport Height）指的是瀏覽器用來顯示 HTML 的高度。

jQuery preventDefault, stopPropagation, and return false

Javascript Event 是某些狀況的發生而產生的因應，例如系統面的網頁載入完成或者使用者面的點擊了連結，有些反應是有「副作用」的，像是點擊了連結會開啟新的網址，或者按下 Submit 按鈕將 Form 送出，當然也有些反應不會有副作用，像是滑鼠移動或是載入網頁。

這些「副作用」是可以被制止的。

$('a').click(function(e){
    e.preventDefault();
});

只要這樣，preventDefault 就可以讓所有連結失效，只能點，但不會開啟該連結。

Javascript Event Bubbling

Javascript 的 Event 會一路往外傳，例如 click 一個 div，至少三個 DOM 物件可能收到這個 click event。

$(function(){
    $('*').click(function(e){
        $('.msg').append(e.target.tagName + '-' + e.currentTarget.tagName + '<br/>');
    });
});

<html>
<body>
<div></div>
</body>
</html>

什麼是 Google Libraries API？

以前在寫網頁時，如果要用到 jQuery 或者 jQuery ui，就很自然的連到 jQuery 官網下載最新版本的 jQuery，然後將 jquery-xxx.min.js 放到 project 裡，最後在網頁裡加上下面的程式就完工了。

<script type="text/javascript" src="js/jquery-xxx.min.js"></script>

今天起，有更簡單的方法了。

不用再去下載 jQuery，project 裡也不用放 jquery.js，只要在程式裡加上下面的程式就可以了。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

這樣做除了步驟變簡單，還有什麼好處呢？