jQuery练习t316，从0到1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        //jQuery插件
        //定义插件 进一步优化，参数有默认值
        (function () {
            $.fn.extend({
                "changeColor":function (options) {
                    var defaults = {
                        fgcolor:"hotpink",
                        bgcolor:"lightskyblue"
                    };

                    var options = $.extend(defaults,options);

                    $(this).mouseover(function () {
                        $(this).css({"color":options.fgcolor,"background":options.bgcolor});
                    }).mouseout(function () {
                        $(this).css({"color":"black","background":"white"});
                    });
                    return $(this);
                }
            });
        })(jQuery);

        /*
        jQuery插件可以分为以下3种，
        方法类插件
        函数类插件
        选择器插件

        其中选择器插件，很少有人会去开发使用，因为jQuery内置的选择器
        已经足够完善了。

        方法类插件，我们可以使用$.fn.extend(）方法来定义。
        语法
        (function($){
            $.fn.extend({
                "插件名":function(参数){
                ......
                }
            });
        })(jQuery);

        这里(function(){})()是JavaScript立即执行函数，在高级开发中经常
        使用。


         */
    </script>
    <script>
        $(function () {
            $("h1").changeColor();
        });
    </script>
</head>
<body>
<h1>虾米大王</h1>
</body>
</html>
jQuery练习t316，从0到1

猜你喜欢
