JavaScript常用腳本集錦5

joywek 發布于2019-08-21 12:38 / 394人閱讀

摘要：代碼來源一些常用的操作方法介紹查找相關元素的前一個兄弟元素的方法。查找元素指定層級的父元素。

DOM操作的增強版功能函數

/**
 * 將一個DOM節點、HTML字符串混合型參數
 * 轉化為原生的DOM節點數組
 *
 * */
function checkElem(a) {
    var r = [];

    if (a.constructor != Array) {
        //如果不是參數數組,則強行轉換
        a = [a];
    }

    for (var i = 0; i < a.length; i++) {
        //如果是字符串,例如"aa"
        if (a[i].constructor == String) {
            //使用一個臨時元素來存放HTML
            var div = document.createElement("div");
            //注入HTML,轉換成DOM結構
            div.innerHTML = a[i];

            for (var j = 0; j < div.childNodes.length; j++) {
                r[r.length] = div.childNodes[j];
            }

        } else if (a[i].length) {
            //假定是DOM節點數組
            for (var j = 0; j < a[i].length; j++) {
                r[r.length] = a[i][j];
            }
        } else {
            //DOM節點
            r[r.length] = a[i];
        }
    }

    return r;
}

/**
 * 在parent執行環境下,在before元素下前面添加elem元素
 * */
function before(parent, before, elem) {
    //檢查是否提供parent節點參數
    if (elem == null) {
        elem = before;
        before = parent;
        parent = before.parentNode;
    }
    //獲取元素的新數組
    var elems = checkElem(elem);

    /**
     * 向后遍歷數組，
     * 因為我們向前插入元素
     * */
    for (var i = elems.length - 1; i >= 0; i--) {
        parent.insertBefore(elem[i], before);
    }

}
/**
 * 為parent追加一個子元素的輔助函數
 *
 * */
function append(parent, elem) {
    var elems  = checkElem(elem);

    for(var i = 0; i <= elems.length; i++){
        parent.appendChild(elems[i]);
    }
}
/**
 * 刪除elem節點函數
 *
 * */
function remove(elem) {
    if(elem) {
        elem.parentNode.removeChild(elem);
    }
}
/**
 * 從一個元素中刪除所有子節點的函數
 *
 * */
function empty(elem) {
    while(elem.firstChild) {
        remove(elem.firstChild);
    }
}

代碼來源：https://gist.github.com/hehongwei44/31ce781d77ca33baea48

創建DOM元素的通用函數

/*創建DOM元素的通用函數*/
function create (elem) {
    return document.createElementNS ? document.createElementNS("http://" +
        "www.w3.org/1999/xhtml", elem) : document.createElement(elem);
}

//如果提供的是字符串,則把它轉化成文本節點.
function checkElem(elem) {
    return elem && elem.constructor == "String" ? document.createTextNode(elem) : elem;
}

//在parent執行環境下,在before元素下前面添加elem元素
function before(parent, before, elem){
    /*
    * 如果不提供parent的情況下，則before接受parent參數，elem接受before的參數。
    * ps:該方法處理很獨特，值得借鑒
    * */
    if(elem == null) {
        elem = before;
        before = parent;
        parent = before.parent;
    }

    parent.insertBefore(checkElem(elem),before);
}

//為parent追加一個子元素的輔助函數
function append(parent, elem){
    parent.appendChild(elem);
}

代碼來源：https://gist.github.com/hehongwei44/b449b9081b00bc1dc6ac

檢查元素是否有一個指定的特性

/*檢查元素是否有一個指定的特性*/
function hasAttribute(elem, name) {
    // !!表達式快速的求bool值
    return !!elem.getAttribute(name);
}

代碼來源：https://gist.github.com/hehongwei44/fb9789ef08a2ef9c7ec3

獲取元素文本內容的通用函數

/*獲取元素文本內容的通用函數*/
function text(e) {
    var str = "";
    //判斷元素是否包含子元素
    e = e.childNodes || e;

    //遍歷子元素，獲取其文本內容
    for (var i = 0; i < e.length; i++) {
        //如果子元素下面還包含子元素，則遞歸執行
        str += e[i].nodeType != 1 ? (e[i].nodeValue) : text(e[i].childNodes);
    }

    return str;
}

代碼來源：https://gist.github.com/hehongwei44/08429d872a5f19ca7d6b

簡單的DOM的API封裝

