一、事件： 1、模式觸發事件： ①DOM：elem.onXXX();只能觸發直接用onXXX綁定的事件處理函數；用addEventistener添加的事件監聽無法模擬出發觸發； ②jQuery：$(...).trigger("事件名");可簡寫：$(...).事件名； 2、頁面載入後執行： ①jQu ...
一、事件：
1、模式觸發事件：
①DOM：elem.onXXX();只能觸發直接用onXXX綁定的事件處理函數；用addEventistener添加的事件監聽無法模擬出發觸發；
②jQuery：$(...).trigger("事件名");可簡寫：$(...).事件名；
2、頁面載入後執行：
①jQuery:$(document).ready(function(){...});底層事件——DOM中的ondocumentcontentloaded，只要DOM樹載入完成，js執行完畢就觸發；
②DOM:window.onload=function(){...}；底層——必須等到html，css，jsimg全部載入完成才會觸發；
③優化：將原本在load之後執行的任務（事件綁定，修改DOM樹），提前到ready之後執行，可縮短頁面載入事件；將script放在body的結尾可實現DOM載入後立刻執行；
3、hover事件：其實是mouseover和mouseout的合體，須綁定兩個事件處理函數； 當須同時相應mouseover和mouseout時，可簡寫為hover；
二、動畫：
1、簡化版動畫函數：顯示/隱藏：$(...).show(); $(...).hide(); $(...).toggle();
* 無參數的show（）/hide（）使用的是display屬性；瞬間顯示和隱藏；
動畫參數：speed：fast/normal/slow；或者使用毫秒數自定義動畫時長；
動畫速度變化參數：easing：linear/swing；
伸縮：slideUp()、slideDown()、slideToggle()；
淡入淡出：fadeIn()、fadeOut()、fadeToggle()；
2、萬能動畫函數：animate():可對數值類型的CSS樣式執行定時器動畫；
使用：$(...).animate(params,speed,easing,fn);
其中：params：所有變化的css屬性目標值；speed：動畫持續時間/速度；easing：速度變化效果；fn：動畫結束後自動調用的回掉函數；
排隊：多個動畫順序執行；
$(...).animate({屬性1:值1,...},ms).animate({屬性2：值2，...}，ms)；
併發：多個動畫同時執行；
$(...).animate({屬性1:值1，屬性2：值2}，ms)；
三、類數組操作：
1、.each(function(i){i->當前元素的下標；this->當前元素})；
each為jQuery第三方定義類數組對象的方法；
forEach是原生js中Array類型的方法；
使用：$("要查找的元素").index("所有元素")；返回要查找的元素在所有元素中的下標位置；
2、jQuery UI：
①Effects：動畫效果；
addClass()/removeClass()/toggleClass():預設沒動畫；
show/hide/toggle：擴展了動畫效果；
color animation：實現顏色動畫；
$(...).animate():支持顏色動畫；
$(...).toggle(Effecta,speed)中：effects參數：
blind（遮蔽）、bounce（彈跳）、clip（縮短）、puff（膨脹）、explode（爆炸）、fold（摺疊）、highlight（高亮）、drop（丟棄）、pulsate（心跳）、shake（震動）、size、slide
②Interactions：交互
拖曳：$(...).dragglable();API會悄悄為元素添加class；
可選中：$(...).selectable();須手動定義同名樣式類ui-selected的樣式；
可排序：$(...).sortable();
③Widget：小部件；
a、Accordion：手風琴部件，引入jquery-ui.css，html：父元素>標題+內容div,js:$(父元素).accordion();
b、AutoComplete:自動完成；html：input文本框，js：保存所有備選項的數組——$(文本框).autocomplete({source:數組})；
c、datepicker：日期選擇框；html：input文本框，js：$(文本框).datepicker({dateFormat:"yyyy年mm月dd日"})；*H5中不能修改樣式且相容性；
d、dialog：對話框；html：定義外層元素，包含提示信息（須定義title屬性，title屬性會出現在對話框左上角），js：$(“外層元素”).dialog();*不帶參數的dialog只負責將容器變成對話框，不控制顯示與否；
配置：$(...).dialog({
autoOpen:false,//預設隱藏
button:[
{text:'文本'，click：function（）{this->dialog}}//按鈕
....]
})；
打開：$(...).dialog("open");
關閉：$(...).dialog("close");
e、按鈕部件：$(button/input/a).button();
f、tabs：標簽頁：html:父級div>標簽頁ul>li>a href="#id";*(內容頁div的#id匹配)；js：$(父元素).tabs();
g、tooltip：工具提示;必須應用到document上；
