脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 10分钟学会写Jquery插件

10分钟学会写Jquery插件实例教程

 更新时间：2014年09月06日 15:47:47   投稿：shichen2014  
这篇文章主要介绍了10分钟学会写Jquery插件,通过一个实例分两步完成一个简单的插件,非常实用,需要的朋友可以参考下

有很多朋友都用过jquery插件，但是很少有人自己动手写过jQuery插件，本文就以实例形式简单叙述了jQuery插件的实现方法。分享给大家供大家参考之用。具体方法如下：
 
具体而言，其实就是把一些常用、实用、通用的功能封装起来而以，简单的来讲就是把这些代码放在一个方法里面，可以达到重复使用的效果，这样就可以不需要每次要用此功能的时候都去重新写一遍。
 
现在Jquery里面加入了插件的概念，只要按照它特定的格式当作平时写function一样去写就可以了，不虽然搞得太复杂的。信不信由你们，反正我信了。
 
接下来用简单的代码来讲解一下，如果大家看了还不会写插件的话，我只能表示无语了

具体步骤如下：

第一步：定义插件

$(function() { 
  $.fn.插件名称 = function(options) { 
   var defaults = { 
     Event : "click",    //触发响应事件 
     msg : "Holle word!"    //显示内容 
   }; 
   var options = $.extend(defaults,options); 
   var $this = $(this);    //当然响应事件对象 
   //功能代码部分 
   //绑定事件 
   $this.live(options.Event,function(e){ 
     alert(options.msg); 
   }); 
  } 
});

第二步：调用插件 

$(function() { 
  //绑定元素事件 
  $("#test").插件名称({ 
   Event : "click",    //触发响应事件 
   msg : "插件原来就是这么简单!"   //显示内容 
  }); 
});

至此，最简单的插件搞定！10分钟不到！相信大家应该都看懂了吧！jQuery插件原来就这么简单。

您可能感兴趣的文章:

相关文章

  • Jquery元素追加和删除的实现方法

    Jquery元素追加和删除的实现方法

    下面小编就为大家带来一篇Jquery元素追加和删除的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • Javascript 链式调用实现代码(参考jquery)

    Javascript 链式调用实现代码(参考jquery)

    谓的链式调用无非是一个语法技巧而已，我就学Jquery写了一个粗浅的库。
    2010-05-05
  • Jquery写一个鼠标拖动效果实现原理与代码

    Jquery写一个鼠标拖动效果实现原理与代码

    近日项目中要做一个鼠标拖拽层的效果，于是手动使用Jquery做了一个，发出来跟大伙儿分享一下，并希望能得到高手的指点,如何有高手改进的话，在下不胜感激
    2012-12-12
  • jquery读取xml文件实现省市县三级联动的方法

    jquery读取xml文件实现省市县三级联动的方法

    这篇文章主要介绍了jquery读取xml文件实现省市县三级联动的方法,涉及jQuery操作XML文件及Ajax动态加载的技巧,需要的朋友可以参考下
    2015-05-05
  • jQuery实现简单的轮播图效果

    jQuery实现简单的轮播图效果

    这篇文章主要为大家详细介绍了jQuery实现简单的轮播图效果，实现自动播放，能手动切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 深入理解(function(){... })();

    深入理解(function(){... })();

    很多朋友不清楚(function(){... })();这几种写法各代表是什么意思，下面小编通过本教程给大家简单介绍下(function(){... })();知识，感兴趣的朋友跟着小编一起学习吧
    2016-08-08
  • textarea中的手动换行处理的jquery代码

    textarea中的手动换行处理的jquery代码

    textarea的手动换行会产生换行标志，但这个标志存在却看不到，存入数据库中后读出来显示在页面上却不会换行，如何处理呢？
    2011-02-02
  • 详解jQuery lazyload 懒加载

    详解jQuery lazyload 懒加载

    Lazy Load是一个用 JavaScript 编写的jQuery插件. 它可以延迟加载长页面中的图片. 本文对它进行实例介绍，具有很好的参考价值，下面跟着小编一起来看下吧
    2016-12-12
  • jQuery仿移动端支付宝键盘的实现代码

    jQuery仿移动端支付宝键盘的实现代码

    最近做项目时碰到一个需求，就是在移动端支付页面点击支付按钮弹出一个支付键盘，类似于支付宝的那种。项目只是单纯的手机网站，所以这个功能由前端来实现，下面小编给大家带来了jQuery仿移动端支付宝键盘的实现代码，需要的朋友参考下吧
    2018-08-08
  • jQuery技巧总结

    jQuery技巧总结

    随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等
    2011-01-01

最新评论