一起来体味jQuery编程
jQuery类库在许多编程环境中会用到,本示例通过制作一个web网页,放置一个按钮,当点击(doclick)按钮时,修改(dochange)按钮显示文本值(value),并显示修改后的值,借以抛砖引玉。
在Visual Studio 2017中创建网站项目,引入 jQuery;
基于基于jQuery定义功能:
在HTML页面加入按钮:<input id="btnCallme" type="button" value="Click Me" />
一、定义基本的操作方法(doclick、dochange)
top.cobol = (function ($) {
"use strict";
var cobol = {
doclick: function () {
this.dochange();
},
dochange: function () {
alert($("#btnCallme").val("Changed!").val());
}
};
return cobol;
})(window.jQuery);
二、绑定基础方法到按钮事件(click)
var bootstrapx = function ($, cobol) {
"use strict";
var cme = {
init:function () {
this.bind();
},
bind: function () {
$("#btnCallme").on("click", function () {
return cobol.doclick();
});
}
};
cme.init();
};
三、实例化以加载定义
$(function () {
bootstrapx(jQuery,top.cobol)
});
也可以将此步骤自执行函数与步骤二的放在一起,如下:
(function ($, sunjet) {
"use strict";
var cme = {
init: function () {
this.bind();
},
bind: function () {
$("#btnCallme").on("click", function () {
return cobol.doclick();
});
}
};
$(function () {
cme.init();
});
})(window.jQuery, top.cobol);
扩展思考:
如果需要对cobol进行扩展,可以传入已经定义的cobol,通过jQuery的功能扩展实现,代码如下:
(function ($, cobol) {
"use strict";
$.extend(cobol, {
httpShowInfo: function (msg) {
alert(cobol.domerge(msg));
}
});
})(window.jQuery, top.cobol);
在HTML加入:
<input id="btnShowInfo" type="button" value="Do Merge" />
在bind方法中加入以下功能:
$("#btnShowInfo").on("click", function () {
return cobol.httpShowInfo("all thing");
});
扩展的形式有多种,可以扩展原有的自定义对象、对既有的jQuery对象扩展、将方法属性扩展到指定的命名空间:
(function ($, cobol) {
"use strict";
//扩展到 自定义的cobol对象
$.extend(cobol, {
httpGetInfo: function (msg) {
return cobol.domerge(msg);
}
});
//扩展到jQuery对象
$.fn.extend({
fnhttpShowInfo: function (msg) {
return msg + "from fnhttpShowInfo";
}
});
//在jQuery中创建net空间,并创建方法、属性
$.extend({ net: {} });
$.extend($.net, {
httpShowInfo: function (msg) {
return cobol.domerge(msg);
},
myMessage: "Message from myMessage properity",
EmbledMessage: { Name: 'Json', Address: 'Shanghai' }
},
{ Zip: '242000' }, { Zip: '241106' });
})(window.jQuery, top.cobol);
在bind方法中,注册的click事件中添加如下代码行:
$("#btnShowInfo").on("click", function () {
alert(cobol.httpGetInfo('extend function httpGetInfo in cobol object.'));
alert($.fn.fnhttpShowInfo('fnhttpShowInfo function in $.fn.extend.'));
alert($.net.httpShowInfo("$.extend net workspace function httpShowInfo"));
alert('$.extend net workspace properity:' + $.net.Zip);
alert('$.extend net workspace Embled properity merge:' + $.net.EmbledMessage.Name + " lived in " + $.net.EmbledMessage.Address);
alert($("#btnCallme").fnhttpShowInfo('jQuery selector(#btnCallme) call extend function:fnhttpShowInfo'));
});
以上代码,总体上基于jQuery定义与使用自定义功能。