九乡新闻网 九乡新闻网

蛇精脸视频百度网盘:jquery 简单学习(5)

来源：百度文库 编辑：九乡新闻网 时间：2024/07/04 20:09:05

JQuery简单学习(5)——JQuery效果

文章分类:Web前端

 

jQuery 是为事件处理特别设计的。

————————————————————jQuery 事件函数隐藏、显示、切换、滑动 以及动画实例jQuery hide() Js代码  

1.   
2.   
3.   
4. "text/javascript" src="/jquery/jquery.js">   
5. "text/javascript">   
6. $(document).ready(function(){   
7.   $("p").click(function(){   
8.   $(this).hide();   
9.   });   
10. });   
11.   
12.   
13.   
14.   

15. If you click on me, I will disappear.

      
16.   
17.   
18.    

If you click on me, I will disappear.

 演示简单的 jQuery hide() 函数。 
jQuery hide() Js代码  

1.   
2.   
3. "text/javascript" src="/jquery/jquery.js">   
4. "text/javascript">   
5. $(document).ready(function(){   
6. $(".ex .hide").click(function(){   
7. $(this).parents(".ex").hide("slow");   
8. });   
9. });   
10.   
11. "text/css">    
12. div.ex   
13. {   
14. background-color:#e5eecc;   
15. padding:7px;   
16. border:solid 1px #c3c3c3;   
17. }   
18.   
19.   
20.     
21.   
22.   

23. Island Trading

      
24. class="ex">   
25. class="hide" type="button">Hide me   

26. Contact: Helen Bennett    

27. Garden House Crowther Way   
28. London
      

  

  

Paris Trading

  

class="ex">   

class="hide" type="button">Hide me   

Contact: Marie Bertrand    

265, Boulevard Charonne   

Paris

  

  

  

  

  

Island Trading
Hide me
Contact: Helen Bennett
Garden House Crowther Way
London
Paris Trading
Hide me
Contact: Marie Bertrand
265, Boulevard Charonne
Paris

 另一个 hide() 演示。如何隐藏部分文本。 
jQuery slideToggle() Js代码  

1.   
2.   
3.   
4. "text/javascript" src="/jquery/jquery.js">   
5. "text/javascript">    
6. $(document).ready(function(){   
7. $(".flip").click(function(){   
8.     $(".panel").slideToggle("slow");   
9.   });   
10. });   
11.   
12.     
13. "text/css">    
14. div.panel,p.flip   
15. {   
16. margin:0px;   
17. padding:5px;   
18. text-align:center;   
19. background:#e5eecc;   
20. border:solid 1px #c3c3c3;   
21. }   
22. div.panel   
23. {   
24. height:120px;   
25. display:none;   
26. }   
27.   
28.   
29.     
30.   
31.     
32. class="panel">   

33. Because time is valuable, we deliver quick and easy learning.

      

34. At W3School, you can study everything you need to learn, in an accessible and handy format.

      

  

    

class="flip">Show/Hide Panel

  

    

  

  

Because time is valuable, we deliver quick and easy learning.
At W3School, you can study everything you need to learn, in an accessible and handy format.
Show/Hide Panel

 演示简单的 slide panel 效果。 
jQuery fadeTo() Js代码  

1.   
2.   
3. "text/javascript" src="/jquery/jquery.js">   
4. "text/javascript">   
5. $(document).ready(function(){   
6.   $("button").click(function(){   
7.   $("div").fadeTo("slow",0.25);   
8.   });   
9. });   
10.   
11.   
12.   
13.   
14. "test" style="background:yellow;width:300px;height:300px">   
15. "button">Click to Fade   

  

  

  

  

  

Click to Fade

 演示简单的 jQuery fadeTo() 函数。 
jQuery animate() Js代码  

1.   
2.   
3. "text/javascript" src="/jquery/jquery.js">   
4. "text/javascript">    
5. $(document).ready(function(){   
6.   $("#start").click(function(){   
7.   $("#box").animate({height:300},"slow");   
8.   $("#box").animate({width:300},"slow");   
9.   $("#box").animate({height:100},"slow");   
10.   $("#box").animate({width:100},"slow");   
11.   });   
12. });   
13.     
14.   
15.     
16.   
17.   

18. "#" id="start">Start Animation

      
19.   
20. "box"  
21. style="background:#98bf21;height:100px;width:100px;position:relative">   

  

    

  

  

