jQuery插件

前言

因为jQuery广大的被人们使用,基于jQuery,很多相关的插件也非常的丰富.本文主要记录一些使用了解的插件已备日后需要查询.
jQuery插件库连接
jQuery之家

多库共存问题

日常开发中,会有不只用一个库或者一个框架来完成项目.jQuery是用$符号来调用的.也可以是一些其他库或者框架的调用方法.这时候就会产生冲突.解决这种冲突的办法有三种.

  • 直接使用jQuery
    直接使用jQuery来调用.使用jQuery.noConflict()或者$.noConflict()可以将jQuery对$符号的占用取消.
  • 自定义一个别的代号来替代jQuery获取别的库.
    js var temp = $.noConflict(); //temp会替代$符号在jQuery中的功能,指代jQuery.
  • 方法三
    js (function($){/*代码块*/})(jQuery) //这是一个函数声明,并用括号括起来够成一个表达式,表达式的返回值就是这个函数的引用.在这个函数中用$作为参数。所以在注释代码块用可以使用$符号。

jQuery.color插件

jQuery.color插件是一个专门用于拓展jQuery的animate方法的js库文件.原本jQuery是不具备让颜色渐渐改变的动画效果的,使用了它就可以了.

jQuery.lazyload 懒加载

jQuery.lazyload插件使一款用于实现图片懒加载的jQuery拓展库.

jQueryUI的使用

jQueryUI是基于jQuery的插件,不过是一个相对庞大的UI库.基于jQueryUI,我们可以快速的开发出比较美观的UI界面和功能.
jQueryUI官网
[菜鸟教程API](http://www.runoob.com/jqueryui/jqueryui-tutorial.html

  • 使用jQuery UI 先引入jQueryUI的css文件,在引入jQuery.js jQueryUI.js ~在入口函数中调用jQueryUI的API.
  • jQueryUI的整体插件中,有非常多的预设css,我们只需要调用class就可以快速实现一些css效果.
  • 特效组件 拖到 排序 折叠

jQuery-fullpage

jquery-fullpage是一款基于jQuery的全屏滚动插件.GitHub下载链接
-但是,个人在使用时候,发现了一些小bug,就是切F12调试的时候,此插件只是当前页面显示全屏.一瞬间切换f12会出现下一屏.个人调了很久水平有限...没解决这一bug.推荐使用下面这款

fullpage插件

fullPage是一款不依赖任何js库的全屏滚动组件,支持垂直/水平滚动、CSS3 旋转/缩放动画,支持 IE5.5+,支持移动设备。GitHub下载链接


formValidation.min.js表单验证插件,
modernizr.min.js(专为HTML5和CSS3开发的功能检测类库),
breakpoints.min.js,( 用于你的响应式设计简单地设计断点, Breakpoints.js会触发自定义事件当浏览器进入或退出断点时。在复杂布局时非常实用。)


自己封装一个jQuery插件

jQuery的固定格式

    (function($){
        在这里写拓展的代码作自己的jQuery
    })(jQuery);

jQuery方法的两大类

  • 静态方法 $.方法名(参数) 不需要获取jQuery对象就可以调用的
    $.extend({
        函数名:function(参数){
            函数体
        }
    })
    $.函数名 = function(参数列表){
        函数体    
    }
  • 实例方法 $(selector).css(property,value) 需要获取到一个实例对象才可以调用
    $.fn.extend({
        函数名:function(参数){
            函数体
        }
    })
    $.fn.函数名 = function(参数列表){
        函数体    
    }    
posted @ 2017-03-25 19:51  蔡俊俊  阅读(352)  评论(2编辑  收藏  举报