Jquery是一種JavaScript庫,是一種跨平臺的簡化代碼的解決方案,它的出現是為了將JS代碼變得更簡潔、更易用。在學習Jquery的過程中,練習是很重要的一種學習方式。下面就來介紹一些Jquery菜鳥練習題。
首先是一個最簡單的Jquery練習題。
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").slideToggle(); }); }); </script> <button>點擊切換</button> <p>練習Jquery</p>
這個練習是一個點擊按鈕,切換段落可見性的練習。代碼中引用了Jquery的庫文件。在ready函數中,綁定了button控件的點擊事件。點擊按鈕后,會切換p標簽的可見性。
接下來是一個實現輪播圖效果的Jquery練習。
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> var i = 0; var images = []; var time = 3000; images[0] = 'https://picsum.photos/id/237/200/300'; images[1] = 'https://picsum.photos/id/238/200/300'; images[2] = 'https://picsum.photos/id/239/200/300'; function changeImg(){ document.slide.src = images[i]; if(i < images.length - 1){ i++; } else { i = 0; } setTimeout("changeImg()", time); } window.onload = changeImg; </script> <img name="slide">
這個練習是一個實現圖片輪播效果的練習。代碼中定義了一個數組images,存放輪播圖的圖片地址。通過changeImg方法實現每次切換圖片。通過setTimeout方法,每隔一定時間調用changeImg方法。最后將輪播圖通過IMG標簽展示。
通過這些Jquery菜鳥練習題的演示,我們可以簡單了解Jquery的應用,也可以通過動手練習,加深對于Jquery的理解,掌握更多的技巧和應用方法。
下一篇div span位置