# Lesson-6
===
這個版本完善hasClass和css 方法.
新增 attr和data
```javascript
css: function(attr, val) { //鏈式測試
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;
}
```
在我們上一個版本中,沒有對css方法傳對象進行解析,在這我們要進行完善.
剛剛好我們現在已經有了each方法!直接用上吧!
在我們的for循環中,要先判斷下傳入的attr參數是字符串還是對象.
如果是字符串,我們就按照`css('width','100px')`這樣的方式處理
如果是對象`css({"width":'100px','height':'200px'})`
```javascript
var _this = this[i];
f.each(attr,function(attr,val) {
_this.style.cssText += '' + attr + ':' + val + ';';
});
```
首先我們緩存下當前的this,然后用cssText方法,直接拼接進去即可.
接著我們需要完善hasClass方法.這里要著重說明下!目前我搜到的一大堆hasClass方法與jQuery的實現都是不同的
比如有這樣的dom結構
```javascript
<div id="pox">
<ul>
<li class="a c">pox</li>
<li class="b">pox</li>
<li>pox</li><li>pox</li>
<li>pox</li>
</ul>
</div>
```
我們如果寫$('#pox li').hasClass('b')與$('#pox li').hasClass('a')那都會是什么樣的結果呢?
結果是都會返回true.
而現在基本能搜到的完全沒有做這方面的判斷.所以我們來看看我是如何實現的
```javascript
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)) {
return true;
}
}
return false;
}
```
首先我們需要一個正則匹配,還需要一個數組,進行存儲每個元素是否有存在判斷的class
然后我們再在那個數組中尋找是否有true?如果有true,則返回true,如果一個true都沒有的情況下,才能完全返回false.希望大家在這里要注意以下
最后是我們的attr和data方法
```javascript
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;
}
```
這兩個方法就很簡單啦,跟CSS方法類似,先判斷第一個參數是否為字符串,如果是字符串就是直接增加一個屬性.如果是對象,就each下一個一個set即可.
毛主席說過,只閱不star都是耍流氓! :(
