jquery api 常见api 效果操作例子
时间：2014-06-27 17:08:22
收藏：0
阅读：269
addClass_removeClass_toggleClass_hasClass.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>method_1.html</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <style type="text/css"> 7 .myClass{ 8 font-size:30px; 9 color:red 10 } 11 </style> 12 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 13 </head> 14 <body> 15 <div>无样式</div> 16 <div class="myClass">有样式</div> 17 <script type="text/javascript"> 18 //为无样式的DIV添加样式 19 //$("div:first").addClass("myClass"); 20 21 //为有样式的DIV删除样式 22 //$("div:last").removeClass("myClass"); 23 24 //切换样式，即有样式的变成无样式，无样式的变成有样式 25 $("div:first").toggleClass("myClass"); 26 27 /*最后一个DIV是否有样式 28 var flag = $("div:last").hasClass("myClass"); 29 alert(flag?"有样式":"无样式"); 30 */ 31 </script> 32 </body> 33 </html>
change_photo.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <script type="text/javascript" src="../js/jquery-1.6.js"></script> 6 </head> 7 <body> 8 <div style="width:20%;height:20%;border-style:double;border-color:white"> 9 诸葛亮 10 </div> 11 <div style="width:20%;height:20%;border-style:double;border-color:white"> 12 曹操 13 </div> 14 <div style="width:20%;height:20%;border-style:double;border-color:white"> 15 孙权 16 </div> 17 <div style="position:absolute;top:5%;left:60%;width:20%;height:20%;border-style:dotted"> 18 <img src="../images/zgl.jpg"/> 19 </div> 20 <hr/> 21 <script type="text/javascript"> 22 $("div:lt(3)").mouseover(function(){ 23 $(this).css("border-color","red"); 24 }); 25 $("div:lt(3)").mouseout(function(){ 26 $(this).css("border-color","white"); 27 }); 28 </script> 29 </body> 30 </html>
fadeIn_fadeOut.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <script type="text/javascript" src="../js/jquery-1.6.js"></script> 6 </head> 7 <body> 8 <p> 9 <img src="../images/zgl.jpg" /> 10 <!-- 11 <img src="../images/zgl.jpg"/> 12 --> 13 </p> 14 <div> 15 <!-- 显示结果 --> 16 </div> 17 <script type="text/javascript"> 18 //淡入显示图片 19 // $("img").fadeIn(5000); 20 21 //淡出隐蔽图片 22 //$("img").fadeOut(5000); 23 </script> 24 </body> 25 </html>
show_hide.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 6 </head> 7 <body> 8 <p> 9 <img src="../images/zgl.jpg" style="display:none"/> 10 <!-- 11 <img src="../images/zgl.jpg"/> 12 --> 13 </p> 14 <div> 15 <!-- 加载完毕 --> 16 </div> 17 <script type="text/javascript"> 18 //图片显示 19 $("img").show(5000); 20 21 //图片隐蔽(单位毫秒 22 //$("img").hide(5000); 23 24 </script> 25 </body> 26 </html>
slideUp_slideDown.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <script type="text/javascript" src="../../js/jquery-1.8.2.js"></script> 6 </head> 7 <body> 8 <div style="display:none"> 9 中国0<br/> 10 中国1<br/> 11 中国2<br/> 12 中国3<br/> 13 中国4<br/> 14 中国5<br/> 15 中国6<br/> 16 中国7<br/> 17 中国8<br/> 18 中国9<br/> 19 </div> 20 <input type="button" value="我的好友"/> 21 <script type="text/javascript"> 22 //向下滑动 23 $(":button").click(function(){ 24 $("div").slideDown(200); 25 }); 26 27 /*向上滑动 28 $(":button").click(function(){ 29 $("div").slideUp(100); 30 }); 31 */ 32 33 </script> 34 </body> 35 </html>
评论（0）