一、定时器示例
功能：让input的文本框，显示时间，并实时更新
逻辑思路：
1.先定义一个函数，用来把当前时间赋值给input.value
2.开始button设置点击事件，并用setInterval设置间隔时间运行（判断setInterval的返回值是否undefined，保证只有一个计时器存在）
3.结束button用clearInterval来停止事件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>04定时器练习</title> </head> <body> <form action="" method="post" enctype="multipart/form-data" > <input id="i1" class="c1" type="text" > <input id="start" class="c1" type="button" value="开始" > <input id="stop" class="c1" type="button" value="停止"> <script> var t; //声明一个全局变量保存定时器 function foo(){ var now = new Date(); var nowStr = now.toLocaleString(); var i1Ele = document.getElementById("i1"); i1Ele.value=nowStr; //在input框获取当前时间 } var startButton = document.getElementById("start"); startButton.onclick = function () { foo(); console.log(t); // t = setInterval(foo,1000); if (!t){ t = setInterval(foo,1000); } //如果不判断t，那么t每次按一下开始就会生成一个id，而clear只会默认清除最后一个ID //会造成无法停止，且页面里同时出现多个定时器的现象 } var stopButton = document.getElementById("stop"); stopButton.onclick = function () { clearInterval(t); // 清除t对应的那个定时器,t的值还在，所以需要给t重新赋值 console.log(t); t = undefined; } </script> </form> </body> </html>
二、搜索框示例：
功能：让input的文本框，当onfocus的时候自动清空，当onblur的时候变为初始值
逻辑思路：
用onfocus和onblur这两个事件，来操作input的value值
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>05搜索框示例</title> </head> <body> <form action=""> <input type="text" id="i1" placeholder="gkxxxx"> <input type="button" id="i2" value="搜索"> </form> <script> var i1Ele = document.getElementById("i1"); i1Ele.onfocus = function () { this.placeholder=""; } i1Ele.onblur = function () { if (!this.placeholder.trim() || !this.value.trim()){ i1Ele.placeholder="gkxxxx"; i1Ele.value="gkxxxx"; } } </script> </body> </html>
三、select联动示例
功能：在select 1 中选择完所属市后，select 2 自动跳出该市对应的区县
逻辑思路：
1.获取select 1 选择时切换对应的value，用onchange事件
2.通过value，去字典中取到对应的区县
3.在select中新增option 把每个区县的值，赋值给 option.innertext
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>06 select联动示例</title> </head> <body> <form action=""> <select name="select1" id="s1"> <option value="0">--请选择--</option> <option value="1">厦门</option> <option value="2">北京</option> </select> <select name="select2" id="s2"></select> </form> <script> data = {1:["思明区","集美区","湖里区"],2:["朝阳区","海淀区","昌平区"]}; var s1Ele = document.getElementById("s1"); s1Ele.onchange=function () { console.log(this.value);//每次一切换选择onchange就会捕捉到当前选择的value var areas = data[this.value]; //通过value获取当前市所有的区 var s2Ele = document.getElementById("s2"); s2Ele.innerHTML=""; //每次选择完要清空s2，不然s2的值会一直累加 // s2Ele.removeChild(); for (var i=0;i<areas.length;i++){ var opEle = document.createElement("option"); opEle.innerText=areas[i]; s2Ele.appendChild(opEle); } } </script> </body> </html>
四、菜单栏隐藏
功能：左侧的菜单栏，鼠标点击对应的菜单栏，则该菜单显示，其他菜单隐藏
逻辑思路：
1.新增类 hide {display:none;}
2.用jQuery的click事件，通过选择器选到想隐藏的菜单，addClass("hide") 再通过选择器把当前 $(this)的元素显示
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>左菜单栏隐藏</title> <style> * { margin:0; padding:0; } ul { list-style-type: none; } a { text-decoration: none; } .left-menu { width: 15%; height: 500px; background: #DDDDDD; /*display: inline;*/ } .hide { display: none; } .menu-title { text-align: center; } </style> </head> <body> <div class="left-menu"> <div class="menu-title">菜单栏一</div> <div class="menu-items"> <ul> <li><a href="">菜单1</a></li> <li><a href="">菜单2</a></li> <li><a href="">菜单3</a></li> </ul> </div> <div class="menu-title">菜单栏二</div> <div class="menu-items"> <ul> <li><a href="">菜单1</a></li> <li><a href="">菜单2</a></li> <li><a href="">菜单3</a></li> </ul> </div> <div class="menu-title">菜单栏三</div> <div class="menu-items"> <ul> <li><a href="">菜单1</a></li> <li><a href="">菜单2</a></li> <li><a href="">菜单3</a></li> </ul> </div> </div> <script src="jquery-3.2.1.min.js"></script> <script> // 需求分析 // 找到所有的.menu-title标签,绑定点击事件 $(".menu-title").click(function () { // 点击事件具体要做的事儿 // 1. 找到当前点击菜单下面的.menu-items,把它显示出来(移除hide类) // $(this).next().removeClass("hide"); $(this).next().toggleClass("hide"); // 2. 把其他的.menu-items隐藏,添加hide类 $(this).next().siblings(".menu-items").addClass("hide"); }) // $(".menu-title").click(function () { // // 1. 找到所有的.menu-items, 隐藏 // var $currMenuitem = $(this).next(); // $(".menu-items").not($currMenuitem).addClass("hide"); // 所有的二级菜单都是隐藏的 // // 2. 找到当前点击菜单下面的.menu-items,把它显示出来(移除hide类) // $(this).next().toggleClass("hide"); // }) </script> </body> </html>
（类似的还有click时间的，关灯示例。点一下添加hide类，再点一下取消hide类，用toggleClass）
五、返回顶部示例
功能：右下角设置按钮，返回顶部。当浏览器向下滚动一定距离的时候，出现返回顶部按钮
逻辑思路：看代码啦
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>04返回顶部示例</title> <style> *{ margin: 0; padding: 0; } .c2 { width: 100px; height: 100px; background-color: aquamarine; } .c3 { height: 80px; } .hide { display: none; } #b2 { width: 84px; /*height: 60px;*/ border: solid 2px blue; position: fixed; right: 20px; bottom: 20px; } </style> </head> <body> <button id="b1">点我</button> <div class="c2">我是有背景的div</div> <div class="c3">我是div1</div> <div class="c3">我是div2</div> <div class="c3">我是div3</div> <div class="c3">我是div4</div> <div class="c3">我是div5</div> <div class="c3">我是div6</div> <div class="c3">我是div7</div> <div class="c3">我是div8</div> <div class="c3">我是div9</div> <div class="c3">我是div10</div> <div class="c3">我是div11</div> <div class="c3">我是div12</div> <div class="c3">我是div13</div> <div class="c3">我是div14</div> <div class="c3">我是div15</div> <div class="c3">我是div16</div> <div class="c3">我是div17</div> <div class="c3">我是div18</div> <div class="c3">我是div19</div> <div class="c3">我是div20</div> <div class="c3">我是div21</div> <div class="c3">我是div22</div> <div class="c3">我是div23</div> <div class="c3">我是div24</div> <div class="c3">我是div25</div> <div class="c3">我是div26</div> <div class="c3">我是div27</div> <div class="c3">我是div28</div> <div class="c3">我是div29</div> <div class="c3">我是div30</div> <button id="b2" class="hide">返回顶部</button> <script src="jquery-3.2.1.min.js"></script> <script> $("#b1").click(function () { $(".c2").offset({top:200,left:200}); }) $(window).scroll(function () { if ($(window).scrollTop()>100){ $("#b2").removeClass("hide") }else { $("#b2").addClass("hide") } }) $("#b2").click(function () { $(window).scrollTop(0); }) </script> </body> </html>
六、判断input中的text框是否为空，为空给提示，并不做操作
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>02登录校验完整版</title> </head> <body> <form action=""> <p> <label>用户名： <input type="text" name="username" class="notnull"> </label> </p> <p> <label>密码： <input id="i1" type="password" name="password" class="notnull"> </label> </p> <input type="submit" id="sub" value="提交"> <input type="reset" id="b1" value="重置"> </form> <script src="../jquery-3.2.1.min.js"></script> <script> /*整体思路 给提交按钮绑定单击事件，判断用户和密码框是否为空，为空则提醒，并不提交， 1.找到需要判断的文本框 class="notnull" 2.对找到所有的元素进行遍历，判断 .val().trim() 是否为空 3.如果为空，新增一个span标签，提醒 label名对应的文本框名字不能为空，并一旦发现一个为空就返回false 4.不为空则返回true */ $("#sub").on("click", function () { var flag = true; //要把flag设置在这里，这样click的时候才能重置flag $("label span").text(""); //保证span的text不会重复添加 var $notnull = $(".notnull"); for (var i = 0; i < $notnull.length; i++) { var $item = $($notnull[i]); if ($item.val().trim().length === 0) { var spanEle = document.createElement("span"); var labelName = $item.parent().text().trim().slice(0, 2); $(spanEle).css({"color":"red","font-size":"12px"}); $(spanEle).text("*"+labelName + "不能为空"); $(spanEle).insertAfter($item); flag = false; // return flag; //找到一处就返回 } }return flag; //全部找到再返回 return flag }) </script> </body> </html>
七、表格反选
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>作业需求分析</title> </head> <body> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>职位</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>小东北</td> <td>二人转演员</td> </tr> <tr> <td><input type="checkbox"></td> <td>乔小强</td> <td>xx演员</td> </tr> <tr> <td><input type="checkbox"></td> <td>韩涉</td> <td>导演</td> </tr> </tbody> </table> <input type="button" id="b1" value="全选"> <input type="button" id="b2" value="反选"> <input type="button" id="b3" value="取消"> <script src="jquery-3.2.1.min.js"></script> <script> // 点击全选,表格中所有的checkbox都选中 // 1. 找checkbox // 2. 全部选中 --> prop("checked", true); $("#b1").click(function () { $(":checkbox").prop("checked", true); }); // 点击取消 // 1. 找checkbox // 2. 全部取消选中 --> prop("checked", false); $("#b3").click(function () { $(":checkbox").prop("checked", false); }); // 反选 // 1. 找到所有的checkbox // 2. 判断 // 2.1 原来没选中的,要选中 // 2.2 原来选中的,要取消选中 $("#b2").click(function () { // 找到所有的checkbox,把它们保存在一个名叫 $checkboxEles 的变量中,方便后面使用 var $checkboxEles = $(":checkbox"); // 遍历所有的checkbox,根据每一个checkbox的状态做不同的操作 for (var i=0;i<$checkboxEles.length;i++){ // 把每一个checkbox包成jQuery对象 var $tmp = $($checkboxEles[i]); // 如果 checkbox是选中的 if ($tmp.prop("checked")){ // 取消选中 $tmp.prop("checked", false); }else { // 否则就选中 $tmp.prop("checked", true); } } }); </script> </body> </html>