1 基礎
HTML :一個人的裸體,是一個人的物質基礎,是一個結構。
CSS :一個人的漂亮外衣,使一個人看起來不是那麼原始,修飾了一個人。
JavaScript :一個人的靈魂,使一個人具備了生命,讓它動起來了。
2 jQuery的基礎
2.1 jQuery對象引用
jQuery = window.jQuery = window.$ = function( selector, context ) {...}
在jQuery庫內還有兩個_$和_jQuery用來備份原先導入的庫,備以後使用noConflict()交還使用權。
2.2 jQuery的prototype引用
jQuery.fn = jQuery.prototype = {init:function(){...}, ...}
jQuery.fn.init.prototype = jQuery.fn;
2.3 繼承:目標對象是當前對象this。
jQuery.extend = jQuery.fn.extend = function() {...}
2.4 插件機制:主要是擴展jQuery的對象的prototype。
利用jQuery.extend和jQuery.fn.extend來進行擴展。
// 用於擴展jQuery對象本身,相當於靜態方法。
jQuery.extend();
// 用於擴展jQuery的對象,相當於爲每一個jQuery對象多擴展了。
jQuery.fn.extend();
3 選擇器
jQuery使用CSS和XPATH的選擇器。
3.1 基本
#id // 通過ID選擇
element // 通過標籤選擇
.class // 通過class選擇
* // 選擇所有元素
selector1, selector2, selectorN // 多個選擇的合併
3.2 層級
ancestor descendant // 父元素下匹配所有後代元素
parent > child // 父元素下匹配所有子元素(下一層)
prev + next // 匹配所有緊接在prev元素後的next元素
prev ~ siblings // 匹配prev元素之後的所有siblings元素
3.3 簡單
:first // 匹配找到的第一個元素
:last // 匹配找到的最後一個元素
:not(selector) // 從選中的集合中去除selector的集合
:even // 匹配所有索引值爲偶數的元素,從0開始計數。
:odd // 匹配所有索引值爲奇數的元素,從0開始計數。
:eq(index) // 匹配一個給定索引值的元素,從0開始計數。
:gt(index) // 匹配大於給定索引值的所有元素
:lt(index) // 匹配小於給定索引值的所有元素
:header // 匹配如h1,h2,h3的標題元素
:animated // 匹配所有正在執行動畫效果的元素
3.4 內容
:contains(text) // 匹配包含給定文本的元素
:empty // 匹配不包含子元素或者文本的空元素
:has(selector) // 匹配的集合中含有selector的集合
:parent // 匹配含有子元素或者文本的元素
可見性
:hidden // 匹配所有不可見的元素(hidden或者"display:none")
:visible // 匹配所有可見的元素
3.5 屬性
// 注意:jQuery1.3廢棄的前導符@。
[attribute] // 匹配包含屬性attribute的元素
[attribute=value] // 匹配包含屬性attribute=value的元素
[attribute!=value] // 匹配屬性值attribute不等於value的元素
[attribute^=value] // 匹配屬性值是以value開始的元素
[attribute$=value] // 匹配屬性值是以value結束的元素
[attribute*=value] // 匹配屬性值包含value的元素
[selector1][selector2][selectorN] // 指多個屬性匹配多滿足的元素
3.6 子元素
:nth-child(index/even/odd/equation) // 匹配其父元素下的第N個子或奇偶子元素,從1開始計數。
:first-child // 匹配第一個子元素
:last-child // 匹配最後一個子元素
:only-child // 匹配只含有一個子元素的子元素
3.7 表單
:input // 匹配所有input, textarea, select, button元素
:text // 匹配所有text
:password // 匹配所有password
:radio // 匹配所有radio
:checkbox // 匹配所有checkbox
:submit // 匹配所有submit按鈕
:image // 匹配所有image
:reset // 匹配所有reset
:button // 匹配所有button
:file // 匹配所有file
:hidden // 匹配所有hidden或者"display:none"
3.8 表單對象屬性
:enabled // 匹配所有可用的元素
:disabled // 匹配所有不可用的元素
:checked // 匹配所有選中的元素(複選框、單選框、不包含select)
:selected // 匹配所有選中的option元素
4 核心
4.1 jQuery核心函數
jQuery(expression, [context]) // 在全局範圍或者context範圍(Dom或jQuery)內選擇
jQuery(html, [lownerDocument]) // 根據HTML創建jQuery對象
jQuery(elements) // 將Dom對象創建爲jQuery對象
jQuery(callback) // $(document).ready()的縮寫
4.2 jQuery對象訪問
each(callback) // 遍歷jQuery選擇的對象
// callback參數有兩個,1是下標,2是DOM對象(就是this對象
)。使用$this的話,是jQuery對象。
size() // 返回jQuery對象中元素個數。
length // 同size()
selector // 返回jQuery對象的selector
context // 返回jQuery對象的context
get() // 返回所選中的jQuery對象的DOM數組
get(index) // 返回一個DOM元素,可以寫成類似$("div")[0]。jQuery具有
數組特性。
index(subject) // 返回DOM對象的位置
4.3 數據緩存
data(name) // 返回在jQuery對象上緩存的數據
data(name, value) // 在jQuery對象上設置緩存數據
removeData(name) // 在元素上移除存放的數據
queue([name]) // 返回在jQuery對象上的隊列(一個函數數組)
queue([name, callback]) // 在隊列後面加入一個函數
dequeue([name], queue) // 用新的函數數組代替原先的函數數組
dequeue([name]) // 從隊列最前端移除一個隊列函數,並執行他。
4.4 多庫共存
jQuery.noConflict() // 將$使用權交還給原先的庫
jQuery.noConflict(extreme) // 將$和jQuery使用權交還給原先的庫
5 屬性
5.1 屬性
attr(name) // 取得屬性值
attr(properties) // properties是一個鍵值對對象,設置屬性。
attr(key, value) // 設置屬性
attr(key, fn) // 設置屬性,由函數fn返回值。
removeAttr(name) // 刪除一個屬性
5.2 CSS類
addClass(class) // 使用CSS的類選擇器添加CSS
removeClass(class) // 刪除CSS樣式
toggleClass(class) // 若存在(不存在),則刪除(添加)。
toggleClass(class, switch) // 若switch爲true,則加上對應的class,否則刪除。
5.3 HTML代碼
html() // 取第一個元素的innerHtml
html(val) // 設置每一個元素的innerHtml
5.4 文本
text() // 取得所有匹配元素的innerText
text(val) // 設置所有匹配元素的innerText
5.5 值
val() // 獲得第一個匹配元素的value屬性值
val(val) // 設置每一個匹配元素的value屬性值
// val可以是一個值,也可以是多個值(一個數組)