经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
JQuery框架：介绍、安装、选择器、属性操作、动画
来源：cnblogs　　作者：是阿凯啊　　时间：2019/6/24 8:51:04　　对本文有异议

目录

jQuery

详细内容

1.JQuery介绍

  • jQuery是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
  • 操作: 获取节点元素对象，属性操作，样式操作，类名，节点的创建，删除，添加，替换

2.JQuery的下载安装

3.JQuery的使用

  • 获取jquery对象
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div id="box" class="box">
  9.         <p class="active">xjk1</p>
  10.         <p class="active">xjk2</p>
  11.         <input type="text">
  12.     </div>
  13.     <script type="text/javascript" src="js/jquery.js"></script>
  14.     <script>
  15.         console.log($('.box'));//获取jquery对象
  16.     </script>
  17. </body>
  18. </html>
  19. //jQuery.fn.init?[div#box.box, prevObject: jQuery.fn.init(1)] 是一个伪数组

1.对象的转换

  1. //jquery对象转js节点对象
  2. console.log($('#box')[0]);//jquery对象转换js节点对象,索引方式
  3. //js对象转jquery对象
  4. var box = document.getElementById('box');
  5. console.log($(box));
  6. console.log($('#box .active'));//打印出符合id=box,底下class=active所有jquery对象。
  1. $('#box .active').click(function(){//点击获取事件
  2.     console.log(this);//this 指的是此时的p签及其内容。
  3. })

4.jQuery的选择器

