06-老馬jQuery教程-jQuery進階

jQuery裡面的大部分API都是在jQuery的原型對象上定義的。jQuery源碼中對原型對象做了簡寫的處理。也就是說：<code>jQuery.fn === jQuery.prototype</code>,參考jQuery源碼：

jQuery的包裝對象封裝了<code>each(callback)</code>方法，以每一個比對的元素作為上下文來執行一個函數。

意味着，每次執行傳遞進來的函數時，函數中的this關鍵字都指向一個不同的DOM元素（每次都是一個不同的比對元素）。而且，在每次執行函數時，都會給函數傳遞一個表示作為執行環境的元素在比對的元素集合中所處位置的數字值作為參數（從零開始的整型）。 傳回 'false' 将停止循環 (就像在普通的循環中使用 'break')。傳回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')。

執行個體：

兩種方法可以擷取選擇器比對的元素的個數。

第一種方法：<code>$('p').size();</code>

第二種方法：<code>$('p').length</code>

以上兩種方法都可以。推薦使用length屬性

屬性/方法名

用法

介紹

<code>selector</code>

<code>$('p').selector</code>

傳回選擇器的字元串

<code>get()</code>

<code>$('p').get();</code>

傳回所有的選擇的dom對象的集合

<code>get(index)</code>

<code>$('p').get(1);</code>

傳回第2個dom對象，索引從0開始

<code>toArray()</code>

<code>$('p').toArray();</code>

把jQuery集合中所有DOM元素恢複成一個數組。

文法：<code>jQuery.each(object, [callback])</code>

概述

通用例遍方法，可用于例遍對象和數組。不同于例遍 jQuery 對象的 $().each() 方法，此方法可用于例遍任何對象。回調函數擁有兩個參數：第一個為對象的成員或數組的索引，第二個為對應變量或内容。如果需要退出 each 循環可使回調函數傳回 false，其它傳回值将被忽略。

參數

object:需要例遍的對象或數組。

callback:每個成員/元素執行的回調函數。

示例

文法 ：<code>jQuery.map(arr|obj,callback)</code>

傳回值： Array新數組

将一個數組中的元素轉換到另一個數組中。作為參數的轉換函數會為每個數組元素調用，而且會給這個轉換函數傳遞一個表示被轉換的元素作為參數。轉換函數可以傳回轉換後的值、null（删除數組中的項目）或一個包含值的數組，并擴充至原始數組中。

array:待轉換數組。

callback:為每個數組元素調用，而且會給這個轉換函數傳遞一個表示被轉換的元素作為參數。函數可傳回任何值。

文法 <code>jQuery.grep(array, callback, [invert])</code>

使用過濾函數過濾數組元素。此函數至少傳遞兩個參數：待過濾數組和過濾函數。過濾函數必須傳回 true 以保留元素或 false 以删除元素。

array:待過濾數組。

callback:此函數将處理數組每個元素。第一個參數為目前元素，第二個參數而元素索引值。

invert:如果 "invert" 為 false 或為設定，則函數傳回數組中由過濾函數傳回 true 的元素，當"invert" 為 true，則傳回過濾函數中傳回 false 的元素集。

傳回值： 數組Array

文法：<code>jQuery.makeArray(obj)</code>

将類數組對象轉換為數組對象。類數組對象有 length 屬性，其成員索引為 0 至 length - 1。實際中此函數在 jQuery 中将自動使用而無需特意轉換。

參數： obj:類型Object，類數組對象。

文法：<code>jQuery.inArray(value,array,[fromIndex])</code>

确定第一個參數在數組中的位置，從0開始計數(如果沒有找到則傳回 -1 )。

value:用于在數組中查找是否存在

array:待處理數組。

fromIndex:用來搜尋數組隊列，預設值為0。

文法：<code>jQuery.merge(first,second)</code>

合并兩個數組傳回的結果會修改第一個數組的内容——第一個數組的元素後面跟着第二個數組的元素。要去除重複項，請使用$.unique()

first:第一個待處理數組，會改變其中的元素。

second:第二個待處理數組，不會改變其中的元素。

文法：<code>jQuery.unique(array)</code>

删除數組中重複元素。隻處理删除DOM元素數組，而不能處理字元串或者數字數組。

文法：<code>jQuery.extend([deep], target, object1, [objectN])</code>

用一個或多個其他對象來擴充一個對象，傳回被擴充的對象。如果不指定target，則給jQuery命名空間本身進行擴充。這有助于插件作者為jQuery增加新方法。 如果第一個參數設定為true，則jQuery傳回一個深層次的副本，遞歸地複制找到的任何對象。否則的話，副本會與原對象共享結構。 未定義的屬性将不會被複制，然而從對象的原型繼承的屬性将會被複制。

target:一個對象，如果附加的對象被傳遞給這個方法将那麼它将接收新的屬性，如果它是唯一的參數将擴充jQuery的命名空間。

object1:待合并到第一個對象的對象。

objectN:待合并到第一個對象的對象。

deep:如果設為true，則遞歸合并。

屬性名

執行個體

說明

<code>noop</code>

<code>var f = jQuery.noop;</code>

一個空函數

<code>isArray</code>

<code>$.isArray([1,3,4])</code>

測試對象是否為數組。

<code>isFunction</code>

<code>jQuery.isFunction(obj)</code>

測試對象是否為函數。

<code>isNumeric</code>

<code>jQuery.isNumeric(value)</code>

确定它的參數是否是一個數字。

<code>isWindow</code>

<code>jQuery.isWindow(obj)</code>

測試對象是否是視窗

<code>error</code>

<code>jQuery.error(message)</code>

接受一個字元串，并且直接抛出一個包含這個字元串的異常

<code>trim</code>

<code>jQuery.trim(str)</code>

去掉字元串起始和結尾的空格

由于大部分jQuery的api方法内部傳回值都是jQuery的包裝對象自身。是以我們可以在jQuery的api調用之後繼續調用jQuery的方法，這樣就稱作是鍊式程式設計。

例如代碼:

由于css方法、height、hide方法都傳回jQuery包裝對象自身。是以就可以繼續鍊式調用。

有些方法可以破壞鍊式的結構，比如：

<code>nextAll(),prevAll(),sibilings(),find(),children(),parent(),parents()...</code>

如果想回到最近一次破壞鍊式結構之前的代碼可以使用end方法。

<code>$('#p1').nextAll().hide().end().css('color', 'red')</code>;

jQuery包裝對象本身就是一個僞數組，比對的元素有多個的時候，要做設定操作的時候，jQuery内部會隐式的變量所有的比對元素調用設定操作，是以稱為隐式疊代。

直接給$.fn添加方法和屬性

通過$.extend()來擴充jQuery構造函數

直接給jQuery構造函數添加屬性和方法

jQuery UI

jQuery EasyUI

jQuery formvalidate

jQuery 延遲加載插件

.....

老馬qq： 515154084

老馬微信：請掃碼

微信：Flydragon_malun 或者18911865673