jQuery 插件

1 jQuery 插件的网站

• http://plugins.jquery.com/ 官网

• http://www.jq22.com/ jQuery插件库

• http://www.htmleaf.com/ jQuery 之家

• http://www.jq-school.com/ jQuery-school

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 时间日期插件

• github https://github.com/xdan/datetimepicker

• 文档 https://xdsoft.net/jqplugins/datetimepicker/

• 用法

  //设置语言
  $.datetimepicker.setLocale('zh');
  //调用插件
  $(dom).datetimepicker({
    datepicker: true,
    timepicker: true,
    format:"Y-m-d H:i",
    value: "2025-12-23"，
    ....
  });
  

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 图片懒加载

• 官网 https://appelsiini.net/projects/lazyload/

• github https://github.com/tuupola/jquery_lazyload/tree/2.x

• 用法

  $("#lazyWrapper img").lazyload()
  

2.5 layer 弹窗插件

• 官网 http://layer.layui.com/?alone

• github https://github.com/sentsin/layer/

• 用法

  layer.alert()
  layer.confirm()
  layer.msg()
  layer.load()
  layer.tips()
  layer.colse()
  layer.open({
    type: ,
    title: ,
    content: 
    ....
  })
  ...
  

2.6 nice validator 表单验证

• 官网 https://validator.niceue.com/

• github https://github.com/niceue/nice-validator

• 用法

  $("form").validator({
  
  })
  

2.7 jQuery-easing

• 官网 http://gsgd.co.uk/sandbox/jquery/easing/

• github https://github.com/gdsmith/jquery.easing

• 用法

  $(dom).hide(speed, easing, fn)
  

3 自定义jQuery 插件

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

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

}

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

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

​

4 jQuery UI

• 官网 https://jqueryui.com/

5 jQueryMobile

• 官网 https://jquerymobile.com/

• 教程 http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html

6 Sizzle

• 官网 https://sizzlejs.com/

7 Zepto

• 官网 http://zeptojs.com/
• 与jquery区别： https://www.zhihu.com/question/25379207