事件+动画+类数组对象操作+添加自定义API

正课:

1. 事件

2. 动画

3. 类数组对象操作

4. 添加自定义API

1. 事件:

 1.页面加载后执行:

  1.仅DOM内容加载后自动触发:

    仅需要等待: html和js

   DOMContentLoaded

    何时: 页面初始化时，所有不依赖css和图片的功能(事件绑定)，都应在DOMContentLoaded中提前执行

    问题: 兼容性:

    $(document).ready(function(){ ... })

     简化: $().ready(function(){ ... })

      更简化: $(function(){ ... })

  2.等待全部页面内容加载完才执行

    包括: html,

css, js, 图片

    window.onload=function(){...}

    何时: 所有依赖css和图片的功能，必须在onload中执行

    问题: 以赋值方式添加处理函数

    解决: $(window).load(function(){... })

 鄙视: jQuery中$的原理: 4件事:

  1.直接封装DOM元素为jQuery对象

  2.查找DOM元素，并封装为jQuery对象

    当选择器简单时，首选按HTML查找，效率高

    当选择器复杂时，首选按选择器查找，易用性好

  3.用HTML片段创建新元素

  4. DOM内容加载后提前执行一项任务

 2.鼠标事件:

  mouseover  mouseout

  问题: 进入子元素，也会反复触发父元素上的事件，效率低

  解决:mouseenter  mouseleave代替

  如果同时绑定mouseenter和mouseleave

  还可简写: .hover(fun1,fun2)

   更简化: 如果hover中两个函数可统一为一个函数:

    .hover(fun) fun即给enter，又给leave

 3.模拟触发:

 $elem.trigger("事件名")

  更简化: $elem.事件名()

2. 动画:

 简单动画: 固定的三种效果:

  显示隐藏: .show(ms)  .hide(ms)  .toggle()

  上滑下滑: .slideUp()   .slideDown() .slideToggle()

  淡入淡出: .fadeIn()    .fadeOut()  .fadeToggle()

  问题:

   1.用定时器实现的！效率不如css的

   2.效果是在js中写死的，不便于维护

  尽量少用!

  特例: .show() .hide()其实是display

     所以，可用于代替display

 万能动画: 对任意css属性引用动画效果

  $elem.animate({

   css属性:目标值,

       ... : ...

  },ms)

  强调: 只支持单个数值的属性

 排队和并发:

  1.并发: 多个css属性同时变化

   放在一个animate中的多个css属性，默认并发执行

  2.排队: 多个css属性先后依次变化

   对一个元素先后调用多个动画API，则排队执行

   调用动画API其实不是立刻执行动画，只是将动画临时加入队列而已。

 动画播放后自动执行:

  每个动画API，都有第二个函数参数，函数会在动画播放后，自动执行!

 停止动画: .stop()

  问题: 只能停止当前一个动画，队列中后续动画依然继续执行

  解决: .stop(true)清空队列

 :animated选择器: 可判断或选择正在播放动画的元素

3. 类数组对象操作:

 $(...).each(function(i,elem){... })

  $.each(数组/类数组对象,function(i,elem){ ... })

 $(...).index(elem)

  如果在同一父元素下查找子元素:

   $(elem).index();

4. 添加自定义API: