jQuery 知识量:7 - 32 - 105
如果想隐藏或显示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,进而恢复显示了。
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6