文本操作

  1. $("选择符").html()     // 读取指定元素的内容,如果$()函数获取了有多个元素,则提取第一个元素
  2. $("选择符").html(内容) // 修改内容,如果$()函数获取了多个元素, 则批量修改内容
  4. $("选择符").text()     // 效果同上,但是获取的内容是纯文本,不包含html代码
  5. $("选择符").text(内容)  // 效果同上,但是修改的内容中如果有html文本,在直接转成实体字符,而不是html代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <script src="jquery3.6.js"></script>
  8.     <script>
  10.         $(function () {
  12.             $(".c1").click(function () {
  13.                 // 获取文本
  14.                 // console.log(this.innerHTML);
  15.                 // console.log(this.innerText);
  16.                 console.log($(this).html());
  17.                 console.log($(this).text());
  19.                 // 设置文本
  20.                 // $(this).html("hello world");
  21.                 // $(this).text("hello world");
  23.                 // $(this).html("<a href=''>hello world</a>");
  24.                 $(this).text("<a href=''>hello world</a>");
  26.             })
  27.         })
  29.     </script>
  30. </head>
  31. <body>
  33. <p class="c1"><span>PPP</span></p>
  35. </body>
  36. </html

value操作

  1. $().val()
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <script src="jquery3.6.js"></script>
  8.     <script>
  10.         $(function () {
  13.             $("#i1").blur(function () {
  15.                 // 获取jquery对象的value属性值
  16.                 console.log(this.value);
  17.                 console.log($(this).val());
  19.                 // 设置value属性值
  20.                 $(this).val("hello world")
  22.             });
  25.             $("#i3").change(function () {
  26.                 console.log(this.value);
  27.                 console.log($(this).val());
  29.                 $(this).val("guangdong");
  31.             });
  33.             console.log($("#i2").val());
  34.             console.log($("#i2").val("hello pig!"))
  36.         })
  39.     </script>
  40. </head>
  41. <body>
  44. <input type="text" id="i1">
  46. <select id="i3">
  47.     <option value="hebei">河北省</option>
  48.     <option value="hubei">湖北省</option>
  49.     <option value="guangdong">广东省</option>
  50. </select>
  52. <p><textarea name="" id="i2" cols="30" rows="10">123</textarea></p>
  55. </body>
  56. </html>

