首页 > 代码库 > jQuery插件解析

jQuery插件解析

2024-08-20 11:03:28   222人阅读

简单的插件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="http://www.mamicode.com/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插件解析


联系
我们