`

jQuery插件开发入门

 
阅读更多
是什么?
    所谓“插件”,就是用户自己新增的jQuery实例对象的方法。

原理
    jQuery插件是定义在jQuery构造函数的prototype对象上面的一个方法,这样做就能使得所有jQuery对象的实例都能共享这个方法。

注意:
   ♣始终包裹在一个封闭的插件.
   ♣不要冗余包裹this关键字在插件的功能范围内.【插件内部,this关键字指的是jQuery对象的实例。而在一般的jQuery回调函数之中,this关键字指的是DOM对象。】
   ♣除非插件返回特定值,否则总是返回jQuery对象来维持链式操作
   ♣不要在一个插件中多次命名不同方法

//避免和其他JavaScript库冲突,将jQuery传递给一个自执行的封闭程序,jQuery在此程序中映射为$符号,这样可以避免$号被其他库覆写。
//最前面有一个分号,是为了防止多个脚本文件合并时,其他脚本的结尾语句没有添加分号,造成运行时错误。
;(function ($) {
    $.fn.m​​yPlugin = function () {
        //你自己的插件代码
    };
})(jQuery);

把顶层对象(window)作为参数输入,这样可以加快代码的执行速度和执行更有效的最小化操作:
;(function ($, window) {
  $.fn.myPlugin = function() {
    //你自己的插件代码
  };
}(jQuery, window));


使用extend方法,为参数对象设置属性的默认值:
;(function ($) {
    $.fn.m​​yPlugin = function (options) {
        //创建一些默认值,拓展任何被提供的选项
        var settings = $.extend({
            'location': 'top',
            'background-color': 'blue'
        }, options);
        return this.each(function (){
        // 你自己的插件代码
        });
    };
})(jQuery);

参考:
http://www.css88.com/archives/4821
http://javascript.ruanyifeng.com/jquery/plugin.html

推荐一个比较全面的jQuery插件网站:http://www.jq22.com/
分享到:
评论

相关推荐

    jquery插件开发快速入门

    jquery插件开发快速入门

    jquery插件开发

    jquery插件开发入门

    jQuery插件开发解析

    本文详细介绍基于jQuery开发插件的方式及步骤,其中附有代码和说明,是jq插件开发的入门教程。jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); 给jQuery对象添加方法。 jQuery.extend(object);...

    jQuery-Plugin-Blank:jQuery插件开发的快速入门

    jQuery-插件空白jQuery插件开发的快速入门

    jQuery插件开发详细教程

    这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱。 一、入门 编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性,此处添加的对象属性的名称就是你插件的名称: 代码如下:jQuery.fn.myPlugin ...

    jQuery入门到精通

    PPT课件,从入门到深入,讲述jQuery的各种便捷用法,提高我们的开发效率。 jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。 ...

    jquery.plugin:jQuery插件脚手架,有助于快速开发jQuery插件

    一个jQuery插件脚手架,可帮助快速开发jQuery插件。 这是我用来开始编写新jQuery插件的jQuery插件脚手架。 特征 简单的目录结构 周到的插件支架 基于Grunt的文件观看/缩小 配置测试页以便于开发 作者 Wil Neeley( ...

    jQuery笔记和jQuery插件的使用

    Write Less, Do More, 超详细的jQuery学习笔记,深入了解jQuery的语法,为前段开发带来更多的方便

    《构建跨平台APP-jQuery.Mobile移动应用实战》 PDF

    本书分为4篇,*篇是移动开发入门篇,介绍了jQuery Mobile、HTML 5和移动开发的一些基础知识,以及如何搭建开发环境;第二篇是jQuery Mobile基础篇,介绍了jQuery Mobile中对话框、工具栏、按钮、表单、布局和插件的...

    jQuery插件开发

    简单的例子带你走进jq插件的开发!通俗易懂,入门首选!

    jQuery 插件封装的方法

    这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱。 一、入门 编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性,此处添加的对象属性的名称就是你插件的名称: . 代码如下: jQuery.fn....

    jQuery的详细教程

    jquery的开发教程 入门到精通 包括jquery插件开发的技术

    jquery-numpad:数字键盘jQuery插件

    jQuery 插件开发的快速入门 所以,您已经尝试过编写 jQuery 插件,并且很容易将一些可能有效的东西放在一起。 惊人的! 问题是,您认为可能有更好的方式来编写它们 - 您已经看到它们在野外以多种不同的方式完成,但...

    jQuery-1.9.1(英文版)帮助文档

    jQuery 1 9 1英文版帮助文档 包括3个部分内容:学习中心(Learning Center) JQuery API JQuery UI API 其中学习中心有JS入门基础 JQuery的相关核心概念 J插件常识和性能方面建议 JQuery Mobile 移动开发)等 内容比...

    jQuery权威指南-源代码

    第1章 jQuery开发入门/1 1.1 jQuery概述/2 1.1.1 认识jQuery /2 1.1.2 jQuery基本功能/2 1.1.3 搭建jQuery开发环境/3 1.1.4 编写第一个简单的jQuery应用/3 1.1.5 jQuery程序的代码风格/5 1.2 jQuery的简单...

    jQuery入门指南教程

    jQuery入门指南教程 这个指南是一个对jQuery库的说明,要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子,选择器和事件基础,AJAX、FX的用法,以及如何制作jQuery的插件。 这个指南包括...

    Bootstrap与jQuery UI框架设计(前端开发工程师系列)

    第5章jQuery Mobile入门 l jQuery Mobile入门 1.1 jQuery Mobile简介 1.2 jQuery Mobile准备文档 1.3 jQuery Mobile架构 1.3.1 jQuery Mobile属性 1.3.2 jQuery Mobile主题 1.3.3 jQuery Mobile视图 操作案例1:制作...

    clippy-jquery:一个jQuery插件,使clippy易于使用和快速使用

    clippy-jquery是一个jQuery插件,旨在使 SWF简单易用。 要求 jQuery(在测试) Flash(仅Web浏览器插件,无需Flash开发)。 入门 加载jQuery和插件: <!-- use local jQuery if you prefer --> [removed]...

    jQuery实现在线考试答题代码.zip

    开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 jquery滚动条 jquery下拉广告,jquery图片延时加载等,jquery代码,放大镜特效,jquery广告代码,jquery导航,jquery在线客服...

    jQuery经典入门教程(绝对详细)

    jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的! 下载地址:Starterkit ...

Global site tag (gtag.js) - Google Analytics