Jquery是一種非常流行的JavaScript庫,它能幫助我們更加方便地完成許多js編程任務。其中許多實際編程需求中,我們需要制作一些簡易的網頁特效,比如讓一個div在點擊事件下顯示或隱藏。下面就是如何使用Jquery來實現這個效果的示例:
<!DOCTYPE html> <html> <head> <title>jQuery Show Hide Effect</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style> .myDiv { width: 200px; height: 150px; border: 1px solid black; display: none; } </style> </head> <body> <button onclick="showHide()">Show/Hide</button> <div id="myDiv" class="myDiv">Hello World!</div> <script> function showHide() { $('#myDiv').toggle(); } </script> </body> </html>
其中,我們使用了Jquery中的toggle()函數來實現元素的顯示和隱藏。在樣式定義和HTML部分,我們先設置了一個包含了Hello World!的div,并將其display屬性設置為none,這樣在頁面加載時,它就是不可見的。在JS代碼部分,我們定義了一個showHide()函數,而其內部就只有一行Jquery代碼,這行代碼就是toggle()函數所做的操作——讓含有ID"myDiv"的元素在點擊事件發生后顯示或隱藏。
總之,使用Jquery來實現div在點擊事件下的顯示和隱藏,無論是從代碼復雜度、還是從開發效率角度來看,都相比傳統JavaScript都要更加方便和快捷。