属性操作

  1. //读取属性值
  2.     $("选择符").attr("属性名");   // 获取非表单元素的属性值,只会提取第一个元素的属性值
  3.     $("选择符").prop("属性名");   // 表单元素的属性,只会提取第一个元素的属性值
  5. //操作属性
  6.   $("选择符").attr("属性名","属性值");  // 修改非表单元素的属性值,如果元素有多个,则全部修改
  7.   $("选择符").prop("属性名","属性值");  // 修改表单元素的属性值,如果元素有多个,则全部修改
  9.   $("选择符").attr({'属性名1':'属性值1','属性名2':'属性值2',.....})
  10.   $("选择符").prop({'属性名1':'属性值1','属性名2':'属性值2',.....})
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <script src="jquery3.6.js"></script>
  8.     <script>
  10.         $(function () {
  12.             // ==================  attr   ==================
  13.             // 获取属性值
  14.             // console.log($("#i1").attr("name"));
  15.             // console.log($("#i1").attr("class"));
  17.             // 设置属性属性值
  18.             //  $("#i1").attr("name","mf");
  19.             //  $("#i1").attr("k1","v1");
  20.             // $("#i1").attr({name:"mf","k1":"v1"});
  23.             // ==================  prop:表单属性   ==================
  24.             console.log($(":checkbox").attr("checked"));  // undefined
  25.             console.log($(":checkbox").prop("checked"));  // false
  28.         })
  31.     </script>
  32. </head>
  33. <body>
  35. <div class="c1" id="i1" name="mufeng">DIV</div>
  37. <input type="checkbox">
  39. </body>
  40. </html>
  1. <!-- 表格案例 -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  8.     <script src="jquery3.6.js"></script>
  10. </head>
  11. <body>
  13. <button class="select_all">全选</button>
  14. <button class="cancel">取消</button>
  15. <button class="reverse">反选</button>
  16. <hr>
  17. <table border="1">
  18.     <tr>
  19.         <td>选择</td>
  20.         <td>姓名</td>
  21.         <td>年龄</td>
  22.     </tr>
  24.     <tr>
  25.         <td><input type="checkbox"></td>
  26.         <td>张三</td>
  27.         <td>23</td>
  28.     </tr>
  29.     <tr>
  30.         <td><input type="checkbox"></td>
  31.         <td>李四</td>
  32.         <td>23</td>
  33.     </tr>
  34.     <tr>
  35.         <td><input type="checkbox"></td>
  36.         <td>王五</td>
  37.         <td>23</td>
  38.     </tr>
  39. </table>
  41. <script>
  43.     $(".select_all").click(function () {
  44.         $("table input:checkbox").prop("checked",true);
  46.     });
  47.     $(".cancel").click(function () {
  48.        $("table input:checkbox").prop("checked",false);
  49.     });
  51.     $(".reverse").click(function () {
  52.        $("table input:checkbox").each(function () {
  53.            $(this).prop("checked",!$(this).prop("checked"))
  55.        })
  57.    });
  59. </script>
  61. </body>
  62. </html>
  1. <!-- each版 -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  8.     <script src="jquery3.6.js"></script>
  10. </head>
  11. <body>
  13. <button class="select_all">全选</button>
  14. <button class="cancel">取消</button>
  15. <button class="reverse">反选</button>
  16. <hr>
  17. <table border="1">
  18.     <tr>
  19.         <td>选择</td>
  20.         <td>姓名</td>
  21.         <td>年龄</td>
  22.     </tr>
  24.     <tr>
  25.         <td><input type="checkbox"></td>
  26.         <td>张三</td>
  27.         <td>23</td>
  28.     </tr>
  29.     <tr>
  30.         <td><input type="checkbox"></td>
  31.         <td>李四</td>
  32.         <td>23</td>
  33.     </tr>
  34.     <tr>
  35.         <td><input type="checkbox"></td>
  36.         <td>王五</td>
  37.         <td>23</td>
  38.     </tr>
  39. </table>
  41. <script>
  43.     $(".select_all").click(function () {
  45.         $("table input:checkbox").prop("checked", true);
  47.     });
  48.     $(".cancel").click(function () {
  50.         $("table input:checkbox").prop("checked", false);
  52.     });
  54.     $(".reverse").click(function () {
  56.         /*
  57.          var $eles = $("table input:checkbox");
  59.          for(var i = 0;i<$eles.length;i++){
  60.              var state = $($eles[i]).prop("checked");
  61.              if (state){
  62.                  $($eles[i]).prop("checked",false);
  63.              }else {
  64.                  $($eles[i]).prop("checked",true);
  65.              }
  66.          }
  67.          */
  70.         /*
  71.         $("table input:checkbox").each(function () {
  73.             var state = $(this).prop("checked");
  74.             if (state){
  75.                 $(this).prop("checked",false);
  76.             }else {
  77.                 $(this).prop("checked",true);
  78.             }
  79.         })
  80.         */
  82.         $("table input:checkbox").each(function () {
  84.             $(this).prop("checked", !$(this).prop("checked"))
  86.         })
  88.     });
  90. </script>
  92. </body>
  93. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <script src="jquery3.6.js"></script>
  9. </head>
  10. <body>
  13. <ul>
  14.     <li>23</li>
  15.     <li>45</li>
  16.     <li>78</li>
  17.     <li>32</li>
  18. </ul>
  20. <script>
  22.     // 类方法：each
  23.     var arr = [111, 222, 333];
  25.     $.each(arr, function (i, j) {
  26.         // 循环体
  27.         console.log(i, j)
  28.     });
  30.     var obj = {name: "alvin", age: 18};
  32.     $.each(obj, function (k, v) {
  33.         console.log(k, v);
  34.     });
  36.     // 实例方法each
  38.     // $("ul li").css("color","red");
  40.     $("ul li").each(function () {
  41.         // console.log("OK");
  42.         // 循环函数中this:代指的是每一次循环的dom对象
  43.         console.log(this);
  44.         var v = $(this).html();
  45.         if (parseInt(v) > 40) {
  46.             $(this).css("color", "red")
  47.         }
  48.     })
  51. </script>
  53. </body>
  54. </html>