/*根據ID獲取元素*/
var $id = function(id){
    return document.getElementById(id);
};

/*根據標簽名獲取元素，返回元素的節點偽數組*/
var $tag = function(tagName, parent){
    return (parent || document).getElementsByTagName(tagName);
};
 /*根據樣式名獲取元素，返回元素的節點數組。其中className是必填項目*/
var $class = function (className, tagName, parent) {

    //元素可能存在多個className,故匹配我們所需要的className
    var re = new RegExp("(^|s)" + className + "(s|$)"), node = [];

    if (arguments.length === 1) {
        //只傳入className
        tagName = "*";
        parent = document;

    } else if (arguments.length === 2 && tagName.constructor === "String") {
        //傳入ClassName和節點類型
        parent = document;

    } else if (arguments.length === 2 && tagName.constructor !== "String") {
        //傳入ClassName和父親節點
        tagName = "*"

    } else if (arguments.length === 3) {
        //傳入ClassName和節點類型以及父親節點
    }

    var nodebyTag = parent.getElementsByTagName(tagName);

    for (var i = 0; i < nodebyTag.length; i++) {

        if (re.test(nodebyTag[i].className)) {
            node.push(nodebyTag[i]);
        }
    }

    return node;

}

代碼來源：https://gist.github.com/hehongwei44/d608126f5b3407220932

通過原型拓展來實現DOM的查找方法。

//查找相關元素的前一個兄弟元素的方法。
HTMLElement.prototype.prev = function () {
    var elem = this;
    do {
        elem = elem.previousSibling;
    } while (elem && elem.nodeType != 1);

    return elem;
};

//查找相關元素的下一個兄弟元素的方法。
HTMLElement.prototype.next = function () {
    var elem = this;

    do {
        elem = elem.nextSibling;
    } while (elem && elem.nodeType != 1);

    return elem;
};

//查找元素第一個子元素的方法。
HTMLElement.prototype.first = function () {
    var elem = this.firstChild;
    //文本節點
    if(elem && elem.nodeType != 1){
        do {
            elem = elem.nextSibling;
        } while (elem && elem.nodeType != 1);
    }

    return elem;
};

//查找元素的最后一個子元素的方法。
HTMLElement.prototype.last = function () {
    var elem = this.lastChild;

    do {
        elem = elem.previousSibling;
    } while (elem && elem.nodeType != 1);

    return elem;
};

//查找元素指定層級的父元素。
HTMLElement.prototype.parent = function (num){
    var elem = this;
    num = num || 1;
    for( var i = 0; i < num; i++)
        if(elem != null) elem = elem.parentNode;
    return elem;
};

代碼來源：https://gist.github.com/hehongwei44/7614a218810410b31ff4

dom一些常用的操作方法介紹

//查找相關元素的前一個兄弟元素的方法。
function prev(elem) {
    do {
        elem = elem.previousSibling;
    } while (elem && elem.nodeType != 1);

    return elem;
}
//查找相關元素的下一個兄弟元素的方法。
function next(elem) {
    do {
        elem = elem.nextSibling;
    } while (elem && elem.nodeType != 1);

    return elem;
}
//查找元素第一個子元素的方法。
function first(elem) {
    elem = elem.firstChild;

    return (elem && elem.nodeType != 1) ? next(elem) : elem;
}
//查找元素的最后一個子元素的方法。
function last(elem) {
    elem = elem.lastChild;

    return (elem && elem.nodeType != 1) ? prev(elem) : elem;
}
//查找元素指定層級的父元素。
function parent(elem, num){
    num = num || 1;
    for( var i = 0; i < num; i++)
        if(elem != null) elem = elem.parentNode;
    return elem;
}

代碼來源：https://gist.github.com/hehongwei44/11e82b38b00aa63b0876

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

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

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

JavaScript常用腳本集錦2

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

xialong 2019-08-21 10:23 評論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常用腳本集錦6

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

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

摘要：初始化參數可選參數，必填參數可選，只有在請求時需要參數可選回調函數可選參數可選，默認為參數可選，默認為創建引擎對象打開發送普通文本接收文檔將字符串轉換為對象最后，說明一下此函數的用法。即等待與成功回調，后標志位置為。 jquery限制文本框只能輸入數字 jquery限制文本框只能輸入數字,兼容IE、chrome、FF（表現效果不一樣）,示例代碼如下： $(input).keyup(...

ygyooo 2019-08-21 10:22 評論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