<!DOCTYPE html>
<!--
声明:练习素材来自于jquery基础教程
-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Developing Plugins</title>
<link rel="stylesheet" href="../../css/08.css" type="text/css" />
<link rel="stylesheet" href="../../ui-themes/smoothness/jquery-ui-1.10.0.custom.min.css" type="text/css" />
<script src="../../lib/jquery.js"></script>
<script src="../../lib/jquery-ui-1.10.0.custom.min.js"></script>
<script>
/*添加jQeruy对象方法*/
//当函数需要操作DOM元素时,就是将函数创建为jQuery实例方法的好机会
//jQuery.fn对象是jQuery.prototype的别名,使用别名是出于简洁的考虑
/*对象方法的上下文*/
(function($){
$.fn.swapClass = function(class1,class2){
if(this.hasClass(class1)){
this.removeClass(class1).addClass(class2);
}else if(this.hasClass(class2)){
this.removeClass(class2).addClass(class1);
}
}
})(jQuery);
//测试
// $(function(){
// $('tr').swapClass('two','one');
// })
/*隐式迭代*/
//以上代码我们调用hasClass()只会检查匹配的第一个元素,换句话说,我们应该独立检查和操作每一个元素
(function($){
$.fn.swapClass1 = function(class1,class2){
$.each(this, function(index,o) {
if($(o).hasClass(class1)){
$(o).removeClass(class1).addClass(class2);
}else if($(o).hasClass(class2)){
$(o).removeClass(class2).addClass(class1);
}
});
}
})(jQuery);
//测试
// $(function(){
// $('tr').swapClass1('two','one');
// });
/*方法连缀*/
(function($){
$.fn.swapClass2 = function(class1,class2){
return this.each(function(index,o) {
if($(o).hasClass(class1)){
$(o).removeClass(class1).addClass(class2);
}else if($(o).hasClass(class2)){
$(o).removeClass(class2).addClass(class1);
}
});
}
})(jQuery);
//测试
$(function(){
$('tr').swapClass2('two','one').css('font-size','30px');
});
/*注意全局函数与对象实例函数的区别*/
</script>
</head>
<body>
<div id="container">
<h1>Inventory</h1>
<table id="inventory">
<thead>
<tr class="one">
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr class="two" id="sum">
<td>Total</td>
<td></td>
<td></td>
</tr>
<tr id="average">
<td>Average</td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td><a href="spam.html" data-tooltip-text="Nutritious and delicious!">Spam</a></td>
<td>4</td>
<td>2.50</td>
</tr>
<tr>
<td><a href="egg.html" data-tooltip-text="Farm fresh or scrambled!">Egg</a></td>
<td>12</td>
<td>4.32</td>
</tr>
<tr>
<td><a href="gourmet-spam.html" data-tooltip-text="Chef Hermann's recipe.">Gourmet Spam</a></td>
<td>14</td>
<td>7.89</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>