jquery中$.fn和图片滚动效果实现的必备知识总结

前言

图片滚动效果相信对大家来说都不陌生，烂大街的效果图如下所示，js实现代码很短，不过如果想做的话，必须掌握jquery、IIFE、setInterval等基础以及$.fn用法：

jquery中$.fn用法

$.fn

是jquery的命名空间,如果对jquery源码有过学习，就不难发现源码中有如下代码：

jquery.fn=jquery.prototype={
 init:function(selector,context){
 /*
 *code
 */
 }
}

所以说

jquery.fn

也就是

jquery.prototype

的简写。我们的源码调用的构造函数

jquery（）

实例实际是

jquery.fn.init（）

的实例。

代码如下：

jQuery = function( selector, context ) {
 //jqeruy内部使用new创建返回另一个构造函数实力是为了省去调用jquery时前面的new，并在后面定义了别名$;
 //构造函数jquery()调用的是构造函数jQuery.fn.init()的实例
 return new jQuery.fn.init( selector, context );
},/*code*/

之后后续代码有执行了

jquery.fn.init.prototype=jquery.fn

，用构造函数jquery的原型对象覆盖

jquery.fn.init()

的原型对象，使得

jquery.fn.init

实例也能访问到

jquery()

的原型方法和属性。

开发插件的方法：用

$.fn

扩展jquery生成新的方法。

      1、可以使用

jquery.extend(object)

扩展jquery类本身，为类添加新的方法。

      2、用

jquery.fn.extend(object)

给jquery对象添加方法。

下面用

jquery.extend(object)

扩展jquery类,添加类方法：

$.extent({
 add: function(a,b){
 return a+b;
 }
})

以后就可以直接使用

$.add(1,2);//3

下面用

jquery.fn.extend(object)

对

jquery.prototype

扩展一个方法。

$.fn.extend({
 [函数名]：fucntion(){
 /*code*/
 }
});

以后可以直接使用