第一百三十一節，JavaScript，封裝庫--CSS

JavaScript，封裝庫--CSS

將封裝庫裏的方法，改爲了原型添加方法

增長4個方法

tian_jia_class()方法，給獲取到的元素添加class屬性，參數是class屬性值，能夠連綴1

yi_chu_class()方法，給獲取到的元素移除class屬性，參數是要移除的class屬性值，能夠連綴2

she_zhi_link_css()方法，設置link鏈接、或style內嵌、中的CSS樣式3

yi_chu_link_css()方法，移除link鏈接、或style內嵌、中的CSS樣式4

 

封裝庫代碼5

 

/**
 *feng_zhuang_ku_1.0版本，js封裝庫，2016/12/29日：林貴秀
 **/

/** 前臺調用
 * 每次調用$建立庫對象,使其每次調用都是獨立的對象
 **/
var $ = function () {
    return new feng_zhuang_ku();
};

/**
 *定義封裝庫構造函數，類庫
 **/
function feng_zhuang_ku() {
    /** jie_dian屬性，建立數組，初始化，保存獲取到的元素節點，返回數組
     **/
    this.jie_dian = [];
}

/**對象說明：
 * this表示對象自己
 * 使用庫，首先要  $()  建立對象
 * 再在建立的對象下調用方法或者屬性
 *
 * 大綱：
 * 獲取元素標籤開始，行號18
 * 元素節點操做開始，行號64
 *
 *
 **/


/**------------------------------------------------獲取元素標籤開始--------------------------------------------**/
/**獲取元素標籤說明：
 * jie_dian屬性，保存獲取到的元素節點，返回數組,
 * huo_qu_id()方法，經過id獲取元素標籤，適用於獲取單個節點，
 * huo_qu_name_zhi()方法，經過元素name值獲取指定元素，適用於獲取表單元素,
 * huo_qu_name()方法，經過標籤名稱獲取相同標籤名的元素，
 * huo_qu_class()方法，獲取相同class屬性的節點，將獲取到的節點添加到jie_dian屬性
 * guo_lv_jie_dian()方法，獲取多個節點時，過濾jie_dian屬性裏的數組，就是過濾掉指定索引外的元素對象
 **/


/** huo_qu_id()方法,經過id獲取元素標籤，參數是id值，將獲取到的元素對象添加到，jie_dian屬性,適用於獲取單個節點
 **/
feng_zhuang_ku.prototype.huo_qu_id = function (id) {
    this.jie_dian.push(document.getElementById(id));
    return this;
};

/** huo_qu_name_zhi()方法，經過元素name值獲取指定元素，參數是元素name值，返回元素相同name值對象集合，
 * 循環元素集合，將每次循環到的元素對象添加到 jie_dian屬性，適用於獲取表單元素
 **/
feng_zhuang_ku.prototype.huo_qu_name_zhi = function (name) {
    var name_zhi = document.getElementsByName(name);
    for (var i = 0; i < name_zhi.length; i++) {
        this.jie_dian.push(name_zhi[i]);
    }
    return this;
};

/** huo_qu_name()方法，經過標籤名稱獲取相同標籤名的元素，
 * 兩個參數：獲取指定id下的相同標籤元素，參數1標籤名稱，參數2指定區域id值
 * 一個參數：獲取頁面全部相同標籤元素，參數是標籤名稱
 **/
feng_zhuang_ku.prototype.huo_qu_name = function (tag, idname) {
    var node = null;
    if (arguments.length == 2) {
        node = document.getElementById(idname);
    } else {
        node = document;
    }
    var name = node.getElementsByTagName(tag);
    for (var i = 0; i < name.length; i++) {
        this.jie_dian.push(name[i]);
    }
    return this;
};

/** huo_qu_class()方法，獲取相同class屬性的節點，將獲取到的節點添加到jie_dian屬性
 * 一個參數：獲取整個頁面指定的class屬性節點，參數是class屬性值
 * 兩個參數：獲取指定id區域裏的class屬性節點，參數1是class屬性值，參數2是指定區域的id值
 **/
feng_zhuang_ku.prototype.huo_qu_class = function (name, idname) {
    var node = null;
    if (arguments.length == 2) {
        node = document.getElementById(idname);
    } else {
        node = document;
    }
    var all = node.getElementsByTagName('*');
    for (var i = 0; i < all.length; i++) {
        if (all[i].className == name) {
            this.jie_dian.push(all[i]);
        }
    }
    return this;
};

/** guo_lv_jie_dian()方法，獲取多個節點時，過濾jie_dian屬性裏的數組，就是過濾掉指定索引外的元素對象
 * 參數是要保留jie_dian屬性裏的對象索引
 **/
feng_zhuang_ku.prototype.guo_lv_jie_dian = function (num) {
    var element = this.jie_dian[num];
    this.jie_dian = [];
    this.jie_dian[0] = element;
    return this;
};

/**------------------------------------------------獲取元素標籤結束--------------------------------------------**/


/**------------------------------------------------元素節點操做開始--------------------------------------------**/
/**素節點操做說明：
 * css()方法，給獲取到的元素設置ss樣式,或者獲取css樣式，
 * wen_ben()方法，給獲取到的元素設置文本，或者獲取文本
 * click()方法，給獲取到的元素添加一個點擊事件，參數是一個匿名函數（包含函數功能），
 * tian_jia_class()方法，給獲取到的元素添加class屬性，參數是class屬性值，能夠連綴
 * yi_chu_class()方法，給獲取到的元素移除class屬性，參數是要移除的class屬性值，能夠連綴
 * she_zhi_link_css()方法，設置link鏈接、或style內嵌、中的CSS樣式
 * yi_chu_link_css()方法，移除link鏈接、或style內嵌、中的CSS樣式
 **/