css样式操作

  1. 获取样式
  2. $().css("样式属性");   // 获取元素的指定样式属性的值,如果有多个元素,只得到第一个元素的值
  4. 操作样式
  5. $().css("样式属性","样式值").css("样式属性","样式值");
  6. $().css({"样式属性1":"样式值1","样式属性2":"样式值2",....})
  8. $().css("样式属性":function(){
  10.   // 其他代码操作 
  11.   return "样式值";
  12. });
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <script src="jquery3.6.js"></script>
  9. </head>
  10. <body>
  13. <div class="c1">hello JS</div>
  16. <script>
  18.     $(".c1").css({"backgroundColor": "#369", "color": "white"})
  20. </script>
  22. </body>
  23. </html>

class 属性操作

  1. $().addClass("class1  class2 ... ...")   // 给获取到的所有元素添加指定class样式
  2. $().removeClass() // 给获取到的所有元素删除指定class样式
  3. $().toggleClass() // 给获取到的所有元素进行判断,如果拥有指定class样式的则删除,如果没有指定样式则添加
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <script src="jquery3.6.js"></script>
  9.     <style>
  10.         .c1 {
  11.             color: red;
  12.         }
  14.         .c2 {
  15.             background-color: lightseagreen;
  16.         }
  18.         .c3 {
  19.             font-style: italic;
  20.         }
  21.     </style>
  23. </head>
  24. <body>
  27. <div class="c1">hello JS</div>
  30. <script>
  32.     $(".c1").click(function () {
  33.         // $(this).addClass("c2");
  34.         // $(this).removeClass("c3");
  36.               // 链式操作
  37.         $(this).addClass("c2").removeClass("c3");
  39.     });
  41.     $(".c1").mouseover(function () {
  42.         $(this).addClass("c3");
  43.     })
  45. </script>
  47. </body>
  48. </html>
  1. <!-- 选项卡切换 -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  14.         .tab {
  15.             width: 800px;
  16.             height: 300px;
  17.             /*border: 1px solid red;*/
  18.             margin: 200px auto;
  19.         }
  21.         .tab ul {
  22.             list-style: none;
  23.         }
  25.         .tab-title {
  26.             background-color: #f7f7f7;
  27.             border: 1px solid #eee;
  28.             border-bottom: 1px solid #e4393c;
  29.         }
  31.         .tab .tab-title li {
  32.             display: inline-block;
  33.             padding: 10px 25px;
  34.             font-size: 14px;
  35.         }
  37.         li.current {
  38.             background-color: #e4393c;
  39.             color: #fff;
  40.             cursor: default;
  41.         }
  43.         .hide {
  44.             display: none;
  45.         }
  48.     </style>
  50.     <script src="jquery3.6.js"></script>
  51. </head>
  52. <body>
  55. <div class="tab">
  56.     <ul class="tab-title">
  57.         <li class="current">商品介绍</li>
  58.         <li class="">规格与包装</li>
  59.         <li class="">售后保障</li>
  60.         <li class="">商品评价</li>
  61.     </ul>
  63.     <ul class="tab-content">
  64.         <li>商品介绍...</li>
  65.         <li class="hide">规格与包装...</li>
  66.         <li class="hide">售后保障...</li>
  67.         <li class="hide">商品评价...</li>
  68.     </ul>
  69. </div>
  72. <script>
  74.     $(".tab-title li").click(function () {
  75.         //  事件函数
  76.         // 点击标签获取current样式
  77.         $(this).addClass("current").siblings().removeClass("current");
  78.         // 详情内容的显示与隐藏
  79.         console.log($(this).index());
  80.         var index = $(this).index();
  81.         $(".tab-content li").eq(index).removeClass("hide").siblings().addClass("hide");
  83.     })
  85. </script>
  87. </body>
  88. </html>

