一、动画
js，animation
jQuery的动画的实现原理：只需要以固定的时间间隔【例如：0.1秒】，每次将DOM元素的css样式做出指定的修改，形成一个流畅的视觉效果
1.系统动画
1.1隐藏/显示
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #box{ width: 100px; height: 200px; background-color: cyan; } </style> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div id="box"></div> <button id="btn1">隐藏</button> <button id="btn2">显示</button> <button id="btn3">切换状态</button> <script> $(function(){ /* * hide(speed,callback),隐藏，相当于将需要被隐藏的标签的display设置为none * * show(speed,callback)，显示,相当于将需要被显示的标签的display设置为block，inline或者inline-block * * spped表示动画执行的速度，用时间描述，单位：毫秒，默认值为slow(600ms),normal(400ms) * fast(200ms) * * * callback:回调函数，可以省略，表示当动画执行完成之后需要执行的操作 * */ $("#btn1").bind("click",function(){ //$("#box").hide(2000); //添加callback,当动画执行完毕之后需要做的操作，放到callback中执行 $("#box").hide(2000,function(){ alert("动画执行完毕"); }); }); $("#btn2").bind("click",function(){ $("#box").show(2000,function(){ $(this).css("background-color","red"); }); }); }) </script> </body> </html>
1.2切换可见状态
代码演示：
/* * * toggle(speed,callback):实现切换元素的可见状态，如果元素是可见的，则切换为隐藏；如果是隐藏的，则切换为显示 * */ $("#btn3").bind("click",function(){ $("#box").toggle(2000,function(){ }); });
1.3淡入/淡出
fadeIn()
fadeOut()
fadeTo()
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #box{ width: 100px; height: 200px; background-color: cyan; } </style> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div id="box"></div> <button id="btn1">淡入</button> <button id="btn2">淡出</button> <button id="btn3">更改透明度</button> <script> $(function(){ //淡入：从隐藏----》显示，从全透明-----》不透明 $("#btn1").bind("click",function(){ $("#box").fadeIn(2000,function(){ $(this).css("background-color","red"); }); }); //淡出：从显示----》隐藏 ，从不透明----》全透明 $("#btn2").bind("click",function(){ $("#box").fadeOut(2000,function(){ alert("淡出成功"); //$(this).css("background-color","red"); }); }); //指定透明度 //fadeTo(speed,a,callback),将一个全透明的标签更改为半透明的 //不透明：1 //注意：只是将透明度从不透明修改到指定透明度，不修改display属性 $("#btn3").bind("click",function(){ $("#box").fadeTo(2000,0,function(){ alert("over"); }); }); }) </script> </body> </html>
1.4滑入/滑出
slideDown()
slideUp()
slidetoggle()
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #box{ width: 100px; height: 200px; background-color: cyan; } </style> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div id="box"></div> <button id="btn1">滑入</button> <button id="btn2">滑出</button> <button id="btn3">切换</button> <script> $(function(){ //滑入，从隐藏----》显示，将标签的高度增大的过程 $("#btn1").bind("click",function(){ $("#box").slideDown(2000,function(){ alert("over"); }); }); //滑出，从显示-----》隐藏，将标签的高度减小的过程 $("#btn2").bind("click",function(){ $("#box").slideUp(2000,function(){ alert("over~~~~~"); }); }); $("#btn3").bind("click",function(){ $("#box").slideToggle(2000,function(){ alert("over~~~~~"); }); }); }) </script> </body> </html>
2.自定义动画
2.1基本使用
animate(),创建自定义动画
$(selector).animate({params},speed,callback)
params:需要更改的css属性
speed:动画执行的时间
callback：动画执行完毕之后需要做的操作
注意：一般情况下，动画只会执行一次，如果要重复执行，需要在callback中操作
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ width: 200px; height: 200px; background-color: cyan; position: absolute; } </style> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <button>开始动画</button> <div></div> <script> $(function(){ //animate({})，其中的属性设置使用的键值对，属性：“值” /*$("button").bind("click",function(){ $("div").animate({left:"100px"}); })*/ $("button").bind("click",function(){ $("div").animate({ left:"100px", width:"400px", height:"400px", opacity:"0.2" //设置透明度 },2000,function(){ //alert("over"); $(this).animate({ left:"0px", width:"200px", height:"200px", opacity:"1" //设置透明度 }); }); }) }) </script> </body> </html>
2.2萤火虫案例
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #container{ width: 100%; height: 100%; background-image: url(img/bg.jpg); /*position: absolute; left: 0px; top: 0px;*/ } body,html{ margin: 0px; padding: 0px; height: 100%; } img{ width: 40px; height: 40px; position: absolute; } </style> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div id="container"> </div> <script> $(function(){ //需求：每隔1000毫秒出现一个img【萤火虫】，位置可以随时发生改变【自定义动画】 //1.创建定时器 setInterval(function(){ //2.创建img的标签对象 var $fireworm = $("<img src='img/萤火虫.jpg'/>"); //3.将img的标签对象添加给div $("#container").append($fireworm); //4.获取屏幕的宽高 var divWidth = $("#container").width(); var divHeight = $("#container").height(); //5.设定img出现的位置【随机】 var wleft = Math.ceil(Math.random() * divWidth) + "px"; var wtop = Math.ceil(Math.random() * divHeight) + "px"; //设置img的css的属性 $fireworm.css({ left:wleft, top:wtop }) //6.让img在整个屏幕范围内移动 function fly(){ var wleft = Math.ceil(Math.random() * divWidth) + "px"; var wtop = Math.ceil(Math.random() * divHeight) + "px"; $fireworm.animate({ left:wleft, top:wtop },3000,function(){ //当指定完一次动画之后，继续重复执行 fly(); }); } fly(); },1000); }) </script> </body> </html>
二、事件
1.页面加载响应的事件
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <script> //类似于window.onload /*$(document).ready(function(){ }); $().ready(function(){ }); */ //弊端：只要DOM元素就绪就可以自动执行该方法，所以可能出现元素的关联文件没有加载完毕的情况 $(function(){ }) //解决办法：jq中也有一个和js中onload事件功能相同的函数：load()，如果将其绑定给指定的对象上， //则会在页面所有的内容加载完毕之后才执行该函数 $(window).load(function(){ }) //等价于 window.onload = function(){ } </script> </body> </html>
2.jQuery中的事件
见笔记中的图
3.事件的处理
3.1事件绑定
click() dblclick()
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <!--需求：点击按钮，在div下面添加一个新的p子标签--> <button id="btn">添加标签</button> <div> <p>第一个标签</p> <p>第二个标签</p> <p>第三个标签</p> <p>第四个标签</p> <p>第五个标签</p> </div> <script> $(function(){ //绑定事件：bind() click() delegate() on() //1.bind(type,fn) 常用1 /*type:需要绑定的事件的类型，比如：click dblclick * fn:当触发指定的事件之后，需要执行的操作 * * * 弊端： * 1.这里使用了隐式迭代的方式绑定事件，如果匹配到的元素特别多的时候，对于大量的元素而言，需要给 * 每一个元素都绑定一个事件，是一个耗时的过程，影响性能 * 2.对于后添加的元素，未绑定指定的事件 */ /*$("#btn").bind("click",function(){ $("div").append($("<p>aaaaa</p>")); //console.log($("div").text()); });*/ //需求：将事件绑定给p标签， /*$("div p").bind("click",function(){ $("div").append($("<p>aaaaa</p>")); }) */ //2.delegate() /* * delegate:代理 * * 事件代理，也被称为事件委托，利用事件冒泡给父元素添加响应事件，将事件添加给父标签 * 让父标签代理子标签进行事件响应 * * p:委托 * div；代理 * * * 代理对象.delegate(委托对象,事件名称,触发的函数) * * * 弊端：如果DOM树比较深的时候，假设需要给最里层的一个元素绑定事件，需要将事件绑定给先辈标签 * 需要一层一层的冒泡才能找到父标签，则影响性能 */ //注意：在fn的内部使用$(this)，代表的是委托对象，并不是代理对象 /*$("div").delegate("p","click",function(){ $("div").append($("<p>aaaaa</p>")); });*/ //3.on() /* * 可以解决前面的3个弊端 * 代理对象.on(事件名称，委托对象，触发的函数) * */ /*$("div").on("click","p",function(){ $("div").append($("<p>aaaaa</p>")); }) */ //4.click() 常用2 $("#btn").click(function(){ $("div").append($("<p>aaaaa</p>")); }) /* * 总结： * 1.选择器匹配到的元素较多的时候，不要bind() * 2。需要动态添加元素的时候，delegate或者on * 3.使用delegate，dom树不要太深 * 5.尽量使用on * 6.常用bind（）和click() * * / }) </script> </body> </html>
3.2移除绑定
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <button id="btn">添加标签</button> <div> <p>第一个标签</p> <p>第二个标签</p> <p>第三个标签</p> <p>第四个标签</p> <p>第五个标签</p> </div> <script> $(function(){ //1.unbind(type) $("#btn").bind("click",function(){ }); //注意：只需要说明需要解除绑定的事件名称【一个对象可以同时被绑定多个事件】 $("#btn").unbind("click"); //2.undelegate(委托，事件名称) //delagate(委托，事件名称，触发的函数) $("div").delegate("p","click",function(){ }); $("div").undelegate("p","click"); //3.off(事件名称，委托) //on(事件名称，委托，触发的函数) $("div").on("click","p",function(){ }) $("div").off("click","p"); }) </script> </body> </html>
3.3绑定一次性事件
one()
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <button id="btn">添加标签</button> <div> <p>第一个标签</p> <p>第二个标签</p> <p>第三个标签</p> <p>第四个标签</p> <p>第五个标签</p> </div> <script> $(function(){ /* * one(type,fn) * 作用：当点击按钮的时候只触发一次的事件 * 用来绑定事件的 */ $("#btn").one("click",function(){ $("div").append($("<p>hello</p>")); }) }) </script> </body> </html>
3.4事件对象
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <button id="btn">添加标签</button> <script> $(function(){ //event事件对象是当前函数的局部变量，只能在当前函数的内部被访问，当事件函数处理完毕之后，事件对象被销毁 $("#btn").bind("click",function(event){ //var e = event || window.event; console.log(event); //获取事件的类型 console.log(event.type); //获取触发事件的元素 console.log(event.target); //获取相关联的节点 //事件的传递：冒泡和捕获 console.log(event.relatedTarget); //获取点击的光标相对于页面的x坐标和y坐标 //注意：若页面上有滚动条，则要考虑到滚动条的宽度和高度 console.log(event.pageX,event.pageY); }) }) </script> </body> </html>
3.5鼠标悬浮事件
hover()
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #box{ width: 100px; height: 100px; border: 1px solid orange; } </style> <!--引入js文件--> <script src="js/jquery-3.3.1.js" type="text/javascript"></script> </head> <body> <div id="box"></div> <script> $(function(){ /* * hover(over,out) * * over:用于指定当鼠标移动到元素上方的时候触发的函数 mouseover * * out:用于指定当鼠标移出元素的时候触发的函数 mouseout */ //模拟鼠标悬浮事件：设置属性的时候，一般在over和out中设置的属性的值是相反的 $("#box").hover(function(){ $(this).html("hello"); $(this).css("background-color","white"); },function(){ $(this).css("background-color","red"); $(this).html(""); }); }) </script> </body> </html>
三、综合案例
1.省份城市区域三级关联
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #city,#country{ display: none; } /*select[name='city'],select[name='country']{ display: none; }*/ </style> <script type="text/javascript" src="js/city.js"></script> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <select name="province" id="province"> <option>请选择</option> </select> <select name="city" id="city"> <option>请选择</option> </select> <select name="country" id="country"> <option>请选择</option> </select> <script> $(function(){ //加载省份 function provinceLoad(){ //通过键获取value,js中字典的使用：value = 字典名[key] var provinceArr = zcityData["0"]; //console.log(provinceArr.length); //定义一个变量，用于记录所有省份的option标签拼接 var mypro = "<option value='-1'>请选择</option>"; for(var i = 0;i < provinceArr.length;i++){ //创建$("<option>北京</option>") //provinceArr[i] //拼接 mypro += "<option value='" + i + "'>" + provinceArr[i] + "</option>"; } //$("#province").html("<option value='0'>北京</option><option value='1'>上海</option><option value='2'>天津</option>"); $("#province").html(mypro); } provinceLoad(); //加载城市 function cityLoad(){ //当省份的值发生改变的时候 //change()对应的是js中的onchange事件 $("#province").change(function(){ //消除bug：重新选择省份的时候，区域的变化 $("#country").css("display","none"); //获取当前选择的省份 //val()获取的是属性value的值 var proVal = $(this).val(); //判断获取的proval是否为-1 if(proVal >= 0){ //手动拼接属性名 var city = "0_" + proVal; //通过属性名获取对应的城市 var myCity = zcityData[city]; //定义一个变量，用于拼接所有城市的option var cityOption = "<option value='-1'>请选择</option>"; for(var i = 0;i < myCity.length;i++){ cityOption += "<option value='" + city + "_" + i + "'>" + myCity[i] + "</option>"; } $("#city").html(cityOption); //让select显示出来 $("#city").css("display","inline-block"); countryLoad(); } }) } cityLoad() //加载区域 function countryLoad(){ $("#city").change(function(){ //获取选择的城市的值 var counVal = $(this).val(); //请选择，select继续隐藏 if(counVal == -1){ return; } //获取区域 var myCoun = zcityData[counVal]; //定义一个变量，用于拼接所有城市的option var counOption = "<option value='-1'>请选择</option>"; for(var i = 0;i < myCoun.length;i++){ counOption += "<option value='" + i + "'>" + myCoun[i] + "</option>"; } $("#country").html(counOption); $("#country").css("display","inline-block"); }) } }) </script> </body> </html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