1.基本选择器

  • ID选择器 (#id)
    • $(#id)
  1. $('#box').css('color','red');
  • 类选择器（.class ）
    • $(".类名")
  1. $('.box').css('color','red');
  • 标签选择器(Element)
    • $("标签")
  1. $('p').css('color','blue');
  • 通配符选择器(*)
    • $('*')
  1. $('*').css({'outline':0,'border':0});//去除所有外框。

2.层级选择器

  • 后代选择器
    • 符号：空格
    • 范围：选择所有的后代元素
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div>
  9.         <span>span标签1</span>
  10.         <p>p标签</p>
  11.         <span>
  12.             <span>span标签2</span>
  13.         </span>
  14.         <div>
  15.             <span>span标签3</span>
  16.         </div>
  17.     </div>
  18.     <script type="text/javascript" src="js/jquery.js"></script>
  19.     <script>
  20.         $("div span").css('color','red');//所有div 下的span标签字体颜色都成为红色
  21.     </script>
  22. </body>
  23. </html>
  • 子代选择器
    • 符号：>
    • 范围：选择器所有的子代元素
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div>
  9.         <span>span标签1</span>
  10.         <p>p标签</p>
  11.         <span>
  12.             <span>span标签2</span>
  13.         </span>
  14.         <div>
  15.             <p><span>span标签3</span></p>
  16.         </div>
  17.     </div>
  18.     <script type="text/javascript" src="js/jquery.js"></script>
  19.     <script>
  20.         $('div>span').css('color','red');//div下的所有span标签 字体都变红色
  21.     </script>
  22. </body>
  23. </html>
  • 紧邻选择器
    • 符号：+
    • 范围：选择器紧挨着的下一个元素。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div>
  9.         <p>p标签</p>
  10.         <span>
  11.             <div>span标签2</div>
  12.             <div>span标签3</div>
  13.             <div>span标签4</div>
  14.         </span>
  15.     </div>
  16.     <script type="text/javascript" src="js/jquery.js"></script>
  17.     <script>
  18.         $('p+span').css('color','red');//p签紧挨着的span签的子标签内容
  19.     </script>
  20. </body>
  21. </html>
  22. //span标签2  span标签3  span标签4 都变红

  • 兄弟选择器

    • 符号： ~
    • 范围选择后的所有兄弟元素。
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    7. </head>
    8. <body>
    9.     <div>div标签</div>
    10.     <p>p标签1</p>
    11.     <p>p标签2
    12.         <p>p标签2的子标签</p>
    13.     </p>
    14.     <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    15.     <script>
    16.         $('div~p').css('color','red');
    17.     </script>
    18. </body>
    19. </html>
    20. //p标签字都称为红色

3.基本过滤器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <ul>
  9.         <li class="a">
  10.             <a href="#">caocao</a>
  11.         </li>
  12.         <li class="b">liubei</li>
  13.         <li class="c">sunquan</li>
  14.         <li class="d">guanyu</li>
  15.     </ul>
  18.     <script type="text/javascript" src="js/jquery.js"></script>
  19.     <script>
  20.         // console.log($('ul li:eq(1)'));//获得索引为1的元素
  21.         // $('ul li:eq(1)').css('color','red');//改变索引为1的元素的颜色
  23.         // console.log($('ul li:lt(3)'));//从0开始获取索引小于3的元素。是伪数组
  24.         // $('ul li:odd').css('color','red');//更改索引为奇数的文本颜色
  25.         $('ul li a:first').css('color','yellow');//第一个匹配元素更改颜色
  26.         $('ul li:last').css('color','grey');//更改最后一个元素的颜色
  27.     </script>
  28. </body>
  29. </html>

4.属性选择器

  • 例题：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <a href="nihao" class="a">href为nihao</a>
  10.     <a href="" class="b">href为空</a>
  11.     <a class="c">不包括href的a签</a>
  12.     <script type="text/javascript" src="js/jquery.js"></script>
  13.     <script>
  14.         // console.log($('a[href]'));//选择包含href属性元素
  16.         // console.log($("a[href='nihao']"));//选择href='nihao'的元素
  18.         console.log($("a[href!='baidu']"));//选择href!='baidu'的元素
  19.     </script>
  20. </body>
  21. </html>

5.筛选选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <ul>
  9.         <li class="out1">1
  10.             <ul>
  11.                 <li class="inner1">内1</li>
  12.                 <li class="inner2">内2</li>
  13.                 <li class="inner3">内3</li>
  14.             </ul>
  15.         </li>
  16.         <li class="out2">2</li>
  17.         <li class="out3">3</li>
  18.     </ul>
  19.     <script type="text/javascript" src="js/jquery.js"></script>
  20.     <script>
  21.         // console.log($('ul').find('li'));//查找ul下所有li标签，后代
  22.         // console.log($('.out1').children('ul'));//查找class=out1 的子标签ul
  23.         console.log($('ul').parent());//查找ul标签的父标签
  24.     </script>
  25. </body>
  26. </html>
  • 获取文档，获取body,获取html
  1. console.log(document);//获取文档
  2. console.log(document.body);//获取body
  3. console.log(document.documentElement);//获取html

6.选项卡案例JavaScript对比JQuery

  1. //此为JavaScript实现
  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <title></title>
  7.         <style type="text/css">
  8.             button.active{
  9.                 color: red;
  10.             }
  11.             p{
  12.                 display: none;
  13.             }
  14.             p.active{
  15.                 display: block;
  16.             }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <button class="active">热门</button>
  21.         <button>电视影音</button>
  22.         <button>电脑</button>
  23.         <button>家具</button>
  24.         <p class="active">热门</p>
  25.         <p>电视影音</p>
  26.         <p>电脑</p>
  27.         <p>家具</p>
  28.         <script type="text/javascript">
  29.             // 1.获取标签
  30.             var btns = document.getElementsByTagName('button');
  31.             var ops = document.getElementsByTagName('p');
  32.             
  33.             //2.给每个标签绑定点击事件
  34.             //ES6可以用let定义块级作用域变量
  35.             for(let i = 0;i < btns.length; i++){
  36.                 btns[i].onclick = function (){//排他思想
  37.                     for(var j = 0; j < btns.length; j++){
  38.                         btns[j].className = '';
  39.                         ops[j].className = '';
  40.                     }
  41.                     //改变button的样式
  42.                     this.className = 'active';
  43.                     //改变p标签的样式
  44.                     ops[i].className = 'active';
  45.                 }
  46.             }
  47.         </script>
  48.     </body>
  49. </html>
  50. //JQuery实现选项卡
  51. <!DOCTYPE html>
  52. <html>
  53.     <head>
  54.         <meta charset="utf-8">
  55.         <title></title>
  56.         <style type="text/css">
  57.             button.active{
  58.                 color: red;
  59.             }
  60.             p{
  61.                 display: none;
  62.             }
  63.             p.active{
  64.                 display: block;
  65.             }
  66.         </style>
  67.     </head>
  68.     <body>
  69.         <button class="active">热门</button>
  70.         <button>电视影音</button>
  71.         <button>电脑</button>
  72.         <button>家具</button>
  73.         <p class="active">家电</p>
  74.         <p>电视影音</p>
  75.         <p>电脑</p>
  76.         <p>家具</p>
  77.         <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
  78.         <script type="text/javascript">
  79.             $('button').click(function(){
  80.                 // 链式编程
  81.                 //第二个按钮 索引1
  82.                 console.log($(this).addClass('active'));
  83.                 $(this).addClass('active').siblings('button').removeClass('active');
  84.                 // 获取当前点击的元素的索引
  85.                 console.log($(this).index());
  86.                 $('p').eq($(this).index()).addClass('active').siblings('p').removeClass('active');
  87.             })
  88.         </script>
  89.     </body>
  90. </html>

5.JQuery的属性操作

  • JQuery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作
    • html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()。
    • DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
    • 类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
    • 值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
1. attr()

  • 设置属性值或者返回被选元素的属性

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    7. </head>
    8. <body>
    9.     <div id = 'box' class="boxs">你好</div>
    10.     <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    11.     <script>
    12.         //获取值：attr设置一个属性值的时候，只是获取值。获取id值。
    13.         var id = $('div').attr('id');
    14.         console.log(id);//box
    15.         //获取class值
    16.         var cla = $('div').attr('class');
    17.         console.log(cla);//boxs
    19.         //设置一个值
    20.         $('div').attr('id','thebox');//此时id值为thebox
    21.         //设置多个值
    22.         $('div').attr({'id':'manybox','class':'happy'});
    24.     </script>
    25. </body>
    26. </html>
2.removeAttr()

  • 移除属性

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    7. </head>
    8. <body>
    9.     <div id = 'box' class="boxs" title="say">你好</div>
    10.     <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    11.     <script>
    12.         //移除一个属性
    13.         $("#box").removeAttr('title');
    15.         //移除多个属性，如移除class  id属性
    16.         $('#box').removeAttr('class id');
    17.     </script>
    19. </body>
    20. </html>
3.prop()

  • 设置或者返回被选元素的属性和值。

  • 当该方法用于返回属性值时，则返回第一个匹配元素的值。

  • 当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

    • 注意不是标签能加的属性值不能设置
    1. <body>
    2.     <div id = 'box' class="boxs" title="say">你好</div>
    3.     <span></span>
    4.     <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    5.     <script>
    6.         //设置单个属性和值
    7.         $('span').prop('class','like');
    8.       //设置多个属性和值
    9.       $('span').prop({'title':'like','id':"line"});
    10.     </script>
    11. </body>
    12. </html>

  • attr() 和prop()的区别

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title></title>
    6. </head>
    7. <body>
    8.     男<input type="radio" id='test' name="sex"  checked/>
    9.     女<input type="radio" id='test2' name="sex" />
    10.     <button>提交</button>
    12.     <script type="text/javascript" src="js/jquery.js"></script>
    13.     <script type="text/javascript">
    14.         $(function(){
    15.             //获取第一个input
    16.             var el = $('input').first();
    17.             //undefined  因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefined
    18.             console.log(el.attr('style'));
    19.             // 输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象
    20.             console.log(el.prop('style'));
    21.             console.log(document.getElementById('test').style);
    23.             $('button').click(function(){
    24.                 alert(el.prop("checked") ? "男":"女");
    25.             })
    26.         })
    27.     </script>
    29. </body>
    30. </html>
    • 什么时候使用attr(),什么时候使用prop()?
      • 有true,false两个属性使用prop();
      • 其他则使用attr()
4. addclass(添加多个类)

  • 为每个匹配的元素添加指定类名

    1. $('div').addClass('box');//追加一个类名到原有的类名

  • 还可以为匹配的元素添加多个类名

    1. $('div').addClass("box box2");//追加多个类名

  • 例题

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         li.temp{
  8.             color:red;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <ul type="none">
  14.         <li>1</li>
  15.         <li>2</li>
  16.         <li>3</li>
  17.         <li>4</li>
  18.         <li>5</li>
  19.     </ul>
  20.     <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
  21.     <script>
  22.         $('li').addClass('temp');//为每个li标签添加class='temp'
  23.     </script>
  24. </body>
  25. </html>
5. removeClass()

  • 从所有匹配的元素中删除全部或者指定的类，移除指定类（1个或者多个）。

  • 移除一个

    1.     <script>
    2.         $('div').removeClass('box');
    3.         console.log($('div').attr('class'));//box2
    4.     </script>

  • 移除全部

    1.     <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    2.     <script>
    3.         $('div').removeClass();
    4.         console.log($('div').attr('class'));//''
    5.     </script>

  • 小案例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <style>
    7.         .active{
    8.             color:red;
    9.         }
    10.     </style>
    11. </head>
    12. <body>
    13.     <ul>
    14.         <li>1</li>
    15.         <li>2</li>
    16.         <li>3</li>
    17.         <li>4</li>
    18.     </ul>
    19.     <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    20.     <script>
    21.         //通过增加类值，改变其CSS渲染
    22.         $(function(){
    23.             $('ul li').click(function(){
    24.                 $(this).addClass('active').siblings('li').removeClass('active');
    25.             })
    26.         })
    27.     </script>
    28. </body>
    29. </html>
6.toggleClass
  • 如果存在（不存在）就删除（添加）一个类。
  • 语法：toggleClass('box')
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <span>123</span>
  9.     <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
  10.     <script>
  11.         //span标签没有class属性，点击之后span标签添加class='active'
  12.         $('span').click(function(){
  13.             $(this).toggleClass('active');
  14.         })
  15.     </script>
  16. </body>
  17. </html>
7.html

  • html() 是获取选中标签元素中所有的内容

    1. $('#box').html();

  • 示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8.     <div id="box">123</div>
    9.     <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    10.     <script>
    11.         //点击div获取事件，将123改为$('#box').html('<a href="https://www.baidu.com">百度一下</a>')
    12.         $('div').click(function(){
    13.             $('#box').html('<a href="https://www.baidu.com">百度一下</a>');
    14.         })
    15.     </script>
    16. </body>
    17. </html>
8.text

  • text() 获取匹配元素包含的文本内容。

  • 语法：

    1. $('#box').text();

  • 示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8.     <div id="box">123</div>
    9.     <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    10.     <script>
    11.         $('#box').text("<a href='https://www.baidu.com'>百度一下</a>")
    12.     </script>
    13. </body>
    14. </html>

9.val

  • 获取值：val()用于表单控件中获取值，比如input textarea select等等。

  • 语法：

    1. $('input').val('设置表单控件值')

  • 示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8.     <input type="text" value="你好">
    9.     <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    10.     <script>
    11.         $('input').val('替换表单的值');
    12.     </script>
    13. </body>
    14. </html>

6.动画

1.显示动画

  • 方式1：

    • 无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。
    1. $("div").show();

  • 方式2：

    • 通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。
    1. $('div').show(3000);

  • 方式3

    • 和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。
    • 参数：
      • slow 慢 600ms
      • normal 正常 400ms
      • fast 快 200ms
    1. $("div").show("slow");

  • 方式4

    • 动画执行完后，立即执行回调函数
    1. //show(毫秒值，回调函数;
    2.     $("div").show(5000,function () {
    3.         alert("动画执行完毕！");
    4.     });

  • 示例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <style>
    7.         div{
    8.             width: 200px;
    9.             height: 200px;
    10.             background-color: red;
    11.             display:none;
    12.         }
    13.     </style>
    14. </head>
    15. <body>
    16.     <div></div>
    17.     <script type="text/javascript" src="js/jquery.js"></script>
    18.     <script>
    19.         $('div').show(3000,function(){
    20.             alert('动画执行完毕');
    21.         });
    22.     </script>
    23. </body>
    24. </html>

2.隐藏动画

  1. $(div).hide();
  2. $(div).hide(1000);
  3. $(div).hide('slow');
  4. $(div).hide(1000,function())

3.实现点击按钮显示盒子，再点击按钮隐藏盒子

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style>
  7.             //css设置盒子宽高，背景色，display默认不显示
  8.             #box{
  9.                 width: 200px;
  10.                 height: 200px;
  11.                 background-color: red;
  12.                 display: none;
  13.             }
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <button id="btn">显示</button>
  18.         <div id="box"></div>
  19.         <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
  20.         <script type="text/javascript">
  21.             //点击鼠标获取事件
  22.             $('#btn').click(function(){
  23.                 if ($(this).text() === '显示'){
  24.                     //动画显示盒子
  25.                     $('#box').show(1000,function () {
  26.                         //将按键文档字改为‘隐藏’
  27.                         $('#btn').text('隐藏');
  28.                     });
  29.                 }else{
  30.                     //动画隐藏盒子
  31.                     $('#box').hide(1000,function () {
  32.                         //将按键文档字改为‘显示’
  33.                         $('#btn').text('显示');
  34.                     });
  35.                 }
  36.             })
  37.         </script>
  38.     </body>
  39. </html>

4.开关方式显示隐藏动画

  • ('#box').toggle(3000,function(){});
  1. $('#btn').click(function(){
  2.             $('#box').toggle(3000,function(){
  3.                 $(this).text('盒子出来了');
  4.                 if ($('#btn').text()=='隐藏') {
  5.                     $('#btn').text('显示');
  6.                 }else{
  7.                     $('#btn').text('隐藏');
  8.                 }
  9.             });
  10.         })

5.滑入和滑出

  • 滑入

    1. $('#box').slideDown(speed, 回调函数);

  • 滑出

    1. $('#box').slideUp(speed, 回调函数);

  • 滑入滑出切换动画

    1. $('#box').slideToggle(speed, 回调函数);

6.淡入淡出动画

  • 淡入

    1. $('#box').fadeIn(speed, 回调函数);

  • 淡出

    1. $('#box').fadeOut(speed, 回调函数);

  • 淡入淡出

    1. $('#box').fadeToggle('fast', callback);

6.自定义动画

  • 语法：

    1.  $(selector).animate({params}, speed, callback);

  • 作用：执行一组CSS属性的自定义动画。

    • 第一个参数表现：要执行动画的CSS属性（必选）
    • 第二个参数表示：执行动画时长（可选）
    • 第三个参数表示：动画执行完后，立即执行的回调函数（可选）
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         div {
  8.             position: absolute;
  9.             left: 20px;
  10.             top: 30px;
  11.             width: 100px;
  12.             height: 100px;
  13.             background-color: green;
  14.         }
  15.     </style>
  16.     <script src="js/jquery.js"></script>
  17.     <script>
  18.         jQuery(function () {
  19.             $("button").click(function () {
  20.                 var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
  21.                 var json2 = {
  22.                     "width": 100,
  23.                     "height": 100,
  24.                     "left": 100,
  25.                     "top": 100,
  26.                     "border-radius": 100,
  27.                     "background-color": "red"
  28.                 };
  30.                 //自定义动画
  31.                 $("div").animate(json, 1000, function () {
  32.                     $("div").animate(json2, 1000, function () {
  33.                         alert("动画执行完毕！");
  34.                     });
  35.                 });
  37.             })
  38.         })
  39.     </script>
  40. </head>
  41. <body>
  42. <button>自定义动画</button>
  43. <div></div>
  44. </body>
  45. </html>

原文链接：http://www.cnblogs.com/xujunkai/p/11074550.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号