1.上菜之前来个练手DOM
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <title>class相关操作</title> <style> .c1{ height: 200px; width: 200px; border-radius: 50%; background-color: grey; } .c2{ background-color: yellow; } </style> </head> <body> <div class="c1 c2" onclick="change(this);">div</div> <div class="c1 c2">div</div> <div class="c1 c2">div</div> <div class="c1 c2">div</div> <script> // DOM绑定事件切换标签颜色 var divEles = document.getElementsByTagName("div"); for (var i=0;i<divEles.length;i++) { divEles[i].onclick = function () { this.classList.toggle("c2"); } } </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <title>定时器练习</title> </head> <body> <input id="i1" type="text"> <input id="start" type="button" value="开始"> <input id="stop" type="button" value="停止"> <script> // 声明一个全局的t，保存定时器的ID var t; // 定义一个函数获取当前时间 function foo(){ var now = new Date(); var nowStr = now.toLocaleString(); // 转换成字符串 // 把时间字符串填到input框里 var i1Ele = document.getElementById("i1"); i1Ele.value = nowStr; } // 找到开始按钮，绑定事件 var startButton = document.getElementById("start"); startButton.onclick=function () { foo(); // 调用定义的时间函数 if (t===undefined){ t = setInterval(foo, 1000); //设置定时器，定时执行时间函数 } }; // 找到停止按钮，绑定事件 var stopButton = document.getElementById("stop"); stopButton.onclick=function () { // 清除之前设置的定时器和给t赋的值 clearInterval(t); t = undefined; } </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <title>搜索框</title> </head> <body> <input type="text" id="i1" value="用户名"> <input type="button" value="搜索"> <script> // 找到input框 var i1Ele = document.getElementById("i1"); i1Ele.onfocus=function(){ this.value=""; // 设置input框中的值 }; i1Ele.onblur=function () { // 失去焦点之后如果值为空就填回去 if(!this.value.trim()){ this.value="用户名"; } } </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <title>select联动示例</title> </head> <body> <select name="" id="s1"> <option value="0">请选择</option> <option value="1">北京</option> <option value="2">上海</option> </select> <select name="" id="s2"></select> <script> //设置待选择地区 var data = {1: ["昌平区", "朝阳区", "海淀区"], 2: ["静安区", "闵行区", "浦东区"]}; // 找到第一个select var s1Ele = document.getElementById("s1"); // 给第一个select绑定事件 s1Ele.onchange = function () { // this.value取到你选的是哪一个市,data[this.value]对应市的区 var areas = data[this.value]; // 找到第二个select var s2Ele = document.getElementById("s2"); //清空之前的 s2Ele.innerHTML=""; for (var i=0;i < areas.length;i++){ //生成option标签 var opEle = document.createElement("option"); //给option添加数据 opEle.innerText=areas[i]; // 添加到第二个select内部 s2Ele.appendChild(opEle); } } </script> </body> </html>
2.jquery部分操作解释
http://www.w3school.com.cn/jquery/jquery_selectors.asp 教学网址 1. jQuery(部分操作) 1. 选择器 $("") 1. 基本选择器 1. ID --> $("#d1") 2. 标签名 --> $("p") 3. class名 --> $(".C1") 4. 通用的 --> $("*") 5. 组合 --> $(".c1,div,a") 逗号分隔，满足所有条件 2. 层级选择器 1. 子子孙孙 --> $("x y") 2. 儿子选择器 --> $("x>y") 3. 弟弟选择器 --> $("x~y") 4. 毗邻选择器 --> $("label+input") 2. 筛选器 1. 基本筛选器 1. :first 2. :last 3. :eq() --> 从0开始 4. :even --> 偶数 5. :odd --> 奇数 6. :gt --> 大于 7. :lt --> 小于 8. :not --> $("div:not(.c1)") 9. :has --> $("div:has(.c1)") 2. 属性选择器 1. $("[title]") 2. $("[type='text']") 3. $("[type!='text']") 3. 表单选择器 1. $(":checkbox") --> $("input[type='checkbox']") 2. $(":text") 4. 表单对象 1. $(":disabled") --> 找到不可用的标签 5. 筛选器方法(只是应用场景和上面的基本筛选器不同而已) 1. $("div").first() 6. 常用的方法********* 1. .next() --> 找到挨着我的下一个同级标签 2. .nextAll() --> 下边同级的所有 3. .nextUntil()--> 往下找,直到找到终止条件为止 4. .prev() --> 找到挨着我的上一个同级标签 5. .prevAll() --> 下边同级的所有 6. .prevUntil() -> 往上找,直到找到终止条件为止 7. .siblings() --> 找所有的兄弟(前面的后面的都能找到) 8. .children() --> 找到所有的子孙 9. .parent() --> 找到上一级父级标签 10. .parents() --> 找到所有 11. .parentsUntil() 往上找,直到找到终止条件为止 12. .find(各种条件都可以写) 3. 样式操作******* 1. 操作class类 1. .addClass() 添加属性 2. .removeClass() 删除属性 3. .hasClass("xx") 检查是否包含xx属性 4. .toggleClass() 包含添加和删除属性 4. 大小 1. height() 样式高度 2. width() 样式宽度 3. innerHeight() 内容+内填充(padding)高度 4. innerWidth() 内容+内填充(padding)宽度 5. outerHeight() 内容+内填充(padding)+边框(border)高度 6. outerWidth() 内容+内填充(padding)+边框(border)宽度 注意:outerHeight()和outerWidth()取得是内容+padding+border 2. 文档操作 1. 操作HTML .html() --> 类似于 innerHTML 2. 操作text .text() --> 类似于 innerText 3. 值 1. val()// 取得第一个匹配元素的当前值 2. val(val)// 设置所有匹配元素的值 3. 属性操作 1. attr() 1. attr(attrName) // 返回第一个匹配元素的属性值 2. attr(attrName, attrValue) // 为所有匹配元素设置一个属性值 3. attr({k1: v1, k2:v2}) // 为所有匹配元素设置多个属性值 4. removeAttr() // 从每一个匹配的元素中删除一个属性 2. prop() --> checkbox和radio用这个获取属性 removeProp() 移除属性
3.开始上正菜
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>jquery简单操作示例</title> <style> .c1 { height: 200px; width: 200px; border-radius: 50%; background-color: red; } .c2 { background-color: green; } </style> </head> <body> <div class="c1"></div> <script src="jquery-3.2.1.min.js"></script> <script> // 找标签 $("div.c1").click(function () { $(this).toggleClass("c2"); // 有就删掉 没有就加上 }) </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <title>左侧菜单点击事件</title> <style> .left-menu { position: fixed; left: 0; top: 0; width: 20%; height: 100%; background-color: rgb(47, 53, 61); } .menu { color: white; } .menu-title { text-align: center; padding: 10px 15px; border-bottom: 1px solid #23282e; } .menu-items { background-color: #181c20; } .item { padding: 5px 10px; border-bottom: 1px solid #23282e; } ul{ list-style-type: none; } .hide { display: none; } </style> </head> <body> <div class="left-menu"> <div class="menu"> <div class="menu-title">菜单一</div> <div class="menu-items"> <ul> <li class="item"><a href="">111</a></li> <li class="item"><a href="">222</a></li> <li class="item"><a href="">333</a></li> </ul> </div> <div class="menu-title">菜单二</div> <div class="menu-items hide"> <ul> <li class="item"><a href="">111</a></li> <li class="item"><a href="">222</a></li> <li class="item"><a href="">333</a></li> </ul> </div> <div class="menu-title">菜单三</div> <div class="menu-items hide"> <ul> <li class="item"><a href="">111</a></li> <li class="item"><a href="">222</a></li> <li class="item"><a href="">333</a></li> </ul> </div> </div> </div> <script src="jquery-3.2.1.min.js"></script> <script> // 找到所有的.menu-title标签，绑定事件(第一种) //$(".menu-title").click(function () { // 移除.menu-items的hide属性 // $(this).next().toggleClass("hide"); // 其他的添加hide隐藏 // $(this).next().siblings(".menu-items").addClass("hide"); //}) // (第二种方法) $(".menu-title").click(function () { // 找到所有的.menu-items var $currMenuitem = $(this).next(); // 所有的二级菜单都隐藏 $(".menu-items").not($currMenuitem).addClass("hide"); // 找到当前点击的菜单，显示出来(移除hide类) $(this).next().toggleClass("hide"); }) </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <title>input标签提交事件</title> <style> .error{ color:red; } </style> </head> <body> <form action="" id="f1"> <p> <label>用户名: <input class="need" name="username" type="text"> <span class="error"></span> </label> </p> <p> <label>密码: <input class="need" name="password" type="password"> <span class="error"></span> </label> </p> <p> <input id="b1" type="submit" value="登录"> <input id="cancel" type="button" value="取消"> </p> </form> <script src="jquery-3.2.1.min.js"></script> <script> $("#b1").click(function () { //找到input标签 var $needEles = $(".need"); //循环所有的input标签 for (var i=0;i<$needEles.length;i++){ // 判断input的值为不为空 if($($needEles[i]).val().trim().length===0){ // parent()父元素label trim()删除字符串开始和末尾的空格 //slice(0, -1)选中范围内的值，在这里是直接选中label标签的text信息 var labelName = $($needEles[i]).parent().text().trim().slice(0, -1); // 为空就选择span在里面显示错误信息 $($needEles[i]).next().text(labelName + "不能为空!"); } } return false; }) </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <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>演员</td> </tr> <tr> <td><input type="checkbox"></td> <td>大叔</td> <td>替死鬼</td> </tr> <tr> <td><input type="button" id="b1" value="全选"></td> <td><input type="button" id="b2" value="反选"></td> <td><input type="button" id="b3" value="取消"></td> </tr> </tbody> </table> <script src="jquery-3.2.1.min.js"></script> <script> //找到所有checkbox全部选择 $("#b1").click(function () { $(":checkbox").prop("checked", true); }); $("#b2").click(function () { //找到所有的checkbox var chanEle = $(":checkbox"); for (var i=0;i<chanEle.length;i++){ //获取当前循环的每一个标签 var current = $(chanEle[i]); // 判断当前标签有没有被选中 if (current.prop("checked")){ //选中了就取消 current.prop("checked", false); //没选中就选择 }else{current.prop("checked", true); } } }); //找到所有已选择checkbox全部取消 $("#b3").click(function () { $(":checkbox").prop("checked", false); }); </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <title>Title</title> <style> div{ position: relative; display: inline-block; } div>i{ display: inline-block;; color: red; right: -50px; position: absolute; top: -20px; opacity: 1; font-size: 50px; } </style> </head> <body> <div id="d1">点赞</div> <script src="jquery-3.2.1.min.js"></script> <script> $("#d1").on("click", function () { var newI = document.createElement("i"); //在创建的a标签中添加文本(+1) newI.innerText = "+1"; $(this).append(newI); //animate制造动态画面效果 $(this).children("i").animate({ opacity: 0 // 不透明级别,动态的慢慢透明 // 显示时间长短 }, 500) }) </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <title>绑定未来事件(已预知)</title> </head> <body> <table border="1" id="t1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>大宝</td> <td>傻乎乎</td> <td> <button class="delete">删除</button> </td> </tr> <tr> <td>2</td> <td>小宝</td> <td>好可爱</td> <td> <button class="delete">删除</button> </td> </tr> </tbody> </table> <button id="b1">添加一行数据</button> <script src="jquery-3.2.1.min.js"></script> <script> $("#b1").on("click", function () { //生成要添加的tr标签和数据 var trEle = document.createElement("tr"); $(trEle).html("<td>3</td>" + "<td>大叔</td>" + "<td>坏人</td>" + "<td><button class='delete'>删除</button></td>"); //把生成的tr插入到表格中 $("#t1").find("tbody").append(trEle); }); //每一行的删除按钮绑定未来事件 $("tbody").on("click", ".delete", function () { $(this).parent().parent().remove(); }) </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <title>克隆示例</title> </head> <body> <button id="b1">可爱的小仙女，点我就送!</button> <script src="jquery-3.2.1.min.js"></script> <script> $("#b1").click(function () { $(this).clone().insertAfter(this); }) </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <title>替换示例</title> </head> <body> <p><a href="http://www.sogo.com">搜索</a></p> <p><a href="http://www.baidu.com">搜索</a></p> <p><a href="http://www.taobao.com">搜索</a></p> <button id="b1">点我</button> <script src="jquery-3.2.1.min.js"></script> <script> $("#b1").click(function () { var imgEle = document.createElement("img"); $(imgEle).attr("src", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539942629932&di=24beb52e6c90c0bef6eadba9461d79cd&imgtype=0&src=http%3A%2F%2Fimg5.kfcdn.com%2Fisy%2Fupload%2Fbooklet%2F20140401%2Ffs4d5apbtxhvu9bj_watermark.jpg"); $("a").replaceWith(imgEle); }) </script> </body> </html>
4.正菜上完，来两个复杂点的
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <title>键盘相关事件</title> </head> <body> <table border="1" id="t1"> <thead> <tr> <td>#</td> <td>姓名</td> <td>爱好</td> <td>操作</td> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>小宝</td> <td>爱调皮</td> <td> <select> <option value="0">上线</option> <option value="1">下线</option> <option value="2">离线</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>小宝</td> <td>爱调皮</td> <td> <select> <option value="0">上线</option> <option value="1">下线</option> <option value="2">离线</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>小宝</td> <td>爱调皮</td> <td> <select> <option value="0">上线</option> <option value="1">下线</option> <option value="2">离线</option> </select> </td> </tr> </tbody> </table> <script src="jquery-3.2.1.min.js"></script> <script> // 确保绑定事件的时候DOM树(当前页面)是生成好的 $(document).ready(function () { // 标置位 var mode = false; var $bodyEle = $("body"); //给文档绑定监听键盘被按下去的事件 $bodyEle.on("keydown", function (event) { if (event.keyCode===17){ //如果按下ctrl，此时状态为true mode = true; } }); //松开ctrl，此时状态为false $bodyEle.on("keyup", function (event) { if (event.keyCode===17){ mode = false; } }); //设置批量修改函数(change) $("select").on("change", function () { //获取当前select里面选中的属性 var value = $(this).val(); //找到当前select父标签的兄弟标签第一个input中的checkbox var $thisCheckbox = $(this).parent().siblings().first().find(":checkbox"); //判断checkbox是不是被选中，并且mode的状态是不是为true并批量操作开始 if ($thisCheckbox.prop("checked") && mode){ //找到input的checked属性(已被选中的input) var $checkedEles = $("input[type='checkbox']:checked"); for (var i=0;i < $checkedEles.length;i++){ //找到checked父级input的兄弟标签的最后一个select兵设置已选中属性value $($checkedEles[i]).parent().siblings().last().find("select").val(value); } } }) }) </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <title>表格的模态框操作</title> <style> .cover{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: gray; opacity: 0.8; z-index: 99; } .model{ height: 200px; width: 300px; background-color: white; position: absolute; margin-top: -100px; margin-left: -150px; top: 50%; left: 50%; z-index: 100; } .hide{ display: none; } </style> </head> <body> <button id="add">增加</button> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>大宝</td> <td>吃鸡</td> <td> <button class="edit">编辑</button> <button class="delete">删除</button> </td> </tr> <tr> <td>2</td> <td>小宝</td> <td>打怪兽</td> <td> <button class="edit">编辑</button> <button class="delete">删除</button> </td> </tr> <tr> <td>3</td> <td>大宝SODM</td> <td>润肤</td> <td> <button class="edit">编辑</button> <button class="delete">删除</button> </td> </tr> </tbody> </table> <div id="myCover" class="cover hide"></div> <div id="myModel" class="model hide"> <div> <p> <label for="model-name">姓名</label> <input type="text" id="model-name"> </p> <p> <label for="model-hobby">爱好</label> <input type="text" id="model-hobby"> </p> <p> <button id="model-submit">提交</button> <button id="model-cancel">取消</button> </p> </div> </div> <script src="jquery-3.2.1.min.js"></script> <script> // 定义一个弹出模态框的函数 function showModel() { //显示模态框 $("#myCover, #myModel").removeClass("hide"); } //定义一个关闭模态框的函数 function closeModel(){ //清空模态框inupt中的值 $("#myModel").find("input").val(""); //隐藏模态框 $("#myModel, #myCover").addClass("hide"); } //给增加按钮绑定事件 $("#add").on("click", function () { showModel() }); //模态框中的取消按钮绑定事件 $("#model-cancel").on("click", function () { closeModel() }); //模态框中的提交按钮绑定事件 $("#model-submit").on("click", function () { // 获取input中的值，并把用户填写的值保存到变量中 var name = $("#model-name").val(); var hobby = $("#model-hobby").val(); //这个标签要多次使用，也用变量保存 var $myModelEle = $("#myModel"); //利用data可以存具体的jquery对象 var $currentTrEle = $myModelEle.data("currentTr"); //编辑状态时状态值不为undefined if ($currentTrEle !== undefined){ //说明是编辑状态,把先前保存的值取出填充 $currentTrEle.children().eq(1).text(name); $currentTrEle.children().eq(2).text(hobby); //清空之前保存的当前行 $myModelEle.removeData(); }else{ //新增就创建tr标签 var trEle = document.createElement("tr"); var number = $("tr").length; $(trEle).html("<td>" + number + "</td>" + "<td>" + name + "</td>" + "<td>" + hobby + "</td>" + '<td><button class="edit">编辑</button> <button class="delete">删除</button></td>' ); //把创建好的tr添加到tbody中 $("tbody").append(trEle); } //隐藏模态框 closeModel(); }); //使用事件委托，基于已经存在的元素(页面加载完之后存在的标签)绑定事件 $("tbody").on("click", ".edit", function () { showModel(); //把模态框弹出来 //找到tr标签，并用变量保存 var $currentTrEle = $(this).parent().parent(); //把当前的jquery对象保存 $("#myModel").data("currentTr", $currentTrEle); //获取编辑的td内的内容 var name = $currentTrEle.children().eq(1).text(); var hobby = $currentTrEle.children().eq(2).text(); //取到的内容填写到input $("#model-name").val(name); $("#model-hobby").val(hobby); }); //给每一行的删除按钮绑定事件 $("tbody").on("click", ".delete", function () { //找到tr标签，并用变量保存 var $currentTrEle = $(this).parent().parent(); //循环所有tr，依次更新序号 $currentTrEle.nextAll().each(function () { //然后获取当前tr下第一个td的number var oldNumber = $(this).children().first().text(); //减一，并再次填充到这个标签 $(this).children().first().text(oldNumber - 1); }); $currentTrEle.remove(); //先删除找到的tr(当前这一行) }) </script> </body> </html>