实例

$("button").click(function(){
  $("div").animate({left:'250px'});
});

animate() - 操作多个属性

生成动画的过程中可同时使用多个属性：

实例

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

可以用 animate()方法来操作所有 CSS 属性吗？ 是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。同时，色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jquery.com 下载 颜色动画 插件。

引入颜色动画插件

animate() - 使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

实例

$("button").click(function(){  
    $("div").animate({    
        left:'250px',    
        height:'+=150px',    
        width:'+=150px'  
    }); 
});

jQuery animate() - 使用预定义的值

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

实例

$("button").click(function(){
        $("div").animate({
        height:'toggle' 
    }); 
});

jQuery animate() - 使用队列功能

默认地，jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

实例 1

$("button").click(function(){  
    var div=$("div");  
    div.animate({
        height:'300px',
        opacity:'0.4'
    },"slow");  
    div.animate({
        width:'300px',
        opacity:'0.8'
    },"slow");  
    div.animate({
        height:'100px',
        pacity:'0.4'
    },"slow");  
    div.animate({
        width:'100px',
        opacity:'0.8'
    },"slow"); 
});

下面的例子把

实例 2

$("button").click(function(){ 
    var div=$("div");  
    div.animate({
        left:'100px'
    },"slow"); 
    div.animate({
        fontSize:'3em'
    },"slow"); 
});

动画调度

对于 jQuery 的动画的设计我们要分 2 个层面理解：

1. 每一个动画效果可以看作一个独立的动画对象，每个对象都实现了针对自己这个动画的生命周期的控制
2. 动画对象与动画对象之间其实是没有直接关系，但是为了做到连续调用就需要引入一套队列机制也就是 Queue 来控制对象之间的转换的控制

动画的源码：

animate: function(prop, speed, easing, callback) {
   doAnimation = function() {
      var anim = Animation(this, args, optall);
   };
   this.queue(optall.queue, doAnimation);
}

这个代码缩减了，但是我们上面提到的最重要的 2 点这里都涉及到了：通过 queue 调度动画的之间的衔接，Animation 方法执行单个动画的封装。

jQuery 在 queue 的调度上涉及了一个关键的处理：同步与异步代码同时执行，同步收集动画序列，异步调用序列，看看整个调用的流程是这样的：

• 通过多个 animate 方法形成动画链，那么这个动画链其实都是会加入到 queue 队列里面
• 在每一次 queue 方法中会把动画数据写到队列中，然后取出队列中的第一个序列通过 dequeue 方法执行
• 开始执行之前写一个进程锁“inprogress”到 queue 里面，代表这个动画还在执行中，防止同个序列的多个动画重复执行，这个就是异步执行同步收集的处理方案
• 此时动画开始了，这里注意动画是在异步执行的同步的代码，继续调用下一个 animate
• 执行同样的 animate 方法逻辑但是此时问题来了，动画可能还在执行可是后续的 animate 还在继续调用，所以这个时候后面的动画代码就需要等待了（进程锁）
• 队列头是有一把“inprogress”进程锁的，那么这时候动画只需要加入队列，但是可以通过 inprogress 是否存在来判断是否执行
• 所有的 animate 方法在加入队列都是按照以上的逻辑依次执行，动画执行完毕了就会有一个结束通知，然后从 queue 取出第一个队列继续执行了，如此循环

以上是整个动画的调度一个流程，其实都是利用队列异步的空闲然后执行同步的代码，这样在处理上是没有浪费资源的，而且精确度也是最高的。

停止动画

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法:

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

下面的例子演示 stop() 方法，不带参数：

实例

$("#stop").click(function(){
  $("#panel").stop();
});

动画队列停止动画测试，只停止当前正在进行的动画，停止当前动画后，队列中的下一个动画开始进行：

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
    $("#panel").slideUp(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});

可以在 stop() 中设置 stopAll 的参数为 true，这样就可以停止所有动画效果而不是只停止当前动画：

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
    $("#panel").slideUp(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop(true);
  });
});

Callback

Callback 函数在当前动画 100% 完成之后执行。

jQuery 动画的问题

许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。

例子：

$("p").hide("slow")

speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。

实例

以下实例在隐藏效果完全实现后回调函数:

$("button").click(function(){
  $("p").hide("slow",function(){	//回调
    alert("段落现在被隐藏了");
  });
});

链(Chaining)

通过 jQuery，可以把动作/方法链接在一起。

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

jQuery 方法链接

我们都是一次写一条 jQuery 语句（一条接着另一条）。

不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示：

这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

如果需要，我们也可以添加多个方法调用。

当进行链接时，代码行会变得很长。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。

如下书写也可以很好地运行：

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

jQuery HTML

获取内容和属性

DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

下面的例子返回指定的

元素的宽度和高度：

