jquery的show/hide/toggle详解

通过阅读源码我们发现show,hide,toggle调用了showHide和isHidden这2个方法，所以我们要搞明白原理必须先看一下这2个方法。

jQuery.fn.extend({
    
        .................

    show: function() {
        return showHide( this, true );
    },
    hide: function() {
        return showHide( this );
    },
    toggle: function( state, fn2 ) {
        var bool = typeof state === "boolean";

        if ( jQuery.isFunction( state ) && jQuery.isFunction( fn2 ) ) {
            return eventsToggle.apply( this, arguments );
        }

        return this.each(function() {
            if ( bool ? state : isHidden( this ) ) {
                jQuery( this ).show();
            } else {
                jQuery( this ).hide();
            }
        });
    }
});

isHidden比较简单，接受2个参数，调用了jq的工具方法css来判断当前的display是否为none，为none返回真，否则走后面的contains方法
contains用于判断元素是否包含在元素所在的文档中，elem.ownerDocument其实就是document, elem是元素
由此可以看出，如果元素不包含在当前的文档中，jq也认为这个元素是隐藏的，比如document.createElement创建出来的元素。

function isHidden( elem, el ) {
    elem = el || elem;
    return jQuery.css( elem, "display" ) === "none" || !jQuery.contains( elem.ownerDocument, elem );
}

showHide方法代码有点长，我们发现jQuery._data()，css_defaultDisplay()，curCSS()，这3个东西又是什么呢，稍后再分析。
showHide接受2个参数，elements : 元素集合 、 show : 布尔值（true表示显示 、false表示隐藏）

function showHide( elements, show ) {
    var elem, display,
        values = [],
        index = 0,
        length = elements.length;

    for ( ; index < length; index++ ) {
        elem = elements[ index ];
        if ( !elem.style ) {
            continue;
        }
        values[ index ] = jQuery._data( elem, "olddisplay" );
        if ( show ) {
            // Reset the inline display of this element to learn if it is
            // being hidden by cascaded rules or not
            if ( !values[ index ] && elem.style.display === "none" ) {
                elem.style.display = "";
            }

            // Set elements which have been overridden with display: none
            // in a stylesheet to whatever the default browser style is
            // for such an element
            if ( elem.style.display === "" && isHidden( elem ) ) {
                values[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );
            }
        } else {
            display = curCSS( elem, "display" );

            if ( !values[ index ] && display !== "none" ) {
                jQuery._data( elem, "olddisplay", display );
            }
        }
    }

    // Set the display of most of the elements in a second loop
    // to avoid the constant reflow
    for ( index = 0; index < length; index++ ) {
        elem = elements[ index ];
        if ( !elem.style ) {
            continue;
        }
        if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
            elem.style.display = show ? values[ index ] || "" : "none";
        }
    }

    return elements;
}

我们先看代码最下面，它遍历了元素集合，如果元素没有样式则跳过，哪些元素没有样式呢，比如文本节点、注释节点等等。。。
我们特别注意一下这句代码：elem.style.display = show ? values[ index ] || "" : "none";
当为show时，它并没有直接写"block"而是一个变量赋值的操作，当它没有时才会空。
这里主要是为了区分元素的样式属性，比如span是行内元素如果给他赋blcok就变成块元素了，所以values[ index ]这个变量是在上面的代码处理过得到的。

for ( index = 0; index < length; index++ ) {
    elem = elements[ index ];
    if ( !elem.style ) {
        continue;
    }
    if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
        elem.style.display = show ? values[ index ] || "" : "none";
    }
}

现在回过头看代码的开始部分就容易理解了，先获取元素默认的display值，一般第一次获取肯定是空的，因为这个值需要在隐藏时保存，我们看到下面就明白了，这里先不解释。

values[ index ] = jQuery._data( elem, "olddisplay" );

接着往下看，if(show)里面做了2个判断，第一个判断没什么说的，重点看第二个。
当行内样式为空，且是一个隐藏的元素（css样式表中display:none），则执行了一个比较有意思的操作。
利用css_defaultDisplay方法能够正确的获取到元素的样式属性，什么意思呢？
我们可以这样想，当一个元素初始的时候给一个display为none，我们肯定获取不到该元素显示时所对应的值，也就是说我们不知道是block，或是inline，换句话说，我们不知道该元素是块元素还是行内元素。
可是css_defaultDisplay方法能够做到，那么它是怎么实现的呢？

这里就不贴css_defaultDisplay的源码了，简单说一下它的原理，其实很简单
首先获取元素的nodeName（标签名） -> createElement动态的创建 -> 添加到document.body中 -> 获取该元素的display（元素默认的display都是显示，如div是block，span
是inline） -> 删除该元素

if ( show ) {
        if ( !values[ index ] && elem.style.display === "none" ) {
            elem.style.display = "";
        }

        if ( elem.style.display === "" && isHidden( elem ) ) {
            values[ index ] = jQuery._data( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );
        }
    } else {
        ......................
    }

好了，if(show)里面的代码分析完了，我们再看分析一下else里面的代码
先获取display的值，再是一个判断，如果values[ index ]没有值并且display不是none，则把元素当前的display值保存起来，方便在if(show)中使用，就是上面提到的，不记得的话再去回顾一下。

if ( show ) {
        .....................
} else {
    display = curCSS( elem, "display" );

    if ( !values[ index ] && display !== "none" ) {
        jQuery._data( elem, "olddisplay", display );
    }
}

 

最后分析一下toggle方法，其实也蛮简单的，遍历元素集合，判断bool是否为一个布尔值，是的话则判断state，state为真则调show方法，为假则调hide方法
如果bool不是布尔值，则判断该元素是否隐藏，隐藏的话则调show方法，显示的话则调hide方法

toggle: function( state, fn2 ) {
    var bool = typeof state === "boolean";

    ...........................

    return this.each(function() {
        if ( bool ? state : isHidden( this ) ) {
            jQuery( this ).show();
        } else {
            jQuery( this ).hide();
        }
    });
}

总结：

这3个方法最难的是show方法，先要获取values[ index ]保存的display默认值，如果它是空的，则需要调用css_defaultDisplay方法来变向的获取。
hide方法只是简单的dispaly=none，toggle只是根据state或者isHidden来调show方法或hide方法。