1+X Web JQuery基礎

1.jQuery框架概述

jQuery 是一個 JavaScript 函數庫，具有一下優點：

jQuery 庫包含以下功能特性：

HTML 元素選取

HTML 元素操作

CSS 操作

HTML 事件函數

JavaScript 特效和動畫

HTML DOM 遍歷和修改

AJAX

Utilities

2.jQuery選擇器（掌握、應用）

jQuery語法是為 HTML 元素的選取編制的，可以對元素執行某些操作。

基礎語法是：$(selector).action()

2.1 基本選擇器

id 選擇器$('#box')

class 選擇器$('.box')

標記選擇器$('p')

*代表所有標

$("p") 選取 <p> 元素。

$("p.intro") 選取所有 的 <p> 元素。

$("p#demo") 選取所有 id="demo" 的 <p>元素。

2.2 屬性選擇器

[attribute] 匹配包含給定屬性的元素

[attribute=value]匹配給定的屬性的元素

[attribute!=value]匹配給定的屬性不是...的元素

[attribute^=value] 匹配給定的屬性以..開頭的元素

[attribute$=value] 配給定的屬性以..結尾的元素

[attribute*=value] 匹配包含給定值的元素

2.3 位置選擇器

:first匹配第一個元素

:last獲取最後一個元素

:not去除所有與給定選擇器匹配的元素

:even匹配所有索引值為偶數的元素

:odd匹配所有索引值為奇數的元素

:eq匹配一個給定索引值的元素

:gt匹配所有大於給定索引值的元素

:lt匹配所有小於給定索引值的元素

2.4 層級選擇器

//匹配所有後代元素

$('div span')

//匹配直接子元素

$('div>span')

//匹配所有緊接在 prev 元素後的 next 元素

//$("prev + next")

//匹配 prev 元素的所有同輩 siblings 元素

$("prev ~ siblings")

2.5 子元素選擇器

:first-child 匹配第一個子元素

:last-child 匹配最後一個子元素

:first-of-type 選擇所有相同的元素名稱的第一個兄弟元素

:last-of-type 選擇所有相同的元素名稱的最後一個兄弟元素

:nth-child 匹配其父元素下的第 N 個子或奇偶元素

:nth-last-child() 選擇所有他們父元素的第 n 個子元素。計數從最後一個元素開始到第一個

:nth-last-of-type() 選擇的所有他們的父級元素的第 n 個子元素，計數從最後一個元素到第一個

:nth-of-type() 選擇同屬於一個父元素之下，並且標籤名相同的子元素中的第 n個

:only-child 如果某個元素是父元素中唯一的子元素，那將會被匹配

:only-of-type 選擇所有沒有兄弟元素，且具有相同的元素名稱的元素。

2.6表單選擇器

:input 匹配所有 input, textarea, select 和 button 元素

:text 匹配所有的單行文本框

:password 匹配所有密碼框

:radio 匹配所有單選按鈕

:checkbox 匹配所有複選框

:submit 匹配所有提交按鈕

:image 匹配所有圖像域

:reset 匹配所有重置按鈕

:button 匹配所有按鈕

:file 匹配所有文件域

:hidden 匹配所有隱藏域

2.7 表單對象屬性選擇器

:enabled 匹配所有可用元素

:disabled 匹配所有禁用元素

:checked 匹配所有選中的被選中元素(複選框、單選框等，不包括 select 中的 option)

:selected 匹配所有選中的 option 元素（select 元素用）

3.jQuery中的DOM操作

DOM = Document Object Model（文檔對象模型）

DOM 定義訪問 HTML 和 XML 文檔的標準：

「W3C 文檔對象模型獨立於平臺和語言的界面，允許程序和腳本動態訪問和更新文檔的內容、結構以及樣式。」

三個簡單實用的用於 DOM 操作的 jQuery 方法：

3.1 文檔操作方法描述addClass()向匹配的元素添加指定的類名。after()在匹配的元素之後插入內容。append()向匹配元素集合中的每個元素結尾插入由參數指定的內容。appendTo()向目標結尾插入匹配元素集合中的每個元素。attr()設置或返回匹配元素的屬性和值。before()在每個匹配的元素之前插入內容。clone()創建匹配元素集合的副本。detach()從 DOM 中移除匹配元素集合。empty()刪除匹配的元素集合中所有的子節點。hasClass()檢查匹配的元素是否擁有指定的類。html()設置或返回匹配的元素集合中的 HTML 內容。insertAfter()把匹配的元素插入到另一個指定的元素集合的後面。insertBefore()把匹配的元素插入到另一個指定的元素集合的前面。prepend()向匹配元素集合中的每個元素開頭插入由參數指定的內容。prependTo()向目標開頭插入匹配元素集合中的每個元素。remove()移除所有匹配的元素。removeAttr()從所有匹配的元素中移除指定的屬性。removeClass()從所有匹配的元素中刪除全部或者指定的類。replaceAll()用匹配的元素替換所有匹配到的元素。replaceWith()用新內容替換匹配的元素。text()設置或返回匹配元素的內容。toggleClass()從匹配的元素中添加或刪除一個類。unwrap()移除並替換指定元素的父元素。val()設置或返回匹配元素的值。wrap()把匹配的元素用指定的內容或元素包裹起來。wrapAll()把所有匹配的元素用指定的內容或元素包裹起來。wrapinner()將每一個匹配的元素的子內容用指定的內容或元素包裹起來。3.2 屬性操作方法描述addClass()向匹配的元素添加指定的類名。attr()設置或返回匹配元素的屬性和值。hasClass()檢查匹配的元素是否擁有指定的類。html()設置或返回匹配的元素集合中的 HTML 內容。removeAttr()從所有匹配的元素中移除指定的屬性。removeClass()從所有匹配的元素中刪除全部或者指定的類。toggleClass()從匹配的元素中添加或刪除一個類。val()設置或返回匹配元素的值。3.3 CSS操作CSS 屬性描述css()設置或返回匹配元素的樣式屬性。height()設置或返回匹配元素的高度。offset()返回第一個匹配元素相對於文檔的位置。offsetParent()返回最近的定位祖先元素。position()返回第一個匹配元素相對於父元素的位置。scrollLeft()設置或返回匹配元素相對滾動條左側的偏移。scrollTop()設置或返回匹配元素相對滾動條頂部的偏移。width()設置或返回匹配元素的寬度。

