jQuery是一種快速,小巧且功能強大的JavaScript庫。它可以使HTML文檔遍歷,處理事件,執行動畫和添加效果,擴展了JavaScript的功能。
$(document).ready(function(){ //當頁面加載完成后執行以下代碼 $(".top-menu").hover(function(){ //當鼠標移入.top-menu元素時執行以下代碼 $(this).addClass("hover"); $(this).find(".menu-content").show(); },function(){ //當鼠標移出.top-menu元素時執行以下代碼 $(this).removeClass("hover"); $(this).find(".menu-content").hide(); }); $(".promo").hover(function(){ //當鼠標移入.promo元素時執行以下代碼 $(this).addClass("hover"); $(this).find(".promo-content").show(); },function(){ //當鼠標移出.promo元素時執行以下代碼 $(this).removeClass("hover"); $(this).find(".promo-content").hide(); }); $(".slide").hover(function(){ //當鼠標移入.slide元素時執行以下代碼 $(this).find(".prev-btn,.next-btn").show(); },function(){ //當鼠標移出.slide元素時執行以下代碼 $(this).find(".prev-btn,.next-btn").hide(); }); });
以上是淘寶首頁使用jQuery實現的一些效果。比如當鼠標移入.top-menu元素時,顯示該菜單下的子菜單;當鼠標移入.promo元素時,顯示該商品的促銷信息;當鼠標移入.slide元素時,顯示該幻燈片的前后按鈕。