编写我的jQuery插件

最新推荐文章于 2024-08-24 00:47:34 发布

WaWaWaei

最新推荐文章于 2024-08-24 00:47:34 发布

阅读量134

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/liu3743120/article/details/86542070

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

新建一个js文件，命名为jQuery.tableStyle.js，该方法主要功能是鼠标放在table表格上，每一行就会变绿色

(function ($) {
    $.fn.extend({
        //设置选中tr的样式
        setTableStyle: function () {
            $('tr', this).mouseover(function () {
                $(this).css('background-color', 'green').siblings().css('backgroundColor', '');
            });
        },
        //清空所有事件
        clearTableStyle: function () {
            $('tr', this).unbind().removeAttr('style');
        }
    });
})(jQuery);

再新建一个html页面，引入<script src="jQuery.tableStyle.js"></script>

然后写入两个按钮以及一个table表格

js方法调用：

$(function () {
$('#btnSet').click(function () {
$('#t1').setTableStyle();
})
$('#btnClear').click(function () {
$('#t1').clearTableStyle();
})
})

OK!

先点击set style :