这篇文章将为大家详细讲解有关jquery实现元素中隐藏或显示效果的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
jquery实现元素隐藏和显示效果有两种方法,分别为:
1、使用 hide() 和 show() 方法来隐藏和显示元素
2、使用toggle() 方法来隐藏和显示元素
下面我们来看看这两种方法具体是如何实现元素的隐藏和显示。
hide() 和 show() 方法实现隐藏和显示元素
jquery的hide()方法用来隐藏元素
jquery的show()方法用来显示元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ $("p").hide(); }); $(".btn2").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>这是一段测试文字。</p> <button class="btn1">Hide--隐藏</button> <button class="btn2">Show--显示</button> </body> </html>
效果图:
点击隐藏按钮,就可以使用hide()方法来隐藏元素:
点击显示按钮,就可以使用show()方法来显示被隐藏的元素:
toggle() 方法实现隐藏和显示元素(隐藏或显示的切换)
toggle() 方法可以切换元素的可见状态,即:切换元素的隐藏或显示。
toggle() 方法会判断元素的隐藏或显示,如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn").click(function(){ $("p").toggle(); }); </script> </head> <body> <p>这是一段测试文字。</p> <button class="btn">toggle()</button> </body> </html>
效果图:
注意:使用jquery方法,无论是hide()、show()、toggle(),还是其他方法,都要先引用jquery.js文件。
关于jquery实现元素中隐藏或显示效果的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
当前文章:jquery实现元素中隐藏或显示效果的方法-创新互联
网址分享:https://www.cdcxhl.com/article44/ddhgee.html
成都网站建设公司_创新互联,为您提供网站维护、ChatGPT、响应式网站、网站导航、网站设计公司、网站制作
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联