通过阅读源码我们发现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方法。