JavaScript，封装库--下拉菜单
封装库，增加了3个方法
shu_biao_yi_ru_yi_chu()方法，给元素设置鼠标移入移出事件，接收两个参数，参数是移入和移出时的执行函数(包含代码)
xian_shi()方法，设置元素显示,无参
yin_cang()方法，设置元素隐藏,无参
/**
*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代码
@charset "utf-8";
*{
margin:;
padding:;
}
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代码
//前台调用代码
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();
});
};