JQuery添加扩展方法(理解$.extend(),与$.fn.extend()方法区别)
为什么80%的码农都做不了架构师?>>>
理解$.extend(),与$.fn.extend()方法区别
1.$.extend()方法
$.extend()方法在JQuery中有两个用法,第一次是扩展方法,
第二个方法是
jQuery.extend([deep], target, object1, [objectN])
返回值:Object
把2个对象合并得到新的target,deep是可选的(递归合并)
合并 settings 和 options,修改并返回 settings。
jQuery 代码:
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
结果:
settings == { validate: true, limit: 5, name: "bar" }
描述:
合并 defaults 和 options, 不修改 defaults。
jQuery 代码:
var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);
结果:
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }
2中扩展:
第一种,看代码
$(function(){
jQuery.extend({
modalshow:function (options) {
var defaults = {
triggerID:'LoginShow',
callback:function () { }
}<br> //这里是$.extend的第二种用法<br> var opts = $.extend({},defaults, options);
if ($("#" + opts.triggerID)[0] ==null) {
var $triggerBTN = $('<input type="button" value="LoginShow" id=' + opts.triggerID +'/>');
$triggerBTN.bind("click",function () {
alert(opts.triggerID);
});
$("body").append($triggerBTN);
}else {
$("#" + opts.triggerID).bind("click",function () {
alert(opts.triggerID);
})
}
}
});
$.modalshow();//这里是调用的地方,id为'loginshow'的button可以先不再HTML中添加可以自动生成
})
|
第二种扩展
$(function(){
jQuery.fn.extend({
modalshow:function (options) {
var defaults = {
//这里的this是JQuery对象
triggerID:this.attr("id"),
callback:function () { }
}<br> //这里是$.extend的第二种用法<br> var opts = $.extend(defaults, options);
$("#" + opts.triggerID).bind("click",function () {
alert(opts.triggerID);
})
}
});
$("#loginShow").modalshow();//这里是调用的地方,这里需要先在HTML中加入元素
})
|
转载于:https://my.oschina.net/goto/blog/95281
JQuery添加扩展方法(理解$.extend(),与$.fn.extend()方法区别)相关推荐
- jQuery扩展---$.extend和$.fn.extend
2019独角兽企业重金招聘Python工程师标准>>> 一.jQuery.extend (function($){$.extend({static:function(){consol ...
- jQuery插件开发中$.extend和$.fn.extend辨析
jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery. ...
- $.extend()和$.fn.extend()
jQuery.extend():把两个或者更多的对象合并到第一个当中: jQuery.fn.extend():把对象挂载到jQuery的prototype属性,来扩展一个新的jQuery实例方法. 两 ...
- jquery的$.extend和$.fn.extend作用及区别(—)
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便. ...
- jquery的$.extend、$.fn.extend、 jQuery.extend( target, object1, [objectN])作用及区别
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend();jQuery.extend(); 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便. j ...
- jquery的extend和fn.extend
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展j ...
- 理解jquery的$.extend()、$.fn和$.fn.extend()
jQuery为开发插件提拱了两个方法,分别是:· jQuery.fn.extend();或者$.fn.extend jQuery.extend();或者$.extend jQuery.fn ($.fn ...
- jQuery(2) jquery的动画,jquery的ajax,Ajax的全局函数,Jquery的多库共存,Jquery的扩展
文章目录 jQuery(2) jquery的动画(封装了许多的动画方法) 淡入淡出 fadeIn 淡入(display:none) fadeOut 淡出 显示隐藏 show(针对隐藏的元素 displ ...
- [jQuery] 你有写过jQuery的扩展吗?都有哪些写法?
[jQuery] 你有写过jQuery的扩展吗?都有哪些写法? jQuery扩展语法把扩展的内容就可以写到xxxx.js文件了,在主文件中直接导入就行了.用法1.$.xxx()$.extend({&q ...
最新文章
- is_uploaded_file函数引发的问题
- 了解ViewConfiguration
- openJDK与JDK的区别
- 【django轻量级框架】一个Github用户检索信息网站(解析和代码)
- java 正则 子字符串_使用Java正则表达式来查找另一个子字符串中的子字符串
- 向量余弦值python_向量/矩阵的余弦值打印(元素明智的操作) 使用Python的线性代数
- windows内核情景分析---进程线程1
- 分享Silverlight/WPF/Windows Phone一周学习导读(12月20日-12月26日)
- Java多线程学习二十一:ConcurrentHashMap 在 Java7 和 8 有何不同
- 【PL/SQL】用星号拼出金字塔
- 2.5亿!华为成立新公司!
- class反编译软件,超级好用
- 双足机器人的稳定性判据_仿人双足机器人步态规划——零力矩点(ZMP)
- 谷歌AI版“你画我猜”刷屏朋友圈 背后是这样的原理!
- math四舍五入 java_使用Math.cei将Java四舍五入到int
- python在idle中输入多行_pythonidle中多行输入
- 《奋斗》中徐志森的生意经
- JAVA面向对象(OOP)-类和对象
- ECDSA (Elliptic Curve Digital Signature Algorithm)
- Python123:测验1: Python基本语法元素 (第1周)
热门文章
- jsoup 标准化html代码,Jsoup从元素抽取属性,文本和HTML
- wpf 放大缩小界面_调整电脑屏幕文本文字显示大小,系统设置放大缩小DPI图文教程...
- html js 添加数据类型,js数据类型判断和转换
- ppt讲解中的过渡_PPT教程:缩放定位功能详解
- matlab中jet的例子,Python matplotlib.pyplot.jet()用法及代码示例
- Linux下的主辅DNS服务器同步
- java math round小数_Java Math round() 使用方法及示例
- android字体行距,android textview设置字体的行距和字间距
- gstreamer 获取帧数据_Android App卡顿率(顺滑度、顺滑度)并整理数据
- 单片机指令周期、机器周期、状态周期、时钟周期