jQuery使用hide()和show()隐藏显示元素,toggle()显示和隐藏切换

时间:2021-02-20 18:00:20

导读:jQuery使用hide()和show()隐藏显示元素,toggle()显示和隐藏切换约有913个文字,预计阅读时间1分钟以上。内容由生活百科整理编辑,关键词是jq判断是否隐藏,jQuery使用hide()和show()隐藏显示元素,toggle()显示和隐藏切换;主要讲解的内容是使用jQuery技术,可以使用hide()方法隐藏指定的Html元素,还可以使用show()方法显示指定的Html元素。...的相关信息,具体详情请阅读下文。

01第1节:hide()和show()方法的使用

使用jQuery技术,可以使用hide()方法隐藏指定的Html元素,还可以使用show()方法显示指定的Html元素。

Hide()方法和show()方法通常配合使用,一起实现Html元素的显示和隐藏得到某种动态效果。

一、显示/隐藏基本使用

下面我们列举一个例子,实际演示一下jQuery的显示和隐藏方法的使用。Html+jQuery代码如下:

在此代码中,分别对div2元素设置显示和隐藏。

jq判断是否隐藏 jQuery使用hide()和show()隐藏显示元素,toggle()显示和隐藏切换

图1

图1是运行的结果,页面上的2个按钮是用来控制下面的div块的显示和隐藏的。

jq判断是否隐藏 jQuery使用hide()和show()隐藏显示元素,toggle()显示和隐藏切换

图2

在图2中点击“隐藏”按钮就会将div元素隐藏掉,但不会删除。同样点击“显示”按钮,会再次将div元素显示出来。

二、显示/隐藏的速度

对于show()和hide()方法,是可以使用参数的,第1个参数是速度,可以取的值有:slow、fast,还可以是具体的毫秒数,1秒=1000毫秒。

下面来测试一下显示和隐藏的速度,Html+jQuery代码如下:

jQuery的hide()和show()方法,如果使用了速度,则会呈现一定的特效,给人一种玄幻的感觉。

jq判断是否隐藏 jQuery使用hide()和show()隐藏显示元素,toggle()显示和隐藏切换

图3

这样呈现出来的效果,元素的显示和隐藏不是一下子出来的,而是慢慢的显示和隐藏。

三、更多的使用方法

针对show()和hide()方法,还可以具有第二个参数,用于执行一段JS代码回调函数。

$(selector).hide(speed,callback);$(selector).show(speed,callback);Speed和callback是2个可选的参数。

对于speed参数,用于设置隐藏和显示的速度,可使用的值有"slow"、"fast" 或具体的毫秒数。

对于callback参数,用于隐藏和显示工作完成后所执行的回调函数名称,用于处理后续的工作。

02第2节:toggle()方法

在jQuery中,可以使用toggle()方法切换Html元素的显示和隐藏,实现了显示和隐藏这2个功能。

toggle()方法的功能是显示被隐藏的元素,并隐藏已显示的元素,这样可以使用一个按钮就可以实现显示和隐藏元素的功能。

toggle()方法的基本语法如下:

$(selector).toggle(speed,callback);

该方法的参数与hide()和show()方法的参数含义是一样的。

下面我们来举个例子,使用一下toggle()方法,代码如下:

Hello

在此代码中,使用了toggle("2000")来实现元素的显示/隐藏的切换,运行效果如下:

jq判断是否隐藏 jQuery使用hide()和show()隐藏显示元素,toggle()显示和隐藏切换

图4

在图4中,有一个按钮和一个div块,现在使用按钮事件来控制div块的显示和隐藏。

当点击按钮后,其运行效果如下图所示:

jq判断是否隐藏 jQuery使用hide()和show()隐藏显示元素,toggle()显示和隐藏切换

图5

通过效果可以看到,div块慢慢的隐藏了,再次点击按钮,则又会慢慢的显示出来。这2种效果是由toggle()这一个方法实现的。

以上就是由生活百科jq判断是否隐藏整理的“jQuery使用hide()和show()隐藏显示元素,toggle()显示和隐藏切换”的相关信息了。除特别注明外,本站所有内容均为生活百科整理排版。更多精彩内容可持续关注生活百科频道!转载请注明出处:jQuery使用hide()和show()隐藏显示元素,toggle()显示和隐藏切换:http://www.zenmele.net/article/31491.html

   

相关文章

好啊来啊 好运来临 好啊好啊 旱地忽律 哈弗H9 富时罗素 弗吉尼亚 福田奥铃 佛罗里达 凤凰资讯 凤凰直播 凤凰新闻 凤凰卫视 风云岁月 俄勒冈州 俄亥俄州

所有文章未经授权禁止转载、摘编、复制或建立镜像,如有违反,追究法律责任。举报邮箱:81156344@qq.com

Copyright © 2019-2030 生活百科网 版权所有

最新更新| 网站地图