可想完成一个本身的简朴jQuery库？(七)

2024年1月10日 157次阅读 来源: 二哲

Lesson-6

这个版本完美hasClass和css 要领.

新增 attr和data

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'})

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

起首我们缓存下当前的this,然后用cssText要领,直接拼接进去即可.

接着我们须要完美hasClass要领.这里要偏重申明下!现在我搜到的一大堆hasClass要领与jQuery的完成都是差别的

比方有如许的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>

我们假如写$(‘#pox li’).hasClass(‘b’)与$(‘#pox li’).hasClass(‘a’)那都邑是什么样的效果呢?

效果是都邑返回true.

而如今基本能搜到的完整没有做这方面的推断.所以我们来看看我是怎样完成的

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

起首我们须要一个正则婚配,还须要一个数组,举行存储每一个元素是不是有存在推断的class

然后我们再在谁人数组中寻觅是不是有true?假如有true,则返回true,假如一个true都没有的情况下,才完整返回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;
}

这两个要领就很简朴啦,跟CSS要领相似,先推断第一个参数是不是为字符串,假如是字符串就是直接增添一个属性.假如是对象,就each下一个一个set即可.

毛主席说过,只阅不star都是耍流氓! :(

github地点: https://github.com/MeCKodo/forchange/tree/master/lesson-6
可想完成一个本身的简朴jQuery库？(六)：http://segmentfault.com/a/1190000004013654

    原文作者：二哲
    原文地址: https://segmentfault.com/a/1190000004018813
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