摘要：這個(gè)版本完善和方法新增和鏈?zhǔn)綔y(cè)試在我們上一個(gè)版本中沒(méi)有對(duì)方法傳對(duì)象進(jìn)行解析在這我們要進(jìn)行完善剛剛好我們現(xiàn)在已經(jīng)有了方法直接用上吧在我們的循環(huán)中要先判斷下傳入的參數(shù)是字符串還是對(duì)象如果是字符串我們就按照這樣的方式處理如果是對(duì)象首先我們緩存下

這個(gè)版本完善hasClass和css 方法.

新增 attr和data

css: function(attr, val) { //鏈?zhǔn)綔y(cè)試

    for (var i = 0; i < this.length; i++) {
        if(typeof attr == "string") {
            if (arguments.length == 1) {
                return getComputedStyle(this[0], null)[attr];
            }
            this[i].style[attr] = val;
        } else {
            var _this = this[i];
            f.each(attr,function(attr,val) {
                _this.style.cssText += "" + attr + ":" + val + ";";
            });
        }
    }
    return this;
}

在我們上一個(gè)版本中,沒(méi)有對(duì)css方法傳對(duì)象進(jìn)行解析,在這我們要進(jìn)行完善.

剛剛好我們現(xiàn)在已經(jīng)有了each方法!直接用上吧!

在我們的for循環(huán)中,要先判斷下傳入的attr參數(shù)是字符串還是對(duì)象.

如果是字符串,我們就按照css("width","100px")這樣的方式處理

如果是對(duì)象css({"width":"100px","height":"200px"})

var _this = this[i];
f.each(attr,function(attr,val) {
    _this.style.cssText += "" + attr + ":" + val + ";";
});

首先我們緩存下當(dāng)前的this,然后用cssText方法,直接拼接進(jìn)去即可.

接著我們需要完善hasClass方法.這里要著重說(shuō)明下!目前我搜到的一大堆hasClass方法與jQuery的實(shí)現(xiàn)都是不同的

比如有這樣的dom結(jié)構(gòu)

    

        
pox
        
pox
        
pox
pox
        
pox
    

我們?nèi)绻麑?("#pox li").hasClass("b")與$("#pox li").hasClass("a")那都會(huì)是什么樣的結(jié)果呢?

結(jié)果是都會(huì)返回true.

而現(xiàn)在基本能搜到的完全沒(méi)有做這方面的判斷.所以我們來(lái)看看我是如何實(shí)現(xiàn)的

hasClass : function(cls) {
    var reg = new RegExp("(s|^)" + cls + "(s|$)");
    var arr = [];
    for (var i = 0; i < this.length; i++) {
        if (this[i].className.match(reg)) arr.push(true);
            else arr.push(false);
    }
    if (arr.indexOf(true) != -1)  return true;
        else  return false;
}

首先我們需要一個(gè)正則匹配,還需要一個(gè)數(shù)組,進(jìn)行存儲(chǔ)每個(gè)元素是否有存在判斷的class

然后我們?cè)僭谀莻€(gè)數(shù)組中尋找是否有true?如果有true,則返回true,如果一個(gè)true都沒(méi)有的情況下,才能完全返回false.希望大家在這里要注意以下

最后是我們的attr和data方法

attr : function(attr, val) {
    for (var i = 0; i < this.length; i++) {
        if(typeof attr == "string") {
            if (arguments.length == 1) {
                return this[i].getAttribute(attr);
            }
            this[i].setAttribute(attr,val);
        } else {
            var _this = this[i];
            f.each(attr,function(attr,val) {
                _this.setAttribute(attr,val);;
            });
        }
    }
    return this;
},
data : function(attr, val) {
    for (var i = 0; i < this.length; i++) {
        if(typeof attr == "string") {
            if (arguments.length == 1) {
                return this[i].getAttribute("data-" + attr);
            }
            this[i].setAttribute("data-" + attr,val);
        } else {
            var _this = this[i];
            f.each(attr,function(attr,val) {
                _this.setAttribute("data-" + attr,val);;
            });
        }
    }
    return this;
}

這兩個(gè)方法就很簡(jiǎn)單啦,跟CSS方法類似,先判斷第一個(gè)參數(shù)是否為字符串,如果是字符串就是直接增加一個(gè)屬性.如果是對(duì)象,就each下一個(gè)一個(gè)set即可.

毛主席說(shuō)過(guò),只閱不star都是耍流氓! :(

github地址: https://github.com/MeCKodo/forchange/tree/master/lesson-6
可想實(shí)現(xiàn)一個(gè)自己的簡(jiǎn)單jQuery庫(kù)？(六)：http://segmentfault.com/a/1190000004013654