JQuery简单小案例

Tabbar 切换效果

鼠标悬浮文本上时，显示对应的商品图片；

$(\"li\").mouseenter(function (e) {$(this).text();$(\"img\").attr(\"src\",`./images/${$(this).text()}.jpg`);})

悬浮效果

鼠标放在商品图片时，该图片高光，其他图片透明度降低；

$(\"img\").mouseenter(function (e) {$(this).css(\"opacity\", 1).siblings().css(\"opacity\", 0.5);})

米、厘米、毫米之间的单位换算

米、厘米、毫米其中一个输入框中输入数值，另外两个输入框显示相对应得数值；

$(\"#m\").on(\"input\", function (e) {$(\"#cm\").val(($(this).val()) * 100);$(\"#mm\").val(($(this).val()) * 1000);});$(\"#cm\").on(\"input\", function (e) {$(\"#m\").val(($(this).val()) / 100);$(\"#mm\").val(($(this).val()) * 10);});$(\"#mm\").on(\"input\", function (e) {$(\"#m\").val(($(this).val()) / 1000);$(\"#cm\").val(($(this).val()) / 10);})

全选和全部取消

单击全选的复选框时所有复选框全部选中或取消；所有复选框被选中时，全选的复选框被选中否则取消选中。

$(\"#all\").click(function (e) {console.log($(this).prop(\"checked\"));$(\".item\").prop(\"checked\", $(this).prop(\"checked\"));});$(\".item\").click(function () {if ($(\".item:checked\").length == $(\".item\").length) {$(\"#all\").prop(\"checked\", true);} else {$(\"#all\"). prop(\"checked\", false);}})