事件委托、動畫、插件、Ajax

Day42 事件委托、動畫、插件、Ajax

1. 動畫

   1.1 顯示/隐藏

   Hide() : 隐藏,無參是直接隐藏,第一個參數是毫秒數

   show() : 顯示,無參是直接顯示出來,第一個參數是毫秒數

   toggle() : 切換,顯示就變隐藏,隐藏就變顯示,第一個參數是毫秒數

第二個參數是回調函數,比如,2秒内顯示完成,顯示完成後把大小更改

因為動畫效果本質就是定時器,而定時器實質會開啟一個線程,和定時器之外的代碼異步執行,假如我們需要在動畫完成之後,要做一些其他操作,就需要用到第二個參數

新事件 - toggle,需要引入1.8.3的jQuery包

這裡的toggle方法：toggle傳入兩個方法，第一次點選執行第一個，第二次執行第二個 ------------

1.2 淡入/淡出

fadeIn , fadeOut,fadeToggle , 用法同上

1.3 滑動

slideDown , slideUp,slideToggle , 同上

1.4 自定義

以上幾種方法,都不是我們想要的效果,我們就可以通過animate進行自定義

1.5 Stop

1.6 案例

1. 事件

   2.1 事件注冊

   Bind和on可以綁定多個事件,但是不能動态綁定(後添加的元素,不會擁有該事件)

   

   

   

2.2 事件委托

本質就是利用冒泡機制和事件源,對父标簽綁定事件,然後通過子标簽去觸發執行

這樣可以進行事件的動态綁定,使新增元素也擁有事件監聽

2.3 Event

event對象有以下屬性

type：事件類型，比如click。

which：觸發該事件的滑鼠按鈕或鍵盤的鍵。

target：事件發生的初始對象,事件源(誰觸發的這個事件)。

data：傳入事件對象的資料。

pageX：事件發生時，滑鼠位置的水準坐标（相對于頁面左上角）。

pageY：事件發生時，滑鼠位置的垂直坐标（相對于頁面左上角

Key,keyCode,target,type,pageX,pageY,data

2.4 Each

就是forEach,主要做周遊操作

1. HTML設定與捕獲

3.1 Html()

Html() 等價于 innerHTML

無參是擷取,有參是設定

3.2 Text()

Text() 等價于 innerText

無參是擷取,有參是設定

3.3 Val()

Val()等價于 value , 常用于表單操作

無參是擷取,有參是設定

3.4 Attr()

屬性操作,等價于 setAttribute和getAttribute

一個參數是擷取對應的屬性值,兩個參數是設定該屬性的值

可以自定義屬性,但是 輸入框相關的,比如checked等 擷取不到

3.5 Prop()

一個參數,如果是表單的checked等,就是判斷該元素是否有該屬性(是否被選擇)

如果是id,class之類的 就是擷取對應的值

兩個參數是設定該元素的屬性和值

隻支援元素自帶屬性,不能自定義屬性

一般用于表單操作,比如 判斷是否選中

1. 寬高相關

   4.1 Width()和height()

   隻是寬高,不包含内外邊距,無參是擷取,有參是設定

   

4.2 InnerWidth()和innerheight()

包含内邊距

4.3 outerWidth()和outerheight()

包含内邊距和邊框

如果想要擷取外邊距 需要加 true

4.4 滾動條

1. 元素操作

5.1 Append

尾部追加元素,添加為子标簽

$(‘#div’).append§

5.2 Prepend

插入到内部 的首部

5.3 After

平級關系,插入到你後面

5.4 Before

平級關系,插入到你前面

5.5 Remove

删除一個節點

5.6 Empty

清空子節點