JavaScript 第七章 作業
阿新 • • 發佈：2018-12-19
1.jQuery中有哪些基礎事件方法？
滑鼠事件 ：click、mouseover、mouseout、mouseenter、mouseleave
鍵盤事件 ：keydown、keyup、keypress
瀏覽器事件：resize
2.jQuery中常用的動畫方式有哪些？並簡述他們的特點。
show()：可以控制元素的顯示，還能定義顯示元素時的效果，如顯示速度。 hide()：可以控制元素的隱藏，還能定義隱藏元素時的效果，如隱藏速度。 toggle()：除了可以模擬滑鼠的連續單擊事件外，還能用於切換元素的可見狀態。 fadeIn()：控制元素淡入，同時可以定義元素淡入時的效果，如顯示速度。 fadeOut()：元素淡出，同時可以定義元素淡出時的效果，如淡出速度。 slideUp()：元素從下到上縮短直至隱藏。 slideDown()：元素會從上向下延伸顯示。 animate()：可以自定義動畫，例如實現字型大小、位置等變化。
3.將一個HTML DOM元素隱藏有哪些方式？
（1）使用css()或addClass()方法該變元素的display樣式的值為none。
（2）呼叫hide()方法。
（3）呼叫toggle()切換元素的可見狀態。
（4）呼叫fadeOut()或slideUp()隱藏元素。
4.製作頁面導航特效，初始狀態下僅顯示"購物特權"主選單，單擊"購物特權"二級選單在顯示和隱藏之間切換，當滑鼠放到二級子選單上時，子選單新增背景顏色
實現程式碼如下:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>導航特效</title> <style type="text/css"> * { margin: 0px; padding: 0px; font-size: 12px; } #nav .navsBox { width: 160px; } #nav .navsBox .firstNav { height: 45px; line-height: 45px; background-color: #EBEBEB; border-left: 10px solid #FE705C; padding-left: 20px; width: 130px; font-weight: bold; cursor: pointer; } #nav .navsBox ul { display: none; list-style: none; } #nav .navsBox ul li { display: block; height: 45px; line-height: 45px; padding-left: 70px; width: 90px; background: #F2F2F2 33px 7px no-repeat; } #nav .navsBox ul li.jedh { background-image: url(img/huan.gif); } #nav .navsBox ul li.jlbbyk { background-image: url(img/you.gif); } #nav .navsBox ul li.jwljb { background-image: url(img/gouwu.gif); } #nav .navsBox ul li.mrljb { background-image: url(img/meiri.gif); } #nav .navsBox ul li.vipjtj { background-image: url(img/zhe.gif); } #nav .navsBox ul li.onbg { background-color: #F9DBD1; } #nav .navsBox ul li a { color: #000; text-decoration: none; } </style> </head> <body> <div id="nav"> <div class="navsBox"> <div class="firstNav">購物特權</div> <ul> <li class="jedh"> <a href="#">全額兌換</a> </li> <li class="jlbbyk"> <a href="#">俱樂部包郵卡</a> </li> <li class="jwljb"> <a href="#">購物領金幣</a> </li> <li class="mrljb"> <a href="#">每日領金幣</a> </li> <li class="vipjtj"> <a href="#">VIP階梯價</a> </li> </ul> </div> </div> <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function(){ $('#nav .navsBox .firstNav').click(function(){ var list = $('#nav .navsBox ul'); list.toggle(); }); $('#nav .navsBox ul li').mousemove(function(){ $(this).addClass('onbg'); }).mouseout(function(){ $(this).removeClass('onbg'); }) }) </script> </body> </html>
5.製作導航列表頁面，當單擊底部箭頭時，隱藏選單項的後四項，並且箭頭向下，再次單擊底部箭頭，顯示隱藏的選單項，並且底部箭頭向上
實現程式碼如下:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FAQ列表</title> <style type="text/css"> * { margin: 0px; padding: 0px; font-size: 12px; } a { color: #000; text-decoration: none; } #menu { margin: 30px; width: 188px; background-color: #EFFDFA; } #menu .top { height: 40px; line-height: 40px; font-size: 14px; font-weight: bold; text-align: center; border: 1px solid #93D6C5; border-bottom: none; } #menu ul.nav { list-style: none; } #menu ul.nav li { display: block; height: 30px; line-height: 30px; border: 1px solid #93D6C5; border-top: none; padding-left: 30px; background: url(img/point.jpg) no-repeat 15px center; } #menu ul.nav li.lastone { border: none; cursor: pointer; background: #fff url(img/up.jpg) no-repeat center top; } #menu ul.nav li.up { background: #fff url(img/down.jpg) no-repeat center top; } span.icon { float: right; margin-right: 10px; margin-top: 10px; } </style> </head> <body> <div id="menu"> <div class="top">全部商品詳細分類</div> <ul class="nav"> <li> <a href="#">尾品彙</a> </li> <li> <a href="#">圖書音像數字管</a> </li> <li> <a href="#">美妝個護</a> </li> <li> <a href="#">傢俱、家紡、家裝</a> </li> <li> <a href="#">鞋靴、箱包</a> </li> <li> <a href="#">珠寶裝飾</a> </li> <li> <a href="#">手錶/眼鏡/禮品</a> </li> <li> <a href="#">運動戶外</a> </li> <li> <a href="#">食品、茶、酒</a> </li> <li> <a href="#">手機、數碼</a> </li> <li> <a href="#">電腦辦公</a> </li> <li class="lastone"></li> </ul> </div> <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function(){ $('#menu li.lastone').click(function(){ $('#menu li:gt(5):not(:last)').toggle(); $(this).toggleClass('up'); }) }) </script> </body> </html>