jQuery 插件

jQuery 插件

1 jQuery 插件的網站

• http://plugins.jquery.com/ 官網
• http://www.jq22.com/ jQuery插件庫
• http://www.htmleaf.com/ jQuery 之家
• http://www.jq-school.co m jQuery-school

2 經典jQuery插件

2.1 ### select2 下拉框搜索插件

• 官網 https://select2.org/

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

• 用法

  $(dom).select2()
  $(dom).select({
    width:,
    data:,
    ajax:,
    ....
  })

2.2 datetimepicker 時間日期插件

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

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

• 用法

  //設置語言
  $.datetimepicker.setLocale('zh');
  //調用插件
  $(dom).datetimepicker({
    datepicker:,
    timepicker:,
    format:"Y-m-d H:i",
    value:，
    ....
  })

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: []
        .....
    })
  </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