如何去定义一个jquery插件

扩展jquery的时候。最核心的方法是以下两种：

$.extend(object) 可以理解为jquery添加一个静态方法

$.fn.extend(object) 可以理解为jquery实例添加一个方法

$.extend(object)

例子：

/* $.extend 定义与调用* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */$.extend({ fun1: function () { alert("执行方法一"); } });//定义$.fun1();//调用

$.fn.extentd(object)/*  $.fn.extend 定义与调用* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */$.fn.extend({ fun2: function () { alert("执行方法2"); } });$(this).fun2();//等同于$.fn.fun3 = function () { alert("执行方法三"); }$(this).fun3();

定义jquery插件的基本结构

1．定义作用域：

为插件定义一个私有作用域。外界代码不能直接访问插件内部。插件内部代码不受外界干扰，也不会污染到全局变量。

    //step01 定义JQuery的作用域
(function ($) {})(jQuery);

2. 为插件添加扩展方法：

//step01 定义JQuery的作用域
(function ($) {//step02 插件的扩展方法名称$.fn.easySlider = function (options) {}
})(jQuery);

3. 设置默认值：

//step01 定义JQuery的作用域
(function ($) {//step03-a 插件的默认值属性var defaults = {prevId: 'prevBtn',prevText: 'Previous',nextId: 'nextBtn',nextText: 'Next'//……};//step02 插件的扩展方法名称$.fn.easySlider = function (options) {//step03-b 合并用户自定义属性，默认属性var options = $.extend(defaults, options);}
})(jQuery);

其中：var options = $.extend(defaults, options)的含义了。表示 options 去覆盖了defaults的值，并把值赋给了options。
在插件环境中，就表示用户设置的值，覆盖了插件的默认值；如果用户没有设置默认值的属性，还是保留插件的默认值。

4. 支持jquery选择器：

        //step01 定义JQuery的作用域
(function ($) {//step03-a 插件的默认值属性var defaults = {prevId: 'prevBtn',prevText: 'Previous',nextId: 'nextBtn',nextText: 'Next'//……};//step02 插件的扩展方法名称$.fn.easySlider = function (options) {//step03-b 合并用户自定义属性，默认属性var options = $.extend(defaults, options);//step4 支持JQuery选择器this.each(function () {});}
})(jQuery);

5 ．支持JQuery的链接调用：

为了能达到链接调用的效果必须要把循环的每个元素return

//step01 定义JQuery的作用域
(function ($) {//step03-a 插件的默认值属性var defaults = {prevId: 'prevBtn',prevText: 'Previous',nextId: 'nextBtn',nextText: 'Next'//……};//step02 插件的扩展方法名称$.fn.easySlider = function (options) {//step03-b 合并用户自定义属性，默认属性var options = $.extend(defaults, options);//step4 支持JQuery选择器//step5 支持链式调用return this.each(function () {});}
})(jQuery);

6. 插件里的方法：

在插件里定义的方法，外界不能直接调用，我在插件里定义的方法也没有污染外界环境。

//step01 定义JQuery的作用域
(function ($) {//step03-a 插件的默认值属性var defaults = {prevId: 'prevBtn',prevText: 'Previous',nextId: 'nextBtn',nextText: 'Next'//……
    };//step06-a 在插件里定义方法var showLink = function (obj) {$(obj).append(function () { return "(" + $(obj).attr("href") + ")" });}//step02 插件的扩展方法名称$.fn.easySlider = function (options) {//step03-b 合并用户自定义属性，默认属性var options = $.extend(defaults, options);//step4 支持JQuery选择器//step5 支持链式调用return this.each(function () {//step06-b 在插件里定义方法showLink(this);});}
})(jQuery);

转载于:https://www.cnblogs.com/yahue/p/jquery_plugin.html

如何去定义一个jquery插件相关推荐

实现你人生中的第一个jQuery插件
前言本想把本篇取名:从0开始写前端UI框架:实现你人生中的第一个jQuery插件 ,但感觉标题太长,所以简单明了直接取后面主题为题目吧. 前一篇文章已经对my-ui框架做了简单的介绍.谈到了我是如 ...
所谓 jQuery 插件，怎样开发一个 jQuery 插件
简单来说,所谓 jQuery 插件就是扩展在 jQuery 原型对象上的一个方法.通过扩展 jQuery 对象,每次调用 jQuery 对象的时候,对象里面都包含了我们自己所添加的那个方法. 一般插件 ...
如何编写一个Jquery插件
首先我们来搞清楚一些关于Jquery插件的知识: 一.插件的种类: 封装对象方法的插件这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件封装全局函数的 ...
发布一个jQuery插件:formStorage
中午休息时,没有睡意,没事写了个jquery插件:formStorage. 原理很简单,通过本地存储机制(userData或者localStorage),存储表单中元素的状态到本地. 需要时可以把所存 ...
我写的第一个jquery插件：jquery.photoFrame（version 0.2）
先看效果 introduce jQuery photoframe plugin A useful plugin to beautify image or text by wrappin ...
stickUp 一个 jQuery 插件
这是一个简单的jQuery插件,它能让页面目标元素 "固定" 在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置.此插件可以在多页面的网站上工作,也能在单页面上面实 ...
自己在项目中写的一个Jquery插件和Jquery tab 功能
后台查询结果 PDFSearchResult实体类: [DataContract(Name = "PDFSearchResult")]public class PDFSearchR ...
自己动手写一个JQuery插件(第二篇)(转)
1.Hold住,我们要开始动真格了! 是的,看到这个标题,你一定也和我一样迫不及待了,因为我们不像之前那篇教程一样小打小闹了,我们现在要动真格了,这次我们要写的插件是上个插件的增强版本.而这个插件包含 ...
自己动手写一个jQuery插件(第二篇)
hold住,我们要开始动真格了! 是的,看到这个标题,你一定也和我一样迫不及待了,因为我们不像之前那篇教程一样小打小闹了,我们现在要动真格了, 这次我们要写的插件是上个插件的增强版本.而这个插件包含主 ...

如何去定义一个jquery插件

定义jquery插件的基本结构

如何去定义一个jquery插件相关推荐

最新文章

热门文章