jQuery扩展两类函数(对象调用,静态调用)


作者:zccst

先看小例子:

$(function(){
    //扩展方式1-通过对新调用
    $.fn.each1=function(){
        console.log("hehehehe$.fn.func");
    }
    $.fn.extend({
        "each2":function(){
            console.log("second method!,$.fn.extend(each2:function(){})");
        }
    });
    //扩展方式2-静态调用
    $.extend({
        "each3":function(){
            console.log("hahah,$.extend(each3:function(){})");
        }
    });
    $("button").click(function(){
        console.log($(".name").val());
        $(this).each1();//通过对象调用
        $(this).each2();//通过对象调用
        $.each3();//扩展方式2-静态调用
    });
});


名字:<input class="name" type="text" />
<button>提交</button>

方法一:对象调用
jQuery.fn.setApDiv=function () {
//apDiv浮动层显示位置居中控制
var wheight=$(window).height();
var wwidth=$(window).width();
var apHeight=wheight-$("#apDiv").height();
var apWidth=wwidth-$("#apDiv").width();
$("#apDiv").css("top",apHeight/2);
$("#apDiv").css("left",apWidth/2);
}

调用方法:$("#apDiv").setApDiv();


--------------------------------------------------------------------------------
方法二:静态调用
//jQuery 应用扩展
jQuery.extend({
// 设置 apDiv
setApDiv:function () {
//apDiv浮动层显示位置居中控制
var wheight=$(window).height();
var wwidth=$(window).width();
var apHeight=wheight-$("#apDiv").height();
var apWidth=wwidth-$("#apDiv").width();
$("#apDiv").css("top",apHeight/2);
$("#apDiv").css("left",apWidth/2);
}
});
调用方法:$.setApDiv();

总结 一种如$.extend({'aa':function(){}}),这种调用时就是这样$.aa(),另一种如$.fn.extend({'aa':function(){}}),这种调用时就得这样,$(this).aa()

--------------------------------------------------------------------------------
方法三:

$.postJSON = function(url, data, callback) {
$.post(url, data, callback, "json");
};
调用方法:$.postJSON('/post/getsecurejsonpost',{}, function(data) {});

优质内容筛选与推荐>>
1、PHP的几个常用加密函数
2、CompletableFuture用法介绍
3、1.【nuxt起步】-nuxt是什么?
4、拆分字符串
5、linux sed 批量替换字符串


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号