jquery优雅的自定义函数总结
jquery优雅的自定义函数总结
风清扬-深圳 发表于2年前
jquery优雅的自定义函数总结
  • 发表于 2年前
  • 阅读 1192
  • 收藏 2
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

摘要: jquery自定义函数总结,提升代码优雅性,一定有启发!

方法一:

定义多个方法,将方法统一放到一个对象里,以传递一个字符串为例:

//方法定义 
$.func = {
    //定义一个方法aa 
    aa: function(param) {
        alert("aaaaaa" + param);
    },
    //定义一个方法bb 
    bb: function() {
        alert("bb");
    }
}
$.func.aa('123'); //调用$.func里的aa方法

定义单个方法,ajax异步提交可以如下封装:

$.ajaxPost = function(url, data, callback) {
    $.post(url, data, callback, "json");
};
$.ajaxPost('/post/ajaxUrl',{},function(data){});

方法二:

定义变量的形式自定义函数,传递一个对象做为参数为例:

var test = function(x) {
    //弹出对象 x 里的 a 变量和 b 变量 
    alert(x.a + " 对象传参 " + x.b);
}
$.func = test;
//传递一个对象
$.func({a: "111",b: "222"});

方法三:

以拓展的方式添加函数,如下示例:

$.extend({
    setHtml: function() {
        $("#test").html('2222222222');
    },
    setClick:function(param){
      alert('test'+param);
    }
});
$(function() {
    $.setHtml();
    $.setClick('123');
});

方法四:

选择器传递方式:

$.fn.setHtml=function () { 
    $(this).html('22222222222');
} 
$(function() {
    $("#test").setHtml(); 
});


上述方法测试的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>


共有 人打赏支持
粉丝 11
博文 58
码字总数 19480
×
风清扬-深圳
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: