jQuery

jQuery 知识量:7 - 32 - 105

4.2 隐藏和显示元素><

.hide()与.show()函数- 4.2.1 -

如果想隐藏或显示DOM中的某个元素,可以使用jQuery提供的.hide()和.show()函数。

.hide()函数的功能是立刻将某个元素隐藏,类似于把某个元素的内联display设置为“none”。但是.hide()函数并不是简单的将元素隐藏就结束,而是在隐藏之前,会记住元素当前display的值,当恢复显示时,会恢复为隐藏之前的显示状态,这是一种非常智能的设计。

.show()函数的功能是立刻显示隐藏的元素,是.hide()函数的逆向功能,它会将隐藏的元素display值恢复为原来的显示状态。

通常情况下,.hide()与.show()常配合使用。

HTML代码如下:

<div>
    <p>hello</p>
    <a class="show" href="#">show</a>
    <a class="hide" href="#">hide</a>
</div>

对应的JavaScript代码如下:

$(document).ready(function () {
    $('a.hide').click(function () {
        $('p').hide();
        return false;
    });
    $('a.show').click(function () {
        $('p').show();
        return false;
    });
});

以上代码中,分别设置了一个显示和隐藏p元素的开关按钮。其中,对类为hide的链接a绑定了一个点击事件,当a.hide被点击时,找到p元素并立即隐藏它。对类为show的链接a也绑定了一个点击事件,当a.show被点击时,找到p元素并立即显示它。

由以上示例可以看出,.hide()只是暂时隐藏元素,并不实际删除元素,否则就无法通过a.show的点击事件查找隐藏的p,进而恢复显示了。