jQuery的显示和隐藏
生活随笔
收集整理的這篇文章主要介紹了
jQuery的显示和隐藏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在 jQuery 中可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素，以及使用 toggle() 方法能夠切換 hide() 和 show() 方法。
隱藏例子：
1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>jquey隱藏顯示</title>6 <!-- jquery文件自己下載引用近來即可，我這里是1.12.0的壓縮版 -->7 <script type="text/javascript" src="jquery-1.12.0.min.js"></script>8 <script type="text/javascript">9 $(document).ready(function(){ 10 $('p').click(function(){ 11 $(this).hide(); 12 }) 13 }) 14 </script> 15 </head> 16 <body> 17 <p>點我，消失</p> 18 <p>點我，我也消失</p> 19 </body> 20 </html>通過 jQuery，還可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素：
-------------------------------------------------------------------- 注：如果你對python感興趣，我這有個學習Python基地，里面有很多學習資料，感興趣的+Q群：895817687 -------------------------------------------------------------------- <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jquey隱藏顯示</title><style>div{width:100px;height:100px;border:1px solid red;}</style><!-- jquery文件自己下載引用近來即可，我這里是1.12.0的壓縮版 --><script type="text/javascript" src="jquery-1.12.0.min.js"></script><script type="text/javascript">$(document).ready(function(){$('.show1').click(function(){$('div').show(1000);}) $('.hide1').click(function(){$('div').hide(1000);}) })</script> </head> <body><button class="show1">顯示</button><button class="hide1">隱藏</button><div><p>點我，消失</p><p>點我，我也消失</p></div> </body> </html>通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。
例子：
1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>jquey隱藏顯示</title>6 <style>7 div{width:100px;height:100px;border:1px solid red;}8 </style>9 <!-- jquery文件自己下載引用近來即可，我這里是1.12.0的壓縮版 --> 10 <script type="text/javascript" src="jquery-1.12.0.min.js"></script> 11 <script type="text/javascript"> 12 $(document).ready(function(){ 13 $(".show1").click(function(){ 14 $("div").toggle("slow"); 15 }); 16 }); 17 </script> 18 </head> 19 <body> 20 <button class="show1">顯示&隱藏</button> 21 <div> 22 <p>點我，消失</p> 23 <p>點我，我也消失</p> 24 </div> 25 </body> 26 </html> 與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的jQuery的显示和隐藏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery 事件介绍
- 下一篇： jQuery的淡入和淡出简单介绍