jQuery extend and Interoperability example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" charset="utf-8" src="/lib/prototype.js"></script>
<script type="text/javascript" charset="utf-8" src="/lib/jquery/jquery-1.2.6.js"></script>
</head>
<body>
<div id="content" style="display:none">
div#content style="display:none"
<span>div > span</span>
<p>div > p</p>
</div>
<input type="checkbox" name="c1[]" value="1" id="c1">checkbox#c1
<input type="checkbox" name="c1[]" value="1" id="c2">checkbox#c2
<input type="checkbox" name="c1[]" value="1" id="c3">checkbox#c3
<input type="radio" name="r1" value="1" id="r1">raido#r1
<input type="radio" name="r1" value="1" id="r2" checked>raido#r2
<input type="radio" name="r3" value="1" id="r3">raido#r3
<input type="radio" name="r3" value="1" id="r4" checked>raido#r4
<script type="text/javascript" charset="utf-8">
// Extends the jQuery Object itself.
// jQuery.extend( Object object ) returns jQuery
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
// Result:
var min = jQuery.min(2,3); // => 2
var max = jQuery.max(4,5); // => 5
console.log(min);
console.log(max);
// jQuery.extend( Object target, Object object1, Object objectN ) returns Object
// Extend one object with one or more others, returning the original, modified, object.
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
// Result:
settings == { validate: true, limit: 5, name: "bar" }
console.log(settings);
// jQuery.fn.extend( Object object ) returns jQuery
// Extends the jQuery element set to provide new methods (used to make a typical jQuery plugin).
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
// Result:
jQuery("input[@type=checkbox]").check();
jQuery("input[@type=radio]").not("#r1").uncheck();
// Maps the original object that was referenced by $ back to $.
jQuery.noConflict();
// Do something with jQuery
jQuery("div > p").hide();
// Do something with another library's $()
$("content").style.display = 'block';
// Completely move jQuery to a new namespace in another object.
var dom = {};
dom.query = jQuery.noConflict(true);
// Do something with the new jQuery
dom.query("div > span").hide();
</script>
</body>
</html>
No comments :
Post a Comment