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>