有時候用 jQuery 使用 event 物件時，會發現有些特殊事件的 property 抓不到 (undefined)
例如
mousewheel --> event.wheelDelta 
drop --> event.dataTransfer
touchstart --> event.touches[0].pageX
原因是 jQuery 的 event 只會包裝一般的屬性，特別的屬性要使用 event.originalEvent 去抓
event.originalEvent 是瀏覽器原生的 event

It's also important to note that the event object contains a property called originalEvent, which is the event object that the browser itself created. jQuery wraps this native event object with some useful methods and properties, but in some instances, you'll need to access the original event via event.originalEvent for instance. This is especially useful for touch events on mobile devices and tablets.

所以開發時當有些特殊屬性抓不到時，可以考慮用 event.originalEvent 去抓看看

    // 這是用滾輪放大縮小圖片 (此範例firefox不支援)

    $("#imgProductBig").bind("mousewheel", function (ev) {

        var delta = ev.originalEvent.wheelDelta > 0 ? 1 : -1;

        if (delta > 0 && zoomValue < 150) {

            zoomValue += 10;

        }

        else if (delta < 0 && zoomValue > 50) {

            zoomValue -= 10;

        }

        $(this).css("zoom", zoomValue + '%');

        return false;

    });

 

又發現新說法

我們在 front-end 做 scroll event的監聽的時候很常會過度的觸發要執行的事情，因此導致效能不太佳，
我們需要的是固定頻率執行某個function ， 這個原來叫 throttle

另外一種狀況像是autocomplete，不需要每一個keyup 都去ajax 去backend 抓資料回來，所以我們過去，
設一個變數去記住setTimeout 回傳回來的數字，如果下一次的keyup 發生在預設的時間內就去把 setTimeout清掉。
原來這種做法，有一個稱呼叫 debounce

不過jQuery 沒有內建這兩個function。這樣在複雜的 js 中增加易讀性。

在做地址的時候用了一個套件(TWZIPCODE)
可以幫你產生下拉霸的郵遞區號選項
很方便(jQuery)
但是在控制他的資料及回傳
又不知道怎樣比較方便直觀了

首先目前也是文字控制的方式是
UWForUNT.WU.ReplaceStringInControl(Me.Page, "#Post_Code#", Post_Code)
直接用 #Post_Code#
再把她取代

直接讓前端讀到值

回傳時 若是用後端控制 不用再傳ajax 或是 塞到別的後端控制項
回傳的方式
UW.WU.GetValueFromQueryStringOrForm("Post_Code")

但是因為之後不讓 Page Load 再次改成預設值
可以加
If Not Me.IsPostBack Then
   UW.WU.GetValueFromQueryStringOrForm("Post_Code")
End If
才不會永遠是預設值
(            $('#twzipcode').twzipcode({
            zipcodeSel: '#Post_Code#', // 此參數會優先於 countySel, districtSel
            countySel: '台北市',
            districtSel: '大安區',
            zipcodeName: 'Post_Code'
            })
)

他如果有包在裡可以直接讀取

另外若是 有一些後端要傳給前端的資料 用response.Write("<script>XXX</script>")
可以直接寫入前端

​

有的時候jquery會用到取代標籤的方式
<div id="testId">我是原本文字</div>

以下兩個都是innerHTML

document.getElementById('testId').innerHTML = "我是之後文字";

$('#testId').html("我是之後文字");

以下兩個都是outerHTML

document.getElementById('testId').outerHTML = "<div id="我是原本Id">我是原本文字</div>";

$('#testId').replaceWith("<div id="我是原本Id">我是原本文字</div>");

但是有時候～我們並不是要取代～而是想單純得到html含標籤的內容～

$('#testId').clone().wrap('<div>').parent().html()

 

作global結帳時發生IE8不能選信用卡到期日，
因為 IE8 只吃 evt.cancelBubble = true 才不會把click事件往上層傳
所以以下是終極不會有問題的寫法

                if (evt.stopPropagation) { evt.stopPropagation() }

                if (evt.preventDefault) { evt.preventDefault() }

                try { evt.cancelBubble = true } catch (e) { }

                try { evt.returnValue = false } catch (e) { }

evt就是傳進來的event

