• 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) {});

  • 相关阅读:
    使用yeoman搭建脚手架并发布到npm
    Facebook的一些基本操作(网页版)
    Egg中使用egg-mongoose和常用的Mongoose 方法
    Vuex的使用
    跨浏览器的javascript事件的封装
    利用ngnix解决跨域问题
    webpack打包工具
    用vue-cli脚手架搭建一个仿网易云音乐的全家桶vue项目
    mac 解决mysqlclient安装失败问题
    linux之wget
  • 原文地址:https://www.cnblogs.com/zccst/p/3728462.html
Copyright © 2020-2023  润新知