正文 1900字数 148,291阅读

jquery自定义函数总结，提升代码优雅性，一定有启发！

方法一：
定义多个方法，将方法统一放到一个对象里，以传递一个字符串为例：
//方法定义 $.func = { //定义一个方法aa aa: function(param) { alert("aaaaaa" + param); }, //定义一个方法bb bb: function() { alert("bb"); } } $.func.aa('123'); //调用$.func里的aa方法
Run code
Cut to clipboard


    定义单个方法，ajax异步提交可以如下封装：
    $.ajaxPost = function(url, data, callback) { $.post(url, data, callback, "json"); }; $.ajaxPost('/post/ajaxUrl',{},function(data){});
    Run code
    Cut to clipboard


      方法二：
      定义变量的形式自定义函数，以传递一个对象做为参数为例：
      var test = function(x) { //弹出对象 x 里的 a 变量和 b 变量 alert(x.a + " 对象传参 " + x.b); } $.func = test; //传递一个对象 $.func({a: "111",b: "222"});
      Run code
      Cut to clipboard


        方法三：
        以拓展的方式添加函数，如下示例：
        $.extend({ setHtml: function() { $("#test").html('2222222222'); }, setClick:function(param){ alert('test'+param); } }); $(function() { $.setHtml(); $.setClick('123'); });
        Run code
        Cut to clipboard


          方法四：
          选择器传递方式：
          $.fn.setHtml=function () { $(this).html('22222222222'); } $(function() { $("#test").setHtml(); });
          Run code
          Cut to clipboard


            上述方法测试的HTML代码如下：
            <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>Examples</title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $.fn.setHtml=function () { $(this).html('22222222222'); } $(function() { $("#test").setHtml(); }); </script> </head> <body> <div id="test">11111111</div> </body> </html>
            Run code
            Cut to clipboard