---恢复内容开始---
前情提要:
jq 是用来降低js 的工作的一个组件
一:利用jq 实现动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.12.4.js"></script> <style> .box,.box2{ width: 100px; height: 100px; background-color: red; position: absolute; left:0; right:0; margin: auto; } </style> </head> <body> <!--<div class="box"></div>--> <div class="box2"></div> <script> // 参数1, json对象，动画最终效果，使用css来表单， // 参数2, 整数，毫秒单位[1s = 1000毫秒ms] // 参数3，字符串，控制动画变化效果，默认匀速linear,可以设置为缓动效果swing // 参数4，匿名函数,控制动画完成以后，后续操作 // $(".box").animate({"width":"100px","height":"50px"},2000); $(".box2").animate({"right":"600px"},2000,"swing",function(){ $(this).animate({"top":"300px"},500); }); // 练习：设置一个50x50的div，控制在3秒内变成100*400px的div,然后div从上面往下移动100px; </script> </body> </html>
二:动画效果的预设
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.12.4.js"></script> <style> .box,.box2{ width: 200px; height: 200px; background-color: yellow; } .box2{ background-color: red; } </style> </head> <body> <button id="hide">控制元素的隐藏</button> <button id="show">控制元素的显示</button> <button id="toggle">判断当前状态，进行隐藏显示</button> <button id="up">向上滑动[等同于隐藏这个box]</button> <button id="down">向下滑动[等同于显示这个box]</button> <button id="in">淡入[等同于显示这个box]</button> <button id="out">淡出[等同于隐藏这个box]</button> <button id="fade">控制元素的透明度动画</button> <div class="box"></div> <div class="box2"></div> <script> $("#hide").on("click",function(){ // 参数1，控制动画的完成时间 $(".box").hide(3000); }); $("#show").on("click", function(){ $(".box").show(2000); }); $("#toggle").on("click", function(){ // 如果原来隐藏，则会自动显示 // 如果原来显示，则会自动隐藏 $(".box").stop().toggle(2000); }); $("#up").on("click", function(){ $(".box").stop().slideUp(1000); }); $("#down").on("click", function(){ $(".box").slideDown(1000); }); $("#in").on("click", function(){ $(".box").fadeIn(3000); }); $("#out").on("click", function(){ $(".box").fadeOut(3000); }); $("#fade").on("click", function(){ // 控制元素的透明度 // 参数1: 整数，动画完成的时间，单位毫秒 // 参数2: 浮点数，动画完成时，元素的透明度[0为透明，1表示不透明] $(".box").fadeTo(2000,0.5); }); </script> </body> </html>
三:动画效果版本的层级菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层级菜单</title> <script src="js/jquery-1.12.4.js"></script> <script src="js/jquery.color.js"></script><!-- 使用这个插件必须先引入jQuery --> <style type="text/css"> body{ font-family:'Microsoft Yahei'; } body,ul{ margin:0px; padding:0px; } ul{list-style:none;} .menu{ width:200px; margin:20px auto 0; } .menu .level1,.menu li ul a{ display:block; width:200px; height:30px; line-height:30px; text-decoration:none; background-color:#3366cc; color:#fff; font-size:16px; text-indent:10px; } .menu .level1{ border-bottom:1px solid #afc6f6; } .menu li ul a{ font-size:14px; text-indent:20px; background-color:#7aa1ef; } .menu li ul li{ border-bottom:1px solid #afc6f6; } .menu li ul{ display:none; } .menu li ul.current{ display:block; } /*.menu li ul li a:hover{*/ /*background-color:#f6b544;*/ /*}*/ </style> </head> <body> <ul class="menu"> <li> <a href="#" class="level1">手机</a> <ul class="current"> <li><a href="#">iPhone X 256G</a></li> <li><a href="#">红米4A 全网通</a></li> <li><a href="#">HUAWEI Mate10</a></li> <li><a href="#">vivo X20A 4GB</a></li> </ul> </li> <li> <a href="#" class="level1">笔记本</a> <ul> <li><a href="#">MacBook Pro</a></li> <li><a href="#">ThinkPad</a></li> <li><a href="#">外星人(Alienware)</a></li> <li><a href="#">惠普(HP)薄锐ENVY</a></li> </ul> </li> <li> <a href="#" class="level1">电视</a> <ul> <li><a href="#">海信(hisense)</a></li> <li><a href="#">长虹(CHANGHONG)</a></li> <li><a href="#">TCL彩电L65E5800A</a></li> </ul> </li> <li> <a href="#" class="level1">鞋子</a> <ul> <li><a href="#">新百伦</a></li> <li><a href="#">adidas</a></li> <li><a href="#">特步</a></li> <li><a href="#">安踏</a></li> </ul> </li> <li> <a href="#" class="level1">玩具</a> <ul> <li><a href="#">乐高</a></li> <li><a href="#">费雪</a></li> <li><a href="#">铭塔</a></li> <li><a href="#">贝恩斯</a></li> </ul> </li> </ul> <script> // 思路 // 用户点击当前一级菜单，则需要显示其二级菜单，同时隐藏其他的一级菜单的子菜单 // 实现代码 $(".menu .level1").on("click", function(){ $(".menu .level1").next().slideUp(500); // 向上滑动隐藏所有其他的子菜单 $(this).next().slideDown(500) // 显示当前一级菜单的子菜单 }); $(".menu li ul li a").hover(function(){ console.log(1); // 默认的jQuery的animate是不支持颜色渐变 $(this).animate({"background-color":"#f6b544","color":"red"},1000); },function(){ $(this).animate({"background-color":"#7aa1ef","color":"white"},1000) }); </script> </body> </html>
四:事件冒泡的定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body onclick="alert('body被点击了')"> <div class="box" onclick="alert('box被点击了')"> <p classs="p1" onclick="alert('p1被点击了')"> <span>一个文本</span> </p> </div> <script> </script> </body> </html>
五:阻止事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body onclick="alert('body被点击了')"> <div class="box" onclick="alert('box被点击了')"> <p classs="p1" onclick="alert('p1被点击了')"> <span id="span">一个文本</span> </p> </div> <script> var span = document.getElementById("span"); span.onclick = function(event){ // event 翻译成中文 就是 "事件" console.log( event.target ); // 事件发生以后，浏览器查找到触发地点 event.stopPropagation(); // 阻止事件冒泡 // event.cancelBubble = true; // 如果是IE浏览器，则使用这句阻止事件冒泡 } </script> </body> </html>
六:事件托管(事件委托)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.12.4.js"></script> </head> <body> <ul> <li class="list"><a href="">商品1</a></li> <li class="list"><a href="">商品2</a></li> <li class="list"><a href="">商品3</a></li> <li class="list"><a href="">商品4</a></li> <li class="list"><a href="">商品5</a></li> <li class="list"><a href="">商品6</a></li> <li class="list"><a href="">商品7</a></li> <li class="list"><a href="">商品8</a></li> </ul> <script> // 事件委托，就是让父元素监管子元素的同名事件，从而避免了大量子元素绑定事件的情况 // 就是把事件绑定到父元素中 // $("ul li").on("mouseover",function(){ // console.log( $(this).html() ); // }); // 上面分别给大量的子元素绑定事件，效率低 // 在on方法的事件名称后，绑定当前父元素要托管事件的子元素[选择器] $("ul").on("mouseover",".list",function(){ console.log( $(this).html() ); }); </script> </body> </html>
七:阻止事件的默认行为[针对form 表单]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.12.4.js"></script> </head> <body> <a href="" id="link">链接</a> <form action=""> 账号：<input type="text" name="uname"><span id="uname_tis"></span> 密码：<input type="password" name="pwd"> <input type="submit" name="submit" value="提交"> </form> <script> $("#link").on("click", function(){ console.log( $(this).html() ); // 阻止a标签的点击跳转行为 return false; }); // 阻止表单的提交行为 $("input[name=submit]").on("click", function(){ // 希望校验数据 if( $("input[name=uname]").val().length>6 ){ $("#uname_tis").html("账号不合法"); // event.preventDefault(); // vue.js后面会再次出现这个prevent return false; } }); </script> </body> </html>
八:案例遮罩层
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .login{ width: 400px; height: 280px; background: #fff; border: 1px solid #aaa; position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; display: none; } .opacity{ display: none; background: #000; position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; opacity: 0.3; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function(){ // 点击登陆显示登陆窗口 $(".btn").on("click",function(e){ // 事件的匿名函数被调用的时候，系统会在匿名函数这里传递一个参数，就是事件对象 $(".opacity").show(); $(".login").show(); return false; // 方法1，使用return false可以解决事件的冒泡 // e.stopPropagation(); // 方法2:使用事件对象的stopPropagation()来组织冒泡 }); $("body").on("click",function(){ // alert("body标签被点了"); $(".opacity").hide(); $(".login").hide(); }); $(".login").on("click",function(){ return false; // 阻止事件冒泡 }) }); </script> </head> <body> <span class="btn">登陆</span> <div class="opacity"></div><!-- 遮罩层 --> <div class="login"> <div class="content">登陆窗口</div> </div> </body> </html>
九:dom 操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.12.4.js"></script> </head> <body> <p class="p1">一个段落</p> <script> // 创建一个标签元素[创建的元素并不会自动显示到html页面中] let div = $("<div>一个div</div>") console.log( div.html() ); // 把元素添加页面中指定元素的内部 //目标元素.appendTo($(父元素)) // 表示给父元素的内部追加目标元素 // div.appendTo( $("body") ); //目标元素.prependTo($(父元素)) // 表示给父元素的内部前面追加目标元素 // div.prependTo( $("body") ); // 把元素添加到页面中指定元素的外部 // 目标元素.insertBefore(位置元素) // 表示给指定位置元素前面加上一个目标元素 // div.insertBefore($(".p1")) // 目标元素.insertAfter(位置元素) // 表示给指定位置元素后面加上一个目标元素 // div.insertAfter( $(".p1") ); // 清空指定的元素内容[还剩下标签本身] // $(".p1").empty(); // 删除指定元素[不仅被删除，标签本身也会被删除] $(".p1").remove(); </script> </body> </html>
十:todolist 效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todolist</title> <style type="text/css"> .list_con{ width:600px; margin:50px auto 0; } .inputtxt{ width:550px; height:30px; border:1px solid #ccc; padding:0px; text-indent:10px; } .inputbtn{ width:40px; height:32px; padding:0px; border:1px solid #ccc; } .list{ margin:0; padding:0; list-style:none; margin-top:20px; } .list li{ height:40px; line-height:40px; border-bottom:1px solid #ccc; } .list li span{ float:left; } .list li a{ float:right; text-decoration:none; margin:0 10px; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function(){ // 一,添加计划 // 步骤: // 1. 给"增加"按钮绑定点击事件 $("#btn1").on("click", function(){ // 2. 获取文本框的内容 // console.log( $("#txt1").val() ); var content = $("#txt1").val(); // 数据的验证 if(content == ""){ alert("请输入计划的内容"); return false; } // 3. 添加到计划列表 // 3.1 创建新元素 var new_li = $('<li><span>'+content+'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>'); // 3.2 把创建元素添加到计划列表的前面 $("#list").prepend(new_li); }); // 二,移动计划的上下位置 // 1. 向下移动 // 在点击".down"按钮以后，把当前行的li元素与下一行的li元素位置互换 $("#list").on("click",".down",function(){ // 1.1 获取当前行的li元素 // $(this) 当前被点击的元素[.down] // parent() 获取父级元素 var current_li = $(this).parent(); // 1.2 获取下一行的li元素 var next_li = current_li.next(); // 1.3 把下一行li的元素放到当前行的前面 current_li.before(next_li); }); // 2. 向上移动 $("#list").on("click",".up",function(){ // 2.1 获取当前行的li元素 var current_li = $(this).parent(); // 2.2 获取上一行的li元素 var prev_li = current_li.prev(); // 2.3 把上一行的li元素当前当前行的后面 current_li.after(prev_li); }); // 三,删除计划 $("#list").on("click",".del",function(){ // 删除元素使用remove() $(this).parent().remove(); }); }); </script> </head> <body> <div class="list_con"> <h2>To do list</h2> <input type="text" name="" id="txt1" class="inputtxt"> <input type="button" name="" value="增加" id="btn1" class="inputbtn"> <ul id="list" class="list"> <!-- javascript:; # 阻止a标签跳转 --> <li> <span>学习html</span> <a href="javascript:;" class="up"> ↑ </a> <a href="javascript:;" class="down"> ↓ </a> <a href="javascript:;" class="del">删除</a> </li> <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li> <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li> </ul> </div> </body> </html>
十一:表单验证(正则的使用)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.12.4.js"></script> </head> <body> <form action=""> 账号：<input type="text" name="uname"><br><br> 密码：<input type="password" name="pwd"><br><br> 手机号码：<input type="text" name="mobile"><br><br> 个人网页：<input type="text" name="url"><br><br> <input type="submit" value="提交"> </form> <script> // js中正则就是一个对象，默认具有正则操作的方法 $("input[type=submit]").on("click", function(){ // 验证帐号数据 // 1. 账号只能由字母、数字组成,6-10 let reg = /[a-zA-Z0-9]{6,10}/; // console.log( reg ); // 使用test可以进行正则匹配，返回值是布尔值，true表示验证通过 result = reg.test( $("input[name=uname]").val() ); if( !result ){ // 验证没有通过 return false;//阻止表单提交 } // 验证url地址 let reg2 = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/; result = reg2.test( $("input[name=url]").val() ); console.log( result ); return false; }); </script> </body> </html>
---恢复内容结束---