最近因為資安公司要求，要把 jQuery 升級到最新版
網路查了一下，似乎 3.5 版以後, XSS 才算是改善很多

目前最新版本是 3.7.0，對於原本就使用 3 以上版本專案影響就不大，所有 function 沿用上沒有問題
但是有些舊專案使用 2.X 甚至 1.X 升級到 3.7.0 版之後就會有些功能掛掉

經測試，首當其衝的就是 $(window).load 不能使用，更精準一點應該是 .load() 不能使用
檢查 jquery 過期網頁 https://api.jquery.com/category/deprecated/
發現 .load() 是 1.8 版以後 deprecated，但我 2.2.4 用很久用爽爽
我想應該是 jquery 為了相容問題，一直到跨版本才真的拿掉
也就是 1.X 宣告 deprecated 的功能，到 3.X 才真的移除
(請看附圖)
所以我就鴕鳥的找 1.X  deprecated 然後可能會用的 function 處理
(若有 tag "Removed" 就是已移除，這樣找比較快)

.andSelf()

.live()

.die()

.error()

.load()

.unload()

.size()

.toggle()

大致上專案搜尋字串應該就能處理
但有些可能是其他第三方 jquery物件 例如 jquery-ui ，會用到以上功能
這時可能要去該物件看有無對應升級版
 

錯誤訊息：
WebForms UnobtrusiveValidationMode 需要 'jquery' 的 ScriptResourceMapping。請加入 ScriptResourceMapping 命名的 jquery (區分大小寫)。

解決方式：
在有用 validation 那頁的 Page_Load 加上，就恢復正常了
protected void Page_Load(object sender, EventArgs e)
{
     UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;
}

參考來源：
https://blog.xuite.net/tolarku/blog/63451508-VS+2012+%E5%88%9D%E9%AB%94%E9%A9%97+-+%E9%9C%80%E8%A6%81+%27jquery%27+%E7%9A%84+ScriptResourceMapping+%E9%8C%AF%E8%AA%A4
https://www.c-sharpcorner.com/UploadFile/cd7c2e/enabling-unobtrusive-validation-mode-in-Asp-Net-4-5/

        var TotalOldQty = 0;

        $(".AdjQty_" + yano + "_" + pdno + " [type='text']").each(function () {

            TotalOldQty += parseInt($(this).data("oldqty"));

        });



        $(".AdjQty_" + yano + "_" + pdno).html($(".AdjQty_" + yano + "_" + pdno).html() + "更新中.....");



        $(".AdjQty_" + yano + "_" + pdno + " span").hide();

和 

        $(".AdjQty_" + yano + "_" + pdno).html($(".AdjQty_" + yano + "_" + pdno).html() + "更新中.....");



        $(".AdjQty_" + yano + "_" + pdno + " span").hide();



        var TotalOldQty = 0;

        $(".AdjQty_" + yano + "_" + pdno + " [type='text']").each(function () {

            TotalOldQty += parseInt($(this).data("oldqty"));

        });

出來的 TotalOldQty 會不相同..

jQuery 的參數提示總是 a, b, c 的看不懂 ? 請參考下圖:



上圖是引用 jquery-2.2.4.js 的結果.

下圖是引用 jquery.min.js 的結果.

大家會使用 jquery.min.js 的主要原因是, 主要是檔案大小"大幅縮小" 剩下 25% 左右. 但是....

減少的 75% = 270K, 而且只有第一次載入時會真的下載檔案.

所以要用哪一個呢 ? 這就留給你判斷了...

<a class="del" href="#" data-yano="1250453286" data-pdno="04360003">

    <img src="/TC/template/Shopping/images/del.png" alt="">

</a>

用 $(".del").data("pdno") 會回傳 4360003
被這個搞了好久..

要避免這個問題, 可以使用 attr  來代替 data
$(".del").attr("data-pdno")

http://blog.zhusee.in/post/48857667691/jquery-deferred-object

deferred.done(callback)  #=> 成功時執行
deferred.fail(callback)  #=> 失敗時執行
deferred.progress(callback)  #=> 還在跑，但是裡面的程式使用 `.notify` 方法通知進度
deferred.always(callback)  #=> 無論成功或失敗都會執行
deferred.when(filters)  #=> 在呼叫 callback 前先處理資料，後面解釋

當所有 Deferred 都完成後，註冊在 $.when() 下面的 callback 會拿到第一個 Deferred 物件傳給 callback 的參數

var d1 = $.Deferred(), d2 = $.Deferred(),
     w = $.when(d1, d2);

  w.done(function(msg) { console.log(msg) });

  d1.resolve("Part A done");
  d2.resolve("Part B done");

  #=> "Part A done"

有時候用 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;

    });

 

當我們將動態效果(例如：.animate)使用於.hover時，由於.hover的特性是會將＂每次＂滑鼠移動到而觸發的事件做完。所以若將滑鼠反覆快速移動而去觸發事件時，就會形成滑鼠停下後，但動態效果仍在持續作用的狀況。

因此為了避免這種狀況，我們可以搭配使用.stop()來停止前一次.animate()的效果。

$(this).stop().animate();

範例：
 http://jsfiddle.net/u8ejtoz9/29/

 


     

 

這個活動頁左邊 menu 要固定位置 但是不能跑出框框外面
http://www.shopunt.com/tch/event/2014-naked-truth-cc-cream/

所以需要處理scroll物件

<div id="menuContainer">

  <div id="menu">

    <ul>

      <li>menu1</li>

      <li>menu2</li>

    </ul>

  </div>

  <div> ...長內容.... </div>

</div>

js

        var __ContainerHeight = 5000;

        var __ContainerTop = 160;

        var __MenuHeight = 550;

        var __FixedTop = 20;



        $(window).load(function () {



            __ContainerHeight = $("#menuContainer").height();

            __ContainerTop = $("#menuContainer").offset().top;

            __MenuHeight = $("#menu").height();



            $("#menu").css({ "top": __FixedTop + "px", "position": "absolute" });

            $(window).scroll(function () {

                var scrolls = $(this).scrollTop();

                //console.log(scrolls);

                if (scrolls < __ContainerTop) {

                    $("#menu").css({ "top": __FixedTop + "px", "position": "absolute" });

                }

                else if ((scrolls + __MenuHeight + __FixedTop) > (__ContainerHeight + __ContainerTop)) {

                    $("#menu").css({ "top": (__ContainerHeight - __MenuHeight) + "px", "position": "absolute" });

                }

                else {

                    $("#menu").css({ "top": __FixedTop + "px", "position": "fixed" });

                }

            });



        });

 

http://escape.alf.nu/
最近有朋友問我跳脫字元的事情，
剛好想到這個，之前玩的一個js injection 的遊戲。