一个前端博客（2）——完善css功能，以及通过class获取元素的方法

时间：2024-03-03 13:55:19

关于html()和css()方法的完善

　　在jQuery里，html()方法既能设置内容，还能取回里面的内容。这里我们要完善的就是取回内容的功能。通过arguments这个属性的length属性来判断参数的个数，从而来实现。代码如下:

Tar.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;
}

这里判断参数的个数如果为0个，则返回该节点的内容。否则就设置。

　　在jQuery里，css()方法和html类似，也是既可以设置，也可以取回css的属性的值。方法也是利用了arguments.length。代码如下:

Tar.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 != \'undefined\') {//IE
                return this.elements[i].currentStyle[attr];
            }
        }
        this.elements[i].style[attr] = value;
    }
    return this;
}

这里判断参数的个数如果为一个，即要取回css属性的属性名，然后判断浏览器支持哪种计算css样式的方法。如果是W3C,比如Chrome，Firefox这些，就将

window.getComputedStyle(this.elements[i], null)[attr];

返回回来。如果是IE的话，就将:

this.elements[i].currentStyle[attr];

返回回来。

根据class取的节点集合的方法——getClass()

首先创建我们的getClass方法:

Tar.prototype.className = function() {
    
}

由于getElementsByClassName的兼容问题(IE8>...)，这里我们取回所有节点，然后通过比较className的值来查找出一个集合。代码如下:

Tar.prototype.className = function(className) {
    var all = document.getElementsByTagName("*");
    for(var i = 0; i < all.length; i++) {
        this.elements.push(all[i]);
    }
    return this;
}

在这里我们将所有class为className的元素取到了，可以如果我们要是限定范围，该怎么办？这里我们限定为id内。

Tar.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;
};

这里我们有一个node变量，用于存储搜索是从哪里开始。如果参数的个数为2，即有范围的查询，则确定node为id=idName的元素，否则从全文文档开始。

酱紫我们完成了今天的任务了嘛？没有，如果我想要这些元素中的某一个元素该怎么办？我们来创建一个getElement()方法:

Tar.prototype.getElement = function(num) {
   
}

参数num为查找元素的索引。

实现也很容易，就是将我们要找的元素this.elements[num]赋给一个变量，这里我们创建var element.然后清空数组，再将element通过push()方法或者直接赋值给this.elements[0]添加到数组里。最后返回this对象。

Tar.prototype.getElement = function(num) {
    var element = this.elements[num];
    this.elements = [];
    this.elements[0] = element;
    return this;
}

因为其他的操作每次都是查询的this.elements这个数组来操作，所以我们通过修改this.elements来实现指定某一个元素。

最后我们将function Tar(){}里内容都解放出来，只留数组在里面，完整代码如下:

//前台调用
var $ = function() {
    return new Tar();
}
//基础库
function Tar() {
    //存储节点数组
    this.elements = [];
};
//获取ID节点
Tar.prototype.getId = function(id) {
    this.elements.push(document.getElementById(id));
    return this;
};
//获取Name节点
Tar.prototype.getName = function(name) {
    var names = document.getElemntsByName(name);
    for(var i = 0; i < names.length; i++) {
        this.elements.push(names[i]);
    }
    return this;
};
//获取元素节点
Tar.prototype.getTagName = function(tagName) {
    var tags = document.getElementsByTagName(tagName);
    for(var i = 0; i < tags.length; i++) {
        this.elements.push(tags[i]);
    }
    return this;
};
//获取Class节点
Tar.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;
};
Tar.prototype.className = function(className) {
    var all = document.getElementsByTagName("*");
    for(var i = 0; i < all.length; i++) {
        this.elements.push(all[i]);
    }
    return this;
}

//取的某个一个元素
Tar.prototype.getElement = function(num) {
    var element = this.elements[num];
    this.elements = [];
    this.elements[0] = element;
    return this;
}
//css方法
Tar.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 != \'undefined\') {//IE
                return this.elements[i].currentStyle[attr];
            }
        }
        this.elements[i].style[attr] = value;
    }
    return this;
}
//html方法
Tar.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;
}

 

今天就到这里，待续。。。。。

相关文章