jQuery 实例

通过实例增进 jQuery 技能！

jQuery 语法实例

$(this).hide()

演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。 

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $("button").click(function(){
  7.   $(this).hide();
  8. });
  9. });
  10. </script>
  11. </head>
  13. <body>
  14. <button type="button">Click me</button>
  15. </body>
  17. </html>

$("p").hide()

演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。 

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6. $("button").click(function(){
  7. $("p").hide();
  8. });
  9. });
  10. </script>
  11. </head>
  13. <body>
  14. <h2>This is a heading</h2>
  15. <p>This is a paragraph.</p>
  16. <p>This is another paragraph.</p>
  17. <button type="button">Click me</button>
  18. </body>
  19. </html>

$(".test").hide()

演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。 

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function()
  6. {
  7.   $("button").click(function()
  8.   {
  9.   $(".test").hide();
  10.   });
  11. });
  12. </script>
  13. </head>
  14. <body>
  16. <h2 class="test">This is a heading</h2>
  17. <p class="test">This is a paragraph.</p>
  18. <p>This is another paragraph.</p>
  19. <button type="button">Click me</button>
  21. </body>
  22. </html>

$("#test").hide()

演示 jQuery 的 hide() 函数，隐藏 id="test" 的元素。 

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="/jquery/jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $("button").click(function(){
  7.     $("#test").hide();
  8.   });
  9. });
  10. </script>
  11. </head>
  13. <body>
  14. <h2>This is a heading</h2>
  15. <p>This is a paragraph.</p>
  16. <p id="test">This is another paragraph.</p>
  17. <button type="button">Click me</button>
  18. </body>
  20. </html>

例子解释

Hiding ### Sliding### Fading

jQuery fadeOut()

演示简单的 jQuery fadeout() 函数。 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7.   $("button").click(function(){
  8.     $("#div1").fadeOut();
  9.     $("#div2").fadeOut("slow");
  10.     $("#div3").fadeOut(3000);
  11.   });
  12. });
  13. </script>
  14. </head>
  16. <body>
  17. <p>演示带有不同参数的 fadeOut() 方法。</p>
  18. <button>点击这里，使三个矩形淡出</button>
  19. <br><br>
  20. <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
  21. <br>
  22. <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
  23. <br>
  24. <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
  25. </body>
  27. </html>

jQuery hide()

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js">
  5. </script>
  6. <script>
  7. $(document).ready(function(){
  8.   $("p").click(function(){
  9.     $(this).hide();
  10.   });
  11. });
  12. </script>
  13. </head>
  14. <body>
  15. <p>如果您点击我，我会消失。</p>
  16. <p>点击我，我会消失。</p>
  17. <p>也要点击我哦。</p>
  18. </body>
  19. </html>

Hide explanations

演示如何隐藏部分文本。 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7.   $(".ex .hide").click(function(){
  8.     $(this).parents(".ex").hide("slow");
  9.   });
  10. });
  11. </script>
  12. <style type="text/css"> 
  13. div.ex
  14. {
  15. background-color:#e5eecc;
  16. padding:7px;
  17. border:solid 1px #c3c3c3;
  18. }
  19. </style>
  20. </head>
  22. <body>
  24. <h3>中国办事处</h3>
  25. <div class="ex">
  26. <button class="hide" type="button">隐藏</button>
  27. <p>联系人：张先生<br /> 
  28. 北三环中路 100 号<br />
  29. 北京</p>
  30. </div>
  32. <h3>美国办事处</h3>
  33. <div class="ex">
  34. <button class="hide" type="button">隐藏</button>
  35. <p>联系人：David<br /> 
  36. 第五大街 200 号<br />
  37. 纽约</p>
  38. </div>
  40. </body>
  41. </html>

Slide panel

演示简单的 Slide Panel 效果。 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js"></script>
  5. <script type="text/javascript"> 
  6. $(document).ready(function(){
  7. $(".flip").click(function(){
  8.     $(".panel").slideToggle("slow");
  9.   });
  10. });
  11. </script>
  13. <style type="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. </style>
  28. </head>
  30. <body>
  32. <div class="panel">
  33. <p>Web 技术教程站点</p>
  34. <p>在这里你可以找到你所需要的所有网站建设教程。</p>
  35. </div>
  37. <p class="flip">请点击这里</p>
  39. </body>
  40. </html>

jQuery animate()

演示简单的 jQuery animate() 函数。 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="/jquery/jquery-1.11.1.min.js"></script>
  5. <script> 
  6. $(document).ready(function(){
  7.   $("button").click(function(){
  8.     var div=$("div");
  9.     div.animate({height:'300px',opacity:'0.4'},"slow");
  10.     div.animate({width:'300px',opacity:'0.8'},"slow");
  11.     div.animate({height:'100px',opacity:'0.4'},"slow");
  12.     div.animate({width:'100px',opacity:'0.8'},"slow");
  13.   });
  14. });
  15. </script> 
  16. </head>
  18. <body>
  20. <button>开始动画</button>
  21. <p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
  22. <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
  23. </div>
  25. </body>
  26. </html>

例子解释

HTML 操作

例子解释

CSS 操作

例子解释

AJAX 和 jQuery

例子解释