zoukankan      html  css  js  c++  java
  • jQuery.fn.extend()和jQuery.extend()

    jQuery.fn.extend( object )

    一个对象的内容合并到jQuery的原型,以提供新的jQuery实例方法。

    jQuery.fn.extend()方法继承了jQuery原型($.fn)对象,以提供jQuery原型新的方法,可以链式调用jQuery()函数。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery.fn.extend demo</title>
      <style>
    label { display: block; margin: .5em; }
         </style>
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
     
    <label><input type="checkbox" name="foo"> Foo</label>
    <label><input type="checkbox" name="bar"> Bar</label>
     
    <script>
    jQuery.fn.extend({
      check: function() {
        return this.each(function() { this.checked = true; });
      },
      uncheck: function() {
        return this.each(function() { this.checked = false; });
      }
    });
     
    // Use the newly created .check() method
    $( "input[type='checkbox']" ).check();
    </script>
     
    </body>
    </html>
    /*
    * 移动端点击事件,防滑
    * $(dom).tap([cssRule|callback],callback)
    * */
    $.fn.tap = function(){
        var a = arguments;
        var isScroll = false;
        $(this).on("touchstart",function(){
            isScroll = false;
        });
        $(this).on("touchmove",function(){
            isScroll = true;
        });
        $(this).on("touchend",function(event){
            if(isScroll)return;
    
            if(typeof a[0] == "function"){
                a[0]();
            }else{
                var current = event.target;
                while(current!= document){
                    if(current.matches(a[0])){
                        a[1].call(current);
                        break;
                    }
                    current = current.parentNode;
                }
            }
        });
    };

    jQuery.extend()

    jQuery.extend( [deep]target [, object1 ] [, objectN ] )

     将两个或更多对象的内容合并到第一个对象。

    如果只有一个参数提供给$.extend(),这意味着目标参数被省略。在这种情况下,jQuery对象本身被默认为目标对象。这样,我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的。

    请记住,目标对象(第一个参数)将被修改,并且将通过$.extend()返回。然而,如果我们想保留原对象,我们可以通过传递一个空对象作为目标对象:

    var object = $.extend({}, object1, object2);

    在默认情况下,通过$.extend()合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组,那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。可以通过检查下面例子中 banana 的值,就可以了解这一点。然而,如果将 true 作为该函数的第一个参数,那么会在对象上进行递归的合并。

    警告:不支持第一个参数传递 false 。

    未定义的属性不会被复制。然而,从对象原型的继承属性被复制。如果属性(Properties)是一个通过构造函数new MyCustomObject(args)定义的,或JavaScript中内置类型,如Date 或 RegExp,是不会重新创建的,并且将被当作普通的对象出在返回的对象或数组中。

    若设置了 deep 参数,对象和数组也会被合并进来,但是对象包裹的原始类型,比如String, Boolean, 和 Number是不会被合并进来的。

    若要满足其它不同于该行为的需求,编写自定义的扩展方法代替。

    <html>
    <head>
      <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    </head>
    <body>
     
    <div id="log"></div>
     
    <script>
    var object1 = {
      apple: 0,
      banana: {weight: 52, price: 100},
      cherry: 97
    };
    var object2 = {
      banana: {price: 200},
      durian: 100
    };
     
    /* merge object2 into object1 */
    $.extend(object1, object2);
     
    var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
      var arr = [];
      $.each(obj, function(key, val) {
        var next = key + ": ";
        next += $.isPlainObject(val) ? printObj(val) : val;
        arr.push( next );
      });
      return "{ " +  arr.join(", ") + " }";
    };
     
    $("#log").append( printObj(object1) );
    </script>
     
    </body>
    </html>
    <html>
    <head>
      <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    </head>
    <body>
     
    <div id="log"></div>
     
    <script>
    var object1 = {
      apple: 0,
      banana: {weight: 52, price: 100},
      cherry: 97
    };
    var object2 = {
      banana: {price: 200},
      durian: 100
    };
     
    /* merge object2 into object1, recursively */
    $.extend(true, object1, object2);
     
    var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
      var arr = [];
      $.each(obj, function(key, val) {
        var next = key + ": ";
        next += $.isPlainObject(val) ? printObj(val) : val;
        arr.push( next );
      });
      return "{ " +  arr.join(", ") + " }";
    };
     
    $("#log").append( printObj(object1) );
    </script>
     
    </body>
    </html>
  • 相关阅读:
    一,初次接触html+css需要注意的小问题
    Pycharm如何在控制台输出窗口中使用Python解释器
    Silver Cow Party POJ
    Constructing Roads POJ
    小希的迷宫 HDU
    Wireless Network POJ
    Scanner读取记事本文件内容为空的解决办法
    mysql limit的使用方法
    Can you find it? HDU-2141 (二分查找模版题)
    【2028-07-18】精力是有限的,但智慧是无限的
  • 原文地址:https://www.cnblogs.com/exhuasted/p/7722638.html
Copyright © 2011-2022 走看看