第一次月測總結
阿新 • • 發佈：2021-11-21
1.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 所有圖片橫向佈局 10' 圖片之間的間隔為16px 10' 第一張圖片的左邊距為0 10' 最後一張圖片的右邊距為0 10'*/ body { background-color: cornsilk; width: 1200px; margin: 0 auto; } body>img { width: 100%; } .content { border: 1px solid red; height: 174px;} /* 在這裡填寫css程式碼 */ /* flex佈局 align-items: center;水平對齊 */ ul{ list-style: none; padding: 0; display: flex; justify-content: space-between; align-items: center;} ul li{ margin-right: 16px; } ul li:first-child{ margin-left: 0; } ul li:last-child{ margin-right:0; } </style> </head> <body> <img src="img/res.png"> <div class="content"> <!-- 在這裡填寫html程式碼 --> <ul> <li><img src="img/toplist_a01.jpg" alt=""></li> <li><img src="img/toplist_a02.jpg" alt=""></li> <li><img src="img/toplist_a03.jpg" alt=""></li> <li><img src="img/toplist_a04.jpg" alt=""></li> <li><img src="img/toplist_a05.jpg" alt=""></li> <li><img src="img/toplist_a06.jpg" alt=""></li> <li><img src="img/toplist_a07.jpg" alt=""></li> <li><img src="img/toplist_a08.jpg" alt=""></li> </ul> </div> </body> </html>
2.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/jquery-3.3.1.min.js"></script> <style> body { position: relative; text-align: center; } body>.small { display: inline-block; } body>.big { position: absolute; top: 0; left: 0; width: 300px; height: 300px; display: none; } </style> <script> /* 當滑鼠移入頁面小圖時，在滑鼠右側展示對應大圖， 滑鼠移入、移出、移動、事件將對應圖片載入到正確位置展示各10分 */ /* 在這裡填寫jquery程式碼，禁止修改html程式碼 */ window.onload = function() { var imgs = document.querySelectorAll("img");//所有小圖片 var big = document.querySelector(".big");//大圖片 for (var i = 0; i < imgs.length; i++) { imgs[i].onmousemove = function(e) { //滑鼠移動事件 big.style.top = e.y + 10 + "px"; big.style.left = e.x + 10 + "px"; big.src = this.src; //當前圖片的路徑賦給大圖片的路徑 } // 滑鼠移出隱藏 imgs[i].onmouseout = function() { big.style.display = "none"; } //// 滑鼠移入顯示 imgs[i].onmouseenter = function() { big.style.display = "block"; } } } </script> </head> <body> <img class="small" src="./img/toplist_a01.jpg" alt=""> <img class="small" src="./img/toplist_a02.jpg" alt=""> <img class="small" src="./img/toplist_a03.jpg" alt=""> <img class="big" src="./img/toplist_a01.jpg" alt=""> </body> </html>
3.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body { background-color: cornsilk; } table { text-align: center; border: 1px solid #ccc; width: 800px; margin: 10% auto; } table caption { font-size: 24px; padding: 10px; } table thead th { background-color: #CCCCCC; } label.count, label.money { padding: 0 5px; color: red; font-weight: bolder; } </style> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /* 全選/全不選 15' 刪除當前行（要有提示） 15' 資料行復選框 10' */ /* 在這裡填寫jquery程式碼，禁止修改html程式碼 */ $(function(){ //全選/全不選 $("#chkAll").change(function(){ var chk1=$(this).prop("checked"); $(":checkbox").prop("checked",chk1); }) //刪除 $("button").click(function() { var bh=$(this).attr("data-del"); confirm("您確定要刪除編號為"+bh+"的商品?"); $("table tr:eq(1)").remove(); }) //複選框 $(":checkbox").click(function(){ var chk=$(this).prop("checked"); var num= parseInt($(".count").text())+1; var num2=parseInt($(".count").text())-1; if(chk){ $(".count").text(num); }else{ $(".count").text(num2); } }) }) </script> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <caption>購物車商品管理</caption> <thead> <tr> <th> <input type="checkbox" id="chkAll" /> <label for="chkAll">全選</label> </th> <th>產品編號</th> <th>產品名稱</th> <th>產品單價</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" /></td> <td>1001</td> <td>Redmi 筆記本 15寸</td> <td>5999</td> <td><button type="button" data-del="1001">刪除</button></td> </tr> <tr> <td><input type="checkbox" /></td> <td>1003</td> <td>華為平板2</td> <td>2999</td> <td><button type="button" data-del="1003">刪除</button></td> </tr> <tr> <td><input type="checkbox" /></td> <td>1004</td> <td>華為膝上型電腦</td> <td>6888</td> <td><button type="button" data-del="1004">刪除</button></td> </tr> <tr> <td><input type="checkbox" /></td> <td>1005</td> <td>小米10青春版</td> <td>1299</td> <td><button type="button" data-del="1005">刪除</button></td> </tr> </tbody> <tfoot> <tr> <td colspan="5" style="text-align: right;">您已選購<label class="count">0</label>件，合計<label class="money">0</label>元</td> </tr> </tfoot> </table> </body> </html>
prop(name|properties|key,value|fn)：
獲取在匹配的元素集中的第一個元素的屬性值。
選中複選框為true，沒選中為false
jQuery 程式碼:
$("input[type='checkbox']").prop("checked");