jquery限制文本框只能输入数字
jquery限制文本框只能输入数字,兼容IE、chrome、FF(表现效果不一样),示例代码如下:
代码如下:
上面的代码的作用是:只能输入大于0的正整数。
代码如下:
上面代码的作用是:只能输入0-9的数字和小数点。
封装DOMContentLoaded事件
代码如下:
{function}
将事件处理程序压入事件队列,并绑定DOMContentLoaded
* 如果DOM加载已经完成,则立即执行
*/
function domReady(fn){
if (isReady) {
fn.call(window);
}
else{
eventQueue.push(fn);
};
bindReady();
};
/*domReady事件绑定
*
null
现代浏览器通过addEvListener绑定DOMContentLoaded,包括ie9+
ie6-8通过判断doScroll判断DOM是否加载完毕
domReady()
*/
function bindReady(){
if (isReady) return;
if (isBind) return;
isBind = true;
if (window.addEventListener) {
document.addEventListener('DOMContentLoaded',execFn,false);
}
else if (window.attachEvent) {
doScroll();
};
};
/*doScroll判断ie6-8的DOM是否加载完成
*
null
doScroll判断DOM是否加载完成
bindReady()
*/
function doScroll(){
try{
document.documentElement.doScroll('left');
}
catch(error){
return setTimeout(doScroll,20);
};
execFn();
};
/*执行事件队列
*
null
循环执行队列中的事件处理程序
bindReady()
*/
function execFn(){
if (!isReady) {
isReady = true;
for (var i = 0; i < eventQueue.length; i++) {
eventQueue[i].call(window);
};
eventQueue = [];
};
};
//js文件1
domReady(function(){
});
//js文件2
domReady(function(){
});
//注意,如果是异步加载的js就不要绑定domReady方法,不然函数不会执行,
//因为异步加载的js下载之前,DOMContentLoaded已经触发,addEventListener执行时已经监听不到了
用原生JS对AJAX做简单封装
首先,我们需要xhr对象。这对我们来说不难,封装成一个函数。
代码如下:
4037">
var createAjax = function() {
var xhr = null;
try {
//IE系列浏览器
xhr = new ActiveXObject("microsoft.xmlhttp");
} catch (e1) {
try {
//非IE浏览器
xhr = new XMLHttpRequest();
} catch (e2) {
window.alert("您的浏览器不支持ajax,请更换!");
}
}
return xhr;
};
然后,我们来写核心函数。
代码如下:
函数可选
var success = conf.success;
if (type == null){
//type参数可选,默认为get
type = "get";
}
if (dataType == null){
//dataType参数可选,默认为text
dataType = "text";
}
// 创建ajax引擎对象
var xhr = createAjax();
// 打开
xhr.open(type,url,true);
// 发送
if (type == "GET" || type == "get") {
xhr.send(null);
} else if (type == "POST" || type == "post") {
xhr.setRequestHeader("content-type",
"application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if(dataType == "text"||dataType=="TEXT") {
if (success != null){
//普通文本
success(xhr.responseText);
}
}else if(dataType=="xml"||dataType=="XML") {
if (success != null){
//接收xml文档
success(xhr.responseXML);
}
}else if(dataType=="json"||dataType=="JSON") {
if (success != null){
//将json字符串转换为js对象
success(eval("("+xhr.responseText+")"));
}
}
}
};
};
代码如下:
",
data:"name=dipoo&info=good",
dataType:"json",
success:function(data){
alert(data.name);
}
});
跨域请求之JSONP
代码如下:
增加对请求失败的处理,虽然这个功能用处不太大,但研究了各个浏览器下script的差异性
* 1,IE6/7/8 支持script的onreadystatechange事件
* 2,IE9/10 支持script的onload和onreadystatechange事件
* 3,Firefox/Safari/Chrome/Opera支持script的onload事件
* 4,IE6/7/8/Opera 不支持script的onerror事件; IE9/10/Firefox/Safari/Chrome支持
* 5,Opera虽然不支持onreadystatechange事件,但其具有readyState属性.这点甚是神奇
* 6,用IE9和IETester测试IE6/7/8,其readyState总为loading,loaded。没出现过complete。
*
* 最后的实现思路:
* 1,IE9/Firefox/Safari/Chrome 成功回调使用onload事件,错误回调使用onerror事件
* 2,Opera 成功回调也使用onload事件(它压根不支持onreadystatechange),由于其不支持onerror,这里使用了延迟处理。
* 即等待与成功回调success,success后标志位done置为true。failure则不会执行,否则执行。
* 这里延迟的时间取值很有技巧,之前取2秒,在公司测试没问题。但回家用3G无线网络后发现即使所引用的js文件存在,但由于
* 网速过慢,failure还是先执行了,后执行了success。所以这里取5秒是比较合理的。当然也不是绝对的。
* 3,IE6/7/8 成功回调使用onreadystatechange事件,错误回调几乎是很难实现的。也是最有技术含量的。
* 参考了
* 使用nextSibling,发现不能实现。
* 令人恶心的是,即使请求的资源文件不存在。它的readyState也会经历“loaded”状态。这样你就没法区分请求成功或失败。
* 怕它了,最后使用前后台一起协调的机制解决最后的这个难题。无论请求成功或失败都让其调用callback(true)。
* 此时已经将区别成功与失败的逻辑放到了callback中,如果后台没有返回jsonp则调用failure,否则调用success。
*
*
* 接口
* Sjax.load(url,{
* data // 请求参数 (键值对字符串或js对象)
* success // 请求成功回调函数
* failure // 请求失败回调函数
* scope // 回调函数执行上下文
* timestamp // 是否加时间戳
* });
*
*/
Sjax =
function(win){
var ie678 = !-[1,],
opera = win.opera,
doc = win.document,
head = doc.getElementsByTagName('head')[0],
timeout = 3000,
done = false;
function _serialize(obj){
var a = [],key,val;
for(key in obj){
val = obj[key];
if(val.constructor == Array){
for(var i=0,len=val.length;i
调用方式如下:
代码如下: