插件的理解$.extend()与$.fn.extend()
插件的理解。$.extend()与$.fn.extend()
插件开发包括两种:1.类级别的插件开发,即$.extend()扩展jquery对象本身;2.对象级别的插件开发,即$.fn.extend()扩展jquery元素集来提供新的方法。
1.类级别的插件开发
1.(function($){
$.extend({
hello:function(){alert("hello world");},
world:function(){alert(hello world);}
})
})(jQuery)
调用:$.hello(),$.world()
2.采用命名空间
(function($){
$.myExtend({
hello:function(){alert("hello world");},
world:function(){alert(hello world);}
})
})(jQuery)
调用:$.myExtend.hello(),$.myExtend.world()
2.对象级别的插件开发
1.(function($){
$.fn.extend({
myAnimate:function(){}
})
})(jQuery)
调用:$("#myAnimate").myAnimate()
2.(function($){
$.fn.myAnimate=function(){}
})(jQuery)
调用:$("#myAnimate").myAnimate()
3.$.extend()有两种用法
一种是扩展方法,如上述所示。
另一种是合并对象获得一个新的对象,$([deep],target,options,defaluts,...),
例如:
var settings={validate:false,limit:5,name:"sm"};
var defaults={validate:true,limit:2}
var settings=$.extend(settings,defaults);
结果:settings={validate:true,limit:2,name:"sm"}
var empty={};
var options={validate:false,limit:5,name:"sm"};
var defaults={validate:true,limit:2}
var settings=$.extend(empty,options,defaults);
结果:settings={validate:true,limit:2,name:"sm"};
deep可以为ture或false
var result={true,{},name:"a",num:3,location:{city:"H",county:"A"},location:{state:"D",county:"CH"}}
结果:result={name:"a",num:3,location:{city:"H",state:"D",county:"CH"}}
var result={false,{},name:"a",num:3,location:{city:"H",county:"A"},location:{state:"D",county:"CH"}}
结果:result={name:"a",num:3,location:{state:"D",county:"CH"}}
4.匿名函数(最大的用途是创建闭包)
例如:(function($){})(jQuery)等价于!function(){}(jQuery)<这个用在bootstrp框架中>
5.回到顶部的例子
(function($){
$.extend({
myScrollUp:function(options){
var defaults={
scrollName:"scrollUp",
topDistance:"300",
topSpeed:300,
animation:"slide",
animationInSpeed:200,
animationOutSpeed:200,
scrollText:"回到顶部",
activeOverlay:false
}
var defaults=$.extend(defaults,options);
var sn="#"+defaults.scrollName,
td=defaults.topDistance,
ts=defaults.topSpeed,
an=defaults.animation,
is=defaults.animationInSpeed,
os=defaults.animationOutSpeed,
st=defaults.scrollText,
ao=defaults.activeOverlay;
$("<a/>",{id:defaults.scrollName,title:st,text:st,herf:"#top"}).appendTo("body");
$(sn).css({"position":"fixed","display":"none","z-index":"123456789"});
if(ao)
{
$("body").append("<div id='"+defaults.scrollName+"-active'></div>");
$(sn+"-active").css({"position":"absolute","top":td+"px","width":"100%","border-top":"1px dotted "+ao,"z-index":"2147483647"})
}
$(window).scroll(function(){
if(an==="fade")
$($(window).scrollTop()>td?$(sn).fadeIn(is):$(sn).fadeOut(os));
else if(an==="slide")
$($(window).scrollTop()>td?$(sn).slideDown(is):$(sn).slideUp(os));
else
$($(window).scrollTop()>td?$(sn).show():$(sn).hide());
});
$(sn).click(function(event){
$("html, body").animate({scrollTop:0},ts);
return false
})
}
})
})(jQuery);
插件的理解$.extend()与$.fn.extend()的更多相关文章
- jQuery extend() & jQuery.fn.extend(),插件编写
资料来源:网上资料整理并自行改编测试.复制以下代码并依赖jquery.js,jquery.validate.js即可执行.有误之处,请@我啊,敬请赐教. <!DOCTYPE html PUBLI ...
- jQuery开发自定义插件 $.extend()与$.fn.extend()
jQuery extend()和jQuery.fn.extend() jQuery提供两个用于封装扩展的方法: 1.$.extend(); 扩展jQuery类方法,即jQuery全局方法 (在全局可直 ...
- jQuery的extend和fn.extend理解
参考网址:http://www.cnblogs.com/yuanyuan/archive/2011/02/23/1963287.html http://www.cnblogs.com/xuxiuyu/ ...
- $.extend()和$.fn.extend()用法和区别
$.extend()和$.fn.extend()用法和区别: 在自己制作插件的时候会经常用到$.extend()和$.fn.extend()两个函数,无论从外观还是作用都非常的类似,但是实际上它们的区 ...
- $.extend(),与$.fn.extend() 讲解
$.extend(),与$.fn.extend() 讲解(一) (2013-07-11 10:24:31) 转载▼ 转自:http://blog.sina.com.cn/s/blog_a3bd3bd0 ...
- jQuery.fn和jQuery.prototype jquery.extend() jquery.fn.extend()区别介绍
这里的 jQuery , jQuery.fn , jQuery,fn,init ,jQuery,prototype 都代表什么. 来看下jQuery的源码是怎么样定义的: (function( win ...
- jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别
jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...
- 理解jQuery的$.extend与$.fn.extend
https://www.cnblogs.com/xuxiuyu/p/5989743.html 上面这篇博客总结的很棒!!,以下对自己的认识做一个总结 <!DOCTYPE html> < ...
- $.extend与$.fn.extend()
很多情况下,用户需要对jQuery插件进行二次开发,那么我们来看看JQ原开发者为我们提供的两种扩展插件的方式如下: 1.类别类:相当于为jquery扩展一个类,比如现在我要扩展一个简单的想加的功能函数 ...
随机推荐
- jsonp跨域请求学习笔记
前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可以使用ajax实现前端的优化.( ...
- Jetty开发(2)
部署web应用 配置了部署模块的Jetty服务器实例能够在webapps目录下热部署web应用.在webapps目录下标准的War包和jetty的配置文件能够被热部署进服务器需要符合下述规则: exa ...
- 模拟Hibernate动态生成SQL语句
这里有一个xml配置文件,也就是Hibernate框架中会用到的POJO和数据库的映射文件 <?xml version="1.0" encoding="utf-8& ...
- 遗传算法matlab实现
我是小鸭酱,博客地址为:http://www.cnblogs.com/xiaoyajiang 以下运用MATLAB实现遗传算法: clc clear %参数 a = 0 ; b = 4 ; e ...
- ububtu 彻底卸载程序的几种方法
sudo apt-get purge ......(点点为为程序名称) sudo apt-get autoremove sudo apt-get clean dpkg -l |grep ^rc|awk ...
- Codeforces 204A Little Elephant and Interval
http://codeforces.com/problemset/problem/204/A 题意:给定一个[L,R]区间,求这个区间里面首位和末尾相同的数字有多少个 思路:考虑这个问题满足区间加减, ...
- c# splitter控件使用简介
摘自:http://blog.itpub.net/26221264/viewspace-735903 1.先在窗体上放置部分一的控件,这里是TreeView控件,然后把它的 Dock 属性设置为 Le ...
- 基数---SQL Server 2008 Bible
关系类型 主要实体的键 次要实体的键 一对一 主要实体-主键-单个元组 主要实体-主键-单个元组 一对多 主要实体-主键-单个元组 次要实体-外键-多个元组 多对多 多个元组 多个元组
- 简单拨号器(Android)
感受: 1.了解了intent中的action和Uri. 2.了解了向下一个活动传递数据. 3.了解了内容提供器. 4.了解自定义适配器. 4.其实T9拨号器和简单计算器原理一样.
- 人人必知的10个jQuery小技巧
收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. // Back t ...