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

標籤：com   replace   sel   link   匿名   w3c   開始   返回   cli   

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‘);};

 

 

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