jquery $.extend()例子总结

概述

用以扩展jQuery对象

参数

object

例子

合并两个对象，并修改第一个对象。

<!Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.extend demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.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
};
 
// 合并 object2 到 object1
$.extend( object1, object2 );
 
// 转换成json字符串
$( "#log" ).append( JSON.stringify( object1 ) );      //{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
</script>
 
</body>
</html>

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

<!Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.extend demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.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 );
 
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( JSON.stringify( object1 ) );    //{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
</script>
 
</body>
</html>

合并 defaults 和 options 对象，并且不修改 defaults 对象。这是常用的插件开发模式。

<!Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.extend demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div id="log"></div>
 
<script>
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
 
// Merge defaults and options, without modifying defaults
var settings = $.extend( {}, defaults, options );
 
// Assuming JSON.stringify - not available in IE<8
$( "#log" ).append( "<div><b>defaults -- </b>" + JSON.stringify( defaults ) + "</div>" );
$( "#log" ).append( "<div><b>options -- </b>" + JSON.stringify( options ) + "</div>" );
$( "#log" ).append( "<div><b>settings -- </b>" + JSON.stringify( settings ) + "</div>" );
/*
 * defaults -- {"validate":false,"limit":5,"name":"foo"}
 * options -- {"validate":true,"name":"bar"}
 * settings -- {"validate":true,"limit":5,"name":"bar"}
 */
</script>
 
</body>
</html>

jquery $.extend()例子总结

概述

参数

例子

推荐阅读更多精彩内容