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

     */

    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

 * 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常用脚本了，希望大家能够喜欢。