<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/jquery-1.11.3.js"></script> <style> div { border: 1px solid black; width: 400px; height: 300px; float: left; } table, tr, td { border: 1px solid gray; } </style> <script> $(function() { //获取多选框下标 值 $("div:first input[type=checkbox]").click(function() { var str = ""; var count = 0; $(":checked").each(function(index, domEle) { count++; str += $(domEle).next("a").text() + "、"; }); $("div:first p").html("当前选中了" + count + "项，分别是" + str); }); //隔行变色 前三项字体加粗 $("#btn1").click(function() { $("#two table tr:odd").css("background-color", "red"); $("#two table tr:even").css("background-color", "blue"); }); $("#btn2").click(function() { $("#two ul li:lt(3)").css("font-weight", "bolder"); }); //开关灯 $("#btn_close").click(function() { if ($(this).text() == "关灯") { $("#show_light").css("background-color", "black"); $(this).text("开灯"); } else { $("#show_light").css("background-color", "white"); $(this).text("关灯"); } }); //鼠标点击整行变色 /*$("#four table tr").mouseover(function() { $(this).css("background-color", "yellow"); });*/ $("#four table tr").click(function() { $(this).css("background-color", "yellow"); }); $("#four table tr").mouseout(function() { $(this).css("background-color", "white"); }); //计算 $("#btn_equal").click(function() { var value1 = $("#txt1").val() * 1; var value2 = $("#txt2").val() * 1; $("#txt3").val(value1 + value2); }); //全选反选 $("#allcheck").click(function() { $("#last input:checkbox").each(function(index, domEle) { $(domEle).prop("checked", "true"); }); }); $("#invertcheck").click(function() { $("#last input:checkbox").each(function(index, domEle) { $(domEle).prop("checked", !$(domEle).prop("checked")); }); }); $("#unallcheck").click(function() { $("#last input:checkbox").each(function(index, domEle) { $(domEle).removeAttr("checked"); }); }); }) </script> </head> <body> <div> <input type="checkbox"><a>.net</a> <input type="checkbox"><a>java</a> <input type="checkbox"><a>php</a> <p></p> </div> <div id="two"> <button id="btn1">表格隔行变色</button> <button id="btn2">前三名</button><br> <table> <tr> <td>火箭</td> </tr> <tr> <td>魔术</td> </tr> <tr> <td>湖人</td> </tr> <tr> <td>骑士</td> </tr> <tr> <td>太阳</td> </tr> </table> <ul> <li>火箭</li> <li>火箭</li> <li>火箭</li> <li>火箭</li> <li>火箭</li> </ul> </div> <div id="show_light"> <button id="btn_close">关灯</button> </div> <div id="four"> <table> <tr> <td>TOP1</td> <td>夏承凛</td> </tr> <tr> <td>TOP2</td> <td>问奈何</td> </tr> <tr> <td>TOP3</td> <td>荧祸</td> </tr> <tr> <td>TOP4</td> <td>元佛子</td> </tr> <tr> <td>TOP5</td> <td>夜雨沧神</td> </tr> </table> </div> <div> <input type="text" id="txt1">+<input type="text" id="txt2"><button id="btn_equal">=</button><input type="text" id="txt3"> </div> <div id="last"> <input type="checkbox" id="">菊花台 <br> <input type="checkbox" id="">千里之外 <br> <input type="checkbox" id="">青花瓷 <br> <input type="checkbox" id="">兰亭序 <br> <input type="checkbox" id="">超人不会飞 <br> <input type="checkbox" id="">七里香 <br> <input type="checkbox" id="">龙战骑士 <p>============================</p> <button id="allcheck">全选</button> <button id="invertcheck">反选</button> <button id="unallcheck">全不选</button> </div> </body> </html>