jquery插件制作简单示例说明

一、先从一个简单的实例，不需要带参数的一个方法开始


代码如下:

//创建一个匿名函数
(function($){
//给jQuery附加一个新的方法（详细见备注1）
$.fn.extend({
//插件的名字
MyFirstName: function() {
//迭代当前匹配元素集合
return this.each(function() {
var obj = $(this);
//自己的代码
});
}
});
)(jQuery);

备注1：理解$.fn.extend和$.extend的区别，大概的说前者是将MyFirstName这个方法合并到jquery的实例对象中，例如$(“#txtmy”).add(3,4)这样调用方法，后者是将MyFirstName这个方法合并到jquery的全局对象中，例如$.add(3,4); 这样调用方法
详细区别见（http://www.jb51.net/article/29590.htm）

二、有参数的


代码如下:

//创建一个匿名函数
(function($){
//给jQuery附加一个新的方法（详细见备注1）
$.fn.extend({
//插件的名字
MyFirstName: function() {
//定义默认参数
Var parms={
Parms1:1,
Parms2:2
}
//合并用户传的参数和默认参数，返回给options（详细见备注2）
var options = $.extend(defaults, options);
//迭代当前匹配元素集合
return this.each(function() {
//把合并后的参数赋值给o
var o= options;
//迭代当前匹配元素
var obj = $(this);
//自己的代码
});
}
});
)(jQuery);

备注2：var options = $.extend(defaults, options); 意思是把defaults和options合并，如果后者有和前者名称一样的元素，后者覆盖前者，然后合并给defaults，然后defaults赋值给options，如果是var options = $.extend(｛｝,defaults, options);那么是把前者和后者合并给｛｝这个参数，然后赋值给options，defaluts的结构和值都没有变化
详细区别见（http://www.jb51.net/article/29591.htm）

赞 (0)

相关推荐

  • idTabs基于JQuery的根据URL参数选择Tab插件

    idTabs基于JQuery的根据URL参数选择Tab插件

    为了做这件事,除了jquery库和idTabs插件,我们还需要下载一个用来搞URL的插件:jquery.url.js,传送门:https://github.com/allmarkedup/jQuery-URL-Parser (上述链接可能有错,如不能使用,可以到这里下载) 我们提供idtabs打包下载 http://www.jb51.net/jiaoben/43086.htmlTab菜单的HTML代码这样写,每个tab的div自己搞定,不发出来浪费页面了: 复制代码 代码如下: <div cla

  • jquery插件制作 提示框插件实现代码

    我们首先来介绍自定义选择器的开发,他的代码结构如下: 复制代码 代码如下: (function ($) { $.expr[':'].customselector = function (object,index,properties,list) { //code }; })(jQuery); 调用时候的写法: $(a:customselector) 现在我们先解释下函数中所使用到的各个参数. object:当前dom元素的引用,而不是jquery对象.需要强调的一点,dom元素和jquery对象

  • jQuery插件制作之参数用法实例分析

    本文实例讲述了jQuery插件制作之参数用法.分享给大家供大家参考.具体分析如下: 1.无参数实现文字阴影效果 jQuery.fn.shadow =function(){ return this.each(function(){ var $originalElement = jQuery(this); for(var i = 0;i < 5;i++){ $originalElement.clone() .css({ position :"absolute", left :$ori

  • JQuery扩展插件Validate 3通过参数设置错误信息

    JQuery扩展插件Validate 3通过参数设置错误信息

    最终显示在页面上的错误分为两种:第一种是默认错误信息,该信息已经被定义在插件中了,可以手动修改. 第二种是通过参数指定的错误信息,如果没有指定则会使用默认的错误信息.将上个示例的js修改如下: 复制代码 代码如下: <script type="text/javascript"> $(function() { $("#signupForm").validate( //在上例中新增的部分 { rules: { txtPassword1: "requ

  • Jquery图形报表插件 jqplot简介及参数详解

    功能概述: 有多种图表样式可供选择 可以自定义日期轴线 可设置旋转轴文字 自动计算趋势线 工具条提示和高亮数据点 默认最优设置,非常易于使用 以上功能在jqPlot主页中的示例页面有 很多直观的展示.这里是它详细使用文档. 缺点:柱状图无法显示具体数据值.饼状图无法显示具体百分比. 下边是搜集的详细参数配置: 复制代码 代码如下: options = { seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228"

  • jquery tab插件制作实现代码

    jquery插件的基本格式: 复制代码 代码如下: (function($){ $.fn.tab = function(options){//$.fn后面的tab是这个插件的函数名称.可以更具自己喜好进行修改 var defaults = { //相关属性设置 } var options = $.extend(defaults, options); this.each(function(){ //实现的功能设置 }); }; })(jQuery); 我这里是做一个tab的插件,我来完善以上代码

  • JQuery插件jcarousellite的参数中文说明

    参数说明: btnPrev     string 上一个按钮的class名, 比如  btnPrev: ".prev" btnNext     string 下一个按钮的class名, 比如  btnPrev: ".prev" btnGo       array  自定义滚动位置,类似幻灯片效果置,有选项卡,按照数组顺序,依次为按钮1按钮2按钮N,如以下,class名为1的按钮是第一个按钮:[".1", ".2"] mouse

  • jQuery获取地址栏参数插件(模仿C#)

    复制代码 代码如下: $.request = (function () { var apiMap = {}; function request(queryStr) { var api = {}; if (apiMap[queryStr]) { return apiMap[queryStr]; } api.queryString = (function () { var urlParams = {}; var e, d = function (s) { return decodeURICompon

  • jQuery插件制作之全局函数用法实例

    本文实例讲述了jQuery插件制作之全局函数用法.分享给大家供大家参考.具体分析如下: 1.添加新的全局函数 所谓的全局函数,实际上就是jQuery对象的方法,但从实践的角度上看,他们是位于jQuery命名空间内部的函数 (1)添加一个函数,只需要将新函数指定为jQuery对象的一个属性. jQuery.five =function(){ alert("直接继承方式不一样"); } 调用: 复制代码 代码如下: $.five(); (2)添加多个函数 jQuery.five =func

  • jQuery 获取URL参数的插件

    例如 当前你的URL是: http://www.jb51.net/index.php?test=1&kk=2 如果想获取test,则可以引入插件后, 用如下方法获取: var test = $.query.get('test'); 如果参数有多个相同的名称 ,则可以这样: var arr = $.query.get('testy'); 输出: [ 值1 , 值2, 值3...] 如果要获取多个相同名称中的某一个,可以这样: var arrayElement = $.query.get('test

随机推荐