jQuery扩展方法笔记
一、方式列表:
1.jQuery.extend(Object); // jQuery 本身的扩展方法
2.jQuery.fn.extend(Object); // jQuery 所选对象扩展方法
二、调用示例:
1.jQuery 本身的扩展方法实例如下:
jQuery.extend({ Meg: function (message) { alert(message); }, MegToo: function (messageToo) { alert(messageToo); } });
页面调用:jQuery.Meg("Hi,Stone");
其中Meg和MegToo为我的jQuery自定义扩展方法,多个扩展方法之间用英文逗号隔开。
2.jQuery 所选对象扩展方法有两种书写方式:
a)jQuery 所选对象扩展方法实例一如下:
jQuery.fn.extend({ ShowHtml: function (showhtml) { jQuery(this).html(showhtml); } });
页面调用:jQuery("#htmlDiv").ShowHtml("Stone,Hi!");
其中ShowHtml为我的jQuery所选对象的扩展方法,多个扩展方法之间用英文逗号隔开。
b)jQuery 所选对象扩展方法实例二代码如下:
(function (jq) { jq.fn.ShowHtmlToo = function (showhtml) { jQuery(this).html(showhtml); }; })(jQuery)
调用相同与方式一:jQuery("#htmlDiv").ShowHtmlToo("Stone,Hi!");
总结:
1、对象级别的插件开发
//形式一
(function($){ $.fn.extend({ foo3:function() { alert('对象级别插件extend方式1'); }, bar3:function() { alert('对象级别插件extend方式2'); } }) })(jQuery);
//形式二
(function($){ $.fn.foo4 = function() { alert('对象级别插件fn方式'); } })(jQuery);
//接收参数来控制插件的行为
(function($){ $.fn.bar4 = function(options) { var defaults = {aaa:'1',bbb:'2'}; var opts = $.extend(defaults, options); alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb); } })(jQuery);
//提供公有方法访问插件的配置项值
(function($){ $.fn.foo5 = function(options) { var opts = $.extend({}, $.fn.foo5.defaults, options); alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb); } $.fn.foo5.defaults = {aaa:'1',bbb:'2'}; })(jQuery);
//提供公有方法来访问插件中其他的方法
(function($){ $.fn.bar5 = function(options) { $.fn.bar5.alert(options); } $.fn.bar5.alert = function(params) { alert(params); } })(jQuery);
$(function(){ $('#test').foo3(); $('#test').bar3(); $('#test').foo4(); $('#test').bar4(); $('#test').bar4({aaa:'3'}); $('#test').bar4({aaa:'3',bbb:'4'}); $('#test').foo5(); $('#test').foo5({aaa:'5',bbb:'6'}); $('#test').bar5('aaaa'); });
2、类级别的插件开发
类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展:
//2.1定义一个全局函数
jQuery.foo = function() { alert('添加一个新的全局函数'); }
//定义多个全局函数
jQuery.bar = function() { alert('再增加一个全局函数'); }
//2.2使用extend定义全局函数
jQuery.extend({ foo1:function() { alert('extend 定义全局函数1'); }, bar1:function() { alert('extend 定义全局函数2'); } });
//2.3 使用命名空间定义函数
jQuery.plugin = { foo2:function() { alert('使用namespace定义函数'); } }
$(function(){ $.foo(); $.bar(); $.foo1(); $.bar1(); $.plugin.foo2(); });
jQuery扩展方法笔记的更多相关文章
- jquery扩展方法(表单数据格式化为json对象)
1.jquery扩展方法(表单数据格式化为json对象) <script type="text/javascript"> // 将表单数据序列化为一个json对象,例如 ...
- 使用jquery获取url及url参数的方法及定义JQuery扩展方法
1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识. 2.jquery获取 ...
- Jquery 扩展方法
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc() 那么你可以这样子:$("#div").abc(); 通常使 ...
- jquery扩展方法
jquery插件的开发包括两种:一种是类级别的插件开发,即给jquery添加新的全局函数,相当于给jquery类本身添加方法. jquery的全局函数就是属于jquery命名空间的函数,另一种是对象级 ...
- Jquery 扩展方法实现原理
JSONP原理 首先:JSON和JSONP是不一样的概念. JSON是一种数据交换格式,而JSONP是非正式传输协议. 该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回 ...
- jquery源码解析:jQuery扩展方法extend的详解
jQuery中要扩展方法或者属性都是通过extend方法实现的.所谓的jQuery插件也是通过extend方法实现的. jQuery.extend扩展的是工具方法,也就是静态方法.jQuery.fn. ...
- jquery扩展方法案例
-----------------扩展方法: $.extend({ "max": function (a, b) { if (a > b) return a; }, &quo ...
- (笔记)JQuery扩展方法实现Form表单与Json互相转换
JQuery笔记 记两段代码,使用JQuery实现从表单获取json与后端交互,以及把后端返回的json映射到表单相应的字段上. 把表单转换出json对象 //把表单转换出json对象 $.fn.to ...
- jQuery扩展方法 (插件机制)
jQuery.extend(object) 扩展jQuery对象本身. 用来在jQuery命名空间上增加新函数. 在jQuery命名空间上增加两个函数: <script> jQuery.e ...
随机推荐
- 使用Post方法模拟登陆爬取网页
最近弄爬虫,遇到的一个问题就是如何使用post方法模拟登陆爬取网页.下面是极简版的代码: import java.io.BufferedReader; import java.io.InputStre ...
- cas4.2.7与shiro进行整合
准备工作 cas单点登录开始前准备,请参考cas4.2.7实现单点登录. 与shiro进行整合 注:准备工作的基础上,对cas客户端进行如下改进. 引入相关jar包 shiro-cas-1.2.6.j ...
- 一天搞定CSS:BFC布局与普通文档流布局比较--15
BFC:Block Formatting Contexts–块级元素格式化上下文 1.BFC定义 它决定了块级元素如何对它的内容进行布局,以及与其它元素的关系和相互作用 关键词解释: 块级元素:父级( ...
- 一天搞定HTML----常用标签01
1.常用标签说明 2.其他类标签演示 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- mysql之 mysql 5.6不停机主主搭建(活跃双主基于日志点复制)
环境说明:版本 version 5.6.25-log 主库ip: 10.219.24.25从库ip:10.219.24.22os 版本: centos 6.7已安装热备软件:xtrabackup 防火 ...
- 一篇文章带你快速入门createjs
开始用createjs这个框架的时候,发现网上的相关教程还是挺少的,所以写一篇文章,方便日后查看. createjs简介 官网:http://www.createjs.cc/ createjs中包 ...
- Kubernetes部分Volume类型介绍及yaml示例
1.EmptyDir(本地数据卷) EmptyDir类型的volume创建于pod被调度到某个宿主机上的时候,而同一个pod内的容器都能读写EmptyDir中的同一个文件.一旦这个pod离开了这个宿主 ...
- 高考志愿填报:java 软件 程序员 目前的就业现状
大约在17年前,也就是2000年,学计算机专业的学生可以有大部分都进入本专业,并且就业非常容易.哪怕只会office套件,想找个工作也很简单.那时候学计算机就是最热门的行业. 那时候,搞Java的还是 ...
- 去掉CI框架默认url中的index.php
1:.htaccess //放置在根目录下,和入口文件index.php的同级目录<IfModule mod_rewrite.c>RewriteEngine onRewriteCond % ...
- 亲测有效!一种完美动态阈值白平衡算法 Java实现。
几年没发文了,重新拿起技术! 最近做图像处理,要自动处理颜色平衡问题,很多什么直方图优化之类的,都不完美.所以在博客园找到了这个前辈的文章. http://www.cnblogs.com/Images ...