JQ基础——JQ的简单使用
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style> 7 .w{} 8 </style> 9 </head> 10 <script type="text/javascript" src="js/jquery.min.js" ></script> 11 <body> 12 1. 弹窗 13 <script> 14 $(function(){ 15 alert("JQ超简") 16 }) 17 </script> 18 2. 修改文本 19 <div>张山</div> 20 <script> 21 $(function(){ 22 $("div").html("李四") 23 }) 24 </script> 25 26 3. 点击事件 27 <button id="btn">点我</button> 28 <script> 29 $(function(){ 30 $("#btn").click(function(){ 31 $("#btn").html("修改成功") 32 }); 33 }); 34 </script> 35 4.图片显示/隐藏 （自建效果） 36 <img src="img/bootstrap-mdo-sfmoma-01.jpg" id="img" width="200px"> <br /> 37 <button id="btn1">显示</button><button id="btn2">隐藏</button> 38<a href="#" id="btn1">显示</a><a href="#" id="btn2">隐藏</a> 39 <script> 40 $(function(){ 41 $("#btn1").click(function(){ 42 $("#img").show(2000); 43 $("#img").fadeOut(2000);//渐出 44 $("#img").slideDown(2000);//向下出 45 46 }); 47 }); 48 $(function(){ 49 $("#btn2").click(function(){ 50 $("#img").hide(2000); 51 $("#img").fadeIn(2000);//渐入 52 $("#img").slideUp(2000);//下上藏 53 }) 54 }) 55 自建效果 56 $(function(){ 57 $("#btn1").click(function(){ 58 $("#img").animate({ 59 width: "400px", 60 opacity:"0.1" , 61 },3000) 62 }) 63 }) 64 </script> 65 5.Ad广告。定时弹出。 66 <img src="img/bootstrap-mdo-sfmoma-01.jpg" id="img" /> 67 <script> 68 $(function(){ 69 setTimeout("hideAd()",3000); 70 }); 71 function showAd(){ 72 $("#img").show(); 73 74 } 75 function hideAd(){ 76 $("#img").hide(); 77 setTimeout("showAd()",3000); 78 } 79 </script> 80 </body> 81</html>