jquery插件扩展的学习

jquery插件的学习可以点击这里

举个例子

//首先先来一个插件
(function($){
$.fn.extent({
bigfont:function(){
return this.css('fontSize':"30px")
}
})
})(jQuery)

<p class='p1'>好好学习天天向上</p>

运行

jquery的插件机制

jquery.extent方法的重载，如$.each,$.ajax的功能

举个例子

<p>2+1=?<p>

运行

关于extent的重载的深入学习

$.extent([deep],obj1,obj2,obj3)
//deep: 可选。如果设为true，则递归合并。
// target: 待修改对象。
// object1: 待合并到第一个对象的对象。
// objectN: 可选。待合并到第一个对象的对象。

//举个例子

运行

//举个例子

运行

//举个例子

运行

插件的另外的写法

//(1)
!function($){
//do something
}(jQuery);
(function($){
//do something
})(jQuery)

插件实例

//闭包限定命名空间
(function ($) {
    $.fn.extend({
        "highLight": function (options) {
            var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
            this.each(function () {  //这里的this 就是 jQuery对象
                //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
                var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom
                //根据参数来设置 dom的样式
                $this.css({
                    backgroundColor: opts.background,
                    color: opts.foreground
                });
            });
        }
    });
    //默认参数
    var defaluts = {
        foreground: 'red',
        background: 'yellow'
    };
})(window.jQuery);

//闭包限定命名空间
(function ($) {
    $.fn.extend({
        "highLight": function (options) {
            //检测用户传进来的参数是否合法
            if (!isValid(options))
                return this;
            var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
            return this.each(function () {  //这里的this 就是 jQuery对象。这里return 为了支持链式调用
                //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
                var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom
                //根据参数来设置 dom的样式
                $this.css({
                    backgroundColor: opts.background,
                    color: opts.foreground
                });
                //格式化高亮文本
                var markup = $this.html();
                markup = $.fn.highLight.format(markup);
                $this.html(markup);
            });
        }
    });
    //默认参数
    var defaluts = {
        foreground: 'red',
        background: 'yellow'
    };
    //公共的格式化 方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。
    $.fn.highLight.format = function (str) {
        return "" + str + "";
    }
    //私有方法，检测参数是否合法
    function isValid(options) {
        return !options || (options && typeof options === "object") ? true : false;
    }
})(window.jQuery);