jQuery 第二章 实例方法 DOM操作选择元素相关方法

进一步选择元素相关方法：

　　 .get()

　　.eq()

　　.find()

　　.filter()

　　.not()

　　.is()

　　.has()

　　.add()集中操作  .end()回退操作

　　.get()

　　$(".class").get()   可以填 $()选择器选出来的dom 索引，  0  1  2  3   -1  -2 ，   不填  取全部dom， 但是

取出来的dom 不再是jquery的对象，而是原生dom， 用get()取出来的 dom  都为原生dom；

　　

　　现在会用了，但是咱们不能单单只会用，还要知道其原理，以下模仿其功能，写一个 .get() 方法。

　　把上一篇写的 jQuery 函数全部抽出来， 建立一个单独文件为我们自己的 myJquery.js   ，

自己慢慢学，写成一个我们自己的jquery 库

 　　

(function(){ 
    function jQuery(selector){
       return new jQuery.prototype.init(selector);
    }
    jQuery.prototype.init = function(selector){
    
        if( selector.indexOf('.') != -1 ){ 
            var dom = document.getElementsByClassName( selector.slice(1) );
        }else if( selector.indexOf('#') != -1 ){
            var dom = document.getElementById( selector.slice(1) );
        }else{
            var dom = document.getElementsByTagName(selector);
        }
        this.length = 0;
        if( dom.length == undefined ){
            this[0] = dom;  
            this.length ++; 
        }else{
            for( var i = 0; i < dom.length; i++ ){
                this[i] = dom[i];
            }
            this.length = dom.length;
        }
    }
    jQuery.prototype.css = function(config){
        for(var i = 0; i < this.length; i++){
            for(var prop in config){
                this[i].style[prop] = config[prop];
            }
        }
        return this;
    }
    //以下为我们本章的.get() 方法
    jQuery.prototype.get = function(num) { 
        if (num == null) { //判断用户有没有填参数。
            return [].slice.call(this, 0); //空截，把类数组转成数组，借用Array.prototype.slice方法        
        } else { 
            if (num < 0) {//判断用户是否输入 负数。
                return this[num + this.length];
                //举个例子  [a, b, c]   此数组的长度为3
                // 用户输入-1  想要拿最后一位 c，如果你把-1 + 3该数组的长度， 你会发现 刚好等于 最后一位的索引
            } else { 
                return this[num];//如果用户输入 0 1 2 3  直接返回this 中的 dom 即可 
            }
        }
        //以下为简化版本  三目运算符 ↓ 
        //return num == null ? [].slice.call(this, 0) : (num < 0 ? this[num + this.length] : this[num]);

    }
    jQuery.prototype.init.prototype = jQuery.prototype; //$()运行的是init的函数 init的prototype上面没有css方法。
                                                    //所以 我们把init的prototype指向jQuery.prototype
    window.$ = window.jQuery = jQuery;
})()

　　.eq()

　　这个方法和.get() 有点像，但是，获取的dom 并不是原生的dom 了，是 jquery对象的dom，

除此之外，还有一个不同点，不传参数  .get() 是返回全部原生dom，.eq()是返回空。

　　模拟原理，往我们自己的myJquery.js 添加.eq() 方法，你会发现 此方法 和 get方法的原理一样，但是 有点不同，返回的

jquery对象的dom， 我们先在做另外一个功能， 往$() 传 原生dom   会把你传的dom包装成 jquery对象的dom。

　　

