文档章节

jquery优雅的自定义函数总结

风清扬-深圳
 风清扬-深圳
发布于 2015/12/08 10:44
字数 314
阅读 1508
收藏 2

方法一:

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

//方法定义 
$.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
博文 73
码字总数 19480
作品 0
深圳
高级程序员
Jquery不同版本共用的解决方案(插件编写)

最近在为某公司做企业内部UI库,经过研究分析和评审,决定基于Jquery开发,结合Bootstrap插件那简洁,优雅,高效的思想进行插件编写。 但是在编写的过程中遇到一个头疼的问题,就是正在编写的...

Eric_HSBC
2013/05/15
0
2
第78天:jQuery事件总结(一)

jQuery事件总结(一)   现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery。   JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的。...

半指温柔乐
2017/11/08
0
0
了解jQuery技巧来提高你的代码

1.测试并提升你的jQuery选择器水平 这个jQuery选择器实验室非常酷,它能在线免费使用,当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段,然后你能尝试预定义使用各种jQu...

i33
2012/09/25
0
0
自定义jQuery插件Step by Step

自定义jQuery插件Step by Step 1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是R...

wolf_su
2013/07/04
0
0
jQuery.noConflict() 函数详解

jQuery.noConflict()函数用于让出jQuery库对变量$(和变量jQuery)的控制权。 一般情况下,在jQuery库中,变量$是变量jQuery的别名,它们之间是等价的,例如jQuery("p")和$("p")是等价的。由于...

鱼煎
2015/07/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Nexus Repository Manager 搭建私有docker仓库

Nexus Repository Manager 搭建私有docker仓库 2018年05月08日 14:44:23 阅读数:115 1.下载nexus3的镜像: docker pull sonatype/nexus3 2.使用镜像启动一个容器: docker run -d --name n...

linjin200
6分钟前
0
0
大数据技术的发展趋势

大数据领域已经涌现出了大量新的技术,它们成为大数据采集、存储、处理和呈现的有力武器。这些技术下一步将如何发展?它们之中哪些技术 将广为流行?又会诞生哪些新的技术? 技术趋向多样化,...

董黎明
8分钟前
1
0
谷歌浏览器插件入门示例

实现:任何网址实现图片下载和获取当前域名的cookies的json字符串。 图片下载是给小白用的,可以选中批量下载,获取cookies 是为了方便程序员调试用。 获取cookies: git地址: https://gite...

NLGBZJ
10分钟前
2
0
152. Maximum Product Subarray - LeetCode

Question 152. Maximum Product Subarray Solution 题目大意:求数列中连续子序列的最大连乘积 思路:动态规划实现,现在动态规划理解的还不透,照着公式往上套的,这个问题要注意正负,需要...

yysue
11分钟前
0
0
IDEA工具 jdk,tomcat,maven 配置

设置JDK、tomcat、maven的版本 一、JDK      如果下拉列表没有,SDKS ---> + ----> 选择下载的JDK目录 ---> APPLY OK    二、tomcat 三、Maven    四、生成 git 本地创库...

君千殇520
11分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部