简单的插件demo

 //sample:扩展jquery对象的方法，bold()用于加粗字体。

        (function ($) {

            $.fn.extend({

                "bold": function () {

                    ///<summary>

                    /// 加粗字体

                    ///</summary>

                    return this.css({ fontWeight: "bold" });

                }

            });

        })(jQuery);
调用
$(function(){
  $.("p").bold();
});

为了方便用户创建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

jQuery.extend()

一、类级别（$.extend）

 

    类级别你可以理解为拓展jquery类，最明显的例子是$.ajax(...),相当于静态方法。

    开发扩展其方法时使用$.extend方法，即jQuery.extend(object);

jQuery.extend(object) ,一个参数的用于扩展jQuery类本身，也就是用来在jQuery类/命名空间上增加新函数，或者叫静态方法，例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的，有点像 “类名.方法名” 静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子：

//扩展jQuery对象本身

        jQuery.extend({

            "minValue": function (a, b) {

                ///<summary>

                /// 比较两个值，返回最小值

                ///</summary>

                return a < b ? a : b;

            },

            "maxValue": function (a, b) {

                ///<summary>

                /// 比较两个值，返回最大值

                ///</summary>

                return a > b ? a : b;

            }

        });

        //调用

        var i = 100; j = 101;

        var min_v = $.minValue(i, j); // min_v 等于 100

        var max_v = $.maxValue(i, j); // max_v 等于 101

二、 对象级别

对象级别则可以理解为基于对象的拓展，如$("#table").changeColor(...); 这里这个changeColor呢，就是基于对象的拓展了。

开发扩展其方法时使用$.fn.extend方法，即jQuery.fn.extend(object);

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.box{
width:100px;
height:100px;
background:blue;
}
</style>
<script src="jquery-1.7.2.js"></script>
<script>

$(function(){
//定义一闭包个区域 防止插件污染
(function($){
//使用jq插件机制的扩展方法$.fn.extend()编写插件
$.fn.extend({
"bold":function(){
return this.css('fontWeight','bold');
},
"bkred":function(){
return this.css('background','red');
},
"size_a":function(options){
var options=$.extend(defanlts,options||{});//默认参数和传参进行合并
this.css({
'width':options.width,
'height':options.height
});
return this;//为了可以链式调用，需要把对象返回，否则报错
}
});
//设置默认值-默认参数
var defanlts = {
'width':'100px',
'height':'100px'
};
})($);

$(".p").bold().css('fontSize','50px').css('margin',0);
$(".p").bkred().on('click',function(){
alert('我是p元素')
});
$("#box").size_a({'width':300,'height':200}).on('click',function(){
$(this).css('background','red');
});
});
</script>
</head>

<body>
<div class="box" id="box">123</div>
<p class="p">我</p>
<p>我</p>
</body>
</html>

如有不解请参考http://jingyan.baidu.com/album/e75aca85550216142edac63b.html?picindex=1

http://www.cnblogs.com/joey0210/p/3408349.html#

jQuery插件解析的更多相关文章

  1. 自己动手开发jQuery插件全面解析 jquery插件开发方法

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  2. 教你开发jQuery插件（转）

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

  3. 什么？你还不会写JQuery 插件

    前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论 ...

  4. 写JQuery 插件 什么？你还不会写JQuery 插件

    http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui ...

  5. jQuery插件编写规范

    第一种方法: 在很多基于jQuery或基于Zepto的插件中,在立即函数执行前面会加上";"这个符号. 这是为了防止前面的其他插件没有正常关闭. 在立即执行函数执行时,会一般会传入 ...

  6. 第7章 jQuery插件的使用和写法

    第7章 jQuery插件的使用和写法 插件又称扩展,是一种遵循一定规范的应用程序接口写出来的程序. 插件的编写思想基于面向对象. 获取最新的插件可以查看jquery官网:http://plugins. ...

  7. jQuery 插件autocomplete

    jQuery 插件autocomplete 自动加载 参考: http://www.cnblogs.com/Peter-Zhang/archive/2011/10/22/2221147.html ht ...

  8. 【jQuery基础学习】08 编写自定义jQuery插件

    目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方 ...

  9. jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

随机推荐

  1. Repeater的Item项绑定DropDownList

    前台页面: <asp:Repeater ID="rptJgtList" runat="server" OnItemDataBound="rptJ ...

  2. Mac下输入法总是默认中文，怎么设置成英文的？

    最近一同事在DreamWeaver里,写CSS样式的时候,默认总是中文,切到别的窗口,再切回来,就变成中文了,总要按一下切换键,时间长了特别烦人. 在网上找了一些方法,最后找到一个有效的. 总结一下就 ...

  3. Com

  4. CF 484E - Sign on Fence

    E. Sign on Fence time limit per test 4 seconds memory limit per test 256 megabytes input standard in ...

  5. aspose words 介绍

    Aspose.Words是一个商业.NET类库,可以使得应用程序处理大量的文件任务.Aspose.Words支持Doc,Docx,RTF,HTML,OpenDocument,PDF,XPS,EPUB和 ...

  6. 七牛整合PHP上传文件

    七牛支持抓取远程图片 API,用 access_key + secret_key + url 生成 access_token, 把 access_token 加在 header 里,然后向 post ...

  7. Qt:QObject translate

    qobject类是qt所有对象的基类. QObject是Qt的核心对象模型.中心在这个模型是一个非常强大的无缝沟通对象称为信号与槽机制.你可以连接一个信号槽连接()和破坏的连接与断开连接().为了避免 ...

  8. CentOS 6.5 安装HDFS集群(Hadoop-2.7.3)

    安装真实集群,而不是但节点或者伪分布式,以3个节点为例,node1为NameNode和SecondNameNode,node2和node3为DataNode. 1.3台机器的配置必须要一模一样,只需要 ...

  9. 非root用户 gcc安装

    亲测 可以安装 过程并不复杂 但可能需要一些时间 认真一点 按照步骤 一定可以成功哒 其他版本可以将ftp.gnu.org/gnu/gcc/敲入浏览器,找到自己需要的文件:[安装过4.9.0:成功:用 ...

  10. 08-FPGA状态机设计实例——小梅哥FPGA设计思想与验证方法视频教程配套文档

    芯航线--普利斯队长精心奉献   实验目的:1.学习状态机的相关概念 2.理解一段式.两段式以及三段式状态机的区别以及优缺点 实验平台:芯航线FPGA核心板 实验原理: 状态机全称是有限状态机(fin ...