Lesson-6

This version perfect hasClass and css method.

New data and attr

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

In our previous version, there is no method to parse css pass objects, in which we want to improve.

Just good that we now have each method! Direct spend it!

In our for loop, the first judgment passed under the attr parameter is a string or object.

If a string, we follow css('width','100px')deal this way

If the object iscss({"width":'100px','height':'200px'})

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

First, we cache the current this, then cssText method, can be directly spliced into it.

Then we need to improve hasClass methods important to note here next! Currently I found a lot to hasClass methods and implementation of jQuery is different

For example such a structure dom

<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>

Results if we write $ ( '# pox li'). HasClass ( 'b') and $ ( '# pox li'). HasClass ( 'a') that will look like it?

The result is returns true.

And now basic it can be found to the judge did not do this. So let's look at how I implemented

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

First, we needed a regular match, also needs a array storage each element exists judge whether a class

Then we look for in the array Is there true? If true, it returns true, if a true under no circumstances are to fully return false. I hope everyone here to note the following

Finally, our data and methods attr

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

These two methods is very simple matter, similar with the CSS method, first determine whether the first argument is a string, if the string is a direct increase in a property. If it is object, each next to a set.

Chairman Mao said, not just reading star bullying! :(

github Address: https://github.com/MeCKodo/forchange/tree/master/lesson-6
may want to implement your own simple jQuery library? (F): http://segmentfault.com/a/1190000004013654

You may want to implement your own simple jQuery library? (Seven)

Lesson-6

Guess you like