打造自己的jQuery插件入门教程

本文实例讲述了打造自己的jQuery插件的方法。分享给大家供大家参考，具体如下：

写js插件并不麻烦，js插件有两类，类型插件和对象插件。首先举例：

$.post(url);

这个是类型插件，换句话说该插件在调用的时候不需要指定对象。那么：

$('p').click();

这个是对象插件，也就是说使用该插件的时候需要指定对象。

在写jQuery插件的时候，都是有固定的模板：

jQuery.plugin1 = function(text) {
  alert(text);
};//类型级别框架，类似 $.post();
$.fn.plugin2 = function(options) {
  var defaults = {
    text: 'Hello, world!'
  };
  // 合并默认值
  var opts = $.extend(defaults, options);
  // 你的代码写到这里
  alert(opts.text);
};//对象级别框架，类似 $(this).click();

以上就是plugin1是类型级别插件用的时候直接调用就可以了，plugin2是对象级别框架，使用的时候也需要对象。

在写类型级别框架的时候，jQuery.plugin1中的jQuery.不能省略，同样在写对象级别框架的时候，$.fn.也是不能省略的。

这里我要说的时候对象级别框架中 var opts = $.extend(defaults, options);这句话一定要有，这句话的意思就是合并参数。当用户没有设置参数的时候使用默认值中的参数，否则就用用户设置的参数。下面我们看一下调用方法：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="./myplugin.js"></script>
<script type="text/javascript">
$.plugin1('Hello');
$(document).ready(function(){
  $('#tmp').click(function(){
    $(this).plugin2({
      text: 'http://www.jb51.net'
    });
  });
});
</script>

首先在使用自己的jQuery插件的时候，需要包含进来，同时之前要包含jQuery，你懂的。后面就是调用方法了哦！

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • 自己动手制作基于jQuery的Web页面加载进度条插件

    静态效果的实现 网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 大体的写法如下: body{ margin:0; } #progress { position:fixed; height: 2px; background:#2085c5; transition:opacity 500ms linear } #progress.done { opacity:0 } #progress span { positio

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

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

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

  • jQuery插件easyUI实现通过JS显示Dialog的方法

    本文实例分析了jQuery插件easyUI实现通过JS显示Dialog的方法.分享给大家供大家参考.具体如下: <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title></title> <script src="jquery-easyui-1.3.4/jquery-1.8.0.min.js" type=&quo

  • 编写自己的jQuery提示框（Tip）插件

    编写自己的jQuery提示框（Tip）插件

    对jQuery相信很多同学和我一样平时都是拿来主义,没办法,要怪只能怪jQuery太火了,各种插件基本能满足平时的要求.但是这毕竟不是长久之道,古人云:"授之以鱼,不如授之以渔". 为了方便之前没有接触的同学,先来回顾一下jQuery的插件机制吧. 复制代码 代码如下: //添加check和uncheck插件 jQuery.fn.extend({   check: function() {     return this.each(function() { this.checked =

  • 分享一个自己动手写的jQuery分页插件

    工作需要一个JS分页插件,心想自己动手写一个吧,一来上网找一个不清楚代码结构的,出了问题难以解决,而且网上的插件所包含的功能太多,有些根本用不到,就没必要加载那段JS,二来想起没写过jQuery插件,就当练一下手了,好了,先看结果: http://demo.jb51.net/js/2014/EasyPage/ 简单说一下这个插件所要实现的功能 后台将查询出来的内容全部显示到页面上,这个插件要控制这些内容,使其一页一页显示.有上一页,下一页,首页,尾页的功能.在第一页时,上一页,首页要隐藏.在最后

  • 创建自己的jquery表格插件

    创建自己的jquery表格插件

    在模仿easyui的dataGrid表格插件的同时,自己去封装了一个.实现了基本的json数据的动态加载,自动分页,全选全不选,鼠标悬浮变色,隔行变色等 由于涉及到ajax访问,所以必须部署到iis上才能看出效果,先给大家看一下效果图: css样式 /* CSS Document */ body { font: 14px/1.43 "Helvetica Neue", Tahoma, "Microsoft YaHei", Arial; color: #253443;

  • jQuery树形插件jquery.simpleTree.js用法分析

    jQuery树形插件jquery.simpleTree.js用法分析

    本文实例讲述了jQuery树形插件jquery.simpleTree.js用法.分享给大家供大家参考,具体如下: 最近写项目的cms系统,客户要求后台管理可以通过一棵树来展现整个帮助文档的结构,并通过拖拽操作来实现文章和栏目的位置排列变化,我在网上找来半天,决定使用jQuery.simpleTree.js来实现. 这个树控件支持拖动节点到新的位置,通过其提供aftermove函数的覆写,我们可以在其拖动完成后在aftermove函数中调用ajax来后台更改数据库来保存拖动的结果 同时这个树的节点

  • jQuery flip插件实现的翻牌效果示例【附demo源码下载】

    jQuery flip插件实现的翻牌效果示例【附demo源码下载】

    本文实例讲述了jQuery flip插件实现的翻牌效果.分享给大家供大家参考,具体如下: 最近做了个类似于塔罗牌翻牌的效果,分享给大家. 运行效果图如下: 具体代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>flip</title> <style> *{margin:0;padd

  • 自己使用jquery写的一个无缝滚动的插件

    自己使用jquery写的一个无缝滚动的插件

    效果图: html代码: 复制代码 代码如下: <h1>无缝滚动,向右滚动</h1> <ul id="guoul1"> <li><img src="img/f1.jpg" alt="f1"/></li> <li><img src="img/f2.jpg" alt="f2"/></li> <li&

  • jquery validate表单验证插件

    对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百

  • 自己动手开发jQuery插件教程

    自己动手开发jQuery插件教程

    因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就头痛的人来说,一天时间8小时,保守估计有5个小时在弄css(我css文盲级别,形容得还不够贴切,如果说文盲不会写字,只会说话,那我是连话都不会说的级别.),好了,废话少说,切入正题. 首先要了解jQuery插件开发分两种,1.类级别的插件开发.2.对象级别插件开发. 什么? 你居然问什么是类级别和什么是对象级别? 类级别你可以理解为拓展jquery类,

随机推荐