如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

問題描述：在頁面選擇關鍵詞時，需要將關鍵詞元素綁定點擊事件使同一類型的關鍵詞只有一個固定class，使其隨點擊更換，目的是為了讓這一類型的關鍵詞的值可以由class獲取。在原本寫死的關鍵詞上綁定的事件是可用的，但是換成動態加載后發現只能適用于寫死的情況。很無奈，在網上搜索一番后花了點時間終于解決了，下面奉上。  

$('element').live('click',function(){})

$('父元素').on('click', '子元素', function(){})

1.什么是懶加載？
         當訪問一個頁面的時候，先把img元素背景圖片路徑替換成一張替代圖片的路徑（這樣就只需請求一次，占位圖），將圖片的真實路徑存儲在img自定義屬性中，只有當圖片出現在瀏覽器的可視區域內時，才設置圖片正真的路徑，讓圖片顯示出來。這就是圖片懶加載。
2.為什么要用懶加載？
       很多頁面，內容很豐富，頁面很長，圖片較多。比如說各種商城頁面。這些頁面圖片數量多，而且比較大，少說百來K，多則上兆。要是頁面載入就一次性加載完畢，提高首屏加載速度，可以減輕服務器壓力，節約流量，用戶體驗好。
3.懶加載實現封裝？

    lazyLoad由四個函數組成，init(初始化函數)，checkShow（判斷圖片是否加載），shouldShow（將要展示的圖片），showImg（展示圖片）。

（1）初始化函數(init)  由于滾動事件太消耗性能，所以用定時器替換,不是滾動就觸發,而是滾動后200毫秒后觸發。

                var timer;
                function init(){
                    $(window).on("scroll",function(){
                        if(timer){
                            clearTimeout(timer);
                        }
                        timer = setTimeout(function(){
                            checkShow();  //
                        },200);
                    });
                }

（2）判斷”圖片是否加載“（checkshow）函數，如果圖片有isload屬性，就說明圖片已經加載過了，直接return。如果圖片沒有isload屬性，進入將要展示圖片shouldshow函數

                function checkShow(){
                    $lazyLoad.each(function(){
                        $cur = $(this);
                        if($cur.attr('isLoaded')){
                            return;
                        }
                        if(shouldShow($cur)){
                            showImg($cur);
                        }
                    });
                }

（3）將要展示圖片shouldshow函數，獲取屏幕可視寬度，滾動高度，要展示的元素到文檔的高度，如果元素到文檔的高度小于屏幕的可視高度加上滾動高度，說明元素已在可視區內，返回true，否則返回false。

               function shouldShow ($node){
                    var scrollH = $(window).scrollTop(),
                        windowH = $(window).height(),
                        top = $node.offset().top;
                    if(top < windowH + scrollH){
                        return true;
                    } else {
                        return false;
                    }

                }

（4）“展示圖片”函數，將元素的src屬性替換為自定義屬性data-src(真正圖片的地址)。

                function showImg ($node){
                    $node.find("img").attr("src",$node.data("src"));
                    $node.attr("isLoaded",true);
                }

（5）函數返回一個對象

              return {
                        init : init
           }

      這樣就實現懶加載封裝了！

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

1.把wxParse文件全部放入項目。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

            （offsetTop同理）

        offsetWidth（和offsetHeight）:

        其實就是一個元素的實際寬度 = width+padding+border

【client家族】

        clientWidth (和clientHeight) = width+padding

              該屬性指的是元素的可視部分寬度和高度

              假如元素有padding有滾動，且滾動是顯示的

              clientWidth = width + padding - 滾動軸寬度

       clientTop(和clientLeft):

             這一對屬性是用來讀取元素的border的寬度和高度的

             clientTop = border-top 的 border-width

             clientLeft = border-left 的 border-width

【scroll家族】

• event.clientX：設置或獲取鼠標指針位置相對于當前窗口的 x 坐標，其中客戶區域不包括窗口自身的控件和滾動條
• event.clientY：設置或獲取鼠標指針位置相對于當前窗口的 y 坐標，其中客戶區域不包括窗口自身的控件和滾動條
• vent.offsetX：設置或獲取鼠標指針位置相對于觸發事件的對象的 x 坐標
• event.offsetY：設置或獲取鼠標指針位置相對于觸發事件的對象的 y 坐標
• event.screenX 設置或獲取獲取鼠標指針位置相對于用戶屏幕的 x 坐標。
• event.screenY設置或獲取鼠標指針位置相對于用戶屏幕的 y 坐標。
  

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

[HTML]代碼

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

1.把wxParse文件全部放入項目。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

微信小程序學習參考demo源碼集合，僅供參考學習用途?。?！

   總結了工作中可能經常會用到的各類正則表達式的寫法。
   方便以后進行查找，減少工作量。

   1. 校驗基本日期格式

var reg1 = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/;
var reg2 = /^(^(\d{4}|\d{2})(\-|\/|\.)\d{1,2}\3\d{1,2}$)|(^\d{4}年\d{1,2}月\d{1,2}日$)$/;

   2. 校驗密碼強度
   密碼的強度必須是包含大小寫字母和數字的組合，不能使用特殊字符，長度在8-10之間。

var reg = /^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;

   3. 校驗中文 

   字符串僅能是中文。