节点操作

  1. //创建一个jquery标签对象
  2.     $("<p>")
  4. //内部插入
  6.     $("").append(content|fn)      // $("p").append("<b>Hello</b>");
  7.     $("").appendTo(content)       // $("p").appendTo("div");
  8.     $("").prepend(content|fn)     // $("p").prepend("<b>Hello</b>");
  9.     $("").prependTo(content)      // $("p").prependTo("#foo");
  11. //外部插入
  13.     $("").after(content|fn)       // ("p").after("<b>Hello</b>");
  14.     $("").before(content|fn)      // $("p").before("<b>Hello</b>");
  15.     $("").insertAfter(content)    // $("p").insertAfter("#foo");
  16.     $("").insertBefore(content)   // $("p").insertBefore("#foo");
  18. //替换
  19.     $("").replaceWith(content|fn) // $("p").replaceWith("<b>Paragraph. </b>");
  21. //删除
  23.     $("").empty()
  24.     $("").remove([expr])
  26. //复制
  27.     $("").clone([Even[,deepEven]])
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery3.6.js"></script>
  7. </head>
  8. <body>
  11. <button class="add_btn">添加节点</button>
  12. <button class="del_btn">删除节点</button>
  13. <button class="replace_btn">替换节点</button>
  14. <div class="c1">
  15.     <h3>hello JS!</h3>
  16.     <h3 class="c2">hello world</h3>
  18. </div>
  21. <script>
  23.     $(".add_btn").click(function () {
  24.         // 创建jquery对象
  26.         // var $img = $("<img>");
  27.         // $img.attr("src","https://img1.baidu.com/it/u=3210260546,3888404253&fm=26&fmt=auto&gp=0.jpg")
  29.         // 节点添加
  31.         // $(".c1").append($img);
  32.         // $img.appendTo(".c1")
  34.         // $(".c1").prepend($img);
  35.         // $(".c2").before($img);
  36.         // 支持字符串操作
  37.         $(".c1").append("<img src ='https://img1.baidu.com/it/u=3210260546,3888404253&fm=26&fmt=auto&gp=0.jpg'>")
  40.     });
  43.     $(".del_btn").click(function () {
  45.         $(".c2").remove();
  46.         // $(".c2").empty();
  48.     });
  51.     $(".replace_btn").click(function () {
  52.         // alert(123);
  53.         // var $img = $("<img>");
  54.         // $img.attr("src","https://img1.baidu.com/it/u=3210260546,3888404253&fm=26&fmt=auto&gp=0.jpg")
  55.         // $(".c2").replaceWith($img);
  56.         $(".c2").replaceWith("<img src ='https://img1.baidu.com/it/u=3210260546,3888404253&fm=26&fmt=auto&gp=0.jpg'>");
  58.     })
  60. </script>
  62. </body>
  63. </html>

事件委托

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <script src="jquery3.6.js"></script>
  8. </head>
  9. <body>
  11. <button class="add">add</button>
  12. <ul>
  13.     <li>123</li>
  14.     <li>234</li>
  15.     <li>345</li>
  16. </ul>
  19. <script>
  21.     /*$("ul li").click(function () {
  23.         console.log($(this).html());
  24.     });*/
  27.     $("ul").on("click", "li", function () {
  28.         console.log($(this).html())
  29.     });
  32.     $(".add").click(function () {
  33.         $("ul").append("<li>456</li>")
  34.     })
  36. </script>
  38. </body>
  39. </html>

