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();


   問題: 主題顏色是固定的
   解決: 官網->主題畫廊/顏色筒->先選擇主題風格/定製風格->下載