$("button").click(function(){
  var txt="";
  txt+="div 的宽度是: " + $("#div1").width() + "
";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

下面的例子返回指定的

元素的 inner-width/height：

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "
";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

下面的例子返回指定的

元素的 outer-width/height：

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "
";
  txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

需要注意的地方：

设置了 box-sizing 后，width() 获取的是 css 设置的 width 减去 padding 和 border 的值。

.test{
    width:100px;
    height:100px;
    padding:10px;
    border:10px;
    box-sizing:border-box;
}

• width() 获取为: 60
• innerWidth() 获取值为: 80
• outWidth() 获取值为: 100

jQuery 遍历

jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

图示解析：

• 元素是

  的父元素，同时是其中所有内容的祖先。
  • 元素是
    • 元素的父元素，同时是
      的子元素
    • 左边的
    • 元素是 的父元素，
      的子元素，同时是
      的后代。
      元素是
      的子元素，同时是
      和
      的后代。
      两个
      元素是同胞（拥有相同的父元素）。
      右边的
      元素是 的父元素，
      的子元素，同时是
      的后代。
      元素是右边的
      的子元素，同时是
      和
      的后代。
      祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。
      祖先
      祖先是父、祖父或曾祖父等等。
      通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。
      • parent()
      • parents()
      • parentsUntil()
      parent() 方法
      parent() 方法返回被选元素的直接父元素。
      该方法只会向上一级对 DOM 树进行遍历。
      下面的例子返回每个 元素的直接父元素：
      $(document).ready(function(){
        $("span").parent();
      });
      
      parents() 方法
      parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
      下面的例子返回所有 元素的所有祖先：
      $(document).ready(function(){
        $("span").parents();
      });
      
      也可以使用可选参数来过滤对祖先元素的搜索。
      下面的例子返回所有 元素的所有祖先，并且它是
      元素：

      $(document).ready(function(){
        $("span").parents("ul");
      });
      

      parentsUntil() 方法

      parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

      下面的例子返回介于 与

      元素之间的所有祖先元素：

      $(document).ready(function(){
        $("span").parentsUntil("div");
      });
      

      后代

      后代是子、孙、曾孙等等。

      通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。

      • children()
      • find()

      children() 方法

      children() 方法返回被选元素的所有直接子元素。

      该方法只会向下一级对 DOM 树进行遍历。

      下面的例子返回每个

      元素的所有直接子元素：
      $(document).ready(function(){
        $("div").children();
      });
      
      也可以使用可选参数来过滤对子元素的搜索。
      下面的例子返回类名为 "1" 的所有
      元素，并且它们是
      的直接子元素：
      $(document).ready(function(){
        $("div").children("p.1");
      });
      
      find() 方法
      find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
      下面的例子返回属于
      后代的所有 元素：
      $(document).ready(function(){
        $("div").find("span");
      });
      
      下面的例子返回
      的所有后代：
      $(document).ready(function(){
        $("div").find("*");
      });
      
      同胞(siblings)
      同胞拥有相同的父元素。
      通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素
      • siblings()
      • next()
      • nextAll()
      • nextUntil()
      • prev()
      • prevAll()
      • prevUntil()
      siblings() 方法
      siblings() 方法返回被选元素的所有同胞元素。
      下面的例子返回
      的所有同胞元素：
      $(document).ready(function(){
        $("h2").siblings();
      });
      
      也可以使用可选参数来过滤对同胞元素的搜索。
      下面的例子返回属于
      的同胞元素的所有
      元素：
      $(document).ready(function(){
        $("h2").siblings("p");
      });
      
      next() 方法
      next() 方法返回被选元素的下一个同胞元素。
      该方法只返回一个元素。
      下面的例子返回
      的下一个同胞元素
      $(document).ready(function(){
        $("h2").next();
      });
      
      nextAll() 方法
      nextAll() 方法返回被选元素的所有跟随的同胞元素。
      下面的例子返回
      的所有跟随的同胞元素：
      $(document).ready(function(){
        $("h2").nextAll();
      });
      
      nextUntil() 方法
      nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
      下面的例子返回介于
      与
      元素之间的所有同胞元素：
      $(document).ready(function(){
        $("h2").nextUntil("h6");
      });
      
      jQuery prev(), prevAll() & prevUntil() 方法
      prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。
      过滤
      三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
      其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
      first() 方法
      first() 方法返回被选元素的首个元素。
      下面的例子选取首个
      元素内部的第一个
      元素：
      $(document).ready(function(){
        $("div p").first();
      });
      
      last() 方法
      last() 方法返回被选元素的最后一个元素。
      下面的例子选择最后一个
      元素中的最后一个
      元素：
      $(document).ready(function(){
        $("div p").last();
      });
      
      eq() 方法
      eq() 方法返回被选元素中带有指定索引号的元素。
      索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个
      元素（索引号 1）：
      $(document).ready(function(){
        $("p").eq(1);
      });
      
      filter() 方法
      filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
      下面的例子返回带有类名 "url" 的所有
      元素：
      $(document).ready(function(){
        $("p").filter(".url");
      });
      
      not() 方法
      not() 方法返回不匹配标准的所有元素。
      提示：not() 方法与 filter() 相反。
      下面的例子返回不带有类名 "url" 的所有
      元素：
      $(document).ready(function(){
        $("p").not(".url");
      });
      
      js
      相关
      ---
      在虚拟机(centos)上安装或卸载nodejs
      js 正则匹配 两个字符串之间，某个字符串之前（之后）的内容
      sql server2016里面的json功能 - 转
      cefSharp通过js操控页面，含跨域操控
      angularjs $emit $on $broadcast 父子 兄弟之间传值
      渡一 3-2 js基础知识
      js 校验身份证号码
      nodejs 一个简单的web服务器，用于前端自己快速测试部署
      11-15.JS轮播、专辑、放大镜
      JS值传递与引用传递
      [转]Vue-cli3.x引入本地json报404 解决方案
      extjs ajax 同步 及 confirm 确认提示框问题
      标签