jQuery基础知识二
一. 动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="代码/jquery/js/jquery-1.12.4.js"></script> <style> .box, .box2 { width: 200px; height: 200px; background-color: red; position: absolute; left: 0; right: 0; margin: auto; } .box3 { width: 50px; height: 50px; background-color: blue; 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毫秒] // 参数3，控制动画变化效果，默认是匀速的(linear)。设置缓动效果：swing // 参数4，匿名函数，控制动画完成以后的后续操作 $(".box").animate({"width": "100px", "height": "50px"}, 2000); // 注意这里的right是指从右向左移动 $(".box2").animate({"right": "500px"}, 2000, "swing", function () { $(this).animate({"top": "500px"}, 500); }); </script> <!--练习：设置一个50X50的div,控制在3s内变成100X400的div,然后div从上面往下移动100px--> <div class="box3"></div> <script> $(".box3").animate({"width": "100px", "height": "400px"}, 3000, function () { $(this).animate({"top": "100px"}, 5000) }); </script> </body> </html>
二. 特殊动画效果(预设动画)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="代码/jquery/js/jquery-1.12.4.js"></script> <style> .box, .box2{ width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <button id="hide">控制元素的隐藏</button> <button id="show">控制元素的显示</button> <button id="toggle">判断当前状态，进行隐藏/显示</button><br /> <button id="up">向上滑动，等同于隐藏</button> <button id="down">向下滑动，等同于显示</button><br /> <button id="in">透明效果，淡入</button> <button id="out">透明效果，淡出</button><br /> <button id="fade">控制元素的透明度</button> <div class="box"></div> <div class="box2"></div> <script> // 注意这里有个问题，当点击这里很多次后，点多少次它就会执行多少次，哪怕后面鼠标移开了 // 因此每一个在使用动画之前加一个stop()，比如: // $(".box").stop().show(1000); $("#hide").on("click", function () { // 控制动画的完成时间 $(".box").hide(3000); }); $("#show").on("click", function () { // 控制动画的完成时间 $(".box").show("slow"); // 有三种：slow,normal, fast,但是设置时间值效果更好一点 }); $("#toggle").on("click", function () { // 如果原来隐藏则自动显示，反之则反 $(".box").toggle(2000); }); $("#up").on("click", function () { // 控制动画的完成时间 $(".box").slideUp(3000); // 也有slideDown, slideToggle }); $("#down").on("click", function () { // 控制动画的完成时间 $(".box").slideDown(3000); // 也有slideDown, slideToggle }); $("#in").on("click", function () { // 控制动画的完成时间 $(".box").fadeIn(2000); // 也有slideDown, slideToggle }); $("#out").on("click", function () { // 控制动画的完成时间 $(".box").fadeOut(2000); // 也有slideDown, slideToggle }); $("#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="代码/jquery/js/jquery-1.12.4.js"></script> <style type="text/css"> body{ font-family:'Microsoft Yahei'; } body,ul{ margin:0; padding:0; } 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(1000); }); // $(".menu li ul li a").hover(function () { // // 默认的jQuery的animate是不支持颜色渐变 // $(this).animate({"background-color": "orange"}, function () { // $(this).animate({"background-color": "orange" // }) // } // }); </script> </body> </html>
四. 事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="代码/jquery/js/jquery-1.12.4.js"></script> </head> <!--像这种在页面一点击p1,又触发了div和body的事件，这就是冒泡--> <!--也就是说，子元素的事件触发，会导致父类元素同名事件(比如这里onclick)的触发，这种现象就是冒泡事件--> <body onclick="alert('body被点击了')"> <div class="box" onclick="alert('box被点击了')"> <p class="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> <script src="代码/jquery/js/jquery-1.12.4.js"></script> </head> <!--像这种在页面一点击p1,又触发了div和body的事件，这就是冒泡--> <!--也就是说，子元素的事件触发，会导致父类元素同名事件(比如这里onclick)的触发，这种现象就是冒泡事件--> <body onclick="alert('body被点击了')"> <div class="box" onclick="alert('box被点击了')"> <p class="p1" onclick="alert('p1被点击了')"> <span id="span">一个文本</span> </p> </div> <script> let span = document.getElementById("span"); span.onclick = function (event) { // 事件发生以后，浏览器找到触发地点 console.log(event.target); // 阻止事件冒泡 event.stopPropagation(); } </script> </body> </html>
六. 使用事件冒泡完成事件的委托
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="代码/jquery/js/jquery-1.12.4.js"></script> </head> <body> <ul> <li><a href="">商品1</a></li> <li><a href="">商品2</a></li> <li><a href="">商品3</a></li> <li><a href="">商品4</a></li> <li><a href="">商品5</a></li> <li><a href="">商品6</a></li> <li><a href="">商品7</a></li> <li><a href="">商品8</a></li> <li><a href="">商品9</a></li> </ul> <script> // 利用事件会冒泡到父级元素，把事件操作绑定到父级元素中 // 让父级元素托管事件 // on方法的事件参数后面可以增加一个字符串的参数，是CSS选择器 // 可以设置为当前父元素托管事件的元素 $("ul").on("mouseover", "li", function (event) { console.log(event.target); console.log($(this).html()); }); $("ul").on("click", "a", function () { $(this).css("color", "red"); }) </script> </body> </html>
七. 事件的委托
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="代码/jquery/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> <li class="list"><a href="">商品9</a></li> </ul> <script> // 事件委托就是让父元素监管子元素的同名事件，从而避免了大量子元素绑定事件的情况 // 就是把事件绑定到父元素中 // 在on方法的事件名称后，绑定当前父元素要托管事件的子元素 $("ul").on("mouseover", function () { console.log($(this).html()); }) // 给每个子元素绑定事件，效率很低 // $("ul li").on("mouseover", function () { // console.log($(this).html()); // }) </script> </body> </html>
八. 阻止事件的默认行为(针对form标签和a标签)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="代码/jquery/js/jquery-1.12.4.js"></script> </head> <body> <a href="" id="link">链接</a> <form action=""> 账号：<input type="text" name="username"><span id="username_tis"></span> 密码：<input type="password" name="username"> <input type="submit" name="submit" value="提交"> </form> <script> $("#link").on("click", function () { console.log($(this).html()); // 阻止a标签的跳转行为 return false; }); // 阻止表单的提交行为 // let form = document.getElementsByName("submit")[0]; $("input[name=submit]").on("click", function () { // 希望校验数据 if ($("input[name=username]").val().length > 6) { $("#username_tis").html("账号不合法"); return false; } }); </script> </body> </html>
九. 遮罩层窗口
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="代码/jquery/js/jquery-1.12.4.js"></script> <style> .opacity { width: 100%; height: 100%; background-color: white; /* 【居中定位】保证一个元素在上下左右都居中 */ position: absolute; margin: auto; top: 0; left: 0; display: none; } .opacity-div { width: 100%; height: 100%; background-color: gray; position: absolute; margin: auto; top: 0; left: 0; /*opacity: 0.3;*/ } .login-box { width: 400px; height: 250px; background-color: white; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; /* 一个元素如果有宽度和高度的设置，设置定位时，两边距离一样时，则该元素居中 */ right: 0; } </style> </head> <body> <span class="login">登录</span> <div class="opacity"> <!--这里注意顺序,因为是从上往下执行--> <div class="opacity-div"></div> <div class="login-box">登录窗口</div> </div> <script> // 思路 // 1. 用户点击登录按钮，显示opacity窗口 // 2. 点击这个灰色透明背景层，会关闭opacity窗口 // 实现代码 $(".login").on("click", function () { $(".opacity").fadeIn(1000); }); $(".opacity-div").on("click", function () { $(".login-box").slideUp(500, function () { $(".opacity").fadeOut(500); }); }) </script> </body> </html>
十. DOM操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="代码/jquery/js/jquery-1.12.4.js"></script> </head> <body> <p class="p1">一个段落</p> <script> // 创建一个标签元素 // 注意这里创建的元素并不会自动显示在页面中 let div = $("<div>一个div</div>"); console.log(div.html()); // 把元素添加到页面中指定元素的内部 // 目标元素.appendTo($(父元素)),放在父元素的所有子元素的后面 // div.appendTo($("body")); // 如果不想放在最后面，可以这样 // div.prependTo($("body")); // 把元素添加到页面中指定元素的外部(前面) // 目标元素.insertBefore(位置元素) // div.insertBefore($(".p1")); // 把元素添加到页面中指定元素的外部(后面) // 目标元素.insertAfter(位置元素) // div.insertAfter($(".p1")); // 清空指定的元素内容[只删除内容，标签还在] // $(".p1").empty(); // 删除指定的元素[不仅内容被删除，标签也会被删除] $(".p1").remove(); </script> </body> </html>
十一. 表单验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="代码/jquery/js/jquery-1.12.4.js"></script> </head> <body> 账号：<input type="text" name="username"><br /><br /> 密码：<input type="password" name="password"><br /><br /> 手机号码：<input type="text" name="mobile"><br /><br /> 个人网页：<input type="text" name="url"><br /><br /> <input type="submit" value="提交"> <script> // JS中正则就是一个对象，默认具有正则操作的方法 $("input[name=submit]").on("click", function () { // 验证数据 // 1. 账号只能由字母、数字组成，6-10位 let reg = /[a-zA-Z0-9]{6,10}/; console.log(reg); // 使用test可以进行正则匹配,返回匹配结果(布尔值) result = reg.test($("input[name=username]").val()); console.log(result); 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>
