jQuery-1.3.2學習筆記

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可以是一個值,也可以是多個值(一個數組)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章