jquery 常用方法整理

來源:互聯網
上載者:User

1 jQuery的基礎
11.1 jQuery對象引用
jQuery = window.jQuery = window.$ = function( selector, context ) {...}
在jQuery庫內還有兩個_$和_jQuery用來備份原先匯入的庫,備以後使用noConflict()交還使用權。

1.2 jQuery的prototype引用
jQuery.fn = jQuery.prototype = {init:function(){...}, ...}
jQuery.fn.init.prototype = jQuery.fn;

1.3 繼承:目標對象是當前對象this。
jQuery.extend = jQuery.fn.extend = function() {...}

1.4 外掛程式機制:主要是擴充jQuery的對象的prototype。
利用jQuery.extend和jQuery.fn.extend來進行擴充。
// 用於擴充jQuery對象本身,相當於靜態方法。
jQuery.extend();
// 用於擴充jQuery的對象,相當於為每一個jQuery對象多擴充了。
jQuery.fn.extend();

2 選取器
jQuery使用CSS和XPATH的選取器。
2.1 基本
#id                                 // 通過ID選擇
element                             // 通過標籤選擇
.class                              // 通過class選擇
*                                   // 選擇所有元素
selector1, selector2, selectorN     // 多個選擇的合并

2.2 層級
ancestor descendant                 // 父元素下匹配所有後代元素
parent > child                      // 父元素下匹配所有子項目(下一層)
prev + next                         // 匹配所有緊接在prev元素後的next元素
prev ~ siblings                     // 匹配prev元素之後的所有siblings元素

2.3 簡單
:first                              // 匹配找到的第一個元素
:last                               // 匹配找到的最後一個元素
:not(selector)                      // 從選中的集合中去除selector的集合
:even                               // 匹配所有索引值為偶數的元素,從0開始計數。
:odd                                // 匹配所有索引值為奇數的元素,從0開始計數。
:eq(index)                          // 匹配一個給定索引值的元素,從0開始計數。
:gt(index)                          // 匹配大於給定索引值的所有元素
:lt(index)                          // 匹配小於給定索引值的所有元素
:header                             // 匹配如h1,h2,h3的標題元素
:animated                           // 匹配所有正在執行動畫效果的元素

2.4 內容
:contains(text)                     // 匹配包含給定文本的元素
:empty                              // 匹配不包含子項目或者文本的空元素
:has(selector)                      // 匹配的集合中含有selector的集合
:parent                             // 匹配含有子項目或者文本的元素
可見度
:hidden                             // 匹配所有不可見的元素(hidden或者"display:none")
:visible                            // 匹配所有可見的元素

2.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]   // 指多個屬性匹配多滿足的元素

2.6 子項目
:nth-child(index/even/odd/equation) // 匹配其父元素下的第N個子或奇偶子項目,從1開始計數。
:first-child                        // 匹配第一個子項目
:last-child                         // 匹配最後一個子項目
:only-child                         // 匹配只含有一個子項目的子項目

2.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"

2.8 表單對象屬性
:enabled                            // 匹配所有可用的元素
:disabled                           // 匹配所有停用元素
:checked                            // 匹配所有選中的元素(複選框、單選框、不包含select)
:selected                           // 匹配所有選中的option元素

3 核心
3.1 jQuery核心函數
jQuery(expression, [context])      // 在全域範圍或者context範圍(Dom或jQuery)內選擇
jQuery(html, [lownerDocument])     // 根據HTML建立jQuery對象
jQuery(elements)                   // 將Dom對象建立為jQuery對象
jQuery(callback)                   // $(document).ready()的縮寫

3.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對象的位置

3.3 資料緩衝
data(name)                         // 返回在jQuery對象上緩衝的資料
data(name, value)                  // 在jQuery對象上設定快取資料
removeData(name)                   // 在元素上移除存放的資料
queue([name])                      // 返回在jQuery對象上的隊列(一個函數數組)
queue([name, callback])            // 在隊列後面加入一個函數
dequeue([name], queue)             // 用新的函數數組代替原先的函數數組
dequeue([name])                    // 從隊列最前端移除一個隊列函數,並執行他。

3.4 多庫共存
jQuery.noConflict()                // 將$使用權交還給原先的庫
jQuery.noConflict(extreme)         // 將$和jQuery使用權交還給原先的庫

4 屬性
4.1 屬性
attr(name)                         // 取得屬性值
attr(properties)                   // properties是一個索引值對對象,設定屬性。
attr(key, value)                   // 設定屬性
attr(key, fn)                      // 設定屬性,由函數fn傳回值。
removeAttr(name)                   // 刪除一個屬性

4.2 CSS類
addClass(class)                    // 使用CSS的類別選取器添加CSS
removeClass(class)                 // 刪除CSS樣式
toggleClass(class)                 // 若存在(不存在),則刪除(添加)。
toggleClass(class, switch)         // 若switch為true,則加上對應的class,否則刪除。

4.3 HTML代碼
html()                             // 取第一個元素的innerHtml
html(val)                          // 設定每一個元素的innerHtml

4.4 文本
text()                             // 取得所有匹配元素的innerText
text(val)                          // 設定所有匹配元素的innerText

4.5 值
val()                              // 獲得第一個匹配元素的value屬性值
val(val)                           // 設定每一個匹配元素的value屬性值
                                   // val可以是一個值,也可以是多個值(一個數組)

本文來自CSDN部落格,轉載請標明出處:http://blog.csdn.net/cch345/archive/2009/09/30/4621516.aspx

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.