(補充一下) 這個適合用 window.addEventListener 方式綁事件才需使用，如果用jQuery綁事件直接return false;就有一樣的效果


範例:

       // 經由bike提示，發現這範例不好 jQuery 可以直接 return false;

       $("#gc-exp-month-select a").click(function (evt) {

            $("#gc-exp-month").val($(this).text());

            $("#span-gc-exp-month").text($(this).text());

            $(this).parent().hide();

            if (evt.stopPropagation) { evt.stopPropagation() }

            if (evt.preventDefault) { evt.preventDefault() }

            try { evt.cancelBubble = true } catch (e) { }

            try { evt.returnValue = false } catch (e) { }

           // 在 jQuery 裡上面四行 可以用一行 return false; 就可

        });

 

修改QC檢查站,新增效期檢查功能,因需要在動態產生的產品品項加上效期檢查鈕,每次動態產生的項目都要為按鈕元素綁定
觸發ajax檢查效期事件,原先的作法是每次動態產生的同時,為該元素綁定一次事件,品項有幾項就要做相同的綁定次數,後來在網路上看到另外一種寫法,利用DOM事件會由子元素一路向父元素Bubble Up的特性,在document或特定元素統一掛上事件函數，事件被觸發時再透過選擇器比對事件目標元素是否吻合，決定要不要執行事件邏輯，藉此提升效率，同時還能將"未來才會產生的元素"也納入事件的涵蓋範圍,以下是範例:

$(document).ready(function () {

            //原先的寫法:

           $("td").bind("click", function(){

　　　　 $(this).toggleClass("click");

　　 });

//事件委託:

​$("table").delegate("td","click", function(){

　　　　 $(this).toggleClass("click");

　　 });

    })

在這邊利用事件冒泡的特性,藉由頁面載入完成的同時對父元素作事件委託處理,接下來不管產生幾個動態元素,都可以透過事件監聽判斷該函式是否該執行,原先如果動態產生一百個品項就要綁定一百次的事件,只要頁面載入完成後一次就完成,達到有效率的寫法!!

var test=["a","b","c"];
var arrClone=[];
$.extend(true,arrClone,test);
test[0]="3";
console.log(test); //["3","b","c"];
console.log(arrClone); //["a","b","c"];

有時候會用html去取代物件裡的內容，但是當取代的文字過長的時候，很可能會沒有錯誤訊息，但是卻又無法正常顯示，尤其是IE8

var str = "過長的文字";

$(".asdasd").html();

此時我們最好使用以下的方式

var str = "過長的文字";

document.getElementById('Create_Menu').innerHTML = str;

就可以正常執行了

相關參考

http://localhost:2874/WWW20/scripts/Merge/Create_Menu.js

darren 補充:
調整一下標題，讓他較符合發文內容

最近為了在 iframe 中的 history.goback 的問題，把後台的 jquery 升級到 1.10.1 版，結果發生讓 checkbox 全選的語法無效，原來是 attr('checked') 在 1.10.1 版中不會隨著 checkbox 是否選取而改變。

<input type="checkbox" onclick="if ($(this).attr('checked')) { $('.cbProducts').attr('checked', true) } else { $('.cbProducts').attr('checked', false) }" />

要換成

<input type="checkbox" onclick="if ($(this).prop('checked')) { $('.cbProducts').prop('checked', true) } else { $('.cbProducts').prop('checked', false) }" />

不過很麻煩節是，若是 jquery 1.5.x 及以前的版本是不支援 prop 的，請參考文章:
http://blog.xuite.net/vexed/tech/44905647-jQuery+1.6+.attr()+%E5%92%8C+.prop()

我先把後台的 MasterPageWithForm.master 由 1.10.1 改回 1.6.2 版, MasterPage.master 和 MasterPage_NoMenu.master 兩支程式的 jquery 由 1.5.1 改到 1.6.2 版。未來要升級 1.10.1 以上的版本時可能會需要大工程把 attr 改為 prop。 或是考慮用 

$.fn.attr = $.fn.prop;

來把整個 attr 改為 prop

 

當使用Ajax做回應的時候～
有時候會將HTML本文做取代
例如：$(e).html(回應文)、$(e).replaceWith(回應文)
但是回應文中若是包含Javascript可能會執行，但是並不會顯示在Html裡面
注意：會執行、但不一定會顯示