资讯专栏INFORMATION COLUMN

可想实现一个自己的简单jQuery库?(七)

gplane / 2531人阅读

摘要:这个版本完善和方法新增和链式测试在我们上一个版本中没有对方法传对象进行解析在这我们要进行完善刚刚好我们现在已经有了方法直接用上吧在我们的循环中要先判断下传入的参数是字符串还是对象如果是字符串我们就按照这样的方式处理如果是对象首先我们缓存下

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

  • pox
  • pox
  • pox
  • pox
  • pox

我们如果写$("#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://www.ucloud.cn/yun/49654.html

相关文章

  • 可想实现一个自己简单jQuery?()

    摘要:这个版本完善和方法新增和链式测试在我们上一个版本中没有对方法传对象进行解析在这我们要进行完善刚刚好我们现在已经有了方法直接用上吧在我们的循环中要先判断下传入的参数是字符串还是对象如果是字符串我们就按照这样的方式处理如果是对象首先我们缓存下 Lesson-6 这个版本完善hasClass和css 方法. 新增 attr和data css: function(attr, val) { /...

    stackfing 评论0 收藏0
  • 可想实现一个自己简单jQuery?(八)

    摘要:兼容性简直神器有木有所以我们写一个这样的方法吧实现操作然后只需要传对应参数就好了如此简单接着是方法在这我只做删除自身节点就没继续拓展了大家可以自行完善只能删除自身您给予的就是给代码赋予灵魂地址可想实现一个自己的简单库七 Lesson-7 新增 html,append,before,after,remove html: function (value) { if (value ...

    X_AirDu 评论0 收藏0
  • 可想实现一个自己简单jQuery?(八)

    摘要:兼容性简直神器有木有所以我们写一个这样的方法吧实现操作然后只需要传对应参数就好了如此简单接着是方法在这我只做删除自身节点就没继续拓展了大家可以自行完善只能删除自身您给予的就是给代码赋予灵魂地址可想实现一个自己的简单库七 Lesson-7 新增 html,append,before,after,remove html: function (value) { if (value ...

    cnsworder 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<