13518219792
在使用Jquery开发的过程中，extend是常用的参数处理函数，特别是对默认值的使用。
专业从事企业网站建设和网站设计服务，包括网站建设、申请域名、网页空间、企业邮箱、微信公众号开发、微信支付宝小程序设计、app软件开发、软件开发、等服务。公司始终通过不懈的努力和以更高的目标来要求自己,在不断完善自身管理模式和提高技术研发能力的同时，大力倡导推行新经济品牌战略，促进互联网事业的发展。
Jquery的扩展方法原型是:
var v=$.extend(dest,src1,src2,[,src3...]);
作用是把src1,src2,src3合并到到dest中并返回合并后的dest.
但是在使用过程中，默认值往往是不能被改变的，
如下：
var defaut={'selector':'select','default':'默认值','backcolor':'#85e137','forecolor':'#000'};
var src={'selector':'ss','default':'笑话','backcolor':'#fff','forecolor':'red'};
如果我们使用
var v=$.extend(dfault,src);
来进行参数的处理，那么下一次处理的时候默认值就是这次处理之后的值而不是真实的默认值了。
我们可以用下面的代码：
var v=$.extend({},dfault,src);
即我们使用一个空的对象作为目标参数(default)，将默认参数作为第一次源参数(src),这样同样是返回了合并后的参数，但是我们的default没有被改变，还可以再次使用！
这样就实现了默认值保持不变的效果了!
1.通过FUNCTION的方式
jquery获取url参数比较复杂，要用到正则表达式，所以学好javascript正则式多么重要的事情，首先看看单纯的通过javascript是如何来获取url中的某个参数。
function getUrlParam(name) {
//构造一个含有目标参数的正则表达式对象
var reg = new RegExp("(^|)" name "=([^]*)(|$)");
//匹配目标参数
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
} else {
//返回参数值
return "";
}}
通过这个函数传递url中的参数名就可以获取到参数的值。
getUrlParam(´cid´);
2.JQUERY封装的方式
明白了 Javascript 获取 url 参数的方法，我们可以通过这个方法为 jQuery 扩展一个方法来通过 jQuery 获取 url 参数，下面的代码为 jQuery 扩展了一个 getUrlParam() 方法.
(function($){
$.getUrlParam = function(name){
var reg = new RegExp("(^|)" name "=([^]*)(|$)");
var r = window.location.search.substr(1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}})(jQuery);
为 jQuery 扩展了这个方法了之后我们就可以通过如下方法来获取某个参数的值了，代码如下:
$.getUrlParam(´cid´);
理解$.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中加入元素
})
参考：
