您的位置：首页 > Web前端 > JQuery

jquery优雅的自定义函数总结

2015-12-08 10:44 621 查看

方法一：

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

//方法定义
$.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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航