本人是一名後臺開發人員，然而公司專案沒有做到前後端分離，前端僅僅是寫靜態頁面，js還得後臺開發人員寫。對於前端的東西呢常見東西的是沒有問題，但是有些東西用的少可能容易忘記。這不今天接手維護另一個同事的一個模組就被安排了。有問題怎麼辦？W3s！jquery語法上的問題，我建議還是檢視權威的資料，不要老是百度百度。百度上的解釋可能你一時半會理解了，copy並跑通了但是以後再遇見你可能就想不起了。所以還是多花一些時間去W3s上看完整一點的介紹並筆記。好了言歸正傳。專案中的程式碼如下：

               //移動端下載二維碼互動
                $(document).on('click', '.frame_down_load_app', function () {
                    $('.frame_app_code_container').toggle();
                });
 

實現功能為點選按鈕顯示二維碼圖片再點選則隱藏。這樣交替切換。W3c上的解釋如下：

定義和用法

toggle() 方法切換元素的可見狀態。

如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。

$(selector).toggle(speed,callback,switch)

看清楚了哦，原來這裡是有三個引數的，但是因為都是可選的，故可以用預設寫法，全都不填。

引數描述speed

可選。規定元素從可見到隱藏的速度（或者相反）。預設為 "0"。

可能的值：

• 毫秒 （比如 1500）
• "slow"
• "normal"
• "fast"

在設定速度的情況下，元素從可見到隱藏的過程中，會逐漸地改變其高度、寬度、外邊距、內邊距和透明度。

如果設定此引數，則無法使用 switch 引數。

callback

可選。回撥函式。

除非設定了 speed 引數，否則不能設定該引數。

switch

可選。布林值。規定 toggle 是否隱藏或顯示所有被選元素。

• True - 顯示所有元素
• False - 隱藏所有元素

如果設定此引數，則無法使用 speed 和 callback 引數。

好了，toggle我們現在理解了，那麼如果我們要求在元素顯示的時候點選瀏覽器介面任何位置都能實現隱藏呢。這就有了下面這段程式碼：

      $(document).click(function (event) {
                    event = event ? event : window.event;
                    var obj = event.srcElement ? event.srcElement : event.target;
                    if ($(obj).closest('.frame_down_load_app').length === 0 || 
                            $(obj).attr('class') === 'frame_down_load_app') {
                        $('.frame_app_code_container').hide();
                    }
                });
 

這段程式碼中又有倆個地方引起我的注意：

1.event和window.event 有何區別

2.“==”與“===”

首先先看event和window.event

event代表事件的狀態，例如觸發event物件的元素、滑鼠的位置及狀態、按下的鍵等等；在IE/Opera中是window.event，在Firefox中是event；而事件的物件，在IE中是window.event.srcElement，在Firefox中是event.target，Opera中兩者都可用。也就是說這倆個只是不同瀏覽器的相容性用法。這樣就實現了我們點選二維碼圖或桌面都能實現隱藏顯示的元素。

接著是“==”與“===”

==   用於比較   判斷 兩者相等      ==在比較的時候可以轉自動換資料型別

===用於嚴格比較   判斷兩者嚴格相等     ===嚴格比較，不會進行自動轉換，要求進行比較的運算元必須型別一致，不一致時返回flase。這個就不多解釋了。好了。就筆記到這裡吧。