2015年10月15日 星期四

公用:$.extend 和$.fn.extend (jQuery27)

官網連結

※$.extend

$(function(){
    var object1 = {
        apple: 0,
        banana: { weight: 52, price: 100 },
        cherry: 97
    };
    
    var object2 = {
        banana: { price: 200 },
        durian: 100
    };
    
    var object3 = {
        banana: {name:'bruce',price: 400},
        apple: 20,
        duck:{name:'quack', attribute:'blue'},
        durian:200
    };
    
    console.log(JSON.stringify(object1));
    console.log(JSON.stringify(object2));
    console.log(JSON.stringify(object3));
    console.log("");console.info("");
    
    $.extend(true, object1, object2, object3);
    // $.extend(object1, object2, object3);
    // var xxx = $.extend({}, object1, object2, object3);
    
    console.log(JSON.stringify(object1));
    console.log(JSON.stringify(object2));
    console.log(JSON.stringify(object3));
});

※$.extend 只會影響第一個物件,然後後面的物件如果 KEY 一樣,就會一直覆蓋下去

※第一個參數可以寫 true 和 {} 兩個,官方說 false 不支援,但第一個參數不是必要的
如果寫{},不會影響原本的 JSON,必需要宣告一個變數來接
如果不寫第一個參數,結果和寫{}一樣,但會影響原本的 JSON,所以不用宣告變數來接
以上兩個 (不寫和{}),一個 KEY是一個整體,是不可拆開的,如果有一樣的 KEY,後面的物件會一直覆蓋

如果寫 true 表示 KEY 不是一個整體,如果有一樣的 KEY,後面的物件會一直附加到後面



※$.fn.extend

可在物件增加方法


$(function(){
    $.fn.extend({
        ooo: function() {
            return this.each(function() {
                this.checked = true;
            });
        },
        xxx: function() {
            return this.each(function() {
                this.checked = false;
            });
        },
        zzz: function() {
            return this.each(function(){
                this.title = 'he he he radio';
            });
        }
    });
    $("input[type='checkbox']").ooo();
    $("input[type='radio']").zzz();
});
----------
<input type="checkbox" value="a1" name="ch" />
<input type="checkbox" value="a2" name="ch" />
<input type="checkbox" value="a3" name="ch" />
<input type="radio" value="r1" name="ra" />
<input type="radio" value="r2" name="ra" />

※將鼠標放在radio會出現title

沒有留言:

張貼留言