jQuery 提供多個處理尺寸的重要方法：

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。

height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）。

innerWidth() 方法返回元素的寬度（包括內邊距）。

innerHeight() 方法返回元素的高度（包括內邊距）。

outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。

outerHeight() 方法返回元素的高度（包括內邊距和邊框）。

outerWidth(true) 方法返回元素的寬度（包括內邊距、邊框和外邊距）。

outerHeight(true) 方法返回元素的高度（包括內邊距、邊框和外邊距）。

3.4 高階過濾及選擇器

eq() 獲取第 N 個元素

first() 獲取第一個元素

last() 獲取最後一個元素

hasClass() 檢查當前的元素是否含有某個特定的類（如果有，則返回 true）

filter() 篩選出與指定表達式匹配的元素集合

is() 匹配元素集合，如果其中至少有一個元素符合這個給定的表達式就返回true。

slice(start,end) 選取一個匹配的子集

children() 取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。

find() 搜索所有與指定表達式匹配的元素

next() 取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合 nextall() 查找當前元素之後所有的同輩元素

parent() 取得一個包含著所有匹配元素的唯一父元素的元素集合

parents() 取得一個包含著所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通過一個可選的表達式進行篩選。

prev() 取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合

prevall() 查找當前元素之前所有的同輩元素

siblings() 取得一個包含匹配的元素集合中每一個元素的兄弟元素集合

4.JQuery事件方法描述bind()向匹配元素附加一個或更多事件處理器blur()觸發、或將函數綁定到指定元素的 blur 事件change()觸發、或將函數綁定到指定元素的 change 事件click()觸發、或將函數綁定到指定元素的 click 事件dblclick()觸發、或將函數綁定到指定元素的 double click 事件delegate()向匹配元素的當前或未來的子元素附加一個或多個事件處理器die()移除所有通過 live() 函數添加的事件處理程序。error()觸發、或將函數綁定到指定元素的 error 事件event.isDefaultPrevented()返回 event 對象上是否調用了 event.preventDefault()。event.pageX相對於文檔左邊緣的滑鼠位置。event.pageY相對於文檔上邊緣的滑鼠位置。event.preventDefault()阻止事件的默認動作。event.result包含由被指定事件觸發的事件處理器返回的最後一個值。event.target觸發該事件的 DOM 元素。event.timeStamp該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。event.type描述事件的類型。event.which指示按了哪個鍵或按鈕。focus()觸發、或將函數綁定到指定元素的 focus 事件keydown()觸發、或將函數綁定到指定元素的 key down 事件keypress()觸發、或將函數綁定到指定元素的 key press 事件keyup()觸發、或將函數綁定到指定元素的 key up 事件live()為當前或未來的匹配元素添加一個或多個事件處理器load()觸發、或將函數綁定到指定元素的 load 事件mousedown()觸發、或將函數綁定到指定元素的 mouse down 事件mouseenter()觸發、或將函數綁定到指定元素的 mouse enter 事件mouseleave()觸發、或將函數綁定到指定元素的 mouse leave 事件mousemove()觸發、或將函數綁定到指定元素的 mouse move 事件mouseout()觸發、或將函數綁定到指定元素的 mouse out 事件mouseover()觸發、或將函數綁定到指定元素的 mouse over 事件mouseup()觸發、或將函數綁定到指定元素的 mouse up 事件one()向匹配元素添加事件處理器。每個元素只能觸發一次該處理器。ready()文檔就緒事件（當 HTML 文檔就緒可用時）resize()觸發、或將函數綁定到指定元素的 resize 事件scroll()觸發、或將函數綁定到指定元素的 scroll 事件select()觸發、或將函數綁定到指定元素的 select 事件submit()觸發、或將函數綁定到指定元素的 submit 事件toggle()綁定兩個或多個事件處理器函數，當發生輪流的 click 事件時執行。trigger()所有匹配元素的指定事件triggerHandler()第一個被匹配元素的指定事件unbind()從匹配元素移除一個被添加的事件處理器undelegate()從匹配元素移除一個被添加的事件處理器，現在或將來unload()觸發、或將函數綁定到指定元素的 unload 事件

事件冒泡

適用的事件類型主要有鍵盤事件：keypress、keydown、keyup，以及滑鼠事件：mouseup、mousedown。

e.pageX 滑鼠相對於文檔的左邊緣的位置

e.pageY 滑鼠相對於文檔的上邊緣的位置

e.stopPropagation() 防止事件冒泡到 DOM 樹上，也就是不觸發的任何前輩元素上的事件處理函數

e.preventDefault() 阻止默認事件行為的觸發

e.target 最初觸發事件的 DOM 元素

e.which 針對鍵盤和滑鼠事件，這個屬性能確定你到底按的是哪個鍵或按鈕