`
sakakokiya
  • 浏览: 507390 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

如何开发一个JQuery插件?

阅读更多
JQuery有两种开发插件的方法:
jQuery.fn.extend(object);
jQuery.extend(object);
jQuery.extend(object);方法为扩展jQuery类本身.并为类添加新的方法。
jQuery.fn.extend(object)方法是给jQuery对象添加方法。
jQuery.fn = jQuery.prototype.
虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。
jQuery便是一个封装得非常好的类,比如我们用 语句 $(”#btn1″) 会生成一个 jQuery类的实例。
jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:
$.extend({
add:function(a,b){return a+b;}
});
便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,
$.add(3,4);  //return 7
jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:
Java代码
1. $.fn.extend({
2.
3.    alertWhileClick:function(){
4.
5.        $(this).click(function(){
6.
7.             alert($(this).val());
8.         });
9.
10.     }
11.
12. });
13.
14. $(”#input1″).alertWhileClick(); //页面上为:<input id=”input1″ type=”text”/>
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
$(”#input1″).alertWhileClick(); //页面上为:<input id=”input1″ type=”text”/>
$(”#input1″) 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。
jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。
分享到:
评论

相关推荐

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    jQuery插件开发学习

    通过这样的结构,我们可以创建一个易于使用且功能强大的jQuery插件,用户只需一行代码就能在页面上添加一个数字时钟: ```javascript $('.clock').digitclock(); ``` 总的来说,学习jQuery插件开发有助于提升...

    jquery插件库大全(200个).zip

    jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...

    JQuery插件开发

    一个简单的jQuery插件通常包含以下部分: 1. **命名空间定义**:为了防止与其他插件冲突,我们通常使用`.fn.extend`来创建一个新的命名空间,例如`$.fn.myPlugin`。 ```javascript (function($) { $.fn.myPlugin ...

    jquery 插件开发 pdf

    jQuery插件开发是扩展这个库功能的一种常见方式,使得开发者能够根据项目需求创建自定义功能。以下是对jQuery插件开发的详细讲解: 1. **插件基础** - jQuery插件通常是通过扩展jQuery对象的原型链来实现的,这...

    jQuery插件开发全解析

    ### jQuery插件开发全解析 #### 一、引言 jQuery作为一款优秀的JavaScript库,在前端开发领域具有举足轻重的地位。它简化了许多常见的JavaScript任务,使得开发者能够更轻松地处理DOM操作、事件处理以及Ajax交互等...

    jQuery插件开发的五种形态小结

    jQuery作为JavaScript领域中广泛使用的库之一,...每一个形态都是对前一个形态的优化和补充,共同构成了一个完整的jQuery插件开发流程。掌握这些形态能够帮助开发者更好地进行插件开发,提升项目的开发效率和维护性。

    jquery插件开发文档

    jQuery插件开发是一项重要的技能,可以让开发者通过创建可复用的代码片段来增强jQuery库的功能。根据提供的文档内容,以下是一些关于jQuery插件开发的关键知识点: 1. 基本插件结构 在编写jQuery插件时,首先要了解...

    jQuery插件开发详解

    《jQuery插件开发详解》 ...总之,jQuery插件开发是一个结合了JavaScript基础、jQuery库特性和设计模式的综合实践过程。通过理解并掌握这些知识,开发者能够更高效地构建功能丰富的交互式网页应用。

    240多个jQuery插件

    这个资源包含的"240多个jQuery插件"是开发者们为了扩展jQuery功能而创建的各种工具,它们能帮助我们实现更丰富的交互效果和视觉体验。 首先,jQuery插件的核心在于其模块化设计,允许开发者通过简单的API接口,将...

    jquery 插件开发

    总的来说,jquery插件开发是一个非常强大且灵活的过程,通过灵活使用$.extend()、$.fn以及$.widget()等方法,我们可以轻松地扩展或者创建新的jQuery功能或者部件。只要我们能够掌握这些方法,相信一定能够有效地提升...

    jQuery插件开发及常用插件大全.zip

    jQuery插件开发及常用插件大全PDF;jQuery插件开发.pdf、jQuery常用插件大全.pdf

    50个jquery插件介绍

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。jQuery的流行在于其易用性、兼容性和丰富的插件生态系统。"50个jQuery插件介绍"这篇文档很...

    通用 JQuery 插件 开发

    2. **函数结构**:一个简单的jQuery插件通常包含以下结构: ```javascript (function($){ $.fn.myPlugin = function(options) { // 插件代码 }; })(jQuery); ``` 这里的匿名函数保证了`$`符号代表jQuery,并...

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集).zip

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法

    orgchart.js 组织架构图之JQuery插件

    组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...

    jQuery插件,jQuery插件

    jQuery插件是JavaScript库jQuery生态系统中的一个重要组成部分,它极大地扩展了jQuery的核心功能,为开发者提供了丰富的功能和便捷的API,以实现各种复杂的网页交互和特效。jQuery插件通常由开发者社区创建并开源,...

    jquery插件库-jquery仿京东商品详情页图片放大效果.zip

    开发一个jQuery插件通常包括定义一个新的函数,该函数接受参数并利用jQuery对象进行操作。这种设计模式使得开发者能够轻松地将插件整合到自己的项目中。 京东商品详情页的图片放大效果,通常涉及到图片预览、缩放和...

    jquery插件.rar

    1. 插件结构:一个基本的jQuery插件通常由一个函数构成,该函数接收jQuery对象作为参数,这样可以作用于匹配的DOM元素集合。例如: ```javascript $.fn.myPlugin = function(options) { this.each(function() { /...

Global site tag (gtag.js) - Google Analytics