/** css()方法，給獲取到的元素設置ss樣式,或者獲取css樣式，
 * 兩個參數：設置樣式，參數1樣式名稱，參數2樣式值,設置的行內樣式
 * 一個參數：獲取樣式，參數是樣式名稱，沒法連綴，獲取便可用獲取行內也能夠獲取鏈接
 **/
feng_zhuang_ku.prototype.css = function (attr, value) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        if (arguments.length == 1) {
            if (typeof window.getComputedStyle != 'undefined') {  //w3c
                return window.getComputedStyle(this.jie_dian[i], null)[attr];
            } else if (typeof this.jie_dian[i].currentStyle != 'undefined') {  //ie
                return this.jie_dian[i].currentStyle[attr];
            }
        } else {
            this.jie_dian[i].style[attr] = value;
        }
    }
    return this;
};

/** wen_ben()方法，給獲取到的元素設置文本，或者獲取文本
 * 有參：設置文本，參數是要設置的文本字符串。
 * 無參：獲取文本。沒法連綴
 **/
feng_zhuang_ku.prototype.wen_ben = function (str) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        if (arguments.length == 0) {
            return this.jie_dian[i].innerHTML;
        }
        this.jie_dian[i].innerHTML = str;
    }
    return this;
};

/** click()方法，給獲取到的元素添加一個點擊事件，參數是一個匿名函數（包含函數功能），
 * 循環jie_dian屬性裏的節點，將每次循環的節點添加元素點擊事件
 **/
feng_zhuang_ku.prototype.click = function (fu) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        this.jie_dian[i].onclick = fu;
    }
    return this;
};

/** tian_jia_class()方法，給獲取到的元素添加class屬性，參數是class屬性值，能夠連綴
 **/
feng_zhuang_ku.prototype.tian_jia_class = function (classname) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        if (!this.jie_dian[i].className.match(new RegExp('(\\s|^)' + classname + '(\\s|$)'))) {
            this.jie_dian[i].className += ' ' + classname;
        }
    }
    return this;
};

/** yi_chu_class()方法，給獲取到的元素移除class屬性，參數是要移除的class屬性值，能夠連綴
 **/
feng_zhuang_ku.prototype.yi_chu_class = function (classname) {
    for (var i = 0; i < this.jie_dian.length; i++) {
        if (this.jie_dian[i].className.match(new RegExp('(\\s|^)' + classname + '(\\s|$)'))) {
            this.jie_dian[i].className = this.jie_dian[i].className.replace(new RegExp('(\\s|^)' + classname + '(\\s|$)'), ' ');
        }
    }
    return this;
};

/** she_zhi_link_css()方法，設置link鏈接、或style內嵌、中的CSS樣式
 * 在Web應用中，不多用到添加CSS規則和移除CSS規則，通常只用行內和Class；由於添加和刪除本來的規則會破壞整個CSS的結構，因此使用須要很是當心。
 * 直接在庫對象下使用  如：$().she_zhi_link_css()
 * 四個參數：
 * 參數1，樣式表索引位置，就是要操做的樣式表位置索引，第幾個樣式表【數值】
 * 參數2，要添加的選擇器名稱，【字符串】
 * 參數3，要添加的樣式名稱和值，如：background:#ff2a16 【字符串】
 * 參數4，將樣式和選擇器添加到樣式表什麼位置，【數值】
 **/
feng_zhuang_ku.prototype.she_zhi_link_css = function (num, selectorText, cssText, position) {
    var sheet = document.styleSheets[num];
    if (typeof sheet.insertRule != 'undefined') {
        sheet.insertRule(selectorText + "{" + cssText + "}", position);
    } else if (typeof sheet.addRule != 'undefined') {
        sheet.addRule(selectorText, cssText, position);
    }
    return this;
};

/** yi_chu_link_css()方法，移除link鏈接、或style內嵌、中的CSS樣式
 * 在Web應用中，不多用到添加CSS規則和移除CSS規則，通常只用行內和Class；由於添加和刪除本來的規則會破壞整個CSS的結構，因此使用須要很是當心。
 * 直接在庫對象下使用
 * 兩個參數：
 * 參數1，樣式表索引位置，就是要操做的樣式表位置索引，第幾個樣式表【數值】
 * 參數2，刪除樣式表裏的第幾個選擇器【數值】
 **/
feng_zhuang_ku.prototype.yi_chu_link_css = function (num, position) {
    var sheet = document.styleSheets[num];
    if (typeof sheet.deleteRule != 'undefined') {
        sheet.deleteRule(position);
    } else if (typeof sheet.removeRule) {
        sheet.removeRule(position);
    }
    return this;
};
/**------------------------------------------------元素節點操做結束--------------------------------------------**/

 

 

前臺調用代碼6

//前臺調用代碼
window.onload = function (){
    /*
    $().huo_qu_class('hj','a').guo_lv_jie_dian(0).css('color','#ff2a16');
    $().huo_qu_class('hj','a').guo_lv_jie_dian(1).css('color','#ff2a16');
    $().huo_qu_class('hj','a').guo_lv_jie_dian(2).css('color','#ff2a16');
    $().huo_qu_class('hj','a').guo_lv_jie_dian(3).css('color','#ff2a16');
    $().huo_qu_class('hj','a').wen_ben('重置');
    $().huo_qu_class('hj','b').tian_jia_class('b').tian_jia_class('c').tian_jia_class('d').yi_chu_class('b').yi_chu_class('c').yi_chu_class('d');
*/
    $().huo_qu_id('li').css('background-color','#ff2a16');
    $().huo_qu_id('li2').css('background-color','#fff133');
};