Start Animation

 演示简单的 jQuery animate() 函数。 
————————————————————jQuery 隐藏和显示通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示：
实例Js代码  

1.   
2.   
3. "text/javascript" src="/jquery/jquery.js">   
4. "text/javascript">   
5. $(document).ready(function(){   
6.   $("#hide").click(function(){   
7.   $("p").hide();   
8.   });   
9.   $("#show").click(function(){   
10.   $("p").show();   
11.   });   
12. });   
13.   
14.   
15.   
16. "p1">If you click on the "Hide" button, I will disappear.
      
17. "hide" type="button">Hide   
18. "show" type="button">Show   
19.   
20.   

If you click on the "Hide" button, I will disappear.
HideShow

 hide() 和 show() 都可以设置两个可选参数：speed 和 callback。
语法：Js代码  

1. $(selector).hide(speed,callback)   
2.   
3. $(selector).show(speed,callback)  

$(selector).hide(speed,callback)$(selector).show(speed,callback)

 callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
speed 参数可以设置这些值："slow", "fast", "normal" 或 milliseconds：
实例Js代码  

1.   
2.   
3. "text/javascript" src="/jquery/jquery.js">   
4. "text/javascript">   
5. $(document).ready(function(){   
6.   $("button").click(function(){   
7.   $("p").hide(1000);   
8.   });   
9. });   
10.   
11.   
12.   
13. "button">Hide   

14. This is a paragraph with little content.

      

15. This is another small paragraph.

      
16.   
17.   

Hide
This is a paragraph with little content.
This is another small paragraph.

 ————————————————————jQuery 切换jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。
隐藏显示的元素，显示隐藏的元素。
语法：Js代码  

1. $(selector).toggle(speed,callback)  

$(selector).toggle(speed,callback)

 speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。
实例Js代码  

1.   
2.   
3. "text/javascript" src="/jquery/jquery.js">   
4. "text/javascript">   
5. $(document).ready(function(){   
6.   $("button").click(function(){   
7.   $("p").toggle();   
8.   });   
9. });   
10.   
11.   
12.   
13. "button">Toggle   

14. This is a paragraph with little content.

      

15. This is another small paragraph.

      
16.   
17.   

Toggle
This is a paragraph with little content.
This is another small paragraph.

 callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。 ————————————————————jQuery 滑动函数 - slideDown, slideUp, slideTogglejQuery 拥有以下滑动函数：Js代码  

1. $(selector).slideDown(speed,callback)   
2.   
3. $(selector).slideUp(speed,callback)   
4.   
5. $(selector).slideToggle(speed,callback)  

$(selector).slideDown(speed,callback)$(selector).slideUp(speed,callback)$(selector).slideToggle(speed,callback)

 speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

slideDown() 实例

 

Js代码  

1.   
2.   
3.   
4. "text/javascript" src="/jquery/jquery.js">   
5. "text/javascript">    
6. $(document).ready(function(){   
7.   $(".flip").click(function(){   
8.     $(".panel").slideDown("slow");   
9.   });   
10. });   
11.   
12.     
13. "text/css">    
14. div.panel,p.flip   
15. {   
16. margin:0px;   
17. padding:5px;   
18. text-align:center;   
19. background:#e5eecc;   
20. border:solid 1px #c3c3c3;   
21. }   
22. div.panel   
23. {   
24. height:120px;   
25. display:none;   
26. }   
27.   
28.   
29.     
30.   
31.     
32. class="panel">   

33. Because time is valuable, we deliver quick and easy learning.

      

34. At W3School, you can study everything you need to learn, in an accessible and handy format.

      

Because time is valuable, we deliver quick and easy learning.
At W3School, you can study everything you need to learn, in an accessible and handy format.
Show Panel

slideUp() 实例

1.   
2.   
3.   
4. "text/javascript" src="/jquery/jquery.js">   
5. "text/javascript">    
6. $(document).ready(function(){   
7.   $(".flip").click(function(){   
8.     $(".panel").slideUp("slow");   
9.   });   
10. });   
11.   
12.     
13. "text/css">    
14. div.panel,p.flip   
15. {   
16. margin:0px;   
17. padding:5px;   
18. text-align:center;   
19. background:#e5eecc;   
20. border:solid 1px #c3c3c3;   
21. }   
22. div.panel   
23. {   
24. height:120px;   
25. }   
26.   
27.   
28.     
29.   
30.     
31. class="panel">   

