jQuery插件解析

简单的插件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>

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

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

秒客网

jQuery插件解析

相关文章