JavaScript經常使用腳本集錦1

時間  2019-12-20
標籤 javascript 經常 使用 腳本 集錦 欄目 JavaScript 简体版
原文   原文鏈接

jquery限制文本框只能輸入數字

jquery限制文本框只能輸入數字,兼容IE、chrome、FF（表現效果不同）,示例代碼以下：css

$("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的正整數。html

$("#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的數字和小數點。jquery

封裝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對象。這對咱們來講不難，封裝成一個函數。ajax

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;
};

而後，咱們來寫核心函數。chrome

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+")"));
                }
            }
        }
    };
};

最後，說明一下此函數的用法。json

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性能優化瀏覽器

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程