jquery api 常见api 效果操作例子

 1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 html>
 3   head>
 4     title>method_1.htmltitle>
 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>

 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>

 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         
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>

 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         
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>

 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         中国0br/>    
10         中国1br/>    
11         中国2br/>    
12         中国3br/>    
13         中国4br/>    
14         中国5br/>    
15         中国6br/>    
16         中国7br/>    
17         中国8br/>    
18         中国9br/>    
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>