文档章节

jquery优雅的自定义函数总结

风清扬-深圳
 风清扬-深圳
发布于 2015/12/08 10:44
字数 314
阅读 3.8K
收藏 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
深圳
高级程序员
私信 提问
加载中

评论(1)

jghjfghfg
jghjfghfg
第78天:jQuery事件总结(一)

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

半指温柔乐
2017/11/08
0
0
Jquery不同版本共用的解决方案(插件编写)

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

Eric_HSBC
2013/05/15
3.7K
2
【jquery学习笔记】美元背后的一点小技巧

写在前面:本文比较基础,仅是一枚菜鸟接触jquery过程中的一点思考和总结,内容较基础,希望能对刚接触jQuery的童鞋有一点帮助 :) 按照国际惯例(其实就是俺写作的习惯),首先抛出待问题的场...

阳光总在风雨后001
2014/04/03
0
0
使用 JS 关闭警告框及监听自定义事件(amaze ui)

使用 JS 关闭警告框及监听自定义事件(amaze ui) 一、总结 1、jquery匿名函数:第8行,jquery匿名函数,$(function(){});,有没有很简单,只是少了jquery的前面的选择器部分而已 二、使用 ...

osc_i1wpn0ru
2018/05/09
1
0
了解jQuery技巧来提高你的代码

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

i33
2012/09/25
151
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot 整合 Redis 缓存

1.首先导入使用Maven导入jar包 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId></dependency><......

FH-Admin
33分钟前
12
0
如何安装WordPress插件 - 初学者的分步指南 - WP站长

<!-- wp:paragraph -->安装WordPress后,每一个初学者需要学习的第一件事就是如何安装WordPress插件。插件允许您向WordPress添加新功能,例如添加图库、幻灯片等。有数千个可用于WordPress的...

wpzhanzhang
48分钟前
8
0
【Flutter组件终结篇】332个组件 658页PDF

老孟导读:历时1年的时间,整理完成了330+组件的详细用法,不仅包含UI组件,还包含了功能性的组件。 虽然整理了 330+的组件基本用法,但并不是让你每一个都学习一遍,任何技术基本都是掌握 ...

老孟Flutter
今天
17
0
三星手机又中招:一张壁纸可引发系统崩溃 附临时解决方法

  前几天国内有大量用户发现三星手机崩溃、黑屏或者无限重启, 这可能是三星手机的日历 APP 的 bug。这件事还没完,三星手机今天又发现了新的问题,换上一张特别的壁纸就会导致系统崩溃,不...

alkcendkljk
今天
13
0
查找当前目录和文件目录[重复] - Find current directory and file's directory [duplicate]

问题: This question already has answers here : 这个问题已经在这里有了答案 : How to properly determine current script directory? 如何正确确定当前脚本目录? (11 answers) (11个答...

技术盛宴
今天
27
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部