打造自己的jQuery插件入门教程_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程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
插件
jquery入门教程、jquery入门视频教程、jquery ajax入门教程、jquery插件开发教程、jquery插件使用教程,以便于您获取更多的相关知识。

时间: 2024-09-26 06:49:43

打造自己的jQuery插件入门教程_jquery的相关文章

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

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

jQuery选择器基础入门教程_jquery

本文实例讲述了jQuery选择器用法.分享给大家供大家参考,具体如下: 什么是jQuery选择器 使用JavaScript操作页面上得DOM元素时,首先要获取DOM元素.但是原始的javascript只元件根据ID或者TagName获取DOM对象. 在jQuery中则完全不同,jQuery提供了异常强大的选择器用以帮助我们获取页面上的对象,并且将对象以jquery对象的形式返回. 首先来看看什么是选择器. //根据id获取jQuery对象 var jQueryObject=$("#testDiv

jQuery Easyui快速入门教程_jquery

1.什么是JQuery EasyUI jQuery EasyUI是一组基于JQuery的UI插件集合,而JQueryEasyUI的目标就是帮助开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的JavaScript,也不需要对css样式有深入的了解,开发者需要了解的只是一些简单的html标签. 2.学习jQuery EasyUI的条件 因为JQueryEasyUI是基于jQuery的UI库,所以,必须需要JQuery课程的基础. 3.JQuery EasyUI的特点 基于JQu

分享十五个最佳jQuery 幻灯插件和教程_jquery

幻灯(通常也被称为"内容滑动".内容切换效果.焦点图等)是在网站或博客的较小区域展示大量内容的很好的方法.动态的自动滑动内容在很多网站上都是很流行的.你是否也对在自己的网站上实现类似的效果感兴趣?那就看一下本文列出的jQuery插件吧!1. jFlow 官方网站 | 演示 一个漂亮而整洁的图片幻灯,被nettut推荐,如果你想自己做一个图片幻灯效果,就去看看吧. 2. 使用jQuery UI实现推荐内容的幻灯展示 官方网站 这是一个教你如何"使用一种很有冲击力的方法展示你的网

整理8个很棒的 jQuery 倒计时插件和教程_jquery

jQuery 倒计时插件和教程. jQuery Countdown spriteTimer php ajax/jquery countdown Add a Countdown Timer on Your Website jQuery Flipclock Fancy Countdown Cool jQuery Countdown Joomla jQuery Countdown

30个精美的jQuery幻灯片效果插件和教程_jquery

这是一种在有限的网页空间内展示更多内容的良好方式,而且能吸引用户注意力.如果你想知道这是如何实现的,那么本文收集的30个幻灯片插件和教程将帮助您实现这种效果. JCOVERFLIP Live Demo CREATE A CUSTOM IMAGE GALLERY WITH JCAROUSEL Live Demo COIN SLIDER Live Demo LOOPEDSLIDER Live Demo NIVO SLIDER Live Demo COLORFUL SLIDERS WITH JQUER

再分享70+免费的jquery 图片滑块效果插件和教程_jquery

jQuery Slider插件一般是由滑块与滑动按钮组成,也有一些带暂停和继续按钮的.一般使用的Slider滑块插件,按照展示方式,可以分为两种:一种是为水平滑动:另一种是垂直滑动.当然具体的特效就有很多种了,不一一解释了.大部分的都是一些类似幻灯片的效果,也有带视差效果的.实现方式也大都是基于jQuery+html5+CSS3,大部分插件的兼容性都不错. 之前其实已经分享过28款免费实用的 JQuery 图片和内容滑块插件,但是今天发现之前的草稿里面也存了一些不错的jQuery插件,而且数量还

分享20多个很棒的jQuery 文件上传插件或教程_jquery

1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度.图像自动缩略和上传分块.可同时上传多个文件. 2. The KillersAjax Upload 该插件使用 XHR 用于上传多个文件,支持上传进度显示,但不支持 IE 3. SWFUpload jQuery Plugin 4. AjaxFileUpload 5. Uploadify Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 支持单文件或多文件上

27个新鲜惊奇的jQuery插件与教程

51CTO推荐专题:jQuery给力插件大阅兵 教程 1. How to add preloader with loading image in a gallery using jQuery 在图像画廊载入过程中使用 jQuery 预加载技术.演示 教程 2. Simple Lava Lamp Menu Tutorial With jQuery 创建一个独特的熔岩灯动画效果的 jQuery 导航菜单.演示 教程 3. How To Create a 3D Tag Cloud in jQuery