封装常用的base.js)_封装下拉菜单.hover(),show(),hide()

前端框架开发规范 微信前端开发框架选择 web前端移动端页面开发框架

[code]//设置鼠标移入移除，类似jquery的hover()方法
Base.prototype.hover=function(over,out){
for(var i=0;i<this.elements.length;i++){
this.elements[i].onmouseover=over;
this.elements[i].onmouseout=out;
}
return this;
}
//设置隐藏
Base.prototype.hide=function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.display=’none’;
}
return this;
}
//设置显示
Base.prototype.show=function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.display=’block’;
}
return this;
}

/*
前台调用测试：

   window.onload=function(){
        $().getClass('.member').hover(function(){
            $().getClass('member').css('background','url(images/arrow2.png) no-repeat 55px center');
            $().getTagName('ul').show();
        },function(){
            $().getClass('member').css('background','url(images/arrow.png) no-repeat 55px center');
            $().getTagName('ul').hide();
        })
   }

按照习惯，我们希望能把hover(){} 里面的 $().getClass(‘member’)换成this，但是发现这样写会报错。this.css is not a function
原因是 如果替换成this，这个this代表的是 div.menber本身，它是不能调用Base.js中的css方法的（ 求大神解惑额。。。为什么不能啊）

接下来就想法将this传到base.js中，组合成一个Base对象。

*/

//前台调用
var $ = function (_this) {
return new Base(_this);
}

//基础库
function Base(_this) {
//创建一个数组，来保存获取的节点和节点数组
this.elements = [];
if (_this != undefined) { //_this是一个对象，undefined也是一个对象，区别与typeof返回的带单引号的’undefined’
this.elements[0] = _this;
}
}

/前台调用测试：
$().getClass(‘member’).hover(function () {
$(this).css(‘background’, ‘url(images/arrow2.png) no-repeat 55px center’);
$().getClass(‘ul’).show();
}, function () {
$(this).css(‘background’, ‘url(images/arrow.png) no-repeat 55px center’);
$().getClass(‘ul’).hide();
});
/[/code]

接下来，发一份纯净的全部代码。[code]

//前台调用
var $ = function (_this) {
return new Base(_this);
}

//基础库
function Base(_this) {
//创建一个数组，来保存获取的节点和节点数组
this.elements = [];
if (_this != undefined) { //_this是一个对象，undefined也是一个对象，区别与typeof返回的带单引号的’undefined’
this.elements[0] = _this;
}
}

//获取ID节点
Base.prototype.getId = function (id) {
this.elements.push(document.getElementById(id));
return this;
};

//获取元素节点数组
Base.prototype.getTagName = function (tag) {
var tags = document.getElementsByTagName(tag);
for (var i = 0; i < tags.length; i ++) {
this.elements.push(tags[i]);
}
return this;
};

//获取CLASS节点数组
Base.prototype.getClass = function (className, 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 == className) {
this.elements.push(all[i]);
}
}
return this;
}

//获取某一个节点
Base.prototype.getElement = function (num) {
var element = this.elements[num];
this.elements = [];
this.elements[0] = element;
return this;
};

//设置CSS
Base.prototype.css = function (attr, value) {
for (var i = 0; i < this.elements.length; i ++) {
if (arguments.length == 1) {
if (typeof window.getComputedStyle != ‘undefined’) {//W3C
return window.getComputedStyle(this.elements[i], null)[attr];
} else if (typeof this.elements[i].currentStyle != ‘undeinfed’) {//IE
return this.elements[i].currentStyle[attr];
}
}
this.elements[i].style[attr] = value;
}
return this;
}

//添加Class
Base.prototype.addClass = function (className) {
for (var i = 0; i < this.elements.length; i ++) {
if (!this.elements[i].className.match(new RegExp(‘(\\s|^)’ +className +'(\\s|$)’))) {
this.elements[i].className += ‘ ‘ + className;
}
}
return this;
}

//移除Class
Base.prototype.removeClass = function (className) {
for (var i = 0; i < this.elements.length; i ++) {
if (this.elements[i].className.match(new RegExp(‘(\\s|^)’ +className +'(\\s|$)’))) {
this.elements[i].className = this.elements[i].className.replace(new RegExp(‘(\\s|^)’ +className +'(\\s|$)’), ‘ ‘);
}
}
return this;
}

//添加link或style的CSS规则
Base.prototype.addRule = function (num, selectorText, cssText, position) {
var sheet = document.styleSheets[num];
if (typeof sheet.insertRule != ‘undefined’) {//W3C
sheet.insertRule(selectorText + ‘{‘ + cssText + ‘}’, position);
} else if (typeof sheet.addRule != ‘undefined’) {//IE
sheet.addRule(selectorText, cssText, position);
}
return this;
}

//移除link或style的CSS规则
Base.prototype.removeRule = function (num, index) {
var sheet = document.styleSheets[num];
if (typeof sheet.deleteRule != ‘undefined’) {//W3C
sheet.deleteRule(index);
} else if (typeof sheet.removeRule != ‘undefined’) {//IE
sheet.removeRule(index);
}
return this;
}

//设置innerHTML
Base.prototype.html = function (str) {
for (var i = 0; i < this.elements.length; i ++) {
if (arguments.length == 0) {
return this.elements[i].innerHTML;
}
this.elements[i].innerHTML = str;
}
return this;
}

//设置鼠标移入移出方法
Base.prototype.hover = function (over, out) {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].onmouseover = over;
this.elements[i].onmouseout = out;
}
return this;
};

//设置显示
Base.prototype.show = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.display = ‘block’;
}
return this;
}

//设置隐藏
Base.prototype.hide = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.display = ‘none’;
}
return this;
}

//触发点击事件
Base.prototype.click = function (fn) {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].onclick = fn;
}
return this;
}

国内外主流前端开发框架对比 适合手机前端开发的框架 微信前端用什么框架开发的