jQuery學習筆記 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) // 設置每一個元素的innerHtml5.4 文本 text() // 取得所有匹配元素的innerText text(val) // 設置所有匹配元素的innerText5.5 值 val() // 獲得第一個匹配元素的value屬性值 val(val) // 設置每一個匹配元素的value屬性值// val可以是一個值，也可以是多個值（一個數組）

總結

以上是生活随笔為你收集整理的【转载】jQuery学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。