JavaScript常用腳本集錦1

ygyooo 發布于2019-08-21 10:22 / 3346人閱讀

摘要：初始化參數可選參數，必填參數可選，只有在請求時需要參數可選回調函數可選參數可選，默認為參數可選，默認為創建引擎對象打開發送普通文本接收文檔將字符串轉換為對象最后，說明一下此函數的用法。即等待與成功回調，后標志位置為。

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

調用方式如下：

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

GPU云服務器云服務器 python常用腳本 vps服務器常用性能測試腳本 linux腳本 $1 腳本javascript

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85418.html

JavaScript常用腳本集錦2

摘要：把中的偽數組轉換為真數組在中，函數中的隱藏變量和用獲得的元素集合都不是真正的數組，不能使用等方法，在有這種需要的時候只能先轉換為真正的數組。檢測元素是否支持某個屬性代碼用法創建和使用命名空間使用方式把JavaScript中的偽數組轉換為真數組在 JavaScript 中，函數中的隱藏變量 arguments 和用 getElementsByTagName 獲得的元素集合（Nod...

xialong 2019-08-21 10:23 評論0 收藏0
JavaScript常用腳本集錦5

摘要：代碼來源一些常用的操作方法介紹查找相關元素的前一個兄弟元素的方法。查找元素指定層級的父元素。 DOM操作的增強版功能函數 /** * 將一個DOM節點、HTML字符串混合型參數 * 轉化為原生的DOM節點數組 * * */ function checkElem(a) { var r = []; if (a.constructor != Array) { ...

joywek 2019-08-21 12:38 評論0 收藏0
JavaScript常用腳本集錦6

摘要：它會指出一個類是繼承自另一個類的。測試測試代碼來源頁面倒計時的一段運用倒計時的一段腳本。截止日期符合日期格式，比如等有效日期。截止的天數小時分鐘秒數組成的對象。清楚節點內的空格 function cleanWhitespace(element) { //如果不提供參數，則處理整個HTML文檔 element = element || document; //...

Acceml 2019-08-21 12:38 評論0 收藏0
JavaScript常用腳本集錦3

通過數組，拓展字符串拼接容易導致性能的問題 function StringBuffer() { this.__strings__ = new Array(); } StringBuffer.prototype.append = function (str) { this.__strings__.push(str); return this; } StringBuffer....

dack 2019-08-21 12:39 評論0 收藏0
JavaScript常用腳本集錦8

摘要：進制為代碼來源通過標簽解析通過標簽解析標簽參數是字符串，解析的目標通過測試創建一個標簽將賦值給標簽的屬性。協議主機名稱端口查詢字符串查詢參數文件名哈希參數路徑相對路徑路徑片段代碼來源圖片預加載 // 更新： // 05.27: 1、保證回調執行順序：error > ready > load；2、回調函數this指向img本身 // 04-02: 1、增加圖片完全加載后的回調 2、提...

blankyao 2019-08-21 10:24 評論0 收藏0
JavaScript常用腳本集錦4

摘要：一些元素位置設置的通用方法查找元素的左端位置代碼依賴來自查找元素的頂端位置設置元素和位置與當前位置無關的一對函數設置元素水平的函數設置元素垂直位置的函數在元素的水平位置上增加像素距離的函數在元素的垂直位置上增加像素距離的函數代碼來源元素相對一些元素位置設置的通用方法 /** * 查找元素的左端位置, * 代碼依賴：getStyle來自 https://gist.github.c...

yeooo 2019-08-21 12:38 評論0 收藏0