JavaScript常用腳本總結（一）_javascript技巧

這篇文章主要介紹了JavaScript常用腳本匯總系列的第一篇，給大家分享的是jquery限製文本框只能輸入數字、封裝DOMContentLoaded事件、用原生JS對AJAX做簡單封裝、跨域請求之JSONP、千分位格式化，有需要的夥伴們參考下。

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().replace( /[^0-9.]/g,''));  
    }).css("ime-mode", "disabled"); //CSS設定輸入法不可用

上面程式碼的作用是：只能輸入0-9的數字和小數點。

封裝DOMContentLoaded事件

//儲存domReady的事件佇列
    eventQueue = [];
    //判斷DOM是否載入完成
    isReady = feadalse; false;
    /*執行domReady()
     *
     *@param    {function}     *@caller
     */
    function domReady(fn){
  fn.call(window);
        }
        else{
            eventQueue.push(fn);
     
    /*domReady事件綁定
     *
     *@param    null
     *@execute  現代瀏覽器透過addEvListener綁定DOMContentLoaded,包括ie9
     ie6-8透過判斷doScroll 🎜>    function bindReady (){
        if (isReady) return;
        if (isBind) return;
   {
            document.addEventListener('DOMContentLoaded',execFn ,false);
        }
        else if (window.attachEvent) {
    🎜>    };
    /*doScroll判斷ie6-8的DOM是否已載入完成
     *
     *@param    null
     *@execute  doScroll 🎜>    function doScroll(){
        try {
            document.documentElement.doScroll('left');
         return setTimeout(doScroll,20);
        };
        execFn();
    };
    /*執行事件佇列
     *
     *@param    null
     *@param    null
     *@param    null
     *@param    null
     *@param     bindReady()
*/
    function execFn(){
        if (!isReady) {
       i = 0; i                 eventQueue[ }].call(window);
            };
              //js檔案1
    domReady(function(){
    });
    //js檔案2
    domReady(function(){
    });
    //，若是非同步載入的函數就不要注意會執行，
    //因為非同步載入的js下載之前，DOMContentLoaded已經觸發，addEventListener執行時已經監聽不到了



用原生JS對AJAX做簡單封裝


用原生JS對AJAX做簡單封裝

首先，我們需要xhr物件。這對我們來說不難，封裝成一個函數

var createAjax = function() {
    var xhr = null;
    try {
        //系統瀏覽器
      > } catch (e1) {
        try {
            //非、瀏覽器
      } catch (e2) {
            window.alert("您的瀏覽器不支援ajax，請更換！

var ajax = function(conf) {
    // 初始化
    //type參數,可選
    var type = conf.type;
      var type = conf.type;
   var url = conf.url;
    //data參數可選，只有在post請求時需要
    var data = conf.data;
    //datatype參數可選  dataType;
    //回呼函數可選
    var success = conf.success;
    if (type == null){
 "get";
    }
    if (dataType == null){
        //dataType參數可選，默認為text
        dataType = "text";
    }
    //建立ajax引擎物件
    var xhr = createAjax();
    // 開啟
    xhr.open(type, url, true);
    xhr.open(type, url, true);
    x 寄送" || type == "get") {
        xhr.send(null);
    } else if (type == "POST" || type == "post") {He ("content-type",
                    "application/x-www-form-urlencoded xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
               if (success != null){
                    //一般文字
                     }
            }else if(dataType=="xml"||dataType=="XML") {                    //接收xml文件   
    🎜>                } 
           ＠) if(dataType=="json"datanType="JSON") {dataType=="JSON") {p||
                if (success != null){
                       success(eval("(" xhr.responseText ")"));
          }
        }
    };
};      

        url:"test.jsp",
        data:"name=dipoo&info=good",
  ){
            alert(data. name);
        }
    }); 



跨域請求之JSONP

跨域請求之JSONP

跨域請求

/**
 * 增加對請求失敗的處理，雖然這個功能用處不太大，但研究了各個瀏覽器下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
 * 6, 用IE9和IETester測試IE6/7/8 ，其readyState總為loading,loaded。沒出現過complete。
 *
 * 最後的實作想法：
 * 1, IE9/Firefox/Safari/Chrome 成功回呼使用onload事件，錯誤回呼使用onerror事件
 * 2, Opera 成功回呼事件（它壓根不支援onreadystatechange），由於其不支援onerror，這裡使用了延遲處理。
 *    即等待與成功回呼success，success後標誌位元done置為true。 failure則不會執行，否則執行。
 *    這裡延遲的時間取值很有技巧，之前取2秒，在公司測試沒問題。但回家用3G無線網路後發現即使引用的js檔案存在，但由於
 *    網速過慢，failure還是先執行了，後執行了success。所以這裡取5秒是比較合理的。當然也不是絕對的。
 * 3, IE6/7/8 成功回呼使用onreadystatechange事件，錯誤回呼幾乎是很難實現的。也是最有技術含量的。
 *    參考了http://www.php.cn/
 *    使用nextSibling，發現無法實現。
 *    令人噁心的是，即使請求的資源文件不存在。它的readyState也會經歷「loaded」狀態。這樣你就沒辦法區分請求成功或失敗。
 *    怕它了，最後使用前後台一起協調的機制來解決最後的這個難題。無論請求成功或失敗都讓其呼叫callback(true)。
 *    此時已經將區別成功與失敗的邏輯放到了callback中，如果後台沒有返回jsonp則調用failure，否則調用success。
 *   
 *
 * 介面
 * Sjax.load(url, {
 *   data   請求成功回呼函數
 *    failure   // 請求失敗回呼函數
 *    scope     // 回呼函數執行情境
> */
Sjax =
function(win){
    var ie678 = !-[1,],
 = win.document,
        head = doc.getElementsByTagName('head')[0],
       serialize(obj){
        var a = [], key, val;
        for(key in obj){
            🎜>                for(var i=0 ,len=val.length;i                    a.push(key '='encode 🎜>            }else{
                a.push (key '='encodeURIComponent(val));
            }
        }
   函數請求(url,opt){
function fn(){}
        var opt = opt || {},
        資料 = opt.data,
        success = opt.success || fn,
        失敗 = opt.failure || fn,
        範圍 = opt.scope ||贏了，
timestamp = opt.timestamp;
        if(data && typeof data == 'object'){
          
        var script = doc.createElement('script') ;
        function callback(isSucc){
            if(isSucc){                                             }else{
                     //alert('warning: jsonp did not return.' );
                }
           🎜>            }
            // Handle memory leak in IE = null;
            jsonp = undefined;
           head.removeChild(script);
            }
         }
    >            setTimeout(function(){
               }          }
           8){
script.onreadystatechange = function(){
                var readyState = this.readyState;
  yState == 'complete')){
                    callback(true );
                }
            }
            //fixOnerror();
        }else{
            script.onload = function(){
                callback(true);
            }
            script.onerror = function(){
               }       if(opera){
                fixOnerror();
   if(資料){
            url = '?' 資料;
       ,
   ){
                url = '&ts=';
            } else{
                url = '?ts='
          🎜>        }
        script.src = url;
        head.insertBefore( script, head.firstChild);
    }
return {load:request};
}(this);


調用方式如下：

 Sjax. load('jsonp66.js', {

        success : function(){alert(jsonp.name)},

      🎜>

千分位格式化

function toThousands(num) {

    var num = (num || 0).toString(),result = =toString = '';    while (num.length > 3) {        result = ',' num.slice(-3) result 🎜>  .

    }

    if (num) { 結果= num 結果; }
    return result;
} 

就是給大家分享的內容大家能夠喜歡。