jQuery之工具方法extend插件扩展

最新推荐文章于 2022-04-04 21:01:10 发布

&XYZ&

最新推荐文章于 2022-04-04 21:01:10 发布

阅读量191

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/105481481

版权

jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章目录

- $ .extend、$ .fn.extend
- - 扩展方法

$ .extend、$ .fn.extend

扩展方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <style>
        #demo {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="demo"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    // $.extend
    // $.fn.extend

    // 1.扩展方法 ***api没有
    // 2.浅层克隆
    // 3.深层克隆

    $.extend({
        definedMandom: function (start, final) {
            const len = final - start;
            return Math.random() * len + start;
        }
    })// 加到工具方法里面

    $.fn.extend({
        drag: function () {
            var disX,
                disY,
                self = this;

            $(this).on('mousedown', function (e) {
                disX = e.pageX - $(this).offset().left;
                disY = e.pageY - $(this).offset().top;

                $(document).on("mousemove", function (e) {
                    $(self).css({ left: e.pageX - disX, top: e.pageY - disY });
                })
                $(document).on("mouseup", function (e) {
                    $(document).off("mousemove").off("mouseup");
                })
            })
            return this;
        }
    })// 加到实例方法里面
    $('#demo').drag();
</script>

</html>

&XYZ&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery之工具方法extend插件扩展

文章目录$ .extend、$ .fn.extend扩展方法$ .extend、$ .fn.extend扩展方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...
复制链接

扫一扫