jquery限定文本框只能输入数字
jquery限定文本框只能输入数字,兼容IE、chrome、FF(表现结果不一样),示例代码以下:
$("input").keyup(function(){ //keyup事宜处置惩罚
$(this).val($(this).val().replace(/\D|^0/g,''));
}).bind("paste",function(){ //CTR+V事宜处置惩罚
$(this).val($(this).val().replace(/\D|^0/g,''));
}).css("ime-mode", "disabled"); //CSS设置输入法不可用
上面的代码的作用是:只能输入大于0的正整数。
$("#rnumber").keyup(function(){
$(this).val($(this).val().replace(/[^0-9.]/g,''));
}).bind("paste",function(){ //CTR+V事宜处置惩罚
$(this).val($(this).val().replace(/[^0-9.]/g,''));
}).css("ime-mode", "disabled"); //CSS设置输入法不可用
上面代码的作用是:只能输入0-9的数字和小数点。
封装DOMContentLoaded事宜
//保留domReady的事宜行列
eventQueue = [];
//推断DOM是不是加载终了
isReady = false;
//推断DOMReady是不是绑定
isBind = false;
/*实行domReady()
*
*@param {function}
*@execute 将事宜处置惩罚顺序压入事宜行列,并绑定DOMContentLoaded
* 假如DOM加载已完成,则马上实行
*@caller
*/
function domReady(fn){
if (isReady) {
fn.call(window);
}
else{
eventQueue.push(fn);
};
bindReady();
};
/*domReady事宜绑定
*
*@param null
*@execute 当代浏览器经由过程addEvListener绑定DOMContentLoaded,包含ie9+
ie6-8经由过程推断doScroll推断DOM是不是加载终了
*@caller 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是不是加载完成
*
*@param null
*@execute doScroll推断DOM是不是加载完成
*@caller bindReady()
*/
function doScroll(){
try{
document.documentElement.doScroll('left');
}
catch(error){
return setTimeout(doScroll,20);
};
execFn();
};
/*实行事宜行列
*
*@param null
*@execute 轮回实行行列中的事宜处置惩罚顺序
*@caller 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对象。这对我们来讲不难,封装成一个函数。
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 ajax = function(conf) {
// 初始化
//type参数,可选
var type = conf.type;
//url参数,必填
var url = conf.url;
//data参数可选,只要在post要求时须要
var data = conf.data;
//datatype参数可选
var dataType = conf.dataType;
//回调函数可选
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+")"));
}
}
}
};
};
末了,申明一下此函数的用法。
ajax({
type:"post",
url:"test.jsp",
data:"name=dipoo&info=good",
dataType:"json",
success:function(data){
alert(data.name);
}
});
跨域要求之JSONP
/**
* JavaScript JSONP Library v0.3
* Copyright (c) 2011 snandy
* Blog: http://www.cnblogs.com/snandy
* QQ群: 34580561
* Date: 2011-04-26
*
* 增加对要求失利的处置惩罚,虽然这个功用用途不太大,但研讨了各个浏览器下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事宜,毛病回调几乎是很难完成的。也是最有技术含量的。
* 参考了http://stackoverflow.com/questions/3483919/script-onload-onerror-with-iefor-lazy-loading-problems
* 运用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<len;i++){
a.push(key + '=' + encodeURIComponent(val[i]));
}
}else{
a.push(key + '=' + encodeURIComponent(val));
}
}
return a.join('&');
}
function request(url,opt){
function fn(){}
var opt = opt || {},
data = opt.data,
success = opt.success || fn,
failure = opt.failure || fn,
scope = opt.scope || win,
timestamp = opt.timestamp;
if(data && typeof data == 'object'){
data = _serialize(data);
}
var script = doc.createElement('script');
function callback(isSucc){
if(isSucc){
if(typeof jsonp != 'undefined'){// 赋值右侧的jsonp必需是背景返回的,此变量为全局变量
done = true;
success.call(scope, jsonp);
}else{
failure.call(scope);
//alert('warning: jsonp did not return.');
}
}else{
failure.call(scope);
}
// Handle memory leak in IE
script.onload = script.onerror = script.onreadystatechange = null;
jsonp = undefined;
if( head && script.parentNode ){
head.removeChild(script);
}
}
function fixOnerror(){
setTimeout(function(){
if(!done){
callback();
}
}, timeout);
}
if(ie678){
script.onreadystatechange = function(){
var readyState = this.readyState;
if(!done && (readyState == 'loaded' || readyState == 'complete')){
callback(true);
}
}
//fixOnerror();
}else{
script.onload = function(){
callback(true);
}
script.onerror = function(){
callback();
}
if(opera){
fixOnerror();
}
}
if(data){
url += '?' + data;
}
if(timestamp){
if(data){
url += '&ts=';
}else{
url += '?ts='
}
url += (new Date).getTime();
}
script.src = url;
head.insertBefore(script, head.firstChild);
}
return {load:request};
}(this);
挪用体式格局以下:
Sjax.load('jsonp66.js', {
success : function(){alert(jsonp.name)},
failure : function(){alert('error');}
});
千分位格式化
function toThousands(num) {
var num = (num || 0).toString(), result = '';
while (num.length > 3) {
result = ',' + num.slice(-3) + result;
num = num.slice(0, num.length - 3);
}
if (num) { result = num + result; }
return result;
}
协助文档
Javascript封装DOMContentLoaded事宜
用原生JS对AJAX做简朴封装
跨域要求之JSONP 三 – snandy – 博客园
从千分位格式化谈JS机能优化