首页技术文章正文

怎么给jQuery扩展插件?【前端面试常问】

更新时间:2021-06-10 来源:黑马程序员 浏览量:

1577370495235_学IT就到黑马程序员.gif


(1)考察目标
1)考察是否自己编写过拓展插件
2)是否知道为jQuery扩展插件的方法
(2)题目分析
1)通过$.extend()来扩展jQuery
2)通过$.fn 向jQuery添加新的方法

代码

 // 1. 通过$.extend()来扩展jQuery
        // 语法: $.extend({})
        // 缺点:这种方式无法利用jQuery强大的选择器带来的便利,

        $.extend({            log: function(msg) {                var now = new Date(),
                    y = now.getFullYear(),
                    m = now.getMonth() + 1,
                    d = now.getDate(),
                    h = now.getHours(),
                    min = now.getMinutes(),
                    s = now.getSeconds(),
                    time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;                console.log(time + '--' + msg);
            }
        })
        $.log('initializing'); //调用

        // 2. 通过$.fn 向jQuery添加新的方法
        /*
        语法
        $.fn.pluginName = function() {
        //your code goes here
        }
        */
        // 常用的方式
        $.fn.changeColor = function() {            //在这里面,this指的是用jQuery选中的元素
            this.css('color', 'red');
        }

        $(function() {
            $('a').changeColor();
        })
    </script>
(3)应用场景
通过$.fn 向jQuery添加新的方法 是开发中常用的写法,因为这种写法可以利用jQuery强大的选择器。





猜你喜欢:

写出jQuery链式调用实现方法【前端面试题】

如何获取jQuery?jQuery的使用演示

jQuery修改元素样式的代码演示

Jquery常用的选择器有哪些?

黑马程序员前端与移动开发课程

分享到:
在线咨询 我要报名
和我们在线交谈!