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(参数列表){
函数体
}