jQuery自定义插件详解及实例代码

 jQuery自定义插件

jQuery是一个功能强大的库，提供了开发JavaScript项目所需的所有核心函数。然而，有时候我们还是需要使用自定义代码来扩展这些核心函数来提高开发效率。

jQuery库是为了加快JavaScript的开发速度而设计的，通过简化编写JavaScript的方式，减少代码量。

jQuery编写插件有两种方式

1.添加jQuery对象级别的插件，原理是给jQuery类添加方法。

写法如下：

(function($){
  $.fn.extend({
    函数名:function(自定义参数){
      //自定义插件代码部分
    }
  });
})(jQuery);
//第二种写法
(function($){
  $.fn.函数名=function(自定义参数){
    //自定义插件代码
  }
})(jQuery);

//调用方法
("#id").函数名(参数);

2.添加jQuery类级别的方法，也就是添加静态方法

写法如下：

(function($){
  $.extend({
    函数名:function(自定义参数){
      //自定义插件代码
    }
  });
})(jQuery);
//第二种写法
(function($){
  $.函数名=function(自定义参数){
    //自定义插件代码
  }
})(jQuery);

//调用方式
$.函数名(参数);

jQuery插件的种类

1.对象级别插件开发，即给jQuery对象添加方法，封装对象方法的插件，例如：append()、val()。
2.类级别插件开发，即给jQuery添加全局函数，相当于给类本身添加方法，例如：$.ajax();

jQuery的插件机制

jQuery为开发插件提供了两种方法。

1. jQuery.fn.extend(object)，给jQuery对象添加方法。

2. jQuery.extend(object)，给jQuery类添加方法。

这两个方法接收的参数都是一个对象，类型为Object，Object里面的”名/值”分别对应”函数名/函数主体”。

fn是什么

查看jQuery源码：

<span style="font-size:12px;">jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//....　 //...... }; </span>

从源码中查看，可以得出：

jQuery.fn=jQuery.prototype
//fn指向jQuery对象的原型，即为jQuery类添加成员函数。

这里我写一个简单的例子来实现一个最简单的插件，仅仅是用来说明一下如何使用jQuery开发插件。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自定义jQuery插件</title>
<script src="plugs/jquery-2.2.3.min.js"></script>
<script>
//这是一个自定义的jQuery插件
(function(){
  $.fn.extend({
    myFirst:function(){
      var s="This is my first jQuery";
      $(this).append(s);
    }
  });
})(jQuery);
</script>
</head>

<body>
<div id="i1"></div>
<script>
$("#i1").myFirst();
</script>
</body>
</html>

执行以后返回的页面为：

