jQuery 插件

1 jQuery 插件的网站

2 经典jQuery插件

2.1 select2 下拉框搜索插件

  • 官网 https://select2.org/

  • github https://github.com/select2/select2

  • 用法

    导入css
    导入js
    
    //调用插件 用法一
    $("#mySelect01").select2();
    
    //调用插件 用法二
    $("#mySelect02").select2({
      width: 150,
      data: [
        {id:1, text:"小明"},
        {id:2, text:"小强"},
        {id:3, text:"小李"},
        {id:4, text:"小张"},
        {id:5, text:"小王"},
      ]
    });
    
    //调用插件 用法三
    $("#mySelect03").select2({
          width: 150,
          ajax: {
              url: "http://unclealan.cn/address.php",
              dataType: "json",
              processResults: function(data){
                  //对响应内容进行处理
                  var resList = [];
                  $.each(data, function(index, item){
                      resList.push({id:item.id, text:item.name})
                  });
                  //返回结果
                  return {
                      results: resList,
                      "pagination": {
                        "more": true
                      }
                   }
               }
           }
      })
    

2.2 datetimepicker 时间日期插件

2.3 fullpage 全屏滚动插件

  • 官网 https://alvarotrigo.com/fullPage/zh/

  • github https://github.com/alvarotrigo/fullpage.js/

  • 用法

    <!--HTML部分-->
    <div id="fullpage">
        <div class="section"></div>
        <div class="section">
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
        </div>
        <div class="section"></div>
        <div class="section"></div>
    </div>
    自定义的导航 卸载包裹元素的外面
    
    <!--JS部分-->
    <script>
        $("#fullpage").fullpage({
            navigation: true,
            sectionsColor: ["orange", "skyblue", "pink", "#369"],
            navigationTooltips: ['第一页', '第二页','第三页', '第四页'],
            showActiveTooltip: false,
            slidesNavigation: false,
            anchors: ["firstPage", "secondPage", "thirdPage", "forthPage"]
        });
    </script>
    

2.4 lazyload 图片懒加载

2.5 layer 弹窗插件

2.6 nice validator 表单验证

2.7 jQuery-easing

3 自定义jQuery 插件

jQuery.fn.extend() 给jQueryDom扩展方法

$.fn.extend({
  方法名:function(){}
})
//或者
$.fn.方法名 = function(){

}

jQuery.extend() 给jQuery 对象本身扩展方法

$.extend({
   方法名: function(){
   }
})

4 jQuery UI

5 jQueryMobile

6 Sizzle

7 Zepto

results matching ""

    No results matching ""