$.extend、$.fn.extend
$.extend
1、扩展jQuery静态方法.
$.extend({
myFun:function(){alert('test函数')}
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
$.myFun();
$.min(2,3); // 2
$.max(4,5); // 5
2、合并多个对象.
var newcss = jquery.extend(css1,css2) //newcss就是合并的新对象。
var newcss = jquery.extend({},css1,css2) //newcss就是合并的新对象.而且没有破坏css1的结构。 //用法: jQuery.extend(obj1,obj2,obj3, ..)
var Css1={size: "10px",style: "oblique"}
var Css2={size: "12px",style: "oblique",weight: "bolder"}
$.jQuery.extend(Css1,Css2)
//结果: Css1 = {size: "12px",style: "oblique",weight: "bolder"}
3、深度镶套对象
新的extend()允许你更深度的合并镶套对象
// 以前的 .extend()
jQuery.extend(
{ name: “John”, location: { city: “Boston” } }, { last: “Resig”, location: { state: “MA” } }
);
//结果:{ name: “John”, last: “Resig”, location: { state: “MA” } }
// 新的更深入的 .extend()
jQuery.extend(
true,
{ name: “John”, location: { city: “Boston”, country:”USA”} },
{ last: “Smith”, location: { state: “MA”, country:”china”} }
);
//结果 { name:“John”, last:“Smith”, location:{city:“Boston”, state:“MA”, country:”china” }}
$.fn.extend(object);
$.fn是指jQuery的命名空间,fn上的成员(方法function及属性property),会对jQuery实例每一个有效。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
};
原来 jQuery.fn = jQuery.prototype.
所以,它是对jQuery.prototype进一步得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert当前编辑框里的内容
$.fn.extend({
doAlertWhileClick:function() {
$(this).click(function(){
alert($(this).val());
});
}
});
$("#input1").doAlertWhileClick(); // 页面上为:
//$("#input1") 为一个jQuery实例,当它调用成员方法 doAlertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。
区别:
1、两者调用方式不同:
jQuery.extend()一般由传入的全局函数来调用,主要用来拓展全局函数,如$.init()、$.ajax();
jQuery.fn.extend()一般由具体的实例对象来调用,可用来拓展个选择器,例如$.fn.each();
2、两者的主要功能作用不同:
jQuery.extend(object); 为扩展jQuery类本身,为自身添加新的方法。jQuery.fn.extend(object);给jQuery对象添加方法
3、大部分插件都是用jQuery.fn.extend()
随机推荐
- [leetcode]64Minimum Path Sum 动态规划
/** * Given a m x n grid filled with non-negative numbers, * find a path from top left to bottom rig ...
- 解决qt程序运行时的cannot create Qt for Embedded Linux data directory: /tmp/qtembedded-0
方法1: 1.mkdir /tmp 2.挂载 mount -t tmpfs -o size=32m none /tmp 方法2: 上面的user 0h说明你是以root用户的身份运行.可以尝试切换一下 ...
- css 自定义悬浮窗写法
HTML: css(sass): 复制代码 .info { } &:hover::after { content: attr(data-title); display: inline-bloc ...
- 24位PCM采样数据转成16位算法,已实现PCM转WAV在线工具源码支持24bits、16bits、8bits
目录 算法来源 js版24位PCM转8位.16位代码 js版8位.16位PCM转成24位 附:浏览器控制台下载数据文件代码 相关实现 最近收到几个24位的PCM录音源文件,Recoder库原有的PCM ...
- ASP.Net中的TreeView控件中对节点的上移和下移操作
Web中的TreeView中的没有PreNode和NextNode属性. 但它的集合属性中有一个IndexOf属性,从而能够找到它的前一个节点知后一个节点. TreeView中要么只有一个根节点:要么 ...
- 【C++】《Effective C++》第六章
第六章 继承与面向对象设计 条款32:确定你的public继承塑模出is-a关系 public隐含的寓意:每个派生类对象同时也是一个基类对象,反之不成立.只不过基类比派生类表现出更一般化的概念,派生类 ...
- 通过写n本书的积累,我似乎找到了写好技术文章的方法(回复送我写的python股票电子书)
我写的书不算少,写的博文就更多了,但大多数书的销量也就一般,而我写的技术文章里,虽然也有点击过万的,但不少点击量也就只有三位数. 通过不断反思,也通过对比了一些畅销书和顶流文章,我似乎找到了一些原因, ...
- 在阿里云托管的k8s上使用nas做动态存储
前言 关于aliyun托管k8s的存储插件主要有两种: CSI # kubectl get pod -n kube-system | grep csi-plugin csi-plugin-8bbnw ...
- zabbix 监控tomcat
zabbix 监控tomcat server端rpm -ivh jdk-8u20-linux-x64.rpmvi /etc/profileJAVA_HOME=/usr/java/jdk1.8.0_20 ...
- 两万字长文总结,梳理 Java 入门进阶那些事
大家好,我是程序员小跃,一名在职场已经写了6年程序的老程序员,从一开始的菊厂 Android 开发到现在某游戏公司的Java后端架构,对Java还是相对了解的挺多. 大概是半年前吧,在知乎上有个知友私 ...