Jquery中$.extend()的用法，打狗棒法之《歹挑狗身》

本文主要是介绍Jquery中$.extend()的用法，打狗棒法之《歹挑狗身》，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. jquery.extend(), 为jQuery类添加类方法

第一种方式用jQuery扩展，比如：

        jQuery.extend({min: function(a, b) {return a < b ? a : b},max: function(a, b) {return a > b ? a : b}});console.log(jQuery.min(1, 4));console.log(jQuery.max(22, 2));

输出结果：
在这里插入图片描述
第二种方法，用$扩展，比如：

        (function($) {$.extend({a1: function() {$("#log").append("a1_function");},a2: function() {$("#log").append("a2_function");}});})(jQuery);

调用直接用$.类名

  //调用直接用$.类名$.a1();$.a2();

页面输出
在这里插入图片描述

2. jquery.extend(), 将两个或更多对象的内容合并到第一个对象。

w3c中解释
在这里插入图片描述
当我们提供两个或多个对象给 $. e x t e n d () ，对象的所有属性都添加到目标对象（ t a r g e t 参数）。如果只有一个参数提供给$ .extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。
例子1 合并两个对象，并修改第一个对象

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Extend</title><script src="http://libs.baidu.com/jquery/1.10.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: 122};//第一种情况：合并两个对象，并修改第一个对象//在默认情况下，通过$.extend()合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组，//那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。$.extend(object1, object2); //{"apple":0,"banana":{"price":200},"cherry":97,"durian":122}$("#log").append(JSON.stringify(object1));</script>
</body>
</html>

例子2 采用递归方式合并两个对象，并修改第一个对象。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Extend</title><script src="http://libs.baidu.com/jquery/1.10.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: 122};//第二种情况：采用递归方式合并两个对象，并修改第一个对象。//如果为false，则优先第一个元素，后面的不会覆盖前面的//如果将 true 作为该函数的第一个参数，那么会在对象上进行递归的合并。//$.extend(true, object1, object2); //{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":122}$.extend(false, object1, object2); //{"apple":0,"banana":{"weight":52,"price":100},"cherry":97}$("#log").append(JSON.stringify(object1));</script></body></html>

例子3 合并 defaults 和 options 对象，并且不修改 defaults 对象

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Extend</title><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head><body><div id="log"></div><script>var defaults = {validate: false,limit: 5,name: "defaults_name"};var option = {validate: true,name: "option_name"// 如果写成  name = "option_name" ，会报错如下//Uncaught SyntaxError: Invalid shorthand property initializer};//不修改原始数据var setting = $.extend({}, defaults, option);//第三种情况：合并 defaults 和 options 对象，并且不修改 defaults 对象$("#log").append("<div><b>defaults ---</b>" + JSON.stringify(defaults) + "</div>"); //defaults ---{"validate":false,"limit":5,"name":"defaults_name"}$("#log").append("<div><b>option ---</b>" + JSON.stringify(option) + "</div>"); //option ---{"validate":true,"name":"option_name"}$("#log").append("<div><b>setting ---</b>" + JSON.stringify(setting) + "</div>"); //setting ---{"validate":true,"limit":5,"name":"option_name"}</script>
</body>
</html>

期间犯了一个错误

// 如果写成 name = “option_name” ，会报错如下

//Uncaught SyntaxError: Invalid shorthand property initializer

也就是说键值对不能用等于号！

3. jQuery.fn.extend() 和jQuery.extend()的区别

把对象挂载到 jQuery 的 prototype 属性，来扩展一个新的 jQuery 实例方法，也就是通过这个 extend 添加的新方法，实例化的 jQuery 对象都能使用，因为它是挂载在 jQuery.fn 上的方法。

查看jQuery源码可发现，jQuery.fn = jQuery.prototype。jQuery.fn挂在原型上，由于对原型的修改会影响所有实例，因此fn上的方法会对每一个jQuery实例有效。

对jQuery.fn的扩展，就是为jQuery类添加成员函数，jQuery类的实例可以使用这个成员函数。
比如：

        jQuery.fn.extend({clickFunc: function() {$(this).click(function() {alert($(this).text());});}});

调用

  $("#log").clickFunc(); //输出文本框的文本

在这里插入图片描述
jQuery.extend()是为jQuery类添加类方法（静态方法），需要通过jQuery类来调用（直接使用 $.xxx 调用）；
jQuery.fn.extend()是为jQuery类添加成员函数（实例方法），所有jQuery实例都可以直接调用（需要使用 $().xxx 调用）。

整合$.extend的常用方法于一起：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Extend</title><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head><body><div id="log"></div><script>//扩展jquery的方法//(function($){})(jQuery)(function($) {$.extend({a1: function() {$("#log").append("a1_function");},a2: function() {$("#log").append("a2_function");}});})(jQuery);jQuery.extend({min: function(a, b) {return a < b ? a : b},max: function(a, b) {return a > b ? a : b}});jQuery.fn.extend({clickFunc: function() {$(this).click(function() {alert($(this).text());});}});console.log(jQuery.min(1, 4));console.log(jQuery.max(22, 2));var object1 = {apple: 0,banana: {weight: 52,price: 100},cherry: 97};var object2 = {banana: {price: 200},durian: 122};var defaults = {validate: false,limit: 5,name: "defaults_name"};var option = {validate: true,name: "option_name"// 如果写成  name = "option_name" ，会报错如下//Uncaught SyntaxError: Invalid shorthand property initializer};//不修改原始数据var setting = $.extend({}, defaults, option);//第一种情况：合并两个对象，并修改第一个对象//在默认情况下，通过$.extend()合并操作不是递归的;如果第一个对象的属性本身是一个对象或数组，//那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。//$.extend(object1, object2); //{"apple":0,"banana":{"price":200},"cherry":97,"durian":122}//第二种情况：采用递归方式合并两个对象，并修改第一个对象。//如果为false，则优先第一个元素，后面的不会覆盖前面的//如果将 true 作为该函数的第一个参数，那么会在对象上进行递归的合并。//$.extend(true, object1, object2); //{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":122}$.extend(false, object1, object2); //{"apple":0,"banana":{"weight":52,"price":100},"cherry":97}//$("#log").append(JSON.stringify(object1));//第三种情况：合并 defaults 和 options 对象，并且不修改 defaults 对象$("#log").append("<div><b>defaults ---</b>" + JSON.stringify(defaults) + "</div>"); //defaults ---{"validate":false,"limit":5,"name":"defaults_name"}$("#log").append("<div><b>option ---</b>" + JSON.stringify(option) + "</div>"); //option ---{"validate":true,"name":"option_name"}$("#log").append("<div><b>setting ---</b>" + JSON.stringify(setting) + "</div>"); //setting ---{"validate":true,"limit":5,"name":"option_name"}//调用直接用$.类名$.a1();$.a2();$("#log").clickFunc(); //输出文本框的文本</script></body></html>