jQuery in Action
178
CHAPTER 6
jQuery utility functions
Let's take a look at this function doing its thing. Examine the code of listing 6.4,
which can also be found in the file chapter6/$.extend.html.
which can also be found in the file chapter6/$.extend.html.
<html>
<head>
<title>$.extend Example</title>
<link rel="stylesheet" type="text/css" href="../common.css">
<script type="text/javascript"
src="../scripts/jquery-1.2.1.js"></script>
<script type="text/javascript"
src="../scripts/support.labs.js"></script>
<script type="text/javascript">
var target = { a: 1, b: 2, c: 3 };
var source1 = { c: 4, d: 5, e: 6 };
var source2 = { e: 7, f: 8, g: 9 };
$(function(){
$('#targetBeforeDisplay').html($.toSource(target));
$('#source1Display').html($.toSource(source1));
$('#source2Display').html($.toSource(source2));
$.extend(target,source1,source2);
$('#targetAfterDisplay').html($.toSource(target));
});
</script>
<style type="text/
css">
label { float: left; width: 108px; text-align: right; }
p { clear: both; }
label + span { margin-left: 6px; }
</style>
</head>
<body>
<fieldset>
<legend>$.extend() Example</legend>
<p>
<label>target (before) =</label>
<span id="targetBeforeDisplay"></span>
</p>
<p>
<label>source1 =</label>
<span id="source1Display"></span>
</p>
<p>
<label>source2 =</label>
<span id="source2Display"></span>
</p>
Listing 6.4 Putting the $.extend function to the test
Defines
test
objects
test
objects
b
Displays
before
state of
objects
c
Displays after state
of target object
e
Extends target object
with source objects
d
Defines HTML
elements for display
elements for display
f