jquery插件扩展的学习

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

举个例子

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

<p class='p1'>好好学习天天向上</p> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script> (function($){ $.fn.extend({ bigfont:function(){ return this.css('fontSize',"30px") } }) })(jQuery) </script><script> $('.p1').bigfont(); </script> 运行

jquery的插件机制

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

举个例子

<p>2+1=?<p> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script> $.extend({ addone:function(a){ return a+1 } }) var b=$.addone(2); alert(b); //3 </script> 运行

关于extent的重载的深入学习

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

//举个例子

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script> var obj={"name":"lily","age":"30","fruit":"banana","location":{"city":"China",}}; var obj1={"name":"limei","age":"22","location":{"bbb":"the.USA",}}; var b=$.extend(obj,obj1); console.log(b); //{"name":"limei","age":"22","fruit":"banana","location":{"bbb":"the.USA",}} console.log(obj); //{"name":"limei","age":"22","fruit":"banana","location":{"bbb":"the.USA",}} console.log(obj1); //{"name":"limei","age":"22","location":{"bbb":"the.USA",}} </script> 运行

//举个例子

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script> var obj={"name":"lily","age":"30","fruit":"banana","location":{"city":"China",}}; var obj1={"name":"limei","age":"22","location":{"bbb":"the.USA",}}; var c=$.extend(true,obj,obj1); console.log(c); //{"name":"limei","age":"22","fruit":"banana","location":{"city":"China","bbb":"the.USA",}} console.log(obj); //{"name":"limei","age":"22","fruit":"banana","location":{"city":"China","bbb":"the.USA",}} console.log(obj1); //{"name":"limei","age":"22","location":{"bbb":"the.USA",}} </script> 运行

//举个例子

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script> var obj={"name":"lily","age":"30","fruit":"banana","location":{"city":"China",}}; var obj1={"name":"limei","age":"22","location":{"bbb":"the.USA",}}; var d={}; var f= $.extend(d,obj,obj1) console.log(f); //{"name":"limei","age":"22","fruit":"banana","location":{"bbb":"the.USA",}} console.log(d); //{"name":"limei","age":"22","fruit":"banana","location":{"bbb":"the.USA",}} console.log(obj); //{"name":"lily","age":"30","fruit":"banana","location":{"city":"China",}} console.log(obj1); //{"name":"limei","age":"22","location":{"bbb":"the.USA",}} </script> 运行

插件的另外的写法

//(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);