封装jquery插件的两种方式

最新推荐文章于 2022-11-24 08:08:30 发布

越简单越好

最新推荐文章于 2022-11-24 08:08:30 发布

阅读量694

点赞数

本文链接：https://blog.csdn.net/gong1422425666/article/details/72637442

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style media="screen">
            .box{
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="box">

        </div>
    </body>
    <script src="jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
            $.fn.extend({
                drag : function(){
                    var disX = 0;
                    var disY = 0;
                    var self = this;
                    this.mousedown(function(ev){
                        disX = ev.pageX - $(this).offset().left;
                        disY = ev.pageY - $(this).offset().top;
                        // console.log(ev.pageX);
                        // console.log(ev.pageY);
                        $(document).mousemove(function(ev){
                            self.css("left", ev.pageX - disX);
                            self.css("top", ev.pageY - disY);
                        })

                        $(document).mouseup(function(){
                            $(this).off();
                        })

                        return false;
                    })
                },
                shudong : function(){
                    alert("呵呵呵！！！");
                }
            })

    </script>


    <script type="text/javascript">
        // 封装插件的第二种形式
        $(".box").drag();
        $(".box").shudong();
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

    </body>
    <script src="jquery.js" charset="utf-8"></script>
    <script type="text/javascript">
        // trim 去掉两遍空格

        // 插件分为两种

        // $("").css()
        // $("").each()

        // 工具函数
        // $.each()
        // $.trim()
    // 需求是封装一个只去掉左边的空格
    $.extend({
        leftTrim : function(str){
            return str.replace(/^\s+/,'');
        },
        stark : function(str){
            alert("Hi ！！！");
        }
    })

    // $.fn()


    </script>


    <script type="text/javascript">
        var str = " stark ";

        console.log("("+str+")"); //没有使用工具函数
        console.log("("+$.trim(str)+")"); //使用了自带的工具函数去掉两遍的空格
        console.log("("+$.leftTrim(str)+")"); //自己封装了一个插件
        $.stark();

    </script>
</html>