[笔记]扩展jQuery之示例_jquery 封装 x-platform-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaofanku/article/details/42611855

本文介绍了如何通过JavaScript实现元素背景颜色的动态变化，包括基于原生代码、jQuery函数插件、jQuery集合插件和使用animateColor插件的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下的示例基于同一段代码，代码取自[实时用户体验]的示例代码。当移除或新增一个元素时，一般高亮元素的背景以提示用户注意，

原始示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>highlight lab</title>
</head>
<body>
<div id="a">this is a layer</div>
<script type="text/javascript">
var highlight=function(ele){
        var h=1;
        var loop=function(){
           var hx=h.toString(16);
	   document.getElementById(ele).style.backgroundColor='#cccc'+hx+hx;
	   if(h<12){
		h++;
		setTimeout(loop,50);
	   }
        };
        loop();
}
highlight("a");
</script>
</body></html>

jQuery函数插件

一般是针对工具函数的封闭，在应用中以jQuery统一的模式调用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>highlight lab</title>
</head>
<body>
<div id="a">this is a layer</div>
<script src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$.highlight=function(ele){
        var h=1;
        var loop=function(){
           var hx=h.toString(16);
	   $('#'+ele).css({'backgroundColor':'#cccc'+hx+hx});
	   if(h<12){
		h++;
		setTimeout(loop,50);
	   }
        };
        loop();
};

})(jQuery);
jQuery(function($){
        $.highlight('a');
});
</script>
</body></html>

jQuery集合插件

以选中的元素集合为操作基础，返回选中元素集合的部分或全部

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>highlight lab</title>
</head>
<body>
<div id="a">this is a layer</div>
<script src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
(function($){
        function highlight(ele){
                var h=1;
                var loop=function(){
                        var hx=h.toString(16);
	                $(ele).css("backgroundColor",'#cccc'+hx+hx);
                        if(h<12){
                                h++;
                                setTimeout(loop,50);
                        }
                };
                loop();
        }
        $.fn.highlight=function(){
                return this.each(function(){
                        highlight(this);        
                });
        };
})(jQuery);
jQuery(function($){
        $('#a').highlight();
});
</script>
</body></html>

一般常用的扩展多是基于集合插件，示例只是基础的演示。集合插件比函数插件要复杂的多。如果操作涉及过多样式请使用UI小部件扩展，jQuery UI提供了基础的实现，只需要重写操作涉及的函数，像：disable,enable可以不用重写,其它的针对自定义扩展的需求可以或不用重写,像:destroy,option.jQuery UI扩展会自动关联一个元素集合插件

jQuery插件。animate color提供接近需求和贴近jQuery原生的实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>highlight lab</title>
</head>
<body>
<div id="a">this is a layer</div>
<script src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script>
<script src="http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js"></script>
<script type="text/javascript">
jQuery(function($){
        $('#a').css({'backgroundColor':'yellow'}).animate({backgroundColor:'#fff'},1000);
});
</script>
</body></html>