• 4.2 隐藏和显示元素
• 本文重点
  • 隐藏元素
  • 显示元素
  • eq方法
  • event.preventDefault方法

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。

$(document).ready(function() { 
  $('p').eq(1).hide();   
});

这里的.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()表示阻止链接的默认操作.

原文链接: 4.2 隐藏和显示元素