简单的插件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. linux下JsonServer启动

    1:进入到JsonServer run.sh目录下; 2:执行"export PATH=.:$PATH"; 3:执行"run.sh start"; 这样便把Js ...

  2. ThinkPHP 下如何隐藏index.php

    最近一直在做孕妈团的项目,因为部署到实际项目中出现了链接打不开的情况,要默认添加index.php才能正常访问. 当时忘了是Tinkphp的URL重写模式:以后遇到相同问题,首先要想到URL重写模式. ...

  3. android、IOS和手机基础知识

    一.手机基础知识 1.固件.刷固件.固件版本 固件是指固化的软件,英文为firmware,它是把某个系统程序写入到特定的硬件系统中的flashROM.手机固件相当于手机的系统,刷新固件就相当于刷系统. ...

  4. HttpGet 请求（带参数）

    package com.example.util; import java.io.BufferedReader;import java.io.IOException;import java.io.In ...

  5. Dedecms 图片加上Alt或Title等属性写法

    代码如下:$this->Fields['typename'] = $this->TypeLink->TypeInfos['typename']; SetSysEnv($this-&g ...

  6. Windows下的Objective-C集成开发环境（IDE）(转)

    Objective-C是苹果软件的编程语言,想要上机学习.调试,有一个集成开发环境(IDE)方便很多.有三类方法搭建Objective-C的集成开发环境: 1)   使用苹果的平台,集成开发环境使用X ...

  7. android eclipse 导入idea项目

    将以下代码复制到.project中 <?xml version="1.0" encoding="UTF-8"?> <projectDescri ...

  8. 给定时器settimeout、setInterval调用传递参数

    无论是window.setTimeout还是window.setInterval,在使用函数名作为调用句柄时都不能带参数,而在 许多场合必须要带参数,这就需要想方法解决.例如对于函数hello(_na ...

  9. 阿里云CentOS6.5搭建服务器JDK+tomcat+MySQL

    阿里云ECS,计划安装jdk:MySQL:tomcat: 一.yum Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的S ...

  10. 客户端实现蓝牙接收(C#)

    知识总结发布  (转载) 网上有关蓝牙接收的资料很多,使用起来也很简单,但是我觉得还是有必要把这些知识总结下来,蓝牙开发需要用到一个第三方的库InTheHand.Net.Personal.dll,感兴 ...