jQuery 扩展方法

一:自定义 getmax 函数,使用 $ 调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
</body>
<script>
    $.extend({
        getmax:function (x, y){
            return x>y?x:y
        }
    })
    alert($.getmax(3,1))
</script>
</html>

二:自定义 print 函数,使用 html标签 调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<p>hello p</p>
</body>
<script>
    $.fn.extend({
        print:function(){
            console.log($(this).html())
        }
    })
    $("p").print();
</script>
</html>

三:匿名函数调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>

</body>
<script>
    f=function(){
        alert(123)
    }
    f()

    (function(x){
        alert(x)
    })(123)
</script>
</html>

四:给自定义函数增加私有域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<p>hello p</p>
</body>
<script>
// 私有域
    (function(){
        var num = 1;
        $.fn.extend({
            print:function(){
                console.log($(this).html())
            }
        })

    })()
    $("p").print()
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<p>hello p</p>
</body>
<script>
// 私有域
    (function($){
        var num = 1;
        $.fn.extend({
            print:function(){
                console.log($(this).html())
            }
        })

    })(jQuery)
    $("p").print()
</script>
</html>
posted @ 2019-03-20 14:17  klvchen  阅读(1638)  评论(0编辑  收藏  举报