JavaScript常用脚本汇总（一）
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
*/
functiondomReady(fn){
if(isReady){
fn.call(window);
}
else{
eventQueue.push(fn);
};
bindReady();
};
/*domReady事件绑定
*
*@param null
*@execute 现代浏览器通过addEvListener绑定DOMContentLoaded,包括ie9+
ie6-8通过判断doScroll判断DOM是否加载完毕
*@caller domReady()
*/
functionbindReady(){
if(isReady)return;
if(isBind)return;
isBind=true;
if(window.addEventListener){
document.addEventListener('DOMContentLoaded',execFn,false);
}
elseif(window.attachEvent){
doScroll();
};
};
/*doScroll判断ie6-8的DOM是否加载完成
*
*@param null
*@execute doScroll判断DOM是否加载完成
*@caller bindReady()
*/
functiondoScroll(){
try{
document.documentElement.doScroll('left');
}
catch(error){
returnsetTimeout(doScroll,20);
};
execFn();
};
/*执行事件队列
*
*@param null
*@execute 循环执行队列中的事件处理程序
*@caller bindReady()
*/
functionexecFn(){
if(!isReady){
isReady=true;
for(vari=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对象。这对我们来说不难，封装成一个函数。
varcreateAjax=function(){
varxhr=null;
try{
//IE系列浏览器
xhr=newActiveXObject("microsoft.xmlhttp");
}catch(e1){
try{
//非IE浏览器
xhr=newXMLHttpRequest();
}catch(e2){
window.alert("您的浏览器不支持ajax，请更换！");
}
}
returnxhr;
};
然后，我们来写核心函数。
varajax=function(conf){
//初始化
//type参数,可选
vartype=conf.type;
//url参数，必填
varurl=conf.url;
//data参数可选，只有在post请求时需要
vardata=conf.data;
//datatype参数可选
vardataType=conf.dataType;
//回调函数可选
varsuccess=conf.success;
if(type==null){
//type参数可选，默认为get
type="get";
}
if(dataType==null){
//dataType参数可选，默认为text
dataType="text";
}
//创建ajax引擎对象
varxhr=createAjax();
//打开
xhr.open(type,url,true);
//发送
if(type=="GET"||type=="get"){
xhr.send(null);
}elseif(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);
}
}elseif(dataType=="xml"||dataType=="XML"){
if(success!=null){
//接收xml文档
success(xhr.responseXML);
}
}elseif(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
/**
*JavaScriptJSONPLibraryv0.3
*Copyright(c)2011snandy
*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){
varie678=!-[1,],
opera=win.opera,
doc=win.document,
head=doc.getElementsByTagName('head')[0],
timeout=3000,
done=false;
function_serialize(obj){
vara=[],key,val;
for(keyinobj){
val=obj[key];
if(val.constructor==Array){
for(vari=0,len=val.length;i<len;i++){
a.push(key+'='+encodeURIComponent(val[i]));
}
}else{
a.push(key+'='+encodeURIComponent(val));
}
}
returna.join('&');
}
functionrequest(url,opt){
functionfn(){}
varopt=opt||{},
data=opt.data,
success=opt.success||fn,
failure=opt.failure||fn,
scope=opt.scope||win,
timestamp=opt.timestamp;
if(data&&typeofdata=='object'){
data=_serialize(data);
}
varscript=doc.createElement('script');
functioncallback(isSucc){
if(isSucc){
if(typeofjsonp!='undefined'){//赋值右边的jsonp必须是后台返回的，此变量为全局变量
done=true;
success.call(scope,jsonp);
}else{
failure.call(scope);
//alert('warning:jsonpdidnotreturn.');
}
}else{
failure.call(scope);
}
//HandlememoryleakinIE
script.onload=script.onerror=script.onreadystatechange=null;
jsonp=undefined;
if(head&&script.parentNode){
head.removeChild(script);
}
}
functionfixOnerror(){
setTimeout(function(){
if(!done){
callback();
}
},timeout);
}
if(ie678){
script.onreadystatechange=function(){
varreadyState=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+=(newDate).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');}
});
千分位格式化
functiontoThousands(num){
varnum=(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;}
returnresult;
}
以上就是本文给大家分享的javascript常用脚本了，希望大家能够喜欢。