3.JQuery事件
1.鼠标事件 2.
4.鼠标的移动训练:
1.当网页元素加载完毕之后，响应事件 $(document).ready(function (){ }) 2.进行缩写: $(function (){} 3.进行打印 $('#mouseMove').text('x:'+e.pageX+' '+'y:'+e.pageY); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #divMove{ width:500px; height: 500px; border: 1px solid #1d50c7; } </style> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> </head> <body> mouse:<span id="mouseMove"></span> <div id="divMove"> 移动鼠标试试看 </div> <script src="../Java_Script/lib/demo2.js"></script> </body> </html>
var test_jquery = document.getElementById('test-jquery'); //当网页元素加载完毕之后，响应事件 // $(document).ready(function (){ // // // }) $(function (){ //鼠标事件 $('#divMove').mousemove(function (e){ $('#mouseMove').text('x:'+e.pageX+' '+'y:'+e.pageY); }) })
5.JQuery操作DOM元素
1.获得某个属性的值: $('属性名').text(); 2.设置值: $('属性名').text('值'); =============================================== 3.获得html的信息 $('属性名').html(); 4.设置html的信息: $('属性名').html('值'); =============================================== 4.设置CSS $('属性名l').css('key','value');---------->键值对 eg: $('#test-ul li[name=py]').css('color','red'); 5.CSS隐藏和展现: display: none; $('属性名l').show();---------->展现 $('属性名l').hide();----------->隐藏 $('#test-ul li[name=py]').toggle();----->隐藏转展现，展现转隐藏
1.获取某个属性的值
>
2.设置css
4.隐藏和展现:
21.动画和计时器-------JQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Love.</title> <!-- 链接CSS--> <link rel="stylesheet" href="love_one.css"> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> </head> <body> <audio src="1.mp3" autoplay loop ></audio> <div id="border_four"></div> <!--做左爱心--> <div id="border_three"> <div id="border_one"> </div> <!--右爱心--> <div id="border_two"></div> </div> <div id="border_five"> </div> <!--链接JavaScript--> <script src="love_one.js"></script> </body> </html>
body{ background-image: linear-gradient(94deg,#53182c 0%,#b37051 100%); /*background-image: url("1.jpg");*/ } #border_one{ width: 140px; height: 230px; border: 1px solid red; background: red; border-radius: 50px 50px 0 0; /*倾斜角度*/ transform: rotate(-45deg); margin: 58px -83px 0 112px; display: inline-block; box-shadow: 10px 10px 100px blanchedalmond; } #border_two{ width: 140px; height: 230px; border: 1px red solid; background: red; border-radius: 50px 50px 0 0; /*倾斜角度*/ transform: rotate(45deg); display: inline-block; box-shadow: 10px 10px 100px blanchedalmond; } #border_three{ position: relative; left: 10px; width: 440px; height: 355px; border: 2px solid rgba(0 0 0 0); margin: 0 auto; box-shadow: 10px 10px 189px #e8e00b; border-radius: 115px; } #border_four{ font-size: 30px; color: #14d217; line-height: 20px; } #border_five{ width: 700px; height: 41px; color: #91c29c; font-size: 20px; line-height: 10px; border: 1px dashed red; margin: 88px auto; padding-top: 20px; padding-left: 20px; box-shadow: 10px 10px 100px #15b0d5; }
function a() { var date = new Date(); $('#border_four').text('现在时间是:' + date); $(function (){ $('#border_three').animate({ left:'400px' }); }); $(function (){ $('#border_three').animate({ left:'-400px' }); }); } function b(){ var date = new Date(); $('#border_five').text('我们相遇于'+'2001年12月17日17时 '+'您陪伴了我'+(date.getFullYear()-2001)+'年'+(date.getMonth()-12)+'月'+(date.getDay()-17)+'天'+(date.getHours()-17)+'时'+(date.getMinutes()-30)+'分'+(date.getSeconds())+'秒') } setInterval(function (){a()},1000); setInterval(function (){b()},1000);
1.
1.动画: (1).首先我们要使用锁定位置:position:revaltive; (2).然后我们要使用JQuery库 $(function(){ $('发生事件的标签').animate(function(){ 事件 }); }); ====================================================== eg: $(function (){ $('#border_three').animate({ left:'-400px' }); });
2.计时器--->每距离几秒调用一次: (1).首先设置一个函数a(){}------->被调用的函数 (2).使用: setInterval(function (){a()},1000);--------->实现读秒
22.JavaScript内置常用四个对象
1.window对象
1.出现消息弹窗 window.alert('xxx') 2.出现确认框 window.confirm('xxx') 3.出现输入框 window.prompt('xxx') 4.定时器 window.setTimeout("需要运行地函数","时间毫秒") 5.清除定时器 window.clearTimeout(timer)
2.history对象
1.返回上一页 history.back(); 2.返回下一页 history.forward(); 3. 向前/后几个页面 history.go(+_n)
3.Document对象
document从属于window对象。 1. 获取Dom节点 document.getById('id'); 2.通过name属性获取值 document.name1.value
4.location对象
1.跳转页面 window.locaion.href='url'
