jQuery对象级插件示例

最新推荐文章于 2018-09-07 17:02:08 发布

Orange_J

最新推荐文章于 2018-09-07 17:02:08 发布

阅读量558

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： jquery 插件

本文链接：https://blog.youkuaiyun.com/juhaotian/article/details/48880391

JavaScript 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一个jQuery对象级插件的实现方法，通过jQuery.fn.extend()为jQuery对象添加了focusColor方法，该方法可以改变鼠标悬停在li元素上时的背景颜色。

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

jQuery对象级插件是通过【jQuery.fn.extend()】增加功能，所增加的函数可以直接被jQuery对象调用。

此示例的功能为：当鼠标悬停在某个li元素上时，该元素背景色会改变，源码如下：

jquery.color.js :

; (function($) {
	$.fn.extend({
		"focusColor": function(li_col) {
			var def_col = '#ccc';
			var lst_col = '#fff';

			li_col = (li_col === undefined) ? def_col : li_col;
			$(this).find('li').each(function() {
				$(this).mouseover(function() {
					$(this).css('background-color', li_col);
				}).mouseout(function() {
					$(this).css('background-color', '#fff');
				});
			});
			return $(this);
		}
	});
}) (jQuery);

index.html :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="js/angular.js"></script>
    </head>

    <body>
        <div>
            <div>
                <ul id="ul">
                    <li><span>张三</span></li>
                    <li><span>李四</span></li>
                    <li><span>王五</span></li>
                </ul>
            </div>
        </div>

        <script src="js/jquery-1.11.3.js"></script>
        <script src="js/jquery.color.js"></script>
        <script type="text/javascript">
            $(function() {
                $('ul').focusColor('#888');
            });
        </script>
    </body>
<html>