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*/ }});

以后可以直接使用$(“div”).函数名()。

使用jquery中的$.fn封装一个图片滚动插件

这是一个使用到烂大街的一个插件了，不用说也知道是什么。不过具体是怎么实现的，继续往下看。这个插件最主要的部分也就是js的实现，html和css很简单，不赘述。如果下面一些知识点已经熟悉，可以选择性跳过。

setInterval(fucntion(){/*code*
tag：知识滚动效果电脑软件jqueryFn