如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

问题描述：在页面选择关键词时，需要将关键词元素绑定点击事件使同一类型的关键词只有一个固定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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的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;
        };