jQuery插件开发jQuery.extend(object)和jQuery.fn.extend()
jQuery插件开发
知识1:用JQuery写插件时,最核心的方法有如下两个:
$.extend(object) 可以理解为JQuery 添加一个静态方法。
$.fn.extend(object) 可以理解为JQuery实例添加一个方法。
基本的定义与调用:
/* $.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun1: function () { alert("执行方法一"); } });
$.fun1();
/* $.fn.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun2: function () { alert("执行方法2"); } });
$(this).fun2();
//等同于
$.fn.fun3 = function () { alert("执行方法三"); }
$(this).fun3();
知识2:jQuery(function () { }); 与 (function ($) { })(jQuery);的区别:
jQuery(function () { });
//相当于
$(document).ready(function () { });
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
(function ($) { })(jQuery);
//相当于
var fn = function ($) { };
fn(jQuery);
jQuery(function () { });是某个DOM元素加载完毕后执行方法里的代码。
(function ($) { })(jQuery); 定义了一个匿名函数,其中jQuery代表这个匿名函数的实参。通常用在JQuery插件开发中,起到了定义插件的私有域的作用。
http://www.cnblogs.com/xcj26/p/3345556.html
1、类级别
类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法。
开发扩展其方法时使用$.extend方法,即jQuery.extend(object);
代码如下:
$.extend({ add:function(a,b){return a+b;} , minus:function(a,b){return a-b;}
});
页面调用如下
var i = $.add(,);
var j = $.minus(,);
2、对象级别
要处理DOM元素以及将插件更好地运用于所选择的元素身上,还是需要通过$.fn 向jQuery添加新的方法
对象级别则可以理解为基于对象的拓展,如$("#table").changeColor(...); 这里这个changeColor呢,就是基于对象的拓展了。
开发扩展其方法时使用$.fn.extend方法,即jQuery.fn.extend(object);
代码如下:
$.fn.extend({
check:function(){
return this.each({
this.checked=true;
});
},
uncheck:function(){
return this.each({
this.checked=false;
});
}
});
页面调用如下:
$('input[type=checkbox]').check();
$('input[type=checkbox]').uncheck();
3、扩展
代码如下:
$.xy = {
add:function(a,b){return a+b;} ,
minus:function(a,b){return a-b;},
voidMethod:function(){ alert("void"); }
};
var i = $.xy.add(,);
var m = $.xy.minus(,);
$.xy.voidMethod();
具体应用见\Public\src\fb\m\loveBao\js\detial.js
提示:当我们研究大牛的代码的时候,前面经常看到有“;”,那是为了避免代码合并等不必要的错误。
var testFunction=function(){ }
(function(){ })()
由于testFunction()这个函数后面没有加分号,导致代码出错,为了避免这类情况的发生,通常这么写!
;(function(){ })()
例如,有些朋友为了避免jquery和zeptojs冲突,将jquery的前缀“$”,修改为“jQuery”,还有些朋友将默认的document等方法修改。为了让你的插件在这些东西修了了的情况下照常运行,那么我们的做法是,把代码包裹在如下里面:
;(function($,window,document,undefined){
//我们的代码。。
})(jQuery,window,document);
JQ插件标准的封装---闭包
<script type="text/javascript">
(function ($) {
//这里放入插件代码
})(jQuery);
</script>
这是jQuery官方的插件开发规范,这样写是作用是:
1. 避免全局依赖。
2. 避免第三方破坏。
3. 兼容jQuery操作符’$’和’jQuery’
这段代码在被解析时会形同如下代码:
var jq = function($) {
// Code goes here
};
jq(jQuery);
jQuery插件开发jQuery.extend(object)和jQuery.fn.extend()的更多相关文章
- jQuery插件开发的两种方法及$.fn.extend的详解(转)
jQuery插件开发的两种方法及$.fn.extend的详解 jQuery插件开发分为两种:1 类级别.2 对象级别,下面为大家详细介绍下 jQuery插件开发分为两种: 1 类级别 类级别你可以 ...
- jQuery插件开发的两种方法及$.fn.extend的详解
jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.ex ...
- $.extend() 或 jQuery.extend() 与 $.fn.Xxx 或 jQuery.fn.extend(object) 之jQuery插件开发
jQuery为开发插件提拱了两个方法 语法现象1:$.extend() 或 jQuery.extend() 或 jQuery.extend(object)//可以理解为为jQuery类添加类方法或静态 ...
- Jquery.extend()和jQuery.fn.extend(object);
摘自: jquery $.fn $.fx是什么意思有什么用_jquery_脚本之家 jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.ex ...
- Jquery自定义插件之$.extend()、$.fn和$.fn.extend()
jquery插件的种类: 1.对象级别的插件开发,即给jQuery对象添加方法,封装对象方法的插件,如:parent().appendTo() 2.一种是类级别的插件开发,即给jQuery添加新的全局 ...
- jQuery原生框架中的jQuery.fn.extend和jQuery.extend
extend 方法在 jQuery 中是一个很重要的方法,jQuey 内部用它来扩展静态方法或实例方法,而且我们开发 jQuery 插件开发的时候也会用到它.但是在内部,是存在 jQuery.fn.e ...
- JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)
一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...
- jquery.fn.extend与jquery.extend--(初体验二)
1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jquery.fn.extend(object);给jQuery对象添加方法. $.extend({ a ...
- jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
随机推荐
- 网络运维必回的模拟器-GNS软件下载和安装
网络运维必回的模拟器-GNS软件下载和安装 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.GNS简介 1>.什么是GNS GNS3是一款具有图形化界面可以运行在多平台( ...
- Linux top、VIRT、RES、SHR、SWAP(S)、DATA Memory Parameters Detailed
catalog . Linux TOP指令 . VIRT -- Virtual Image (KB) . RES -- Resident size (KB) . SHR -- Shared Memor ...
- Redis之主从复制
定义:主机数据更新后根据配置策略,自动同步到备的Master/slave机制,Master以写为主,Slave以读为主. Tip:配从(从库)不配主(主库) 1.从库配置: slave of 主库IP ...
- Hadoop记录-hdfs转载
Hadoop 存档 每个文件均按块存储,每个块的元数据存储在namenode的内存中,因此hadoop存储小文件会非常低效.因为大量的小文件会耗尽namenode中的大部分内存.但注意,存储小文件所需 ...
- hdu 6418(石头剪刀布 **)
题意是说双方各有剪刀,石头和布的卡片各 a,b,c,a‘,b',c' 张,对方是随机选择,问我方的最大预期得分. 这道题目一开始看到的时候感觉没有头绪,再次读题,发现题目说结果可能是分数,如果是分数的 ...
- Python正则匹配之有名分组
参考:http://www.cnblogs.com/huxi/archive/2010/07/04/1771073.html # re.match import re m = re.match(r'( ...
- spring拦截器中修改响应消息头
问题描述 前后端分离的项目,前端使用Vue,后端使用Spring MVC. 显然,需要解决浏览器跨域访问数据限制的问题,在此使用CROS协议解决. 由于该项目我在中期加入的,主要负责集成shiro框架 ...
- Sqlserver远程过程调用失败
这种情况一般是由于有高版本的SqlServer导致的,网上有删除Loaldb之类的建议,这样其实不太好,回头用高版本数据库的话还得装回来.其实可以通过计算机管理->服务和应用程序进行设置,用下面 ...
- 【十一】jvm 性能调优工具之 jmap
jvm 性能调优工具之 jmap 概述 命令jmap是一个多功能的命令.它可以生成 java 程序的 dump 文件, 也可以查看堆内对象示例的统计信息.查看 ClassLoader 的信息以及 fi ...
- DevExpress Winform 常用控件
Ø 前言 DevExpress 控件的功能比较强大,是全球知名控件开发公司,对于开发 B/S 或 C/S 都非常出色,可以实现很炫且功能强大的效果. DevExpress Winform 常用控件是 ...