Jquery的hide和show相当于css的display:none和display:block吗

Question

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

Answer 1

jquery的hide方法相当于display：none，show方法相当于display：'';
jquery的源码实现hide，show方法代码

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

    for ( ; index < length; index++ ) {
        elem = elements[ index ];
        if ( !elem.style ) {
            continue;
        }

        values[ index ] = jQuery._data( elem, "olddisplay" );
        display = elem.style.display;
        if ( show ) {
            // Reset the inline display of this element to learn if it is
            // being hidden by cascaded rules or not
            if ( !values[ index ] && 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", defaultDisplay(elem.nodeName) );
            }
        } else {
            hidden = isHidden( elem );

            if ( display && display !== "none" || !hidden ) {
                jQuery._data( elem, "olddisplay", hidden ? display : jQuery.css( elem, "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;
}
show: function() {
        return showHide( this, true );
    }
    hide: function() {
        return showHide( this );
    }

注意：在showHide()传入的第二形参为show===true时，进入的
第一个判断设置如果内联样式display === ‘none’就设置display：‘’；
第二个判断如果不是内联样式，会根据元素本身是inline,inline-block,block来设置不同的值，
比如是div你在css中设置的是display：none,现在采用show方法就会给元素设置行内样式display：block，
如果是a等行内元素，show方法设置的就是display：inline；
表现效果差不多。但是show方法执行，就必须要display：none存在，不管是内联样式，嵌入样式，外部样式。否则show方法不会对元素进行设置。