前端（九）

一前言

与js动画有关的主要有三你们族：offset/scroll/client。接下来认识一下三你们族。

offset 

每一个标签节点对象中都会有：offsetWidth、offsetHight、offsetLeft、offsetTop、offsetParent属性，他们表明什么意思呢？

offsetWidth 和 offsetHight用来获取标签的大小：

• offsetWidth = width + padding + border;

• offsetHeight = Height + padding + border;

offsetLeft 和 offsetTop距离带有定位的祖先盒子左边和上边位置 ；若是父级都没有定位，则以body为准。不论你是以何种手段产生的距离padding也好，绝对定位也好，返回的就是距离（只读属性）。

offsetParent返回距离本身最近带有定位的祖先标签对象。若是祖先都没有定位，返回body标签对象。

tips：style.left和offsetLeft 有本质的区别：style.left指定的是自身定位用到的属性，可读，可写，可是读取只能读取行内样式。offsetLeft 指定的是偏移量，只读属性，不可赋值，咱们就能够结合这两个属性的特色总结以下：用offsetLeft 和 offsetTop 获取值，用style.left 和 style.top 赋值来实现动画。

经过上边的几个属性表示的含义+定位的css样式，理论上咱们能够实现任何动画：其原理是：

让父盒子相对布局，子盒子绝对定位：而后经过公式：

ele.style.left = ele.offsetLeft + speed + "px";复制代码

动态去改变元素left，来达到一个动画效果，经过上边的公式咱们能够看到，咱们在js中数据模型的创建须要开发者本身去作，而不是像android模型已经创建好，只须要设置初始值，结束值，动画时间，就能够拿到值。

scroll 

每一个标签节点对象中都还会有：scrollWidth 、scrollHeight、scrollTop 、scrollLeft属性，他们表明什么意思呢？

• scrollWidth = width + padding;

• scrollHeight = height + padding;

tips:这里不包括border，而且这里的scrollWidth 若是内容超过盒子就是内容的高度，若是不错超过就是盒子的高度。然而offsetWidth无论内容有没有超过都是盒子的大小

scrollTop 和 scrollLeft 表明网页被卷去的头部和左边的部分，兼容不一样浏览器写法：

function scroll() {     
 return { //此函数的返回值是json        
 "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,    
 "left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,  
     }  
  }复制代码

client 

上边两你们族都是针对盒子自身调用的数据或者针对整个网页滚动的数据。而client却不同，

clientWidth 和 clientHeight

盒子调用时：

• clientWidth= width + padding;

• clientHeight= height + padding;

tips：无论内容是否超过都是盒子的大小

body/html调用时：获取页面的可视区域。

event调用：鼠标距离可视区域的距离。

clientTop 和 clientLeft

• clientTop：盒子的上border。

• clientLeft：盒子的左border。

二jQuery入门

就目前来拥有的知识来看，若是用原生的js去获取和操做DOM节点，会面临不少问题：浏览器兼容、代码繁琐、动画难实现（须要本身去建模）。为了解决这些问题jQuery库应运而生。jquery就是封装了不少操做节点方法。首先咱们来认识一下$（参数）：传入不一样的参数，返回不一样的对象。如：

$(); // 调用自定义的函数$

$(document）.ready(function(){}); // 调用入口函数

$(function(){}); // 调用入口函数

$("#btnShow") // 获取id属性为btnShow的元素
$("div") // 获取全部的div标签元素

$(".btnShow") // 获取全部class是btnShow的元素复制代码

jqueryAPI有两个特性：链式调用和隐式迭代。

• 链式调用是由于return的是this（只有设置操做才能把链式编程延续下去）
• 隐士迭代是由于返回的对象都是数组，内部默认迭代了对象

总结：jQuery 把 DOM节点对象包装成 jQuery 节点对象，而且节点对象之间能够互相转换：

• jquery节点对象 = $(DOM节点对象)
• DOM节点对象  = jquery节点对象[下标]

咱们在前边已经学过，要获取DOM节点对象，能够经过doctoment配合选择器来获取DOM节点对象。一样的jQuery也封装了直接经过选择器能够获取jQuery节点的方法，css选择器均可以用到jQuery中，写到字符串中,如：$("选择器")。固然，因为jQuery返回的是一个数组，因此他还有过滤选择器，来帮助开发者更方便使用：

• "div:eq(a)"： a表示选择第几个元素,返回当前位置元素数组；
• "div:gt(a)": a表示第几个位置，返回大于a位置的元素数组；
• "div:It(a)"：a表示第几个位置，返回小于a位置的元素数组；
• "div:odd"：选择序号为奇数位置，返回数组；
• div:even"：选择序号为奇数位置，返回数组；
  
• "div:first"：选择第一个位置，返回数组；
• "div:last"：选择最后一个位置，返回数组；

同时还提供了：属选择器、筛选选择器 jquery节点筛选选择器方法：

• find（"div"）:获取当前节点全部后代div;
• children("div"):获取当前节点亲儿子div；
• siblings():获取当前节点的兄弟，不包括本身；
• parent():获取当前节点的父节点；
  
• eq(index):指定索引位置的节点；

三jQuery动画

上边咱们已经知道动画的实现原理，由于js并无对动画提早建模，作为开发者，实现动画就须要本身去建模，这是不能忍的，jQuery封装了不少动画，接下来咱们就一块儿了解一下jQuery关于动画的方法。

显示隐藏动画

在js中咱们经过display值为none或black去显示或者隐藏DOM节点，可是这种显示和隐藏比较生硬。jQuery帮咱们封装了一个带有动画的显示和隐藏：

• $(selector).show()
• $(selector).show(time)
• $(selector).show("slow")
• $(selector).show(time,function(){})

隐藏同上只是把show方法变成hide方法。咱们在开发时候经常显示和隐藏使用一个按钮，jQuery还提供了toggle方法，免除咱们本身去定义标记。如：

$(".bb").toggle(3000,function(){alert("动画执行完毕")})复制代码

仔细观察咱们会发现show和hide方法动画是三组动画同时执行：从上到下显示+从左到右显示+透明度从0-1变化。那么猜想应该有这三个动画独立执行的API：

从上到下显示隐藏有三个方法：slideDown()、slideUp()、slideToggle()，API使用如上显示和隐藏。

透明度显示隐藏有三个方法：fadeOut()、fadeIn()、fadeToggle(),API使用如上显示和隐藏。

仅仅有上边这些简单的动画，在实际开发中仍是难以知足需求，由于不够任意多样化。固然jQuery给咱们提供了自定义动画，相似android的插值器的功能同样，只要给开始值（开始值就是当前div的css值），结束值，动画执行时间，就能够给你一系列的变化值，甚至比android更简单的是，它会自动刷新渲染。语法以下：

$(selector).animate({params}, speed, callback);复制代码

• 第一个参数表示：要执行动画的CSS属性（必选）

• 第二个参数表示：执行动画时长（可选）

• 第三个参数表示：动画执行完后，当即执行的回调函数（可选）

例：

var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100 };
$("div").animate(json, 1000, function () {         });复制代码

中止动画：

$(selector).stop(false, false);复制代码

第一个参数：

• true：后续动画不执行。(废除动画队列)

• false：后续动画会执行。（废除队列里边的当前动画）

第二个参数：

• true：当即完成当前动画。

• false：当即中止当前动画。