`

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 是一款轻量级的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。由于其简单易用的特点,jQuery 成为了最受欢迎的前端库之一...

    jquery插件开发

    jquery插件开发入门

    jQuery开发从入门到精通源代码和示例 清华大学 袁江

    通过阅读本书,你可以了解如何使用现有的jQuery插件,以及如何根据需求编写自己的插件,扩展jQuery的功能。 书中包含的源代码和示例覆盖了各个主题,读者可以通过实际操作加深理解。这些示例涵盖了从简单的DOM操作...

    jQuery插件开发解析

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

    jQuery插件开发指南.doc

    ### jQuery插件开发指南 #### 一、入门知识——Getting Started 开发jQuery插件的旅程始于向`jQuery.fn`对象添加新的函数属性,这个新属性的名称即为插件名。例如: ```javascript jQuery.fn.myPlugin = function...

    jQuery开发从入门到精通源代码和示例(8-15)

    6. **插件开发与使用**:jQuery拥有丰富的插件生态系统,理解如何安装、使用及开发自己的插件可以提升开发效率。 7. **实战案例**:书中可能包含多个实际项目案例,如图片轮播、下拉菜单、表单验证等,帮助读者将...

    Jquery从入门到精通

    总结来说,"jQuery从入门到精通"不仅涉及基本的DOM操作、事件处理和动画制作,还包括AJAX交互、插件应用以及使用jQuery EasyUI构建用户界面等多个方面。通过学习这些内容,你将能够利用jQuery高效地开发出功能丰富、...

    jquery开发入门整理(所需要了解的)

    - **插件系统**:jQuery的插件系统允许开发者创建自定义的jQuery插件,这些插件可以扩展jQuery的核心功能,满足特定的应用需求。 ### 浅析jQuery框架与构造对象 jQuery框架的核心是`$`符号,这是一个全局函数,用于...

    jQuery 手机开发从入门到精通电子书加配套随书源码 全

    7. **jQuery插件开发**:jQuery拥有众多社区支持的插件,同时也可以根据需求开发自己的插件,扩展其功能,如轮播图插件、日期选择器等。 8. **移动设备特性**:针对手机和平板设备的特性和API,如触摸事件、地理...

    jQuery.JavaScript与CSS开发入门经典

    6. **jQuery插件**:探索如何利用已有的jQuery插件扩展功能,以及编写自己的插件。 7. **响应式设计**:学习使用CSS3媒体查询实现不同设备上的适配和布局。 8. **CSS布局**:深入理解Flexbox和Grid布局模型,创建...

    jQuery开发从入门到精通(原书网页模板代码)

    《jQuery开发从入门到精通》是一本旨在帮助初学者快速掌握jQuery技术的专业书籍,由袁江编著。这本书深入浅出地介绍了如何使用jQuery来简化HTML文档操作、处理事件、执行动画效果以及与Ajax进行交互,是Web开发人员...

    jQuery插件集之(分页插件)初学者必备+Demo

    本篇将深入讲解"jQuery插件集之(分页插件)",适合初学者入门学习。这个插件不仅提供了分页的基本功能,还具有易于理解和配置的特点,以及三种不同的样式供选择。 首先,我们需要了解jQuery插件的基本结构。一个...

    jQuery JavaScript与CSS开发入门经典 源码

    《jQuery JavaScript与CSS开发入门经典》是一本专为初学者设计的编程指南,旨在帮助读者快速掌握前端开发的核心技术——jQuery、JavaScript和CSS。通过学习这本书的源码,你可以深入理解这三个关键技术的工作原理,...

    JQUERY开发库+入门教程

    本教程将基于提供的"JQUERY开发库+入门教程",深入探讨JQuery的核心概念和常用功能。 1. **JQuery核心概念** - **选择器**: JQuery的选择器类似于CSS,可以方便地选取页面中的HTML元素。例如,`$("#id")`选取ID为...

    jquery 从入门到精通 demo示例下载

    3. `jquery-plugin-boxy.zip`: 这个文件很可能包含了一个jQuery插件——Boxy。Boxy是一个对话框插件,它提供了弹窗功能,可以用于提示、确认或展示详细信息。学习这个插件的使用,可以提升你对jQuery扩展和插件开发...

    Web开发 jQuery七天入门指南

    - **解释**: 定义一个名为 `myPlugin` 的jQuery插件,接受一个配置对象作为参数。`$.fn.myPlugin` 表示将插件添加到jQuery原型中,使所有jQuery对象都可以调用此方法。 #### 八、下一步行动 完成本指南后,可以...

    Enterprise Architect 7 入门教程 及 jQuery的一些验证插件

    通过以上教程,你将能够熟练地运用Enterprise Architect 7进行软件建模,并掌握jQuery表单验证插件的使用,从而提升项目开发的效率和质量。同时,提供的各种插件和源代码示例将帮助你在实践中更好地理解和应用这些...

    jQuery笔记和jQuery插件的使用

    常见的jQuery插件有: 1. **轮播插件**: 如jQuery Carousel,用于创建滑动展示的图片或内容列表。 2. **表单验证插件**: 如jQuery Validation,对表单输入进行实时验证。 3. **弹出框插件**: 如jQuery UI Dialog...

    jQuery开发从入门到精通( HTML5+CSS3网页模板)

    8. **jQuery插件**:jQuery拥有庞大的插件生态系统,如Bootstrap、jQuery UI等,它们提供了预设的组件和效果,可以帮助快速搭建功能完善的网页。 9. **性能优化**:理解如何优化jQuery代码,减少DOM操作,合理使用...

Global site tag (gtag.js) - Google Analytics