jQuery是一種廣泛使用的JavaScript庫,可以快速編寫交互性更強的網頁和Web應用程序。而課后練習題是深化對jQuery的學習與理解的重要方式。本文將介紹一些常見的jQuery課后練習題,并通過pre標簽展示相關代碼。
1. 實現一個點擊按鈕展開或收縮下拉列表:
$('.dropdown-btn').click(function(){ $(this).next().slideToggle('fast'); });
2. 實現平滑滾動到頁面頂部:
$('.top-btn').click(function(){ $('html, body').animate({scrollTop:0}, 'slow'); });
3. 給所有鏈接添加平滑過渡效果:
$('a').click(function(){ var href= $(this).attr('href'); $('html, body').animate({ scrollTop: $(href).offset().top }, 'slow'); return false; });
4. 實現鼠標懸停時放大或縮小圖片:
$('.img-btn').hover(function(){ $(this).animate({width:'110%', height:'110%'}, 'fast'); }, function(){ $(this).animate({width:'100%', height:'100%'}, 'fast'); });
5. 為下拉框添加自動完成功能:
var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", ]; $('.search-box').autocomplete({ source: availableTags });
通過以上代碼示例,可以更好地理解jQuery的工作原理,也可以更加熟練地應用它的各種方法來實現頁面交互效果。