(function(){ 
    function jQuery(selector){
       return new jQuery.prototype.init(selector);
    }
    jQuery.prototype.init = function (selector) {
        //加上以下代码
        if (selector == null) { //判断 有没有传值，没有传值，直接返回 this  (jquery 对象)
            return this;
        }
        //如果还按照以前selector.indexOf('.')的话，传入 dom，dom上面没.indexof方法，会报错，再加上一层判断
        //typeof selector == 'string'  判断他是字符串 再执行， dom的话，就进不去了 &&运算符，遇到假就返回
        if(typeof selector == 'string' && selector.indexOf('.') != -1 ){ 
            var dom = document.getElementsByClassName(selector.slice(1));
            //      ↓  也要加上哦
        }else if(typeof selector == 'string' &&  selector.indexOf('#') != -1 ){
            var dom = document.getElementById( selector.slice(1) );
        }else if(typeof selector == 'string'){//zheli
            var dom = document.getElementsByTagName(selector);
        }
       
        this.length = 0;
         // 主要在这里   加上以下代码 ↓   判断 传进来的值 是否是dom 元素， 是的话，就进去
        if(selector instanceof Element || dom.length == undefined ){ 
            this[0] = dom || selector;  // 把selector  直接挂到 this[0] 位上就OK了 
            this.length ++; 
        }else{
            for( var i = 0; i < dom.length; i++ ){
                this[i] = dom[i];
            }
            this.length = dom.length;
        }
    }
    jQuery.prototype.css = function(config){ 
        for(var i = 0; i < this.length; i++){
            for(var prop in config){
                this[i].style[prop] = config[prop];
            }
        }
        return this;
    }

    jQuery.prototype.get = function(num) { 
    
        return num == null ? [].slice.call(this, 0) : (num < 0 ? this[num + this.length] : this[num]);
    }
    // 跟 get方法原理差不多，差的就是， 传进去是空的话 返回 null 即可， 
    jQuery.prototype.eq = function (num) { 
       var dom =  num == null ? null : (num < 0 ? this[num + this.length] : this[num]);
        return $(dom); //  如果直接返回 dom  就是返回原生的dom  我们要把他包装一下，变成jquery对象， 此方法
                        // 在上面已经实现了。
    }
    jQuery.prototype.init.prototype = jQuery.prototype; 
            
    window.$ = window.jQuery = jQuery;
})()

　　

　　下面几个方法不探究 原理，几乎原理都是用一大堆正则筛选出来的

　　.find()

　  用法是 在什么之下, 举个例子  $('.wra').find('span1')   这样会选出span1标签， 在.wra 下面 找span1， 

跟$('.wra span1')好像一样，但是 这两个差别还是挺大的。

　　$('.wra span1') 其实这样把选择器给 选死了，  jquery的精髓在于链式调用， 你后面的 .  什么方法，全部都在

操作$('.wra span1') 这个， 并不能改变了，如果想再选span2的就得重新选  但是  $('.wra').find('span1')  并不会选死了，

你现在选了span1，你后面假如不想操作span1了，你可以通过 回退操作等方法，返回上一次选择的元素,直接选span2

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="wra">
        <span class="span1">
            span1
        </span>
        <span class="span2">
            span2
        </span>
    </div>

<script src="./jquery/jquery.js"></script>
 <script>   
    //第一种选法
    $('.wra .span1')
        .css({background:'red'});
    $('.wra .span2')
        .css({background:'green'})

    //使用find()
    $('.wra')
            .find('.span1')
                .css({background:'red'})
                    .end()
                        .find('.span2')
                            .css({background:'green'})
            
                       
                            
 </script>
</body>
</html>

　　.filter()

　　意思如其名，.filter()方法就是过滤。 可传入  css  selector   jquery   dom 等等，他会按照你传进去的参数，

过滤掉 没有 这个参数的。 还可以传 函数(fn) 传函数，就跟 数组上的 filter方法比较像了 。如图所示，把不是 span2 其他dom给过滤掉了。

　　传入函数，函数第一个参数为index 索引，第二个为，ele 元素。处理后需要你返回一个true 或者 false ， true表示留下该值

 　　过滤掉class名不是为 "span2" 的元素

　　.not()

　　学了filter 之后，自然你就会not了， 为什么，因为not和filter是相反的。

　　.is()

　　判断是否有交集，我选的东西，里面有没有你；

　　

　　.has()

　　

　　像下面这种结构，如果我们想选 li 里面有个p标签的 li 2 用我们现在的选择器，是选不出来的,这个时候，has 就派上用场了

$('ul li').has('p'), 我选是一堆li，但是我加了一个has('p')  意思是，我要选的是li  但是要满足一个条件，li 里面后代元素必须有 p标签的

<ul>
        <li>1</li>
        <li>
            2
            <p></p>
        </li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>
<ul>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
</ul>

　　接下来，重头戏来了：

　　.add()  和  .end()

.add()  添加元素到匹配的元素集合, 意思就是，$('.wra').add('.dome'), 先选了 .wra元素，然后加上.dome元素，即使没有关系也能加在一起

看个案例吧。像下面这种情况，给两个没有关系的元素加上一样的样式。

 　　如果有一天，我不想给.wra变成红色了，我想把它绿了，那么这个时候，end() 就派上用场了，他会回退到你上一次选择的地方，不需要你

