jquery插件之jquery.extend和jquery.fn.extend的区别

jquery.extend

jquery.extend(),是拓展jquery这个类,即可以看作是jquery这个类本身的静态方法,例如:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>简单插件学习一</title>
    <script src="../../Script/jquery.js"></script>
</head>
<body>
    <input type="text" id="txtName" />
    <script type="text/javascript">
       ;(function ($) {
            $.extend({
                test: function () {
                    alert("这是我测试的方775法3哈");
                }
            });
        })(jQuery);

       $.test();
      // $("#txtName").test();//不可以调用
    </script>
</body>
</html>

即通过$.extend,扩充了Jquery本身,例如jquery上增加了test方法,只能其本身可以调用,跟具体的实例化对象没有一点关系,所以不可以用对象(具体的Dom节点)去调用。

jquery.fn.extend

从字面理解这个方法,就是拓展了jquery.fn的方法,而jquery.fn是啥玩意了 ,源码如下:

jQuery.fn = jQuery.prototype = {
    // The current version of jQuery being used
    jquery: version,

    constructor: jQuery,

    // Start with an empty selector
    selector: "",

    // The default length of a jQuery object is 0
    length: 0,

    toArray: function() {
        return slice.call( this );
    },
     //.......
}

jquery.fn=jquery.prototype,就是原型,jquery.fn.extend扩展的就是jquery对象(原型的)方法,对象是啥?就是类的实例化 ,例如:$("#txtName"),就是jquery的对象

也就是说,jquery.fn.extend拓展方法,要用在jquery对象上才行,一般插件的制作是用此方法进行扩展的。例如:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>简单插件学习一</title>
    <script src="../../Script/jquery.js"></script>
</head>
<body>
    <input type="text" id="txtName" />
    <script type="text/javascript">
       ;(function ($) {
            $.extend({
                test: function () {
                    alert("这是我测试的方775法3哈");
                }
            });

            $.fn.test2 = function () {
                alert("这是我的方法3的");
                $.fn.test2.sn.add();
            }

            $.fn.test2.sn = {
                defaults: {
                    dir: "H",
                    speed: 500
                },

                add: function () {
                    alert("滚动方式:" + this.defaults.dir);
                }
            }

        })(jQuery);

       $.test();
      $("#txtName").test2();
    </script>
</body>
</html>

jquery.extend()方法主要用于扩展全局函数,例如$.ajax这种,例如上面代码中的test方法,只可以通过jquery本身去调用即:$.test(),  而不可以通过 jquery 对象去调用。

jquery.fn.extend(),大部分插件都是用此方法的 ,例如:$("#txtName").test2();

除此之外,我们写jquery插件,还经常遇到一些参数传递的问题,这些一般都是通过jquery.extend方法传递的 ,下面我们就一起去了解一下,例如:

$.extend(dest,src1,src2,src3....)

它的含义是将src1,src2,src3等合并到dest中,并返回到dest,但是 合并之后改变dest的结果,所以一般推荐以下方式:

var setting=$.extend({},src1,src2,src3);//也就是用{}作为dest的参数

例如:

 var setting = $.extend({}, { name: "alice", age: 28 }, { name: "stone", sex: "boy" });
 console.log(setting);

后面的参数如果和前面的参数存在相同的名称,则会覆盖前面的参数值,合并后的 结果为:

例如插件中一般用到的此方法:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>简单插件学习一</title>
    <script src="../../Script/jquery.js"></script>
</head>
<body>
    <input type="text" id="txtName" />
    <script type="text/javascript">
       ;(function ($) {
            $.fn.test2 = function (settings) {
                settings = $.extend({}, $.fn.test2.sn.defaults, settings);
                console.log(settings);
                $.fn.test2.sn.add();
            }

            $.fn.test2.sn = {
                defaults: {
                    dir: "H",
                    speed: 500
                },

                add: function () {
                    alert("滚动方式:" + this.defaults.dir);
                }
            }

        })(jQuery);

       $("#txtName").test2({name:"alicetest",dir:"V"});
    </script>
</body>
</html>

设置默认值,如果插件的传入的参数中存在此参数,则覆盖默认值,否则则使用默认值,例如上面的例子中输出结果为:

jquery的extend的重载原型

extend(boolean,dest,src1,src2,src3...);

其中第一个参数boolean代表是否进行深度拷贝,其余参数和之前一样,例如:

  var result = $.extend(true, {}, { name: "alice", location: { city: "shanghai", country: "china" } }, { age: 28, name: "stone", location: { city: "beijing", state: "y" } });
        console.log(result);

返回的结果为:

也就是 它会将src中的嵌套子对象也进行合并,即:location:{city:"beijing",country:"china",state:"y"}

如果将第一个参数传为false,效果又如何了,例如:

