JavaScript经常使用剧本集锦1

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机能优化

    原文作者:两仪
    原文地址: https://segmentfault.com/a/1190000002418519
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