32. Because time is valuable, we deliver quick and easy learning.

      

33. At W3School, you can study everything you need to learn, in an accessible and handy format.

      
34.   
35.     
36. class="flip">Hide Panel
      
37.     
38.   
39.   

Because time is valuable, we deliver quick and easy learning.
At W3School, you can study everything you need to learn, in an accessible and handy format.
Hide Panel

1.   
2.   
3.   
4. "text/javascript" src="/jquery/jquery.js">   
5. "text/javascript">    
6. $(document).ready(function(){   
7. $(".flip").click(function(){   
8.     $(".panel").slideToggle("slow");   
9.   });   
10. });   
11.   
12.     
13. "text/css">    
14. div.panel,p.flip   
15. {   
16. margin:0px;   
17. padding:5px;   
18. text-align:center;   
19. background:#e5eecc;   
20. border:solid 1px #c3c3c3;   
21. }   
22. div.panel   
23. {   
24. height:120px;   
25. display:none;   
26. }   
27.   
28.   
29.     
30.   
31.     
32. class="panel">   

33. Because time is valuable, we deliver quick and easy learning.

      

34. At W3School, you can study everything you need to learn, in an accessible and handy format.

      
35.   
36.     
37. class="flip">Show/Hide Panel
      
38.     
39.   
40.   

Because time is valuable, we deliver quick and easy learning.
At W3School, you can study everything you need to learn, in an accessible and handy format.
Show/Hide Panel

1. $(selector).fadeIn(speed,callback)   
2.   
3. $(selector).fadeOut(speed,callback)   
4.   
5. $(selector).fadeTo(speed,opacity,callback)  

$(selector).fadeIn(speed,callback)$(selector).fadeOut(speed,callback)$(selector).fadeTo(speed,opacity,callback)

1.   
2.   
3. "text/javascript" src="/jquery/jquery.js">   
4. "text/javascript">   
5. $(document).ready(function(){   
6.   $("button").click(function(){   
7.   $("div").fadeTo("slow",0.25);   
8.   });   
9. });   
10.   
11.   
12.   
13.   
14. "test" style="background:yellow;width:300px;height:300px">   
15. "button">Click to Fade   
16.   
17.   
18.   
19.   
20.   

Click to Fade

1.   
2.   
3. "text/javascript" src="/jquery/jquery.js">   
4. "text/javascript">   
5. $(document).ready(function(){   
6.   $("#test").click(function(){   
7.   $(this).fadeOut(4000);   
8.   });   
9. });   
10.   
11.   
12.   
13.   
14. "test" style="background:yellow;width:200px">CLICK ME AWAY!   

15. If you click on the box above, it will be removed.

      
16.   
17.   
18.   

CLICK ME AWAY!
If you click on the box above, it will be removed.

1. $(selector).animate({params},[duration],[easing],[callback])  

$(selector).animate({params},[duration],[easing],[callback])

1. animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});  

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

1.   
2.   
3. "text/javascript" src="/jquery/jquery.js">   
4. "text/javascript">    
5. $(document).ready(function(){   
6.   $("#start").click(function(){   
7.   $("#box").animate({height:300},"slow");   
8.   $("#box").animate({width:300},"slow");   
9.   $("#box").animate({height:100},"slow");   
10.   $("#box").animate({width:100},"slow");   
11.   });   
12. });   
13.     
14.   
15.     
16.   
17.   

18. "#" id="start">Start Animation

      
19.   
20. "box"  
21. style="background:#98bf21;height:100px;width:100px;position:relative">   
22.   
23.     
24.   
25.   

Start Animation

1.   
2.   
3. "text/javascript" src="/jquery/jquery.js">   
4. "text/javascript">    
5. $(document).ready(function(){   
6.   $("#start").click(function(){   
7.   $("#box").animate({left:"100px"},"slow");   
8.   $("#box").animate({fontSize:"3em"},"slow");   
9.   });   
10. });   
11.     
12.   
13.     
14.   
15.   

16. "#" id="start">Start Animation

      
17.   
18. "box"  
19. style="background:#98bf21;height:100px;width:200px;position:relative">   
20. HELLO   
21.   
22.     
23.   
24.   

Start Animation
HELLO

如需使元素可以移动，请把 CSS 的 position 设置为 relative 或 absolute。

   ————————————————————

jQuery 效果 - 来自本页