![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：jQuery中, 要注意当前是jQ对象,还是js对象, 这个很重要
Collection
Collection
使用jQuery实现功能
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>换肤</title><style>.container {width: 100px;display: flex;box-sizing: border-box;}.container>img {width: 100%;margin: 0 3px 0 0;border: 3px solid white;opacity: 0.6;}.container>img:hover {opacity: 1;cursor: pointer;width: 110%;}html,body {height: 100%;}body {background-image: url("imgs/03.jpg");background-repeat: no-repeat;background-size: 100% 100%;}</style></head><body><div class="container"><img src="imgs/03.jpg" alt=""><img src="imgs/06.jpg" alt=""><img src="imgs/07.jpg" alt=""></div></body><script src="../lib/jquery-3.5.1.js"></script><script>$("div").click(function (ev) {$("body").css("background-image", "url(" + ev.target.src + ")");})</script></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自动计算价格</title><style>table {border: 1px solid;border-collapse: collapse;margin: 20px auto;width: 500px;text-align: center;}tr td {border: 1px solid;}caption {margin-bottom: 10px;}div {width: 500px;margin: auto;}thead {background-color: aquamarine;}button {float: right;width: 80px;}.tain {box-sizing: border-box;width: 50px;text-align: center;}</style></head><body><table><caption>购物车</caption><thead><tr><td><input type="checkbox" name="itemAll" id="itemAll" checked>全选</td><td>ID</td><td>品名</td><td>单位</td><td>单价/元</td><td>数量</td><td>金额/元</td></tr></thead><tbody><tr><td><input type="checkbox" name="itemID" id="itemID" value="SN-1010" checked></td><td>SN-1010</td><td>MacBook Pro电脑</td><td>台</td><td>18999</td><td><input type="number" class="tain" name="counter" value="1" min="0" step="1" id=""></td><td></td></tr><tr><td><input type="checkbox" name="itemID" id="itemID" value="SN-1020" checked></td><td>SN-1020</td><td>iPhone手机</td><td>部</td><td>4999</td><td><input type="number" class="tain" name="counter" value="1" min="0" step="1" id=""></td><td></td></tr><tr><td><input type="checkbox" name="itemID" id="itemID" value="SN-1030" checked></td><td>SN-1030</td><td>智能Ai音箱</td><td>只</td><td>399</td><td><input type="number" class="tain" name="counter" value="1" min="0" step="1" id=""></td><td></td></tr><tr><td><input type="checkbox" name="itemID" id="itemID" value="SN-1040" checked></td><td>SN-1040</td><td>SSD移动硬盘</td><td>个</td><td>888</td><td><input type="number" class="tain" name="counter" value="1" min="0" step="1" id=""></td><td></td></tr><tr><td><input type="checkbox" name="itemID" id="itemID" value="SN-1050" checked></td><td>SN-1050</td><td>黄山毛峰</td><td>斤</td><td>999</td><td><input type="number" class="tain" name="counter" value="1" min="0" step="1" id=""></td><td></td></tr><tr><td colspan="5">总计</td><td id="totalNum"></td><td id="totalPrice"></td></tr></tbody></table><div><button>结算</button></div><script src="../lib/jquery-3.5.1.js"></script><script>$("#itemAll").on("change", chend);function chend(ev) {$("input[name='itemID']").prop("checked", ev.target.checked);if ((ev.target.checked)) {$("input[type='number']").prop("value", 1);} else {$("input[type='number']").prop("value", 0);}// 获取商品数量Counts = getCounts(numbers);// 获取商品单价Prices = getPrices(Price);// 获取商品金额Amouts = getAmouts(Counts, Prices);// 获取商品总数量totalNum = num(Counts);// 获取商品总金额totalPrice = toPrice(Amouts);// 渲染商品金额到页面中$("tbody>tr>td:last-of-type").each(function (key, value) {$(value).html(Amouts[key]);});// 渲染商品总数量到页面中$("#totalNum").html(totalNum);// 渲染商品总金额到页面中$("#totalPrice").html(totalPrice);}$("input[name='itemID']").change(function (ev) {var count = 0;// 循环按钮选中状态的个数$("input[name='itemID']").each(function (key, value) {if (value.checked) count++;});if (ev.target.checked) {$(ev.target).parent().siblings().eq(4).children().prop("value", 1);} else {$(ev.target).parent().siblings().eq(4).children().prop("value", 0);}// 根据个数判断全选按钮是否要选ziyu$("#itemAll").prop("checked", (count === $("input[name='itemID']").length));// 获取商品数量Counts = getCounts(numbers);// 获取商品单价Prices = getPrices(Price);// 获取商品金额Amouts = getAmouts(Counts, Prices);// 获取商品总数量totalNum = num(Counts);// 获取商品总金额totalPrice = toPrice(Amouts);// 渲染商品金额到页面中$("tbody>tr>td:last-of-type").each(function (key, value) {$(value).html(Amouts[key]);});// 渲染商品总数量到页面中$("#totalNum").html(totalNum);// 渲染商品总金额到页面中$("#totalPrice").html(totalPrice);});// 商品数量var Counts = [];var numbers = $("input[type='number']");Counts = getCounts(numbers);function getCounts(numbers) {return numbers.map(function (key, item) {return parseInt(numbers.get(key).value);}).get();};console.log(Counts);// 商品单价var Prices = [];var Price = $("tbody>tr>td:nth-of-type(5)");Prices = getPrices(Price);function getPrices(Price) {return Price.map(function (key, value) {return parseInt($(value).html());}).get();};console.log(Prices);// 计算商品金额var Amouts = [];Amouts = getAmouts(Counts, Prices);function getAmouts(Counts, Prices) {var amount = [];for (var i = 0; i < Counts.length; i++) {am = Counts[i] * Prices[i];amount.push(am);};return amount;}console.log(Amouts);// 把数据渲染到页面中$("tbody>tr>td:last-of-type").each(function (key, value) {$(value).html(Amouts[key]);});// 获取总数量var totalNum = 0;totalNum = num(Counts);function num(Counts) {return Counts.reduce(function (prev, next) {return prev += next;});};console.log(totalNum);// 渲染到页面中$("#totalNum").html(totalNum);// 获取总金额var totalPrice = 0;totalPrice = toPrice(Amouts);function toPrice(Amouts) {return Amouts.reduce(function (prev, next) {return prev += next;});};console.log(totalPrice);// 渲染到页面中$("#totalPrice").html(totalPrice);// 绑定事件numbers.on("change", autoCalculate);function autoCalculate(ev) {// 获取商品数量Counts = getCounts(numbers);// 获取商品单价Prices = getPrices(Price);// 获取商品金额Amouts = getAmouts(Counts, Prices);// 获取商品总数量totalNum = num(Counts);// 获取商品总金额totalPrice = toPrice(Amouts);// 渲染商品金额到页面中$("tbody>tr>td:last-of-type").each(function (key, value) {$(value).html(Amouts[key]);});// 渲染商品总数量到页面中$("#totalNum").html(totalNum);// 渲染商品总金额到页面中$("#totalPrice").html(totalPrice);}</script></body></html>
1.对于换肤图片案列，明白了一件事一开始一直以为body的高度就是页面的高度，一直想着为什么图片的自适应实现不了，查看控制器才发现body的高度没设置的话是靠其子元素的高度撑开的，不是页面的高度。
2.自动计算案列在获取数量或者单价数组时，用jQuery的map()方法得到的值用parseInt()方法后得到的是jQuery的对象而不是数组，用了get()方法后才是数组，我的想法是parseInt()转为数值，那么应该直接成数组不是吗，这里有点不明白
天蓬老师