4.2 隐藏和显示元素
4.2 隐藏和显示元素
基本的.hide()
和.show()
方法不带任何参数。可以把它们想象成类似.css('display'
,’string')
方法的简写方式,其中string
是适当的显示值。不错,这两个方法的作用就是立即隐藏或显示匹配的元素集合,不带任何动画效果。
其中,.hide()
方法会将匹配的元素集合的内联style
属性设置为display:none
。但它的聪明之处是,它能够在把display
的值变成none
之前,记住原先的display
值,通常是block
、inline
或inline-block
。
恰好相反,.show()
方法会将匹配的元素集合的display
属性,恢复为应用display: none
之前的可见属性。.show()
和.hide()
的这种特性,使得它们非常适合隐藏那些默认的display
属性在样式表中被修改的元素。例如,在默认情况下,<li>
元素具有display:list-item
属性。但是,为了构建水平的导航菜单,它们可能会被修改成display:inline
。而在类似这样的<li>
元素上面使用.show()
方法,不会简单地把它重置为默认的display:list-item
,因为那样会把<li>
元素放到单独的一行中;相反,.show()
方法会把它恢复为先前的display:inline
状态,从而维持水平的菜单设计。
要示范这两个方法,最明显的例子就是在前面的HTML
中再添加一个新段落,然后在第一个段落末尾加上一个read more
链接:
当DOM
就绪时,选择一个元素并调用.hide()
方法,参见代码清单4-6。
1 | $(document).ready(function() { |
这里的.eq()
方法与第2章中讨论的:eq()伪类相似。这个方法返回jQuery
对象,其中包含一个元素(索引从0开始)。在这个例子中,.eq()
方法选择第二个段落并隐藏该段落,结果看起来如图4-3所示。
本文重点
隐藏元素
,**.hide()
方法会将匹配的元素集合的内联style
属性设置为display:none
**。并且能够在把display
的值变成none
之前,记住原先的display
值。
显示元素
.show()
方法会将匹配的元素集合的display
属性,恢复为hide()
方法应用display: none
之前的可见属性
eq方法
这里的.eq(x)
方法与第2章中讨论的:eq()
伪类相似。这个方法返回jQuery
对象中的x+1
个元素(从0开始),例如$('p').eq(1)
表示取得第2个段落.
event.preventDefault方法
event.preventDefault
方法可以避免该事件对象默认操作,如果event
是链接的话,则event.preventDefault()
表示阻止链接的默认操作.