jQuery之工具方法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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章