复制节点

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="jquery3.6.js"></script>
  7. </head>
  8. <body>
  11. <div class="outer">
  13.     <div class="item">
  14.         <input type="button" value="+" class="add_btn">
  15.         <input type="text">
  16.     </div>
  18. </div>
  21. <script>
  24.     $(".add_btn").click(function () {
  26.          var $clone = $(this).parent().clone();
  27.          $clone.children(".add_btn").val("-").attr("class","remove_btn");
  28.          $(".outer").append($clone);
  30.     });
  33.     /*$(".remove_btn").click(function () {
  34.         $(this).parent().remove();
  35.     });*/
  38.     $(".outer").on("click",".remove_btn",function () {
  39.         $(this).parent().remove();
  40.     })
  42. </script>
  45. </body>
  46. </html>

css尺寸

  1. //内容区域
  2. $("").height([val|fn])  
  3. $("").width([val|fn])
  5. //内容区域+padding区域
  6. $("").innerHeight()
  7. $("").innerWidth()
  9. //内容区域+padding+margin
  10. $("").outerHeight([soptions])
  11. $("").outerWidth([options])
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.         }
  10.         .c1{
  11.             width: 200px;
  12.             height: 200px;
  13.             border:10px solid red;
  14.             padding: 50px;
  15.             margin: 50px;
  17.         }
  18.     </style>
  19.     <script src="jquery3.6.js"></script>
  20. </head>
  21. <body>
  24. <div class="c1"></div>
  26. <script>
  28.     console.log($(".c1").width());
  29.     console.log($(".c1").height());
  31.     console.log($(".c1").innerWidth());
  32.     console.log($(".c1").innerHeight());
  34.     console.log($(".c1").outerWidth(true));
  35.     console.log($(".c1").outerHeight(true));
  37. </script>
  40. </body>
  41. </html>

css位置

  1. $("").offset([coordinates])  // 获取匹配元素在当前视口的相对偏移。
  2. $("").position()             // 获取匹配元素相对父元素的偏移，position()函数无法用于设置操作。
  3. $("").scrollTop([val])       // 获取匹配元素相对滚动条顶部的偏移。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.         }
  10.         .content{
  11.             height: 2000px;
  12.             background-color: lightgray;
  13.         }
  15.         .return_top{
  16.             width: 120px;
  17.             height: 50px;
  18.             background-color: lightseagreen;
  19.             color: white;
  20.             text-align: center;
  21.             line-height: 50px;
  23.             position: fixed;
  24.             bottom: 20px;
  25.             right: 20px;
  26.         }
  28.         .hide{
  29.             display: none;
  30.         }
  31.     </style>
  33.     <script src="jquery3.6.js"></script>
  34. </head>
  35. <body>
  38. <div class="content">
  39.     <h3>文章...</h3>
  40. </div>
  42. <div class="return_top hide">返回顶部</div>
  45. <script>
  48.     console.log($(window).scrollTop());
  50.     $(".return_top").click(function () {
  52.         $(window).scrollTop(0)
  54.     });
  57.     $(window).scroll(function () {
  58.         console.log($(this).scrollTop());
  59.         var v =$(this).scrollTop();
  60.         if (v > 100){
  61.             $(".return_top").removeClass("hide");
  62.         }else {
  63.             $(".return_top").addClass("hide");
  64.         }
  66.     })
  67. </script>
  70. </body>
  71. </html>
  1. <!-- css偏移 -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Title</title>
  7.     <style>
  8.         .c1{
  9.             width: 800px;
  10.             height: 500px;
  11.             background-color: lightpink;
  12.             margin: 100px auto;
  14.             position: relative;
  15.         }
  17.         .c2{
  18.             width: 200px;
  19.             height: 200px;
  20.             background-color: orange;
  21.         }
  22.     </style>
  24.     <script src="jquery3.6.js"></script>
  25. </head>
  27. <body>
  30. <div class="c1">
  31.     <div class="c2"></div>
  32. </div>
  35. <script>
  36.     // 获取位置信息
  38.     // offset:相对于窗口偏移   position：相对于已经定位的父标签偏移量
  40.     var $offset = $(".c2").offset();
  41.     var $position = $(".c2").position();
  42.     console.log("$offset top:",$offset.top);
  43.     console.log("$offset left:",$offset.left);
  45.     console.log("$position top:",$position.top);
  46.     console.log("$position left:",$position.left);
  49.     // 设置偏移量  offset
  51.     $(".c2").click(function () {
  53.         $(this).offset({top:500,left:500})
  55.     })
  58. </script>
  59. </body>
  60. </html>

