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: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="20%;height:20%;border-style:double;border-color:white">
 9         诸葛亮
10     </div>
11     <div style="20%;height:20%;border-style:double;border-color:white">
12         曹操
13     </div>
14     <div style="20%;height:20%;border-style:double;border-color:white">
15         孙权
16     </div>
17     <div style="position:absolute;top:5%;left:60%;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>