jquery 插件写法笔记

最新推荐文章于 2024-11-22 22:29:48 发布

qiangD

最新推荐文章于 2024-11-22 22:29:48 发布

阅读量432

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/qiangD/article/details/47023479

版权

jquery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用jQuery扩展插件，并演示了如何在按钮点击事件中应用自定义功能，包括对元素属性的获取与操作。

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

<button id="btnShow">btnShow</button>
    <script src="jquery.js"></script>
    <script>
    $(function() {

        // 1. 对JQuery自身的扩展插件
        $.extend({
            handlerTable: function(selector) {
                var arg = $(selector),
                    bg = arg.css('backgroundColor'),
                    co = arg.css('color'),
                    ff = arg.css('font-family');

                console.log(arg + " " + bg + " " + co + " " + ff);
            }
        });


        (function($) {

            $.fn.person = function(options) {
                var defaults = {
                    name: 'dengzhiqiang',
                    sex: '男',
                    job: 'web前端开发工程师'
                };

                // 如果你在调用的时候写了新的参数，就用你新的参数，如果没有写，就用默认的参数。
                var options = $.extend(defaults, options);

                return this.each(function() {
                    console.log(this + options.name + " " + options.sex + " " + options.job);
                });
            };
        })(jQuery);

        $('button').click(function(event) {
            // 
            $.handlerTable("button");

            // $(this).person();
            console.log($(this).person({
                name: '黄君敏',
                age: 100,
                sex: '女'
            }));
        });

    });
    </script>