第一百三十二節，JavaScript，封裝庫--下拉菜單

時間 2019-11-12

標籤第一百三十二 javascript 封裝下拉菜單欄目 JavaScript 简体版

原文原文鏈接

JavaScript，封裝庫--下拉菜單javascript

封裝庫，增長了3個方法css

shu_biao_yi_ru_yi_chu()方法，給元素設置鼠標移入移出事件，接收兩個參數，參數是移入和移出時的執行函數(包含代碼)html

xian_shi()方法，設置元素顯示,無參java

yin_cang()方法，設置元素隱藏,無參node

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

/** 前臺調用
 * 每次調用$()建立庫對象,使其每次調用都是獨立的對象
 * $()建立庫對象,有一個可選參數this，就是當前對象自己
 * 在前臺調用獲取到元素對象執行函數時，在函數裏要再次獲取剛纔獲取的元素對象能夠將this傳入$()，如：$(this)就表明了當前對象
 * _this 接收的$()建立庫對象傳入的this
 **/
var $ = function (_this) {
    return new feng_zhuang_ku(_this);
};

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

/**對象說明：
 * 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;
};
/**------------------------------------------------元素節點操做結束--------------------------------------------**/


/**------------------------------------------------元素事件開始--------------------------------------------**/
/**元素事件說明：
 * shu_biao_yi_ru_yi_chu()方法，給元素設置鼠標移入移出事件，接收兩個參數，參數是移入和移出時的執行函數(包含代碼)
 * xian_shi()方法，設置元素顯示,無參
 * yin_cang()方法，設置元素隱藏,無參
 **/


/** shu_biao_yi_ru_yi_chu()方法，給元素設置鼠標移入移出事件，接收兩個參數，參數是移入和移出時的執行函數(包含代碼)
 *參數1是移入時的執行函數(包含代碼)
 *參數2是移出時的執行函數(包含代碼)
 **/
feng_zhuang_ku.prototype.shu_biao_yi_ru_yi_chu = function (yi_ru, yi_chu) {
    for (var i = 0; i < this.jie_dian.length; i ++) {
        this.jie_dian[i].onmouseover = yi_ru;
        this.jie_dian[i].onmouseout = yi_chu;
    }
    return this;
};

/** xian_shi()方法，設置元素顯示,無參
 **/
feng_zhuang_ku.prototype.xian_shi = function () {
    for (var i = 0; i < this.jie_dian.length; i++) {
        this.jie_dian[i].style.display = 'block';
    }
    return this;
};

/** yin_cang()方法，設置元素隱藏,無參
 **/
feng_zhuang_ku.prototype.yin_cang = function () {
    for (var i = 0; i < this.jie_dian.length; i ++) {
        this.jie_dian[i].style.display = 'none';
    }
    return this;
};



/**------------------------------------------------元素事件結束--------------------------------------------**/

下拉菜單數組

html代碼函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript講解</title>
    <link rel="stylesheet" title='xxx' type="text/css" href="1.css">
    <script type="text/javascript" src="feng_zhuang_ku.js" charset="utf-8"></script>
    <script type="text/javascript" src="1.js" charset="utf-8"></script>
</head>
<body>
<div id="tou">
    <div class="logo"><img src="img/logo.gif" alt=""></div>
    <div class="ge_ren_zhong_xin">我的中心
        <ul>
            <li><a href="#">設置</a></li>
            <li><a href="#">換膚</a></li>
            <li><a href="#">幫助</a></li>
            <li><a href="#">退出</a></li>
        </ul>
    </div>
</div>
</body>
</html>

css代碼this

@charset "utf-8";
*{
    margin: 0;
    padding: 0;
}
body{
    background: url("img/header_bg.png") repeat-x;
    font-size:14px;
}
#tou{
    width: 900px;
    height: 30px;
    margin: 0 auto;
}
.logo{
    width: 100px;
    height: 30px;
    float: left;
}
.ge_ren_zhong_xin{
    position: relative;
    width: 70px;
    height: 30px;
    line-height: 30px;
    float: right;
    background: url("img/arrow.png") no-repeat right center;
    cursor: pointer;
}
ul{
    width: 100px;
    height: 110px;
    list-style-type: none;
    position: absolute;
    top:30px;
    right: -15px;
    background:#FBF7E1;
    border:1px solid #999;
    border-top:none;
    padding:10px 0 0 0;
    display:none;
}
ul li {
    height:25px;
    line-height:25px;
    text-indent:20px;
    letter-spacing:1px;
}
ul li a {
    display:block;
    text-decoration:none;
    color:#333;
    background:url("img/arrow3.gif") no-repeat 5px 45%;
}
ul li a:hover {
    background:#fc0 url("img/arrow4.gif") no-repeat 5px 45%;
}

前臺調用js代碼url

//前臺調用代碼
window.onload = function (){
    //獲取到我的中心元素節點，執行鼠標移入移出方法
    $().huo_qu_class('ge_ren_zhong_xin','tou').shu_biao_yi_ru_yi_chu(function () {
        //當鼠標移入時，改變我的中心背景圖片
        $(this).css('background', 'url(img/arrow2.png) no-repeat right center');
        //當鼠標移入時，將ul元素執行顯示方法
        $().huo_qu_name('ul').xian_shi();
    }, function () {
        //當鼠標移出時，改變我的中心背景圖片
        $(this).css('background', 'url(img/arrow.png) no-repeat right center');
        //當鼠標移出時，將ul元素執行隱藏方法
        $().huo_qu_name('ul').yin_cang();
    });
};

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。