DIV CSS 佈局教程網

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常用腳本了，希望大家能夠喜歡。