首页 > 代码库 > jquery api 常见api 效果操作例子
jquery api 常见api 效果操作例子
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:red10 }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="http://www.mamicode.com/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="http://www.mamicode.com/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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。