zoukankan      html  css  js  c++  java
  • 自己实现一个jQuery插件

      <script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>
    
    <table class='mainTable' id='tbl'>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
    <script>
    $(function(){
    /* 非插件实现行背景高亮
    $('.mainTable tr').mouseover(function(){
    		$(this).css('backgroundColor','yellow').siblings().css('backgroundColor','white');
    });
    */
    $('.mainTable').setTableColor();
    	
    });
    
    ////自己实现jquery插件(可单独放到js文件中):
    /*
    * 鼠标放table行上背景高亮
    * 插件的使用:$('#tbleId').setTableColor();
    */
    ;(function($){//为了把前面代码视为一个整体故第一个字符是分号,$是jquery对象。
    	//注意:$.fn.extend()里面以“key-value”形式写函数
    	$.fn.extend({
    		setTableColor:function(){//行背景高亮函数
    			$('tr',this).mouseover(function(){//this是table对象
    				$(this).css('backgroundColor','#F2F4FF').siblings().css('backgroundColor','white');//this是表行
    			});
    			return this;//本句为了能链式编程
    		}
    	});
    })(jQuery);
    
    </script>
    
    
  • 相关阅读:
    运算放大器
    阻抗模型
    mysql优化
    tomcat调优
    jvm调优
    springboot使用
    deploy工程到nexus
    Spring data elasticsearch使用
    kibana使用
    笔记
  • 原文地址:https://www.cnblogs.com/anjun-xy/p/10162005.html
Copyright © 2011-2022 走看看