jQuery-devPlugin(2)

最新推荐文章于 2024-08-30 20:29:15 发布

chuoyingqing7288

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量82

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/Craft/blog/1588604

版权

<!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>

转载于:https://my.oschina.net/Craft/blog/1588604

chuoyingqing7288

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-devPlugin(2)

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <t...
复制链接

扫一扫