随笔- 310  文章- 1  评论- 0  阅读- 86066 
jquery方法封装

概述

?
1
2
3
4
5
6
7
// 立刻执行函数
 
(function($){
 
    // code
 
})(jQuery);

　

参数说明

形参： $

实参: jQuery

闭包的作用

  • 避免全局依赖

  • 避免第三方破坏

  • 兼容jQuery操作符'$'和jQuery；

 

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/*comment.js*/
;(function($){
    //消息显示
    $.message=function(content){ 
        $('#message').attr('data-content',content);
        $('#message').popover('show');
        setTimeout(function() {
            $('#message').popover('hide');
        },2000)
    }
    //隐藏标签
    $.hidden = function(id){
        var id = '#'+id;
        if(!$(id).hasClass('hidden')){
            $(id).addClass('hidden');
        }
    }
    //显示标签
    $.display= function(id){
        var id = '#'+id;
        if($(id).hasClass('hidden')){
            $(id).removeClass('hidden');
        }
    }
 
    function getCookie(name) {
            var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
            return r ? r[1] : undefined;
        }
    //POST请求
    $.postJSON = function(url, args, callback) {
        //args._xsrf = getCookie("_xsrf");
        args.csrfmiddlewaretoken = getCookie("csrftoken");
        $.ajax({url: url, data: args, dataType: "json", type: "POST",
            success: function(response) {
            callback(response);
        }});
    }; 
    
})(jQuery);

 

使用

index.html

?
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./comment.js"></script>
</head>
 <body>
  test
</body>
</html>

　　

　　

 

 posted on   boye169  阅读(45)  评论(0)  编辑  收藏  举报
相关博文：
·  typescript https请求
·  解决jquery之get缓存问题
·  封装jquery
·  JQuery对象和类的封装
·  基于jquery的ajax请求封装
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
历史上的今天：
2020-08-04 《生成器与迭代器》
点击右上角即可分享
微信分享提示
SQL AI 助手