简单的插件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. jsonp 使用总结

    首先:jsonp是json用来跨域的一个东西. 原理是通过script标签的跨域特性来绕过同源策略. 发送端: $.ajax({ type : "post", url : &quo ...

  2. 性能调优利器之strace

    最近需要对一个自己开发的socket server的性能进行分析,刚开始还想了好长时间怎么来分析.后来才意识到其实使用strace就足够了. 观察到的现象是server单进程CPU使用率97,但磁盘i ...

  3. hdu 3839 Ancient Messages （dfs ）

    题目大意:给出一幅画,找出里面的象形文字. 要你翻译这幅画,把象形文字按字典序输出. 思路:象形文字有一些特点,分别有0个圈.1个圈.2个圈...5个圈.然后dfs或者bfs,就像油井问题一样,找出在 ...

  4. Microsoft.Crm.Setup.SrsDataConnector.RegisterServerAction 操作失败

     System.Exception: Microsoft.Crm.Setup.SrsDataConnector.RegisterServerAction 操作失败. ---> System.Ty ...

  5. 初学Objective-C语言需要了解的星星点点

             其实大多数开发初学者都有一些相同的特点,可以说是一种“职业病”.Most有其他平台开发基础的初学者,看到Xcode就想摩拳擦掌:看到Interface Builder就想跃跃欲试:而 ...

  6. spring boot servlet 注入

    spring boot 注入servlet的方法是借助ServletRegistrationBean这个类 例子如下: 先建一个servlet import java.io.IOException; ...

  7. Java中ProcessBuilder应用实例

    系列说明 浅析Java.lang.Runtime类 浅析Java.lang.Process类 浅析Java.lang.ProcessBuilder类 可以使用java中的ProcessBuilder执 ...

  8. Bootstrap相关总结

    1.工具提示 Tooltips js调用显示 $('#example').tooltip( { title:'这个是一个提示', }); $('#example').tooltip('show');

  9. #听云博客大赛#如何在自己的App嵌入听云产品监控App性能

    近日浏览园子文章的时候,发现博客园与听云正在举办“听云原创博文”大赛.最近手上正好正在开发一款iOS的应用,所以就用听云App来监测一下我的App各个指标,为我的应用保驾护航.下面,我就从头到尾演示下 ...

  10. Storm入门1-基本概念

    [本篇文章主要是介绍Storm的特点.核心概念.以及Storm的生态现状:从总体上对storm有个基本的认识] Storm是Apache下的一个免费的.开源的.分布式流式计算框架,官方网址:https ...