fn.extend()、jQuery.fn.extend()、別名 alias
一、
jQuery.fn.extend( object )
用來擴充jQuery library的擴充方法。
注意，jQuery.fn.extend()跟「參數擴展 $.extend()」jQuery.extend()是不一樣的功能，可別搞混了。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.fn.extend demo</title> <script src="https://code.jquery.com/jquery-3.2.1.js"></script> </head> <body> <a href="">abc</a> <script> jQuery.fn.extend({ setColor: function () { this.css('color', 'red'); } }); $('a').setColor(); </script> </body> </html>
也等於下面的寫法
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.fn.extend demo</title> <script src="https://code.jquery.com/jquery-3.2.1.js"></script> </head> <body> <a href="">abc</a> <script> jQuery.fn.setColor = function () { this.css('color', 'red'); }; $('a').setColor(); </script> </body> </html>
「$」符號就是jQuery的別名(alias)，所以$.fn就等於jQuery.fn，
而$.fn是一個object，用來提供jQuery object的所有method，就是來自於$.fn object。
二、也可以再加上串接方法 (Chaining)
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery.fn.extend demo</title> <script src="https://code.jquery.com/jquery-3.2.1.js"></script> </head> <body> <a href="">abc</a> <script> $.fn.setColor = function () { this.css('color', 'red'); return this; }; $('a').setColor().css('font-size', '72px'); </script> </body> </html>
三、使用 each 去迭代元素
<!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="https://code.jquery.com/jquery-1.10.2.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>
四、參數擴展 $.extend()
1、syntax1：jQuery.extend( target [, object1 ] [, objectN ] )
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> </head> <body> <script> var objZ = { id: 123 }; var objA = { name: "Tim" }; var objB = { name: "Mary" }; var objC = { box: { width: 333, height: 50 } }; var objD = { box: { width: 100 } }; var object = $.extend(objZ, objA, objB, objC, objD); </script> </body> </html>
執行結果為
說明：
如果有一 $.extend(物件零, 物件一)，又如果兩物件擁有相同屬性，則物件一可以蓋掉物件零。
如果有一 $.extend(物件零, 物件一, 物件二)，又如果三個物件都擁有相同屬性，則物件一可以蓋掉物件零，
然後其結果再來跟物件二比，物件二可以去蓋掉其結果。
總之，$.extend() 的最後一個參數將會是最終有去蓋掉先前結果的權限。
2、syntax2：jQuery.extend( [deep ], target, object1 [, objectN ] )
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> </head> <body> <script> var objA = { name: "Tim" }; var objB = { name: "Mary" }; var objC = { box: { width: 333, height: 50 } }; var objD = { box: { width: 100 } }; var object = $.extend(true, objA, objB, objC, objD); </script> </body> </html>
執行畫面
說明：
由之前的例子我們已知 $.extend() 的用法，現在來了解 deep 參數的用法，
當 deep 參數為 false 時，效果則跟 syntax1 一樣，頂層符合相同的物件名稱會被覆蓋；
當 deep 參數為 true 時，表示可以做到物件裡的特定屬性被覆蓋。
五、別名(alias)
別名的用法如下
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.2.1.js"></script> </head> <body> <a href="">abc</a> <script> var $myAlias = jQuery.noConflict(); $myAlias.fn.extend({ setColor: function () { this.css('color', 'red'); } }); $myAlias('a').setColor(); </script> </body> </html>
我決定不用jQuery的別名「$」字號，改使用別名「$myAlias」時我可以使用noConflict()方法來改別名，
範例如上。
參考資料：