var result2 = $.extend(false, {}, { name: "alice",last:"222", location: { city: "shanghai", country: "china" } }, { age: 28, name: "stone", location: { city: "beijing", state: "y" } });
        console.log(result2);

结果如下:

只会进行合并,不会再对嵌套的子对象进行合并,例如;location:{city:"beijing",state:"y"}

常用的扩展实例,例如:

$.extend($.net,{
   hello:function(){
      alert("这是全局对象拓展一个scroll命名空间");
   }
});

这是将hello方法拓展到之前的jquery的net命名空间去,怎么调用??

例如,拓展动画中的$.easing:

$.extend($.easing,{
        easeInSine: function (x, t, b, c, d) {
            return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
        }
    });

jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数,以上代码是拓展了jquery.easing 中的easeInSine动画,

如果不拓展jquery.easing,则需要引入整个jquery.easing.1.3.js,因此为了减少代码的冗余,我们可以扩展$.easing中的方法;

具体调用如下:

  $("#imgSrc").animate({
            width: "90%",
            height: "100%",
            fontSize: "10em",
            borderWidth: 10
        }, "slow", "easeInSine", function () {
            alert("移动了吗 ,哈哈");
        });

以上就是jquery插件的一些用法,若有不足之处,请多多指教~~!

时间: 2024-08-24 04:25:45

jquery插件之jquery.extend和jquery.fn.extend的区别的相关文章

jQuery插件开发的两种方法及$.fn.extend的详解

jQuery extend扩展开发: 1 类级别  类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.extend(object); $.extend({ add:function(a,b){return a+b;} , minus:function(a,b){return a-b;} }); 页面中调用: var i = $.add(3,2); var j = $.minus(3,2); 2

不定义JQuery插件,不要说会JQuery

一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直到有一次公司里的技术交流,我才改变了自己对自己的看法. 二:普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可以理解为JQuery实例添加一个方法. 基本的定义

[转]不定义JQuery插件,不要说会JQuery

一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直到有一次公司里的技术交流,我才改变了自己对自己的看法. 二:普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) 可以理解为JQuery实例添加一个方法. 基本的定义

[开源] jQuery 插件,利用‘localStorage’ 对 jQuery AJAX进行缓存,优化页面ajax请求

jquery-ajax-cache 源码地址:https://github.com/WQTeam/jquery-ajax-cache jQuery插件——利用‘localStorage’ 和 ‘sessionStorage’ 对 jQuery AJAX 请求进行缓存. 首先说明下在什么场景下需要用到缓存ajax请求到localstorage中.都知道浏览器本身对http请求就是有缓存策略的,但是这种缓存方式两个缺陷:1.只能缓存get请求 2.同时缓存的设置都在后端响应的报文头部指定.(PS:现

$.extend(obj)和$.fn.extend(obj)的区别

$.extend(obj): 扩展jquery本身,添加方法: $.extend({ add:function(a,b){ return a+b; } }) $.add(5,8) //return 13 这里是直接调用,$.add(5,8);不加任何对象. $.fn.extend(obj): 对prototype进行扩展,为jquery类添加成员函数, jquery类的实例可以使用这个成员函数. $.fn.extend({ clickwhile:function(){ $(this).click

jQuery插件之验证控件jquery.validate.js

今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jörn Zaeff

五.jQuery源码解析之jQuery.extend(),jQuery.fn.extend()

给jQuery做过扩展或者制作过jQuery插件的人这两个方法东西可能不陌生.jQuery.extend([deep],target,object1,,object2...[objectN]) jQuery.fn.extend([deep],target,object1,,object2...[objectN])这两个属性都是用于合并两个或多个对象的属性到target对象.deep是布尔值,表示是否进行深度合并,默认是false,不执行深度合并.通过这种方式可以在jQuery或jQuery.fn

jQuery中 $.extend 和 $.fn.extend 解释

$.extend() (1)第一种:拓展jQuery的全局(静态)函数的 方式:--->一个参数 例如: $.extend({ add : function(){ alert("1"); }, miu : function(){ alert("2"); } }) //此方式在jQuery对象本身:可以通过 jQuery.add(), jQuery.miu() 直接调用: (2)第二种:对象合并,即可以实现某个函数的重载:--->多个参数 例如: var

第七章(插件的使用和写法)(7.6 编写 jQuery 插件)

7.6.1 插件的种类 编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率. jQuery 的插件主要分为3种类型. 1 封装对象方法的插件 这种插件是将对象方法封装起来,用于对通过选择器获取的 jQuery 对象进行操作,是最常见的一种插件. 据不完全统计,95%以上的 jQuery 插件都是封装对象方法的插件,此类插件可以发挥出 jQuery 选择器的强大优势.有相当一部分的 jQuery 的方法,都是在 jQuery 脚本库内部通过这种

Jquery插件使用方法

在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站.利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑.本文的目的就是可以快速了解jQuery插件