以上仅仅介绍如何使用jQuery开发自定义插件，会使用以后就可以开发更复杂的插件了。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • jquery自定义插件结合baiduTemplate.js实现异步刷新（附源码）

    jquery自定义插件结合baiduTemplate.js实现异步刷新（附源码）

    上一篇记录了BaiduTemplate模板引擎使用示例(附源码),在此基础上对使用方法进行了封装 自定义插件jajaxrefresh.js 代码如下: //闭包限定命名空间 (function ($) { $.fn.extend({ "ajaxrefresh": function (options) { //检测用户传进来的参数是否合法 if (!isValid(options)) return this; var opts = $.extend({}, defaluts, optio

  • 基于jQuery实现Tabs选项卡自定义插件

    控件这东西网上找的多少都有些功能不如意的,只能自己动手来写了. Tabs插件很多人都需要用到,网上也有很多的例子,但是不是风格不搭调就是用着不习惯(自己写的不一定比别人的好但用着顺手In love) 下面直接贴代码,不喜勿喷: (function ($) { 'use strict'; var defaults = { type: "iframe", onchanged: null, style: { header_panel: "tab-headers", con

  • jquery自定义插件——window的实现【示例代码】

    jquery自定义插件——window的实现【示例代码】

    本例子实现弹窗的效果: 1.jquery.show.js /* * 实现功能:点击在鼠标位置显示div * 版本序号:1.0 */ (function($){ $.fn.showDIV = function(options){ var defaults = {}; var options = $.extend(defaults, options); var showdiv=$(this); var close, title, content; close=$(" "); title=$

  • jQuery创建自己的插件(自定义插件)的方法

    jQuery创建自己的插件(自定义插件)的方法

    但必须知道,这些插件不是自己凭空产生的,它们是由开发人员编写.测试并完善的,这些人员为 jQuery 社区奉献了自己的业余时间.我们做这些都是免费的,是出于对自己代码的热爱.本文主要关注您如何回报这个伟大的社区,即如何编写自己的插件并上传到 jQuery 的插件页面.这可以让所有人使用您创建的插件,可以让整个 jQuery 开发社区变得更好.今年您也做出自己的贡献吧. 在编写本文中的插件时,我发现插件的创建过程以及用来创建它的框架非常简单明了.困难的地方在于想一些其他人还没有做过的事情,并编写一

  • jquery自定义插件开发之window的实现过程

    jquery自定义插件开发之window的实现过程

    本例子实现弹窗的效果:如果亲感觉效果还不错,请继续往下阅读. 1.jquery.show.js /* * 开发者:lzugis * 开发时间:2014年6月10日 * 实现功能:点击在鼠标位置显示div * 版本序号:1.0 */ (function($){ $.fn.showDIV = function(options){ var defaults = {}; var options = $.extend(defaults, options); var showdiv=$(this); var

  • 基于jQuery实现Accordion手风琴自定义插件

    目前网上有很多各种各样的手风琴插件,但是没有一个完整实现了的侧菜单,今天写了一个可以无限子节点的手风琴侧菜单,有需要的可以参考一下,有什么好的想法可以留言.(没有经过彻底测试,不过问题应该不大) 下面老规矩,直接贴代码: (function ($) { 'use strict'; var defaults = { url: null, param: {}, data: {}, fill: true, level_space: 15, onitemclick: null, style: { hea

  • jQuery自定义插件详解及实例代码

    jQuery自定义插件详解及实例代码

     jQuery自定义插件 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.然而,有时候我们还是需要使用自定义代码来扩展这些核心函数来提高开发效率. jQuery库是为了加快JavaScript的开发速度而设计的,通过简化编写JavaScript的方式,减少代码量. jQuery编写插件有两种方式 1.添加jQuery对象级别的插件,原理是给jQuery类添加方法. 写法如下: (function($){ $.fn.extend({ 函数名:function(

  • IOS 七种手势操作（拖动、捏合、旋转、点按、长按、轻扫、自定义）详解及实例代码

    IOS 七种手势操作（拖动、捏合、旋转、点按、长按、轻扫、自定义）详解及实例代码

    IOS 七种手势操作 今天为大家介绍一下IOS 的七种手势,手势在开发中经常用到,所以就简单 通俗易懂的说下, 话不多说,直接看代码: 1.UIGestureRecognizer 介绍 手势识别在 iOS 中非常重要,他极大地提高了移动设备的使用便捷性. iOS 系统在 3.2 以后,他提供了一些常用的手势(UIGestureRecognizer 的子类),开发者可以直接使用他们进行手势操作. UIPanGestureRecognizer(拖动) UIPinchGestureRecognizer

  • AngularJS 自定义过滤器详解及实例代码

    AngularJS 自定义过滤器详解及实例代码

    AngularJS另一个特点就是提供了过滤器,可以通过操作UNIX下管道的方式,操作数据结果. 通过使用管道,可以便于双向的数据绑定中视图的展现. 过滤器在处理过程中,将数据变成新的格式,而且可以使用管道这种链式风格,还能接受附加的参数. 实现方式 下面看一下如何定义声明一个过滤器,首先依然是要创建我们自己的模块myAppModule var myAppModule=agular.module("myApp",[]); 接下来在模块的基础上,创建过滤器: myAppModule.fil

  • AngularJS 自定义指令详解及实例代码

    AngularJS 自定义指令详解及实例代码

    AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容. 前面提到AngularJS的四大特性: 1 MVC 2 模块化 3 指令 4 双向数据绑定 下面将会介绍如下的内容: 1 如何自定义指令 2 自定义指令的使用 3 自定义指令的内嵌使用 如何自定义指令: Angular是基于模块的框架,因此上来肯定要创建一个自己的模块: var myAppModule = angular.module("myApp",[]); 然后在此模块基础上创建指令d

  • IOS 自定义UIPickView详解及实例代码

    IOS 自定义UIPickView详解及实例代码

    IOS 自定义UIPickView 苹果一直推崇使用原生的组件,自带的UIPickView其实也很漂亮了,看起来也很美观.但是有时候,产品会有一些特殊的设计和需求.本文将会讲解如何修改苹果原生的组件的属性,达到自定义UIPickView的效果. 需求如下.需要自定义一个Tab.自定义选中文字的颜色.自定义选中颜色背景,自定义未选中文字颜色. 修改未选中的文字的字体和颜色 经过分析,上面的取消和确定按钮实现起来还是很简单的.加一个条就好了,我就不介绍具体步骤,下面的没有选中时候文字的样色,已经字体

  • jQuery 特性操作详解及实例代码

    前面的话 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.操作特性的DOM方法主要有3个:getAttribute()方法.setAttribute()方法和removeAttribute()方法,而在jQuery中用一个attr()与removeAttr()就可以全部搞定了,包括兼容问题.本文将介绍jQuery中的特性操作 获取特性 jQuery中用attr()方法来获取和设置特性,attr是attribute(特性)的缩写,在jQuery DOM操作中会经常

  • AngularJS  自定义指令详解及实例代码

    AngularJS  自定义指令详解及实例代码

    AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容. 前面提到AngularJS的四大特性: 1 MVC 2 模块化 3 指令 4 双向数据绑定 下面将会介绍如下的内容: 1 如何自定义指令 2 自定义指令的使用 3 自定义指令的内嵌使用 如何自定义指令: Angular是基于模块的框架,因此上来肯定要创建一个自己的模块: var myAppModule = angular.module("myApp",[]); 然后在此模块基础上创建指令d

  • jQuery grep()方法详解及实例代码

    什么是jQuery.grep()? jQuery.grep()是一个查找满足过滤函数的数组元素的函数.原始数组不受影响,返回值为数组. 用法介绍: 写法: jQuery.grep( array, function(elementOfArray, indexInArray) [, invert ] ) 参数介绍: array 类型: Array 用于查询元素的数组. function(elementOfArray, indexInArray) 类型: Function() 该函数来处理每项元素的比

  • jQuery数组处理详解(含实例演示)

    1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false, 其它返回值将被忽略. each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大.在数组中,它可以轻松的攻取数组索引及对应的值.例: 复制代

  • Android Dialog详解及实例代码

     Android Dialog详解及实例代码 概述: Android开发中最常用的就是Dialog类,除了自定义dialog布局,最多的就是用在弹出对话框.进度条.输入框.单选.复选框. 1.选择对话框: AlertDialog.Builder dialog = new AlertDialog.Builder(this); dialog.setTitle("选择对话框"); dialog.setMessage("请选择确认或取消"); dialog.setCance

随机推荐