var reg = /^[\\u4e00-\\u9fa5]{0,}$/; 4. 由數字、26個英文字母或下劃線組成的字符串 var reg = /^\\w+$/; 5. 校驗E-Mail 地址
同密碼一樣，下面是E-mail地址合規性的正則檢查語句。 var reg = /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/; 6. 校驗身份證號碼
下面是身份證號碼的正則校驗。15 或 18位。
15位： var reg = /^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$/; 18位： var reg = /^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X)$/; 7. 校驗日期
“yyyy-mm-dd” 格式的日期校驗，已考慮平閏年。 var reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/; 8. 校驗金額
金額校驗，到2位小數。 var reg = /^[0-9]+(.[0-9]{2})?$/; 9. 校驗手機號
下面是國內 13、15、18開頭的手機號正則表達式。（可根據目前國內收集號擴展前兩位開頭號碼） var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$/;    10. 判斷IE的版本
   IE目前還沒被完全取代，很多頁面還是需要做版本兼容，下面是IE版本檢查的表達式。

var reg = /^.*MSIE [5-8](?:\\.[0-9]+)?(?!.*Trident\\\/[5-9]\\.0).*$/;

      11. 校驗IP-v4地址

var reg = /\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b/;

     12. 校驗IP-v6地址

var reg = /(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/;

      13. 檢查URL的前綴
   應用開發中很多時候需要區分請求是HTTPS還是HTTP，通過下面的表達式可以取出一個url的前綴然后再邏輯判斷。

if (!s.match(
    /^[a-zA-Z]+:\/\//
  )) {
  s =
    'http://' +
    s;

}

      14. 提取URL鏈接
   下面的這個表達式可以篩選出一段文本中的URL。

var reg = /^(f|ht){1}(tp|tps):\/\/([\w-]+\.)+[\w-]+(\/[\w- ./?%&=]*)?/;    15. 文件路徑及擴展名校驗
   驗證 windows下文件路徑和擴展名（下面的例子中為.txt文件）
var reg = /^([a-zA-Z]\\:|\\\\)\\\\([^\\]+\\)*[^\\/:*?"<>|]+\\.txt(l)?$/;       16. 提取Color Hex Codes
   有時需要抽取網頁中的顏色代碼，可以使用下面的表達式。
var reg = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/; 17. 提取網頁圖片
   假若你想提取網頁中所有圖片信息，可以利用下面的表達式。
var reg = /\\< *[img][^\\>]*[src] *= *[\\"\']{0,1}([^\\"\'\ >]*)/;    18. 提取頁面超鏈接
   提取html中的超鏈接。

var reg = /(<a\\s*(?!.*\\brel=)[^>]*)(href="https?:\/\/)((?!(?:(?:www\\.)?'.implode('|(?:www\\.)?', $follow_list).'))[^"]+)"((?!.*\\brel=)[^>]*)(?:[^>]*)>/;

   19. 查找CSS屬性
   通過下面的表達式，可以搜索到相匹配的CSS屬性。

var reg = /^\\s*[a-zA-Z\\-]+\\s*[:]{1}\\s[a-zA-Z0-9\\s.#]+[;]{1}/;

   20. 抽取注釋
   如果你需要移除HMTL中的注釋，可以使用如下的表達式。

var reg = /<!--(.*?)-->/;

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

背景

• 設置禁用狀態disabled，如：$(".js-example-disabled").prop("disabled",false);
• 默認值設置：$("#select2").val("1").trigger("change");
• 多選的默認值可以使用：$("#select2").val(["1","2"]).trigger("change"); 這樣傳遞數組過
• select2還有豐富的自定義事件

  JavaScript

$("#select2").on("select2:open", function (e) { log("select2:open", e); });
 
$("#select2").on("select2:close", function (e) { log("select2:close", e); });
 
$("#select2").on("select2:select", function (e) { log("select2:select", e); });
 
$("#select2").on("select2:unselect", function (e) { log("select2:unselect", e); });
 
$("#select2").on("change", function (e) { log("change"); });

【select2的其他組件】

<div class="box1 div">

   <p>多選下拉框</p>

<select id="sel_menu1" multiple="multiple" class="form-control">

  <optgroup label="系統設置">

  <option value="1">用戶管理</option>

  <option value="2">角色管理</option>

  <option value="3">部門管理</option>

  <option value="4">菜單管理</option>

  </optgroup>

  <optgroup label="訂單管理">

  <option value="5">訂單查詢</option>

  <option value="6">訂單導入</option>

  <option value="7">訂單刪除</option>

  <option value="8">訂單撤銷</option>

  </optgroup>

  <optgroup label="基礎數據">

  <option value="9">基礎數據維護</option>

  </optgroup>

  </select>

</div>

JS代碼

$("#sel_menu1").select2({[/align]
         tags: true,
         maximumSelectionLength: 3 //最多能夠選擇的個數

      });

代碼

Html代碼

<div class="box2 div">
     <p>圖文結合的效果</p>
     <select id="sel_menu2" class="js-example-templating js-states form-control">
          <optgroup label="系統設置">
  <option value="1">用戶管理</option>
   <option value="2">角色管理</option>
   <option value="1">部門管理</option>
  <option value="1">菜單管理</option>
  </optgroup>
  <optgroup label="訂單管理">
  <option value="1">訂單查詢</option>
  <option value="1">訂單導入</option>
   <option value="1">訂單刪除</option>
  <option value="1">訂單撤銷</option>
   </optgroup>
  <optgroup label="基礎數據">
  <option value="1">基礎數據維護</option>
  </optgroup>
      </select>
</div>

JS代碼

$("#sel_menu2").select2({
            templateResult: formatState,
            templateSelection: formatState
        });
        function formatState(state) {
            if (!state.id) {
                return state.text; 
            }
  var $state = $('<span><img src="./image/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
            );
            return $state;
        };