动画效果

  1. //基本
  2.     show([s,[e],[fn]])   显示元素
  3.     hide([s,[e],[fn]])   隐藏元素
  5. //滑动
  6.     slideDown([s],[e],[fn])  向下滑动 
  7.     slideUp([s,[e],[fn]])    向上滑动
  9. //淡入淡出
  10.     fadeIn([s],[e],[fn])     淡入
  11.     fadeOut([s],[e],[fn])    淡出
  12.     fadeTo([[s],opacity,[e],[fn]])  让元素的透明度调整到指定数值
  14. //自定义
  15.     animate(p,[s],[e],[fn])   自定义动画 
  16.     stop([c],[j])             暂停上一个动画效果,开始当前触发的动画效果
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <style>
  10.         .c1{
  11.             width: 250px;
  12.             height: 250px;
  13.             background-color: black;
  14.             position: absolute;
  15.             top: 240px;
  16.             left: 120px;
  17.         }
  19.         .hide{
  20.             display: none;
  21.         }
  22.     </style>
  24.     <script src="jquery3.6.js"></script>
  25. </head>
  26. <body>
  29. <p>
  30.     <button class="show01">显示</button>
  31.     <button class="hide01">隐藏</button>
  32. </p>
  33. <p>
  34.     <button class="show02">显示</button>
  35.     <button class="hide02">隐藏</button>
  36. </p>
  37. <p>
  38.     <button class="show03">显示</button>
  39.     <button class="hide03">隐藏</button>
  40. </p>
  42. <p>
  43.     <button class="show04">显示</button>
  44.     <button class="hide04">隐藏</button>
  45. </p>
  47. <p>
  48.     <button class="animate">animate</button>
  49. </p>
  50. <hr>
  52. <div class="c1"></div>
  55. <script>
  56.     // 自己实现的隐藏与显示
  58.     $(".show01").click(function () {
  59.         $(".c1").removeClass("hide")
  60.     });
  61.     $(".hide01").click(function () {
  62.         $(".c1").addClass("hide")
  63.     });
  65.     // (1) show与hide方法
  67.     $(".show02").click(function () {
  69.         $(".c1").show(1000,function () {
  70.             alert("显示成功")
  71.         });
  73.     });
  74.     $(".hide02").click(function () {
  76.         $(".c1").hide(1000,function () {
  77.             alert("隐藏成功")
  78.         })
  80.     });
  82.      // (2) slideDown与slideUp
  84.      $(".show03").click(function () {
  86.         $(".c1").slideDown(1000,function () {
  87.             alert("显示成功")
  88.         });
  90.      });
  91.      $(".hide03").click(function () {
  93.         $(".c1").slideUp(1000,function () {
  94.             alert("隐藏成功")
  95.         })
  97.     });
  99.       // (3) fadeIn与fadeOut
  101.      $(".show04").click(function () {
  103.         $(".c1").fadeIn(1000,function () {
  104.             alert("显示成功")
  105.         });
  107.      });
  108.      $(".hide04").click(function () {
  110.         $(".c1").fadeOut(1000,function () {
  111.             alert("隐藏成功")
  112.         })
  114.     });
  116.      // 自定义动画
  118.     $(".animate").click(function () {
  120.         $(".c1").animate({
  121.             "border-radius":"50%",
  122.             "top":340,
  123.             "left":200
  124.         },1000,function () {
  125.             $(".c1").animate({
  126.                 "border-radius":"0",
  127.                 "top":240,
  128.                 "left":120
  129.             },1000,function () {
  131.                 $(".animate").trigger("click")
  132.             })
  133.         })
  135.     })
  138. </script>
  140. </body>
  141. </html>