jQuery-3

正课: 
1. 事件:
   模拟触发
   页面加载后执行
   hover
2. 动画: 


1. 事件: 
   模拟触发: 用代码模拟触发另一个元素的事件
    如何: $(...).trigger("事件名")


   页面加载后执行: 鄙视题: onload vs $(document).ready()
    页面加载过程: 
       .html  ->     .css
                  -> .js↓
                          DOMContentLoaded
                          DOM内容(.html和js)加载完成
                  ->         .图片 ↓
                                         loaded: 所有页面内容加载完成
     通常: DOMContentLoaded先于loaded
     何时: 如果一些操作(事件绑定)不需要等待所有内容加载完成，就可提前执行时，都要在DOMContentLoaded中执行。
     为什么: 让用户无需等待css和图片加载，就可提前使用功能
     如何: 
        DOMContentLoaded: $(document).ready(function(){...})
                                             $().ready(function(){...})
                                             $(function(){...})
             实际开发中，只要将script放在body结尾，默认就在DOM内容加载后执行。
        Loaded: window.οnlοad=function(){...}
   
    特殊事件: hover: 其实是一对儿mouseover和mouseout的组合
         何时: 只要对一个元素同时绑定鼠标进入和鼠标移出事件时
                  就可用hover简化绑定
         如何: 
            $(...).mouseover(function(){...})
            $(...).mouseout(function(){...})
            可简写为: 
               $(...).hover(
function(){...}, //处理over
                 function(){...} //处理out
               )
            如果进出的操作可统一为一个函数: 
               $(...).hover(function(){...}); 进出都执行同一函数


2. 动画: (了解)
   简单动画: 
     3种效果: 
        1. 显示和隐藏
            $(...).show/hide/toggle() 立刻显示隐藏: 相当于display:none/block
            $(...).show/hide/toggle(speed,easing,callback)
                speed: "slow","normal", or "fast"
                            ms
                easing:效果
                callback:一个函数对象，在动画播放完，自动执行
        2. 上下滑动  $(...).slideDown/slideUp/slideToggle(s,e,fn)
        3. 淡入淡出  $(...).fadeIn/fadeOut/fadeToggle(s,e,fn)


   万能动画: 控制任意css属性的在规定时间内均匀变化
      何时: 只要控制多个css属性均匀变化时
      如何: $(...).animate({//目标样式
   css属性:值,
                           ... : ... ,
               }, speed, easing, callback)
      //所有属性，从当前状态，同时均匀变化到指定的目标样式
      问题: 只能对数值类型的css属性提供动画
        比如: css3: transition: 可以提供背景颜色渐变的
                 jq: .animate()不支持颜色动画


   动画的并发和排队: 
      并发: 多个属性同时修改: 
         1种: 在一次animate调用中同时修改多个css属性
      排队: 多个动画，先后执行: 
         2种: 对同一个元素
          1. 分两次调用animate，第二个animate必须在第一个animate执行后，才开始执行
          2. 通过链式操作，先后调用animate，也是排队


    停止动画: $(...).stop();
       问题: 默认只能停止正在执行的一个动画
                如果后续有排队的动画，依然会继续触发
       解决: $(...).stop(true); //1. 停止当前动画，2. 清除队列
              














正课:
1. 类数组操作
2. jQueryUI


1. 类数组操作
    类数组对象本来不能使用数组的任何API: 比如: forEach, indexOf
       arr.forEach(function(val,i))
    jQuery为类数组对象提供了专门的遍历/查找API
      $(...).each(function(i[,elem])){
           //对结果集合中每个元素执行相同操作
           //this->elem->DOM->$(this)
      }
      var i=$(...).index(elem/$(elem)); //查找elem在结果集中的下标
   鄙视题: 页面上多个按钮，点每个按钮提示点的是第几个（下标）


2. jqueryUI: 
  UI: User Interface
  UI库: 完整的js,css组成的独立功能/效果的集合
  jqueryUI: 是jquery官方出的UI库
                  基于jquery, 但是极简化
  为什么: 实际开发中，很多功能(样式和行为)会反复使用
     解决: 使用现成的UI库中的插件——复用
  新技术: 上官网 -> DEMO/Start/Guide -> API Document
  
  分三部分: Effects 动画效果
                  Interactions 交互组件
                  Widgets: 小部件


  Effects动画效果: 
    基于jquery提供了更丰富的动画效果: 
     1. 为add/remove/toggleClass，添加动画效果:
        jquery: add/remove/toggleClass默认没有动画，不能加时间
        jquery-ui: 可以为add/remove/toggleClass添加时间
     2. 为show/hide/toggle，添加了更多动效
          blind(遮蔽) bounce(弹跳）explode(爆炸) ....
     3. 让.animate支持颜色动画


  Interactions: 交互组件
    1. $(...).draggable() 将找到的元素变为可拖拽
        <ANY>
            <title  class="ui-dialog-titlebar"> 让标题变拖拽图标
    2. $(...).selectable() 让目标元素可选中
         <ul>
            <li class="ui-selectee ui-selected"></li>
    侵入性: API根据自身的需要，向元素默默添加class
           有的class已经定义好，可直接使用
           有的class需要使用者自行定义
    3. $(...).sortable() 让目标元素可调整位置
         <ul >
            <li class="ui-sortable-handle ui-sortable-helper"


   Widget: 小部件: 
    Accordion: 
       html:
           <div>
                <hn>
                <div> 
       css: 
       js: $(...).accordion();


   问题: 主题颜色是固定的
   解决: 官网->主题画廊/颜色筒->先选择主题风格/定制风格->下载