轻松理解jquery插件机制
2012-05-09 23:21 533 0
jquery之所以如此流行，很大程度上得益于其开放性及可扩展性。jquery出现至今已经有大量优秀的插件出现。
jquery中提供了与插件机制有关的两种实现方式：
一、jQuery.extend(object):该方法用于扩展jQuery对象本身，用来在jQuery命名空间上增加新函数。参数object即为用以扩展jQuery对象。
二、jQuery.fn.extend(object):该方法用于给jQuery元素集来提供新的方法，因此通常用来制作插件。
下面在一个html文件里面演示了这两种用法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Playground</title>
<link title="green" media="screen" href="css/green.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
jQuery.fn.extend({
colorize: function(color) {
return this.each(
function() {
$(this).css("background", color);
}
);
}
});
jQuery.extend({
min: function(a, b) {
return a < b ? a : b;
},
max: function(a, b) {
return a > b ? a : b;
}
});
$(document).ready(function(){
$("#testbutton").click(
function(){
/* jQuery插件机制 */
/*
$("#div3").html("min(2, 3): " + $.min(2, 3)
+ "<br/>max(4, 5):" + $.max(4, 5));
$("#div3").html("min(2, 3): " + jQuery.min(2, 3)
+ "<br/>max(4, 5):" + jQuery.max(4, 5));
*/
$(".first").colorize("red");
}
);
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#testbutton").click(
function(){
}
);
});
</script>
<style type="text/css">
.rose {
background-color: #FFE4E1;
}
.indianred{
background-color: #CD5C5C;
}
.borderstyle {
border: 13px solid #CD5C5C;
}
fieldset {
width:240px;
margin:10px;
padding:10px;
border: 1px solid #449f00;
}
.test{
color:white;
background-color: green;
}
.wrap {
background-color: green;
}
#div1 {
border: 3px solid green;
margin:2px;
}
#div2 {
border: 3px solid green;
margin:2px;
}
#div3 {
border: 3px solid green;
margin:2px;
color:white;
background-color: green;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>jQuery Playground</h1>
<ul id="nav">
<li><a class="current" href="index.html">jQuery核心及工具</a></li>
<li><a href="#"></a></li>
</ul>
<div id="content">
<input type="button" id="testbutton" value="测试" />
<br/><br/>
<div id="div1">
<p class="first">第一段文字，class为first。</p>
<p class="second">第二段文字，class为second。</p>
</div>
<div id="div2">
<p class="first">第一段文字，class为first。</p>
<p class="second">第二段文字，class为second。</p>
</div>
<div id="div3">
这里用来显示结果.
</div>
</div>
<div id="foot">Powered By Dennis Ji.</div>
</div>
</body>
</html>