传参，利用的是  jquery 对象里面 prevObject  属性，每次选择元素，这个属性都会记录你上一次选择的元素是什么，end 就是利用 prevObject 来进行回退的；

　　我们来利用end()方法把.wra 给绿了

 

　　剖析原理：

　　咱们知道，add()方法， 是把 上一次选择，和 自己选择的元素给结合起来，所以，里面肯定有两个 值，第一个是 记录上一次选择的，

第二个是记录 本身自己选择的，还有一个值，是用来接收这两个值 合在一起的，此代码编辑在myJQuery.js文件下

(function(){ 
    function jQuery(selector){
       return new jQuery.prototype.init(selector);
    }
    jQuery.prototype.init = function (selector) {
        this.length = 0;
        if (selector == null) { 
            return this;
        }
        if(typeof selector == 'string' && selector.indexOf('.') != -1 ){ 
            var dom = document.getElementsByClassName(selector.slice(1));
        }else if(typeof selector == 'string' &&  selector.indexOf('#') != -1 ){
            var dom = document.getElementById( selector.slice(1) );
        }else if(typeof selector == 'string'){
            var dom = document.getElementsByTagName(selector);
        }
       
        
        if(selector instanceof Element || dom.length == undefined ){ 
            this[0] = dom || selector;  
            this.length ++; 
        }else{
            for( var i = 0; i < dom.length; i++ ){
                this[i] = dom[i];
            }
            this.length = dom.length;
        }
    }
    //先看56行
    jQuery.prototype.pushStack = function (dom) {
        //这里的this 是$('.wra')，也就是上一次选择的元素， 所以我们把this 加到 你想加的对象上就可以
        if (dom.constructor != jQuery) {//这里判断 你传进来的值是否为 jquery 对象的dom
            dom = jQuery(dom); //如果不是，那么就把你变成jquery 对象的 dom。
        }
        dom.prevObj = this;//不管是不是 jquery 对象的dom，你最后都是要加上 prevObj属性的。
        return dom; //返回 加上 prevObj 属性 就是传进来的值。
    }
    jQuery.prototype.css = function(config){ 
        for(var i = 0; i < this.length; i++){
            for(var prop in config){
                this[i].style[prop] = config[prop];
            }
        }
        return this;
    }

    jQuery.prototype.get = function(num) { 
        return num == null ? [].slice.call(this, 0) : (num < 0 ? this[num + this.length] : this[num]);
    }
   
    jQuery.prototype.eq = function (num) { 
       var dom =  num == null ? null : (num < 0 ? this[num + this.length] : this[num]);
       return this.pushStack(dom);// 这里做一个小修改，原来我们这里并没有加上 prevObj属性，现在加上
    }

    jQuery.prototype.add = function (selector) {//加上add 方法 
        var baseObj  = this;//谁调用add这个方法，this就是谁，拿到上一个元素
        var curObj  = jQuery(selector);// 传进来的值，要进行选择，我们之前写过jQuery() 利用它进行选择
        var newObj = jQuery();//var一个空的jquery对象变量来接收 上面两个元素的集合。
        
        for (var i = 0; i < baseObj.length; i++) {//遍历 上一个元素，拿出dom， 赋给newObj
            newObj[newObj.length++] = baseObj[i];
        }   //第一次遍历的时候，newObj的length 为0， 每次 赋值后 ++；
        for (var i = 0; i < curObj.length; i++) { //遍历 传进来的元素，拿出dom， 赋给newObj
            newObj[newObj.length++] = curObj[i];
        }
        //到这里，add的功能就算完成了，但是你会发现，我们写的，没有prevObject 这个属性，接下来添加这个属性

        //请看30行，我添加了一个为pushStack的方法
        // this.pushStack(newObj); 此时的this 是谁？谁调用了 我们add方法，this就是谁 我们是$('.wra')
        return this.pushStack(newObj); //最后把 newObj 返回出去，以供下一次链式调用。
    }

    
    jQuery.prototype.end = function () { //加上end方法
       //end 这个方法，就是返回上一次选择的元素，那么我们直接把，谁调用它，就把它的prevObj返回就ok
        return this.prevObj;
    }
    jQuery.prototype.init.prototype = jQuery.prototype; 
            
    window.$ = window.jQuery = jQuery;
})()

　　结果如下：很好的模拟了

 觉得有用，点个赞呗， 谢谢你的查看