走进面向对象编程世界第四步（jquery库）

为了进一步探索面向对象编程在jquery库的应用
我们需要先了解一下jquery的源码大致情况

自定义jquery库

window.$ = function(selector){
    var array = document.querySelectorAll(selector)
    array.on = function(){}
    array.addClass = function(){}
    array.removeClass =function(){}
    return array
}

function $(selector){
    console.log(this instanceof $)
    var array = document.querySelectorAll(selector)
    for(var i=0;i<array.length;i++){
        this[i] = array[i]
    }
}
console.dir(new $('div'))

true
{0:div,1:div……}
__proto__:Object

将选中的所有div元素返回到数组中

进一步完善jquery()函数

function $(selector){
    if(this instanceof $ === false){
        return new $(selector)
    }else{
        var array = document.querySelectorAll(selector)
        for(var i=0;i<array.length;i++){
        this[i] = array[i]
        }
    }
}
console.dir($('div'))

{0:div,1:div……}
__proto__:Object

如果没有new，则自动通过new实例化构造函数

$.prototype.on = function(){
    console.log('调用了“on”')
    return this
}
$('div').on()

会输出‘调用了“on”’
返回匹配的div元素集合

在引入jquery库的前提下

    <script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

增加jquery对象的属性（静态属性）

$.red=function(){
 document.body.style.background = 'red'   
}
$.green=function(){
 document.body.style.background = 'green'   
}

$.red()
$.green()

页面背景变红了

$.redAndGreen = function(){
var color = 'red'
setInterval(function(){
$[color]()
color = color === 'red' ? 'green':'red'
},500)
}
$.redAndGreen()

页面则500毫秒变一次颜色

对jquery的原型进行修改

$.prototype.red = function(){
        for(var i=0;i<this.length;i++){
            this[i].style.background = 'red'
        }
    }
    $('div').red()

$的实例，即所有选中div元素的背景色都会变成红色

    $.prototype.red = function(){
        this.on('click',function(e){
            var $target = $(e.currentTarget)
            $target.css('background','red')
        })
    }
    $('div').red()

匹配div元素在点击后，背景色变成红色

tab组件实战

现在用jquery做一个tab组件
HTML

 <div class=tabs>
        <ol class="tabs-nav">
            <li>nav 1</li>
            <li>nav 2</li>
            <li>nav 3</li>
        </ol>
        <ol class="tabs-content">
            <li>content 1</li>
            <li>content 2</li>
            <li>content 3</li>
        </ol> 
</div>

JS

    $.prototype.tabs = function(){
        this.on('click','.tabs-nav li',function(e){
            var $li = $(e.currentTarget)
            $li.addClass('active').siblings().removeClass('active')
            var index = $li.index()
            var $content = $li.closest('.tabs').find('.tabs-content li').eq(index)
            $content.addClass('active').siblings().removeClass('active')
        })
    }
    $('.tabs').tabs()

CSS

    .active{
        border:1px solid red;
    }

image.png

点击上面的哪行文字，
上面和相面对应位置的文字，
就会加上相应的红色边框