手把手写jQuery7 （继续坚持）

我们在学习的过程中，总是喜欢放弃，这是我个人的问题，

一遇到点问题就退缩，真是不好

行，我们继续吧！

attr 方法！

 

这个我暂时测试没任何问题！

 

还有三个方法

我们需要一一实现！

eq 应该是从指定下标获取 具体元素（当然是VQuery 对象）

eq 方法是很简单的！

// eq 方法

VQuery.prototype.eq = function(index){
    
    //这是一个普通的对象，不是VQuery 对象！
    var element =  this.elements[index];    
    return $(element);
}

 

我在测试的时候，又发现了个bug 就是$(xx) 不起作用！

我原来竟然放到了 case “string"  里面，哎，真的是细节决定成败！

所以说粗心的人，学程序肯定会越来越严谨！

——————————————————————————————

行，我们正在前进，我们继续find 方法，这个有点小意思，慢慢写！

// find 我们就写好了，我们去测试下！
VQuery.prototype.find = function(str){

    // str 选择器 字符串，这个 我想想！
    // 我们暂且认为，一种是标签查找
    // 一种是class 查找！
    var i = 0;
    var resultArr = [];

    for(i=0; i<this.elements.length;i++){   
        var element = this.elements[i];// 获取元素！
        if(str.startsWith('.')){
            // class 选择器
            var classTag = str.substring(1);
            var classArr =  getByClass(document,classTag);
            resultArr =  resultArr.concat(classArr);
            var mQuery = new VQuery();
            mQuery.elements = resultArr;
            return mQuery;
        }else{
            // 元素选择器！
             // tag 标签（元素） 选择器
                    // tag 选择器，应该很简单！
             var  tagAttr =  getElements(document,str);
            resultArr = resultArr.concat([].slice.call(tagAttr));
            var mQuery = new VQuery();
            mQuery.elements = resultArr;
            return mQuery;    
        }

    }

}

写好后，去测试下！

 

测试有问题，我知道哪里错了，是传递参数小bug

 

这下去测试下，应该没问题了吧？

 

恩，很不错，没有任何问题，我们继续，写完最后一个方法！

index 获取 元素在父亲元素的中的下标！

 

VQuery.prototype.index = function(){
    var element = this.elements[0];
    var children = element.parentNode.children;
    // 元素在数组中的位置！
    return  [].slice.call(children).indexOf(element);
}

 

行，index 方法也搞定了，就是如此任性！

 

哎呀，我累死了，VQuery 一小步，已经走完了，后面还有，不要停下来！

 

我们来总结下！

 

1， VQuery对象中有一个数组 来存放选中的元素

2， VQuery 对象内置了， 三种选择器，ID  class TAG（标签 元素）

3， VQuery 对象可以添加 click 事件， 还可以用 css 来设置获取属性！

4， VQuery 对象的后续功能，我们下一篇继续写！

 

革命尚未成功，伙伴们仍然要努力！