JQuery——第2課、事件，包裝集

1、jQuery事件

什麼是事件？

頁面對不一樣訪問者的響應叫作事件。

事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。

實例：

• 在元素上移動鼠標。
• 選取單選按鈕
• 點擊元素

在事件中常常使用術語"觸發"（或"激發"）例如： "當您按下按鍵時觸發 keypress 事件"。

常見的JQuery事件：

一、click()　　當按鈕點擊事件被觸發時會調用一個函

二、ready()　　在文檔徹底加載完後執行函數

三、dblclick()　　當雙擊元素時，會發生 dblclick 事件。

四、mouseenter()　　當鼠標指針穿過元素時，會發生 mouseenter 事件。

五、mouseleave()　　當鼠標指針離開元素時，會發生 mouseleave 事件。

六、mousedown()　　當鼠標指針移動到元素上方，並按下鼠標按鍵時，會發生 mousedown 事件。

七、mouseup()　　當在元素上鬆開鼠標按鈕時，會發生 mouseup 事件。

八、hover()　　用於模擬光標懸停事件。

九、focus()　　當元素得到焦點時，發生 focus 事件,經過鼠標點擊選中元素或經過 tab 鍵定位到元素時，該元素就會得到焦點。

十、blur()　　當元素失去焦點時，發生 blur 事件。 

 

 

 

---

 

2、包裝集的管理

 一、肯定包裝集的大小length

　　length 屬性包含 jQuery 對象中元素的數目。

　　語法：$(selector).length

二、得到元素在包裝集的位置index()

　　index() 方法返回指定元素相對於其餘指定元素的 index 位置。

　　這些元素可經過 jQuery 選擇器或 DOM 元素來指定。

 　  （1）、第一個匹配元素的 index，相對於同胞元素

　　 得到第一個匹配元素相對於其同胞元素的 index 位置。

　　語法：$(selector).index()

 

　　（2）、元素的 index，相對於選擇器　

　　得到元素相對於選擇器的 index 位置。

　　該元素能夠經過 DOM 元素或 jQuery 選擇器來指定。

　　語法：$(selector).index(element)

三、添加元素到包裝集add()

　　add() 方法將元素添加到匹配元素的集合中

 　　語法：.add(elements)

四、刪除包裝集中的元素not()

　　not() 從匹配元素集合中刪除元素。

　　語法：.not(element)

 

五、對包裝集中的元素進行過濾 filter()

　　filter() 方法將匹配元素集合縮減爲匹配指定選擇器的元素。

　　語法：.filter(selector)

六、獲取包裝集的子集 slice()

　　slice() 把匹配元素集合縮減爲指定的指數範圍的子集。

　　語法：.slice(selector,end)

3、JQuery中的選擇器

　　一、層次選擇器

　　　　一、後代元素選擇器：用於在給定的元素下查找全部的後代元素

　　　　　　語法：$("amcestor descendant")

　　二、子元素選擇器：用於在給定的元素下查找全部的直接元素

　　　　語法：$("parent>child")

 　　三、緊鄰同輩元素選擇器：用於選擇給定元素的同級元素

　　　　語法：$("prev+next")

　　四、相鄰同輩元素選擇器：用於選擇prev元素後的全部同級的元素

　　　　語法：$("prev~siblings")

 

　　二、過濾選擇器

　　　　　　一、動畫元素選擇器      :animated

　　　　　　　　　　選擇器選取當前的全部動畫元素

　　　　　　　　　　語法：$(":animated")

　　　　　　二、 焦點元素選擇器     :focus

　　　　　　　　　　選擇器用於選取得到焦點的元素。

　　　　　　三、首元素選擇器          :first

　　　　　　　　　　:first 選擇器選取第一個元素。

　　　　　　　　　　語法：$(":first")

　　　　　　四、末元素選擇器          :last

　　　　　　五、非元素選擇器          :not(selector)

　　　　　　六、偶元素選擇器          :even

　　　　　　七、奇元素選擇器          :odd

　　　　　　八、相等元素選擇器      :eq(index)

　　　　　　九、大於元素選擇器      :gt(index)

　　　　　  十、小於元素選擇器    :lt(index) 

　　　　　  十一、標題元素選擇器    :header(index)

　　三、內容過濾選擇器

　　　　　　一、空內容選擇器           :emoty

　　　　　　二、元素內容選擇器       :has(selector)

　　　　　　三、父元素選擇器           :parent

　　四、可見性過濾器

　　　　　　一、隱藏元素選擇器         :hidden

　　　　　　二、可見元素選擇器         :visible