JQuery經常使用方法一覽

  2 $(」p」).addClass(css中定義的樣式類型); 給某個元素添加樣式
  3 $(」img」).attr({src:」test.jpg」,alt:」test Image」}); 給某個元素添加屬性/值,參數是map
  4 $(」img」).attr(」src」,」test.jpg」); 給某個元素添加屬性/值
  5 $(」img」).attr(」title」, function() { return this.src }); 給某個元素添加屬性/值
  6 $(」元素名稱」).html(); 得到該元素內的內容(元素,文本等)
  7 $(」元素名稱」).html(」<b>new stuff</b>」); 給某元素設置內容
  8 $(」元素名稱」).removeAttr(」屬性名稱」) 給某元素刪除指定的屬性以及該屬性的值
  9 $(」元素名稱」).removeClass(」class」) 給某元素刪除指定的樣式
 10 $(」元素名稱」).text(); 得到該元素的文本
 11 $(」元素名稱」).text(value); 設置該元素的文本值爲value
 12 $(」元素名稱」).toggleClass(class) 當元素存在參數中的樣式的時候取消,若是不存在就設置此樣式
 13 $(」input元素名稱」).val(); 獲取input元素的值
 14 $(」input元素名稱」).val(value); 設置input元素的值爲value
 15 Manipulation:
 16 $(」元素名稱」).after(content); 在匹配元素後面添加內容
 17 $(」元素名稱」).append(content); 將content做爲元素的內容插入到該元素的後面
 18 $(」元素名稱」).appendTo(content); 在content後接元素
 19 $(」元素名稱」).before(content); 與after方法相反
 20 $(」元素名稱」).clone(布爾表達式) 當布爾表達式爲真時,克隆元素(無參時,看成true處理)
 21 $(」元素名稱」).empty() 將該元素的內容設置爲空
 22 $(」元素名稱」).insertAfter(content); 將該元素插入到content以後
 23 $(」元素名稱」).insertBefore(content); 將該元素插入到content以前
 24 $(」元素」).prepend(content); 將content做爲該元素的一部分,放到該元素的最前面
 25 $(」元素」).prependTo(content); 將該元素做爲content的一部分,放content的最前面
 26 $(」元素」).remove(); 刪除全部的指定元素
 27 $(」元素」).remove(」exp」); 刪除全部含有exp的元素
 28 $(」元素」).wrap(」html」); 用html來包圍該元素
 29 $(」元素」).wrap(element); 用element來包圍該元素
 30 Traversing:
 31 add(expr)
 32 add(html)
 33 add(elements)
 34 children(expr)
 35 contains(str)
 36 end()
 37 filter(expression)
 38 filter(filter)
 39 find(expr)
 40 is(expr)
 41 next(expr)
 42 not(el)
 43 not(expr)
 44 not(elems)
 45 parent(expr)
 46 parents(expr)
 47 prev(expr)
 48 siblings(expr)
 49 
 50 Core:
 51 $(html).appendTo(」body」) 至關於在body中寫了一段html代碼
 52 $(elems) 得到DOM上的某個元素
 53 $(function(){……..}); 執行一個函數
 54 $(」div > p」).css(」border」, 「1px solid gray」); 查找全部div的子節點p,添加樣式
 55 $(」input:radio」, document.forms[0]) 在當前頁面的第一個表單中查找全部的單選按鈕
 56 $.extend(prop) prop是一個jquery對象,
 57 舉例:
 58 jQuery.extend({
 59 min: function(a, b) { return a < b ? a : b; },
 60 max: function(a, b) { return a > b ? a : b; }
 61 });
 62 jQuery( expression, [context] ) —$( expression, [context]); 在默認狀況下,$()查詢的是當前HTML文檔中的DOM元素。
 63 
 64 each( callback ) 以每個匹配的元素做爲上下文來執行一個函數
 65 舉例:1
 66 $(」span」).click(function){
 67 $(」li」).each(function(){
 68 $(this).toggleClass(」example」);
 69 });
 70 });
 71 舉例:2
 72 $(」button」).click(function () {
 73 $(」div」).each(function (index, domEle) {
 74 // domEle == this
 75 $(domEle).css(」backgroundColor」, 「yellow」);
 76 if ($(this).is(」#stop」)) {
 77 $(」span」).text(」Stopped at div index #」 + index);
 78 return false;
 79 }
 80 });
 81 });
 82 
 83 
 84 jQuery Event:
 85 
 86 ready(fn); $(document).ready()注意在body中沒有onload事件,不然該函數不能執行。在每一個頁面中能夠
 87 有不少個函數被加載執行,按照fn的順序來執行。
 88 bind( type, [data], fn ) 爲每個匹配元素的特定事件(像click)綁定一個或多個事件處理器函數。可能的事件屬性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
 89 mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,
 90 keyup, error
 91 one( type, [data], fn ) 爲每個匹配元素的特定事件(像click)綁定一個或多個事件處理器函數。在每一個對
 92 象上,這個事件處理函數只會被執行一次。其餘規則與bind()函數相同。
 93 
 94 trigger( type, [data] ) 在每個匹配的元素上觸發某類事件。
 95 triggerHandler( type, [data] ) 這一特定方法會觸發一個元素上特定的事件(指定一個事件類型),同時取消瀏覽器對此事件的默認行動
 96 unbind( [type], [data] ) 反綁定,從每個匹配的元素中刪除綁定的事件。
 97 $(」p」).unbind() 移除全部段落上的全部綁定的事件
 98 $(」p」).unbind( 「click」 ) 移除全部段落上的click事件
 99 hover( over, out ) over,out都是方法, 當鼠標移動到一個匹配的元素上面時,會觸發指定的第一個函數。當鼠標移出這個元素時,會觸發指定的第二個函數。
100 $(」p」).hover(function(){
101 $(this).addClass(」over」);
102 },
103 function(){
104 $(this).addClass(」out」);
105 }
106 );
107 
108 toggle( fn, fn ) 若是點擊了一個匹配的元素,則觸發指定的第一個函數,當再次點擊同一元素時,則觸發指定的第二個函數。
109 $(」p」).toggle(function(){
110 $(this).addClass(」selected」);
111 },
112 function(){
113 $(this).removeClass(」selected」);
114 }
115 );
116 
117 元素事件列表說明
118 注:不帶參數的函數,其參數爲可選的 fn。jQuery不支持form元素的reset事件。
119 事件 描述 支持元素或對象
120 blur( ) 元素失去焦點 a, input, textarea, button, select, label, map, area
121 change( ) 用戶改變域的內容 input, textarea, select
122 click( ) 鼠標點擊某個對象 幾乎全部元素
123 dblclick( ) 鼠標雙擊某個對象 幾乎全部元素
124 error( ) 當加載文檔或圖像時發生某個錯誤 window, img
125 focus( ) 元素得到焦點 a, input, textarea, button, select, label, map, area
126 keydown( ) 某個鍵盤的鍵被按下 幾乎全部元素
127 keypress( ) 某個鍵盤的鍵被按下或按住 幾乎全部元素
128 keyup( ) 某個鍵盤的鍵被鬆開 幾乎全部元素
129 load( fn ) 某個頁面或圖像被完成加載 window, img
130 mousedown( fn ) 某個鼠標按鍵被按下 幾乎全部元素
131 mousemove( fn ) 鼠標被移動 幾乎全部元素
132 mouseout( fn ) 鼠標從某元素移開 幾乎全部元素
133 mouseover( fn ) 鼠標被移到某元素之上 幾乎全部元素
134 mouseup( fn ) 某個鼠標按鍵被鬆開 幾乎全部元素
135 resize( fn ) 窗口或框架被調整尺寸 window, iframe, frame
136 scroll( fn ) 滾動文檔的可視部分時 window
137 select( ) 文本被選定 document, input, textarea
138 submit( ) 提交按鈕被點擊 form
139 unload( fn ) 用戶退出頁面 window
140 
141 JQuery Ajax 方法說明:
142 
143 load( url, [data], [callback] ) 裝入一個遠程HTML內容到一個DOM結點。
144 $(」#feeds」).load(」feeds.html」); 將feeds.html文件載入到id爲feeds的div中
145 $(」#feeds」).load(」feeds.php」, {limit: 25}, function(){
146 alert(」The last 25 entries in the feed have been loaded」);
147 });
148 
149 jQuery.get( url, [data], [callback] ) 使用GET請求一個頁面。
150 $.get(」test.cgi」, { name: 「John」, time: 「2pm」 }, function(data){
151 alert(」Data Loaded: 」 + data);
152 });
153 
154 jQuery.getJSON( url, [data], [callback] ) 使用GET請求JSON數據。
155 $.getJSON(」test.js」, { name: 「John」, time: 「2pm」 }, function(json){
156 alert(」JSON Data: 」 + json.users[3].name);
157 });
158 
159 jQuery.getScript( url, [callback] ) 使用GET請求javascript文件並執行。
160 $.getScript(」test.js」, function(){
161 alert(」Script loaded and executed.」);
162 });
163 jQuery.post( url, [data], [callback], [type] ) 使用POST請求一個頁面。
164 
165 ajaxComplete( callback ) 當一個AJAX請求結束後,執行一個函數。這是一個Ajax事件
166 $(」#msg」).ajaxComplete(function(request, settings){
167 $(this).append(」<li>Request Complete.</li>」);
168 });
169 ajaxError( callback ) 當一個AJAX請求失敗後,執行一個函數。這是一個Ajax事件
170 $(」#msg」).ajaxError(function(request, settings){
171 $(this).append(」<li>Error requesting page 」 + settings.url + 「</li>」);
172 });
  1 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->ajaxSend( callback ) 在一個AJAX請求發送時,執行一個函數。這是一個Ajax事件
  2 $(」#msg」).ajaxSend(function(evt, request, settings){
  3 $(this).append(」<li<Starting request at 」 + settings.url
  4 + 「</li<」);
  5 });
  6 
  7 ajaxStart( callback ) 在一個AJAX請求開始但尚未激活時,執行一個函數。這是一個Ajax事件
  8 當AJAX請求開始(並尚未激活時)顯示loading信息
  9 $(」#loading」).ajaxStart(function(){
 10 $(this).show();
 11 });
 12 
 13 ajaxStop( callback ) 當全部的AJAX都中止時,執行一個函數。這是一個Ajax事件
 14 當全部AJAX請求都中止時,隱藏loading信息。
 15 $(」#loading」).ajaxStop(function(){
 16 $(this).hide();
 17 });
 18 
 19 ajaxSuccess( callback ) 當一個AJAX請求成功完成後,執行一個函數。這是一個Ajax事件
 20 當AJAX請求成功完成時,顯示信息。
 21 $(」#msg」).ajaxSuccess(function(evt, request, settings){
 22 $(this).append(」<li>Successful Request!</li>」);
 23 });
 24 
 25 jQuery.ajaxSetup( options ) 爲全部的AJAX請求進行全局設置。查看$.ajax函數取得全部選項信息。
 26 設置默認的全局AJAX請求選項。
 27 $.ajaxSetup({
 28 url: 「/xmlhttp/」,
 29 global: false,
 30 type: 「POST」
 31 });
 32 $.ajax({ data: myData });
 33 
 34 serialize( ) 以名稱和值的方式鏈接一組input元素。實現了正確表單元素序列
 35 function showValues() {
 36 var str = $(」form」).serialize();
 37 $(」#results」).text(str);
 38 }
 39 $(」:checkbox, :radio」).click(showValues);
 40 $(」select」).change(showValues);
 41 showValues();
 42 
 43 serializeArray( ) 鏈接全部的表單和表單元素(相似於.serialize()方法),可是返回一個JSON數據格式。
 44 從form中取得一組值,顯示出來
 45 function showValues() {
 46 var fields = $(」:input」).serializeArray();
 47 alert(fields);
 48 $(」#results」).empty();
 49 jQuery.each(fields, function(i, field){
 50 $(」#results」).append(field.value + 」 「);
 51 });
 52 }
 53 $(」:checkbox, :radio」).click(showValues);
 54 $(」select」).change(showValues);
 55 showValues();
 56 
 57 JQuery Effects 方法說明
 58 
 59 show( ) 顯示隱藏的匹配元素。
 60 show( speed, [callback] ) 以優雅的動畫顯示全部匹配的元素,並在顯示完成後可選地觸發一個回調函數。
 61 hide( ) 隱藏全部的匹配元素。
 62 hide( speed, [callback] ) 以優雅的動畫隱藏全部匹配的元素,並在顯示完成後可選地觸發一個回調函數
 63 toggle( ) 切換元素的可見狀態。若是元素是可見的,切換爲隱藏的;若是元素是隱藏的,
 64 切換爲可見的。
 65 slideDown( speed, [callback] ) 經過高度變化(向下增大)來動態地顯示全部匹配的元素,在顯示完成後可選
 66 地觸發一個回調函數。這個動畫效果只調整元素的高度,可使匹配的元素以
 67 「滑動」的方式顯示出來。
 68 slideUp( speed, [callback] ) 經過高度變化(向上減少)來動態地隱藏全部匹配的元素,在隱藏完成後可選地
 69 觸發一個回調函數。這個動畫效果只調整元素的高度,可使匹配的元素以」滑動」
 70 的方式隱藏起來。
 71 slideToggle( speed, [callback] ) 經過高度變化來切換全部匹配元素的可見性,並在切換完成後可選地觸發一個回
 72 調函數。 這個動畫效果只調整元素的高度,可使匹配的元素以」滑動」的方式隱
 73 藏或顯示。
 74 fadeIn( speed, [callback] ) 經過不透明度的變化來實現全部匹配元素的淡入效果,並在動畫完成後可選地觸
 75 發一個回調函數。 這個動畫只調整元素的不透明度,也就是說全部匹配的元素的
 76 高度和寬度不會發生變化。
 77 fadeOut( speed, [callback] ) 經過不透明度的變化來實現全部匹配元素的淡出效果,並在動畫完成後可選地觸
 78 發一個回調函數。 這個動畫只調整元素的不透明度,也就是說全部匹配的元素的
 79 高度和寬度不會發生變化。
 80 fadeTo( speed, opacity, [callback] ) 把全部匹配元素的不透明度以漸進方式調整到指定的不透明度,並在動畫完成
 81 後可選地觸發一個回調函數。 這個動畫只調整元素的不透明度,也就是說所
 82 有匹配的元素的高度和寬度不會發生變化。
 83 stop( ) 中止全部匹配元素當前正在運行的動畫。若是有動畫處於隊列當中,他們就會當即開始。
 84 queue( ) 取得第一個匹配元素的動畫序列的引用(返回一個內容爲函數的數組)
 85 queue( callback ) 在每個匹配元素的事件序列的末尾添加一個可執行函數,做爲此元素的事件函數
 86 queue( queue ) 以一個新的動畫序列代替全部匹配元素的原動畫序列
 87 dequeue( ) 執行並移除動畫序列前端的動畫
 88 animate( params, [duration], [easing], [callback] ) 用於建立自定義動畫的函數。
 89 animate( params, options ) 建立自定義動畫的另外一個方法。做用同上。
 90 
 91 JQuery Traversing 方法說明
 92 
 93 eq( index ) 從匹配的元素集合中取得一個指定位置的元素,index從0開始
 94 filter( expr ) 返回與指定表達式匹配的元素集合,可使用」,」號分割多個expr,用於實現多個條件篩選
 95 filter( fn ) 利用一個特殊的函數來做爲篩選條件移除集合中不匹配的元素。
 96 is( expr ) 用一個表達式來檢查當前選擇的元素集合,若是其中至少有一個元素符合這個給定的
 97 表達式就返回true。
 98 map( callback ) 將jQuery對象中的一組元素利用callback方法轉換其值,而後添加到一個jQuery數組中。
 99 not( expr ) 從匹配的元素集合中刪除與指定的表達式匹配的元素。
100 slice( start, [end] ) 從匹配元素集合中取得一個子集,和內建的數組的slice方法相同。
101 add( expr ) 把與表達式匹配的元素添加到jQuery對象中。
102 children( [expr] ) 取得一個包含匹配的元素集合中每個元素的全部子元素的元素集合。可選的過濾器
103 將使這個方法只匹配符合的元素(只包括元素節點,不包括文本節點)。
104 contents( ) 取得一個包含匹配的元素集合中每個元素的全部子孫節點的集合(只包括元素節點,不
105 包括文本節點),若是元素爲iframe,則取得其中的文檔元素
106 find( expr ) 搜索全部與指定表達式匹配的元素。
107 next( [expr] ) 取得一個包含匹配的元素集合中每個元素緊鄰的後面同輩元素的元素集合。
108 nextAll( [expr] ) 取得一個包含匹配的元素集合中每個元素全部的後面同輩元素的元素集合
109 parent( [expr] ) 取得一個包含着全部匹配元素的惟一父元素的元素集合。
110 parents( [expr] ) 取得一個包含着全部匹配元素的惟一祖先元素的元素集合(不包含根元素)。
111 prev( [expr] ) 取得一個包含匹配的元素集合中每個元素緊鄰的前一個同輩元素的元素集合。
112 prevAll( [expr] ) 取得一個包含匹配的元素集合中每個元素的以前全部同輩元素的元素集合。
113 siblings( [expr] ) 取得一個包含匹配的元素集合中每個元素的全部同輩元素的元素集合。
114 andSelf( ) 將前一個匹配的元素集合添加到當前的集合中
115 取得全部div元素和其中的p元素,添加border類屬性。取得全部div元素中的p元素,
116 添加background類屬性
117 $(」div」).find(」p」).andSelf().addClass(」border」);
118 $(」div」).find(」p」).addClass(」background」);
119 end( ) 結束當前的操做,回到當前操做的前一個操做
120 找到全部p元素其中的span元素集合,而後返回p元素集合,添加css屬性
121 $(」p」).find(」span」).end().css(」border」, 「2px red solid」);
122 
123 JQuery Selectors 方法說明
124 
125 基本選擇器
126 $(」#myDiv」) 匹配惟一的具備此id值的元素
127 $(」div」) 匹配指定名稱的全部元素
128 $(」.myClass」) 匹配具備此class樣式值的全部元素
129 $(」*」) 匹配全部元素
130 $(」div,span,p.myClass」) 聯合全部匹配的選擇器
131 層疊選擇器
132 $(」form input」) 後代選擇器,選擇ancestor的全部子孫節點
133 $(」#main > *」) 子選擇器,選擇parent的全部子節點
134 $(」label + input」) 臨選擇器,選擇prev的下一個臨節點
135 $(」#prev ~ div」) 同胞選擇器,選擇prev的全部同胞節點
136 基本過濾選擇器
137 $(」tr:first」) 匹配第一個選擇的元素
138 $(」tr:last」) 匹配最後一個選擇的元素
139 $(」input:not(:checked) + span」)從原元素集合中過濾掉匹配selector的全部元素(這裏有是一個臨選擇器)
140 $(」tr:even」) 匹配集合中偶數位置的全部元素(從0開始)
141 $(」tr:odd」) 匹配集合中奇數位置的全部元素(從0開始)
142 $(」td:eq(2)」) 匹配集合中指定位置的元素(從0開始)
143 $(」td:gt(4)」) 匹配集合中指定位置以後的全部元素(從0開始)
144 $(」td:gl(4)」) 匹配集合中指定位置以前的全部元素(從0開始)
145 $(」:header」) 匹配全部標題
146 $(」div:animated」) 匹配全部正在運行動畫的全部元素
147 內容過濾選擇器
148 $(」div:contains(’John’)」) 匹配含有指定文本的全部元素
149 $(」td:empty」) 匹配全部空元素(只含有文本的元素不算空元素)
150 $(」div:has(p)」) 從原元素集合中再次匹配全部至少含有一個selector的全部元素
151 $(」td:parent」) 匹配全部不爲空的元素(含有文本的元素也算)
152 $(」div:hidden」) 匹配全部隱藏的元素,也包括表單的隱藏域
153 $(」div:visible」) 匹配全部可見的元素
154 屬性過濾選擇器
155 $(」div[id]」) 匹配全部具備指定屬性的元素
156 $(」input[name=’newsletter’]」) 匹配全部具備指定屬性值的元素
157 $(」input[name!=’newsletter’]」) 匹配全部不具備指定屬性值的元素
158 $(」input[name^=’news’]」) 匹配全部指定屬性值以value開頭的元素
159 $(」input[name$=’letter’]」) 匹配全部指定屬性值以value結尾的元素
160 $(」input[name*=’man’]」) 匹配全部指定屬性值含有value字符的元素
161 $(」input[id][name$=’man’]」) 匹配同時符合多個選擇器的全部元素
162 子元素過濾選擇器
163 $(」ul li:nth-child(2)」),
164 $(」ul li:nth-child(odd)」), 匹配父元素的第n個子元素
165 $(」ul li:nth-child(3n + 1)」)
166 
167 $(」div span:first-child」) 匹配父元素的第1個子元素
168 $(」div span:last-child」) 匹配父元素的最後1個子元素
169 $(」div button:only-child」) 匹配父元素的惟一1個子元素
170 表單元素選擇器
171 $(」:input」) 匹配全部的表單輸入元素,包括全部類型的input, textarea, select 和 button
172 $(」:text」) 匹配全部類型爲text的input元素
173 $(」:password」) 匹配全部類型爲password的input元素
174 $(」:radio」) 匹配全部類型爲radio的input元素
175 $(」:checkbox」) 匹配全部類型爲checkbox的input元素
176 $(」:submit」) 匹配全部類型爲submit的input元素
177 $(」:image」) 匹配全部類型爲image的input元素
178 $(」:reset」) 匹配全部類型爲reset的input元素
179 $(」:button」) 匹配全部類型爲button的input元素
180 $(」:file」) 匹配全部類型爲file的input元素
181 $(」:hidden」) 匹配全部類型爲hidden的input元素或表單的隱藏域
182 表單元素過濾選擇器
183 $(」:enabled」) 匹配全部可操做的表單元素
184 $(」:disabled」) 匹配全部不可操做的表單元素
185 $(」:checked」) 匹配全部已點選的元素
186 $(」select option:selected」) 匹配全部已選擇的元素
187 
188 JQuery CSS 方法說明
189 
190 css( name ) 訪問第一個匹配元素的樣式屬性。
191 css( properties ) 把一個」名/值對」對象設置爲全部匹配元素的樣式屬性。
192 $(」p」).hover(function () {
193 $(this).css({ backgroundColor:」yellow」, fontWeight:」bolder」 });
194 }, function () {
195 var cssObj = {
196 backgroundColor: 「#ddd」,
197 fontWeight: 「」,
198 color: 「rgb(0,40,244)」
199 }
200 $(this).css(cssObj);
201 });
202 css( name, value ) 在全部匹配的元素中,設置一個樣式屬性的值。
203 offset( ) 取得匹配的第一個元素相對於當前可視窗口的位置。返回的對象有2個屬性,
204 top和left,屬性值爲整數。這個函數只能用於可見元素。
205 var p = $(」p:last」);
206 var offset = p.offset();
207 p.html( 「left: 」 + offset.left + 「, top: 」 + offset.top );
208 width( ) 取得當前第一匹配的元素的寬度值,
209 width( val ) 爲每一個匹配的元素設置指定的寬度值。
210 height( ) 取得當前第一匹配的元素的高度值,
211 height( val ) 爲每一個匹配的元素設置指定的高度值。
212 
213 JQuery Utilities 方法說明
214 jQuery.browser
215 .msie 表示ie
216 jQuery.browser.version 讀取用戶瀏覽器的版本信息
217 jQuery.boxModel 檢測用戶瀏覽器針對當前頁的顯示是否基於w3c CSS的盒模型
218 jQuery.isFunction( obj ) 檢測傳遞的參數是否爲function
219 function stub() { }
220 var objs = [
221 function () {},
222 { x:15, y:20 },
223 null,
224 stub,
225function226 ];
227 jQuery.each(objs, function (i) {
228 var isFunc = jQuery.isFunction(objs[i]);
229 $(」span:eq( 」 + i + 「)」).text(isFunc);
230 });
231 jQuery.trim( str ) 清除字符串兩端的空格,使用正則表達式來清除給定字符兩端的空格
232 jQuery.each( object, callback ) 一個通用的迭代器,能夠用來無縫迭代對象和數組
233 jQuery.extend( target, object1, [objectN] ) 擴展一個對象,修改原來的對象並返回,這是一個強大的實現繼承的
234 工具,這種繼承是採用傳值的方法來實現的,而不是JavaScript中的
235 原型鏈方式。
236 合併settings和options對象,返回修改後的settings對象
237 var settings = { validate: false, limit: 5, name: 「foo」 };
238 var options = { validate: true, name: 「bar」 };
239 jQuery.extend(settings, options);
240 
241 合併defaults和options對象,defaults對象並無被修改。options對象中的值
242 代替了defaults對象的值傳遞給了empty。
243 
244 var empty = {}
245 var defaults = { validate: false, limit: 5, name: 「foo」 };
246 var options = { validate: true, name: 「bar」 };
247 var settings = $.extend(empty, defaults, options);
248 jQuery.grep( array, callback, [invert] ) 經過一個篩選函數來去除數組中的項
249 $.grep( [0,1,2], function(n,i){
250 return n > 0;
251 });
252 jQuery.makeArray( obj ) 將一個相似數組的對象轉化爲一個真正的數組
253 將選取的div元素集合轉化爲一個數組
254 var arr = jQuery.makeArray(document.getElementsByTagName(」div」));
255 arr.reverse(); // use an Array method on list of dom elements
256 $(arr).appendTo(document.body);
257 jQuery.map( array, callback ) 使用某個方法修改一個數組中的項,而後返回一個新的數組
258 jQuery.inArray( value, array ) 返回value在數組中的位置,若是沒有找到,則返回-1
259 jQuery.unique( array ) 刪除數組中的全部重複元素,返回整理後的數組
  1 1、關於頁面元素的引用
  2 經過jquery的$()引用元素包括經過id、class、元素名以及元素的層級關係及dom或者xpath條件等方法,且返回的對象爲jquery對象(集合對象),不能直接調用dom定義的方法。
  3 
  4 2、jQuery對象與dom對象的轉換
  5 只有jquery對象才能使用jquery定義的方法。注意dom對象和jquery對象是有區別的,調用方法時要注意操做的是dom對象仍是 jquery對象。
  6 普通的dom對象通常能夠經過$()轉換成jquery對象。
  7 如:$(document.getElementById("msg"))則爲jquery對象,可使用jquery的方法。
  8 因爲jquery對象自己是一個集合。因此若是jquery對象要轉換爲dom對象則必須取出其中的某一項,通常可經過索引取出。
  9 如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]這些都是dom對象,可使用dom中的方法,但不能再使用Jquery的方法。
 10 如下幾種寫法都是正確的:
 11 $("#msg").html();
 12 $("#msg")[0].innerHTML;
 13 $("#msg").eq(0)[0].innerHTML;
 14 $("#msg").get(0).innerHTML;
 15 
 16 3、如何獲取jQuery集合的某一項
 17 對於獲取的元素集合,獲取其中的某一項(經過索引指定)可使用eq或get(n)方法或者索引號獲取,要注意,eq返回的是jquery對象,而 get(n)和索引返回的是dom元素對象。對於jquery對象只能使用jquery的方法,而dom對象只能使用dom的方法,如要獲取第三個<div>元素的內容。有以下兩種方法:
 18 $("div").eq(2).html(); //調用jquery對象的方法
 19 $("div").get(2).innerHTML; //調用dom的方法屬性
 20 
 21 4、同一函數實現set和get
 22 Jquery中的不少方法都是如此,主要包括以下幾個:
 23 $("#msg").html(); //返回id爲msg的元素節點的html內容。
 24 $("#msg").html("<b>new content</b>");
 25 //將「<b>new content</b>」 做爲html串寫入id爲msg的元素節點內容中,頁面顯示粗體的new content
 26 
 27 $("#msg").text(); //返回id爲msg的元素節點的文本內容。
 28 $("#msg").text("<b>new content</b>");
 29 //將「<b>new content</b>」 做爲普通文本串寫入id爲msg的元素節點內容中,頁面顯示<b>new content</b>
 30 
 31 $("#msg").height(); //返回id爲msg的元素的高度
 32 $("#msg").height("300"); //將id爲msg的元素的高度設爲300
 33 $("#msg").width(); //返回id爲msg的元素的寬度
 34 $("#msg").width("300"); //將id爲msg的元素的寬度設爲300
 35 
 36 $("input").val("); //返回表單輸入框的value值
 37 $("input").val("test"); //將表單輸入框的value值設爲test
 38 
 39 $("#msg").click(); //觸發id爲msg的元素的單擊事件
 40 $("#msg").click(fn); //爲id爲msg的元素單擊事件添加函數
 41 一樣blur,focus,select,submit事件均可以有着兩種調用方法
 42 
 43 五、集合處理功能
 44 對於jquery返回的集合內容無需咱們本身循環遍歷並對每一個對象分別作處理,jquery已經爲咱們提供的很方便的方法進行集合的處理。
 45 包括兩種形式:
 46 $("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
 47 //爲索引分別爲0,1,2的p元素分別設定不一樣的字體顏色。
 48 
 49 $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
 50 //實現表格的隔行換色效果
 51 
 52 $("p").click(function(){alert($(this).html())})   
 53 //爲每一個p元素增長了click事件,單擊某個p元素則彈出其內容
 54 
 55 六、擴展咱們須要的功能
 56 $.extend({
 57 min: function(a, b){return a < b?a:b; },
 58 max: function(a, b){return a > b?a:b; }
 59 }); //爲jquery擴展了min,max兩個方法
 60 使用擴展的方法(經過「$.方法名」調用):
 61 alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
 62 
 63 七、支持方法的連寫
 64 所謂連寫,便可以對一個jquery對象連續調用各類不一樣的方法。
 65 例如:
 66 $("p").click(function(){alert($(this).html())})
 67 .mouseover(function(){alert('mouse over event')})
 68 .each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});
 69 
 70 八、操做元素的樣式
 71 主要包括如下幾種方式:
 72 $("#msg").css("background"); //返回元素的背景顏色
 73 $("#msg").css("background","#ccc") //設定元素背景爲灰色
 74 $("#msg").height(300); $("#msg").width("200"); //設定寬高
 75 $("#msg").css({ color: "red", background: "blue" });//以名值對的形式設定樣式
 76 $("#msg").addClass("select"); //爲元素增長名稱爲select的class
 77 $("#msg").removeClass("select"); //刪除元素名稱爲select的class
 78 $("#msg").toggleClass("select"); //若是存在(不存在)就刪除(添加)名稱爲select的class
 79 
 80 九、完善的事件處理功能
 81 Jquery已經爲咱們提供了各類事件處理方法,咱們無需在html元素上直接寫事件,而能夠直接爲經過jquery獲取的對象添加事件。
 82 如:
 83 $("#msg").click(function(){alert("good")}) //爲元素添加了單擊事件
 84 $("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
 85 //爲三個不一樣的p元素單擊事件分別設定不一樣的處理
 86 jQuery中幾個自定義的事件:
 87 (1)hover(fn1,fn2):一個模仿懸停事件(鼠標移動到一個對象上面及移出這個對象)的方法。當鼠標移動到一個匹配的元素上面時,會觸發指定的第一個函數。當鼠標移出這個元素時,會觸發指定的第二個函數。
 88 //當鼠標放在表格的某行上時將class置爲over,離開時置爲out。
 89 $("tr").hover(function(){
 90 $(this).addClass("over");
 91 },
 92 function(){
 93 $(this).addClass("out");
 94 });
 95 (2)ready(fn):當DOM載入就緒能夠查詢及操縱時綁定一個要執行的函數。
 96 $(document).ready(function(){alert("Load Success")})
 97 //頁面加載完畢提示「Load Success」,至關於onload事件。與$(fn)等價
 98 (3)toggle(evenFn,oddFn): 每次點擊時切換要調用的函數。若是點擊了一個匹配的元素,則觸發指定的第一個函數,當再次點擊同一元素時,則觸發指定的第二個函數。隨後的每次點擊都重複對這兩個函數的輪番調用。
 99 //每次點擊時輪換添加和刪除名爲selected的class。
100 $("p").toggle(function(){
101   $(this).addClass("selected");
102 },function(){
103   $(this).removeClass("selected");
104 });
105 (4)trigger(eventtype): 在每個匹配的元素上觸發某類事件。
106 例如:
107 $("p").trigger("click"); //觸發全部p元素的click事件
108 (5)bind(eventtype,fn),unbind(eventtype): 事件的綁定與反綁定
109 從每個匹配的元素中(添加)刪除綁定的事件。
110 例如:
111 $("p").bind("click", function(){alert($(this).text());}); //爲每一個p元素添加單擊事件
112 $("p").unbind(); //刪除全部p元素上的全部事件
113 $("p").unbind("click") //刪除全部p元素上的單擊事件
114 
115 十、幾個實用特效功能
116 其中toggle()和slidetoggle()方法提供了狀態切換功能。
117 如toggle()方法包括了hide()和show()方法。
118 slideToggle()方法包括了slideDown()和slideUp方法。
119 
120 十一、幾個有用的jQuery方法
121 $.browser.瀏覽器類型:檢測瀏覽器類型。有效參數:safari, opera, msie, mozilla。如檢測是否ie:$.browser.isie,是ie瀏覽器則返回true。
122 $.each(obj, fn):通用的迭代函數。可用於近似地迭代對象和數組(代替循環)。
123 124 $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
125 等價於:
126 var tempArr=[0,1,2];
127 for(var i=0;i<tempArr.length;i++){
128 alert("Item #"+i+": "+tempArr[ i ]);
129 }
130 也能夠處理json數據,如
131 $.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });
132 結果爲:
133 Name:name, Value:John
134 Name:lang, Value:JS
135 $.extend(target,prop1,propN):用一個或多個其餘對象來擴展一個對象,返回這個被擴展的對象。這是jquery實現的繼承方式。
136 如:
137 $.extend(settings, options);
138 //合併settings和options,並將合併結果返回settings中,至關於options繼承setting並將繼承結果保存在 setting中。
139 var settings = $.extend({}, defaults, options);
140 //合併defaults和options,並將合併結果返回到setting中而不覆蓋default內容。
141 能夠有多個參數(合併多項並返回)
142 $.map(array, fn):數組映射。把一個數組中的項目(處理轉換後)保存到到另外一個新數組中,並返回生成的新數組。
143 如:
144 var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
145 tempArr內容爲:[4,5,6]
146 var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
147 tempArr內容爲:[2,3]
148 $.merge(arr1,arr2):合併兩個數組並刪除其中重複的項目。
149 如:$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
150 $.trim(str):刪除字符串兩端的空白字符。
151 如:$.trim(" hello, how are you? "); //返回"hello,how are you? "
152 
153 十二、解決自定義方法或其餘類庫與jQuery的衝突
154 不少時候咱們本身定義了$(id)方法來獲取一個元素,或者其餘的一些js類庫如prototype也都定義了$方法,若是同時把這些內容放在一塊兒就會引發變量方法定義衝突,Jquery對此專門提供了方法用於解決此問題。
155 使用jquery中的jQuery.noConflict();方法便可把變量$的控制權讓渡給第一個實現它的那個庫或以前自定義的$方法。以後應用 Jquery的時候只要將全部的$換成jQuery便可,如原來引用對象方法$("#msg")改成jQuery("#msg")。
156 如:
157 jQuery.noConflict();
158 // 開始使用jQuery
159 jQuery("div p").hide();
160 // 使用其餘庫的 $()
161 $("content").style.display = 'none';
  1 $(」p」).addClass(css中定義的樣式類型); 給某個元素添加樣式
  2 $(」img」).attr({src:」test.jpg」,alt:」test Image」}); 給某個元素添加屬性/值,參數是map
  3 $(」img」).attr(」src」,」test.jpg」); 給某個元素添加屬性/值
  4 $(」img」).attr(」title」, function() { return this.src }); 給某個元素添加屬性/值
  5 $(」元素名稱」).html(); 得到該元素內的內容(元素,文本等)
  6 $(」元素名稱」).html(」<b>new stuff</b>」); 給某元素設置內容
  7 $(」元素名稱」).removeAttr(」屬性名稱」) 給某元素刪除指定的屬性以及該屬性的值
  8 $(」元素名稱」).removeClass(」class」) 給某元素刪除指定的樣式
  9 $(」元素名稱」).text(); 得到該元素的文本
 10 $(」元素名稱」).text(value); 設置該元素的文本值爲value
 11 $(」元素名稱」).toggleClass(class) 當元素存在參數中的樣式的時候取消,若是不存在就設置此樣式
 12 $(」input元素名稱」).val(); 獲取input元素的值
 13 $(」input元素名稱」).val(value); 設置input元素的值爲value
 14 Manipulation:
 15 $(」元素名稱」).after(content); 在匹配元素後面添加內容
 16 $(」元素名稱」).append(content); 將content做爲元素的內容插入到該元素的後面
 17 $(」元素名稱」).appendTo(content); 在content後接元素
 18 $(」元素名稱」).before(content); 與after方法相反
 19 $(」元素名稱」).clone(布爾表達式) 當布爾表達式爲真時,克隆元素(無參時,看成true處理)
 20 $(」元素名稱」).empty() 將該元素的內容設置爲空
 21 $(」元素名稱」).insertAfter(content); 將該元素插入到content以後
 22 $(」元素名稱」).insertBefore(content); 將該元素插入到content以前
 23 $(」元素」).prepend(content); 將content做爲該元素的一部分,放到該元素的最前面
 24 $(」元素」).prependTo(content); 將該元素做爲content的一部分,放content的最前面
 25 $(」元素」).remove(); 刪除全部的指定元素
 26 $(」元素」).remove(」exp」); 刪除全部含有exp的元素
 27 $(」元素」).wrap(」html」); 用html來包圍該元素
 28 $(」元素」).wrap(element); 用element來包圍該元素
 29 Traversing:
 30 add(expr)
 31 add(html)
 32 add(elements)
 33 children(expr)
 34 contains(str)
 35 end()
 36 filter(expression)
 37 filter(filter)
 38 find(expr)
 39 is(expr)
 40 next(expr)
 41 not(el)
 42 not(expr)
 43 not(elems)
 44 parent(expr)
 45 parents(expr)
 46 prev(expr)
 47 siblings(expr)
 48 
 49 Core:
 50 $(html).appendTo(」body」) 至關於在body中寫了一段html代碼
 51 $(elems) 得到DOM上的某個元素
 52 $(function(){……..}); 執行一個函數
 53 $(」div > p」).css(」border」, 「1px solid gray」); 查找全部div的子節點p,添加樣式
 54 $(」input:radio」, document.forms[0]) 在當前頁面的第一個表單中查找全部的單選按鈕
 55 $.extend(prop) prop是一個jquery對象,
 56 舉例:
 57 jQuery.extend({
 58 min: function(a, b) { return a < b ? a : b; },
 59 max: function(a, b) { return a > b ? a : b; }
 60 });
 61 jQuery( expression, [context] ) —$( expression, [context]); 在默認狀況下,$()查詢的是當前HTML文檔中的DOM元素。
 62 
 63 each( callback ) 以每個匹配的元素做爲上下文來執行一個函數
 64 舉例:1
 65 $(」span」).click(function){
 66 $(」li」).each(function(){
 67 $(this).toggleClass(」example」);
 68 });
 69 });
 70 舉例:2
 71 $(」button」).click(function () {
 72 $(」div」).each(function (index, domEle) {
 73 // domEle == this
 74 $(domEle).css(」backgroundColor」, 「yellow」);
 75 if ($(this).is(」#stop」)) {
 76 $(」span」).text(」Stopped at div index #」 + index);
 77 return false;
 78 }
 79 });
 80 });
 81 
 82 
 83 jQuery Event:
 84 
 85 ready(fn); $(document).ready()注意在body中沒有onload事件,不然該函數不能執行。在每一個頁面中能夠
 86 有不少個函數被加載執行,按照fn的順序來執行。
 87 bind( type, [data], fn ) 爲每個匹配元素的特定事件(像click)綁定一個或多個事件處理器函數。可能的事件屬性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
 88 mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,
 89 keyup, error
 90 one( type, [data], fn ) 爲每個匹配元素的特定事件(像click)綁定一個或多個事件處理器函數。在每一個對
 91 象上,這個事件處理函數只會被執行一次。其餘規則與bind()函數相同。
 92 
 93 trigger( type, [data] ) 在每個匹配的元素上觸發某類事件。
 94 triggerHandler( type, [data] ) 這一特定方法會觸發一個元素上特定的事件(指定一個事件類型),同時取消瀏覽器對此事件的默認行動
 95 unbind( [type], [data] ) 反綁定,從每個匹配的元素中刪除綁定的事件。
 96 $(」p」).unbind() 移除全部段落上的全部綁定的事件
 97 $(」p」).unbind( 「click」 ) 移除全部段落上的click事件
 98 hover( over, out ) over,out都是方法, 當鼠標移動到一個匹配的元素上面時,會觸發指定的第一個函數。當鼠標移出這個元素時,會觸發指定的第二個函數。
 99 $(」p」).hover(function(){
100 $(this).addClass(」over」);
101 },
102 function(){
103 $(this).addClass(」out」);
104 }
105 );
106 
107 toggle( fn, fn ) 若是點擊了一個匹配的元素,則觸發指定的第一個函數,當再次點擊同一元素時,則觸發指定的第二個函數。
108 $(」p」).toggle(function(){
109 $(this).addClass(」selected」);
110 },
111 function(){
112 $(this).removeClass(」selected」);
113 }
114 );
115 
116 元素事件列表說明
117 注:不帶參數的函數,其參數爲可選的 fn。jQuery不支持form元素的reset事件。
118 事件 描述 支持元素或對象
119 blur( ) 元素失去焦點 a, input, textarea, button, select, label, map, area
120 change( ) 用戶改變域的內容 input, textarea, select
121 click( ) 鼠標點擊某個對象 幾乎全部元素
122 dblclick( ) 鼠標雙擊某個對象 幾乎全部元素
123 error( ) 當加載文檔或圖像時發生某個錯誤 window, img
124 focus( ) 元素得到焦點 a, input, textarea, button, select, label, map, area
125 keydown( ) 某個鍵盤的鍵被按下 幾乎全部元素
126 keypress( ) 某個鍵盤的鍵被按下或按住 幾乎全部元素
127 keyup( ) 某個鍵盤的鍵被鬆開 幾乎全部元素
128 load( fn ) 某個頁面或圖像被完成加載 window, img
129 mousedown( fn ) 某個鼠標按鍵被按下 幾乎全部元素
130 mousemove( fn ) 鼠標被移動 幾乎全部元素
131 mouseout( fn ) 鼠標從某元素移開 幾乎全部元素
132 mouseover( fn ) 鼠標被移到某元素之上 幾乎全部元素
133 mouseup( fn ) 某個鼠標按鍵被鬆開 幾乎全部元素
134 resize( fn ) 窗口或框架被調整尺寸 window, iframe, frame
135 scroll( fn ) 滾動文檔的可視部分時 window
136 select( ) 文本被選定 document, input, textarea
137 submit( ) 提交按鈕被點擊 form
138 unload( fn ) 用戶退出頁面 window
139 
140 JQuery Ajax 方法說明:
141 
142 load( url, [data], [callback] ) 裝入一個遠程HTML內容到一個DOM結點。
143 $(」#feeds」).load(」feeds.html」); 將feeds.html文件載入到id爲feeds的div中
144 $(」#feeds」).load(」feeds.php」, {limit: 25}, function(){
145 alert(」The last 25 entries in the feed have been loaded」);
146 });
147 
148 jQuery.get( url, [data], [callback] ) 使用GET請求一個頁面。
149 $.get(」test.cgi」, { name: 「John」, time: 「2pm」 }, function(data){
150 alert(」Data Loaded: 」 + data);
151 });
152 
153 jQuery.getJSON( url, [data], [callback] ) 使用GET請求JSON數據。
154 $.getJSON(」test.js」, { name: 「John」, time: 「2pm」 }, function(json){
155 alert(」JSON Data: 」 + json.users[3].name);
156 });
157 
158 jQuery.getScript( url, [callback] ) 使用GET請求javascript文件並執行。
159 $.getScript(」test.js」, function(){
160 alert(」Script loaded and executed.」);
161 });
162 jQuery.post( url, [data], [callback], [type] ) 使用POST請求一個頁面。
163 
164 ajaxComplete( callback ) 當一個AJAX請求結束後,執行一個函數。這是一個Ajax事件
165 $(」#msg」).ajaxComplete(function(request, settings){
166 $(this).append(」<li>Request Complete.</li>」);
167 });
168 ajaxError( callback ) 當一個AJAX請求失敗後,執行一個函數。這是一個Ajax事件
169 $(」#msg」).ajaxError(function(request, settings){
170 $(this).append(」<li>Error requesting page 」 + settings.url + 「</li>」);
171 });
  1 代碼
  2 
  3 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->ajaxSend( callback ) 在一個AJAX請求發送時,執行一個函數。這是一個Ajax事件
  4 $(」#msg」).ajaxSend(function(evt, request, settings){
  5 $(this).append(」<li<Starting request at 」 + settings.url
  6 + 「</li<」);
  7 });
  8 
  9 ajaxStart( callback ) 在一個AJAX請求開始但尚未激活時,執行一個函數。這是一個Ajax事件
 10 當AJAX請求開始(並尚未激活時)顯示loading信息
 11 $(」#loading」).ajaxStart(function(){
 12 $(this).show();
 13 });
 14 
 15 ajaxStop( callback ) 當全部的AJAX都中止時,執行一個函數。這是一個Ajax事件
 16 當全部AJAX請求都中止時,隱藏loading信息。
 17 $(」#loading」).ajaxStop(function(){
 18 $(this).hide();
 19 });
 20 
 21 ajaxSuccess( callback ) 當一個AJAX請求成功完成後,執行一個函數。這是一個Ajax事件
 22 當AJAX請求成功完成時,顯示信息。
 23 $(」#msg」).ajaxSuccess(function(evt, request, settings){
 24 $(this).append(」<li>Successful Request!</li>」);
 25 });
 26 
 27 jQuery.ajaxSetup( options ) 爲全部的AJAX請求進行全局設置。查看$.ajax函數取得全部選項信息。
 28 設置默認的全局AJAX請求選項。
 29 $.ajaxSetup({
 30 url: 「/xmlhttp/」,
 31 global: false,
 32 type: 「POST」
 33 });
 34 $.ajax({ data: myData });
 35 
 36 serialize( ) 以名稱和值的方式鏈接一組input元素。實現了正確表單元素序列
 37 function showValues() {
 38 var str = $(」form」).serialize();
 39 $(」#results」).text(str);
 40 }
 41 $(」:checkbox, :radio」).click(showValues);
 42 $(」select」).change(showValues);
 43 showValues();
 44 
 45 serializeArray( ) 鏈接全部的表單和表單元素(相似於.serialize()方法),可是返回一個JSON數據格式。
 46 從form中取得一組值,顯示出來
 47 function showValues() {
 48 var fields = $(」:input」).serializeArray();
 49 alert(fields);
 50 $(」#results」).empty();
 51 jQuery.each(fields, function(i, field){
 52 $(」#results」).append(field.value + 」 「);
 53 });
 54 }
 55 $(」:checkbox, :radio」).click(showValues);
 56 $(」select」).change(showValues);
 57 showValues();
 58 
 59 JQuery Effects 方法說明
 60 
 61 show( ) 顯示隱藏的匹配元素。
 62 show( speed, [callback] ) 以優雅的動畫顯示全部匹配的元素,並在顯示完成後可選地觸發一個回調函數。
 63 hide( ) 隱藏全部的匹配元素。
 64 hide( speed, [callback] ) 以優雅的動畫隱藏全部匹配的元素,並在顯示完成後可選地觸發一個回調函數
 65 toggle( ) 切換元素的可見狀態。若是元素是可見的,切換爲隱藏的;若是元素是隱藏的,
 66 切換爲可見的。
 67 slideDown( speed, [callback] ) 經過高度變化(向下增大)來動態地顯示全部匹配的元素,在顯示完成後可選
 68 地觸發一個回調函數。這個動畫效果只調整元素的高度,可使匹配的元素以
 69 「滑動」的方式顯示出來。
 70 slideUp( speed, [callback] ) 經過高度變化(向上減少)來動態地隱藏全部匹配的元素,在隱藏完成後可選地
 71 觸發一個回調函數。這個動畫效果只調整元素的高度,可使匹配的元素以」滑動」
 72 的方式隱藏起來。
 73 slideToggle( speed, [callback] ) 經過高度變化來切換全部匹配元素的可見性,並在切換完成後可選地觸發一個回
 74 調函數。 這個動畫效果只調整元素的高度,可使匹配的元素以」滑動」的方式隱
 75 藏或顯示。
 76 fadeIn( speed, [callback] ) 經過不透明度的變化來實現全部匹配元素的淡入效果,並在動畫完成後可選地觸
 77 發一個回調函數。 這個動畫只調整元素的不透明度,也就是說全部匹配的元素的
 78 高度和寬度不會發生變化。
 79 fadeOut( speed, [callback] ) 經過不透明度的變化來實現全部匹配元素的淡出效果,並在動畫完成後可選地觸
 80 發一個回調函數。 這個動畫只調整元素的不透明度,也就是說全部匹配的元素的
 81 高度和寬度不會發生變化。
 82 fadeTo( speed, opacity, [callback] ) 把全部匹配元素的不透明度以漸進方式調整到指定的不透明度,並在動畫完成
 83 後可選地觸發一個回調函數。 這個動畫只調整元素的不透明度,也就是說所
 84 有匹配的元素的高度和寬度不會發生變化。
 85 stop( ) 中止全部匹配元素當前正在運行的動畫。若是有動畫處於隊列當中,他們就會當即開始。
 86 queue( ) 取得第一個匹配元素的動畫序列的引用(返回一個內容爲函數的數組)
 87 queue( callback ) 在每個匹配元素的事件序列的末尾添加一個可執行函數,做爲此元素的事件函數
 88 queue( queue ) 以一個新的動畫序列代替全部匹配元素的原動畫序列
 89 dequeue( ) 執行並移除動畫序列前端的動畫
 90 animate( params, [duration], [easing], [callback] ) 用於建立自定義動畫的函數。
 91 animate( params, options ) 建立自定義動畫的另外一個方法。做用同上。
 92 
 93 JQuery Traversing 方法說明
 94 
 95 eq( index ) 從匹配的元素集合中取得一個指定位置的元素,index從0開始
 96 filter( expr ) 返回與指定表達式匹配的元素集合,可使用」,」號分割多個expr,用於實現多個條件篩選
 97 filter( fn ) 利用一個特殊的函數來做爲篩選條件移除集合中不匹配的元素。
 98 is( expr ) 用一個表達式來檢查當前選擇的元素集合,若是其中至少有一個元素符合這個給定的
 99 表達式就返回true。
100 map( callback ) 將jQuery對象中的一組元素利用callback方法轉換其值,而後添加到一個jQuery數組中。
101 not( expr ) 從匹配的元素集合中刪除與指定的表達式匹配的元素。
102 slice( start, [end] ) 從匹配元素集合中取得一個子集,和內建的數組的slice方法相同。
103 add( expr ) 把與表達式匹配的元素添加到jQuery對象中。
104 children( [expr] ) 取得一個包含匹配的元素集合中每個元素的全部子元素的元素集合。可選的過濾器
105 將使這個方法只匹配符合的元素(只包括元素節點,不包括文本節點)。
106 contents( ) 取得一個包含匹配的元素集合中每個元素的全部子孫節點的集合(只包括元素節點,不
107 包括文本節點),若是元素爲iframe,則取得其中的文檔元素
108 find( expr ) 搜索全部與指定表達式匹配的元素。
109 next( [expr] ) 取得一個包含匹配的元素集合中每個元素緊鄰的後面同輩元素的元素集合。
110 nextAll( [expr] ) 取得一個包含匹配的元素集合中每個元素全部的後面同輩元素的元素集合
111 parent( [expr] ) 取得一個包含着全部匹配元素的惟一父元素的元素集合。
112 parents( [expr] ) 取得一個包含着全部匹配元素的惟一祖先元素的元素集合(不包含根元素)。
113 prev( [expr] ) 取得一個包含匹配的元素集合中每個元素緊鄰的前一個同輩元素的元素集合。
114 prevAll( [expr] ) 取得一個包含匹配的元素集合中每個元素的以前全部同輩元素的元素集合。
115 siblings( [expr] ) 取得一個包含匹配的元素集合中每個元素的全部同輩元素的元素集合。
116 andSelf( ) 將前一個匹配的元素集合添加到當前的集合中
117 取得全部div元素和其中的p元素,添加border類屬性。取得全部div元素中的p元素,
118 添加background類屬性
119 $(」div」).find(」p」).andSelf().addClass(」border」);
120 $(」div」).find(」p」).addClass(」background」);
121 end( ) 結束當前的操做,回到當前操做的前一個操做
122 找到全部p元素其中的span元素集合,而後返回p元素集合,添加css屬性
123 $(」p」).find(」span」).end().css(」border」, 「2px red solid」);
124 
125 JQuery Selectors 方法說明
126 
127 基本選擇器
128 $(」#myDiv」) 匹配惟一的具備此id值的元素
129 $(」div」) 匹配指定名稱的全部元素
130 $(」.myClass」) 匹配具備此class樣式值的全部元素
131 $(」*」) 匹配全部元素
132 $(」div,span,p.myClass」) 聯合全部匹配的選擇器
133 層疊選擇器
134 $(」form input」) 後代選擇器,選擇ancestor的全部子孫節點
135 $(」#main > *」) 子選擇器,選擇parent的全部子節點
136 $(」label + input」) 臨選擇器,選擇prev的下一個臨節點
137 $(」#prev ~ div」) 同胞選擇器,選擇prev的全部同胞節點
138 基本過濾選擇器
139 $(」tr:first」) 匹配第一個選擇的元素
140 $(」tr:last」) 匹配最後一個選擇的元素
141 $(」input:not(:checked) + span」)從原元素集合中過濾掉匹配selector的全部元素(這裏有是一個臨選擇器)
142 $(」tr:even」) 匹配集合中偶數位置的全部元素(從0開始)
143 $(」tr:odd」) 匹配集合中奇數位置的全部元素(從0開始)
144 $(」td:eq(2)」) 匹配集合中指定位置的元素(從0開始)
145 $(」td:gt(4)」) 匹配集合中指定位置以後的全部元素(從0開始)
146 $(」td:gl(4)」) 匹配集合中指定位置以前的全部元素(從0開始)
147 $(」:header」) 匹配全部標題
148 $(」div:animated」) 匹配全部正在運行動畫的全部元素
149 內容過濾選擇器
150 $(」div:contains(’John’)」) 匹配含有指定文本的全部元素
151 $(」td:empty」) 匹配全部空元素(只含有文本的元素不算空元素)
152 $(」div:has(p)」) 從原元素集合中再次匹配全部至少含有一個selector的全部元素
153 $(」td:parent」) 匹配全部不爲空的元素(含有文本的元素也算)
154 $(」div:hidden」) 匹配全部隱藏的元素,也包括表單的隱藏域
155 $(」div:visible」) 匹配全部可見的元素
156 屬性過濾選擇器
157 $(」div[id]」) 匹配全部具備指定屬性的元素
158 $(」input[name=’newsletter’]」) 匹配全部具備指定屬性值的元素
159 $(」input[name!=’newsletter’]」) 匹配全部不具備指定屬性值的元素
160 $(」input[name^=’news’]」) 匹配全部指定屬性值以value開頭的元素
161 $(」input[name$=’letter’]」) 匹配全部指定屬性值以value結尾的元素
162 $(」input[name*=’man’]」) 匹配全部指定屬性值含有value字符的元素
163 $(」input[id][name$=’man’]」) 匹配同時符合多個選擇器的全部元素
164 子元素過濾選擇器
165 $(」ul li:nth-child(2)」),
166 $(」ul li:nth-child(odd)」), 匹配父元素的第n個子元素
167 $(」ul li:nth-child(3n + 1)」)
168 
169 $(」div span:first-child」) 匹配父元素的第1個子元素
170 $(」div span:last-child」) 匹配父元素的最後1個子元素
171 $(」div button:only-child」) 匹配父元素的惟一1個子元素
172 表單元素選擇器
173 $(」:input」) 匹配全部的表單輸入元素,包括全部類型的input, textarea, select 和 button
174 $(」:text」) 匹配全部類型爲text的input元素
175 $(」:password」) 匹配全部類型爲password的input元素
176 $(」:radio」) 匹配全部類型爲radio的input元素
177 $(」:checkbox」) 匹配全部類型爲checkbox的input元素
178 $(」:submit」) 匹配全部類型爲submit的input元素
179 $(」:image」) 匹配全部類型爲image的input元素
180 $(」:reset」) 匹配全部類型爲reset的input元素
181 $(」:button」) 匹配全部類型爲button的input元素
182 $(」:file」) 匹配全部類型爲file的input元素
183 $(」:hidden」) 匹配全部類型爲hidden的input元素或表單的隱藏域
184 表單元素過濾選擇器
185 $(」:enabled」) 匹配全部可操做的表單元素
186 $(」:disabled」) 匹配全部不可操做的表單元素
187 $(」:checked」) 匹配全部已點選的元素
188 $(」select option:selected」) 匹配全部已選擇的元素
189 
190 JQuery CSS 方法說明
191 
192 css( name ) 訪問第一個匹配元素的樣式屬性。
193 css( properties ) 把一個」名/值對」對象設置爲全部匹配元素的樣式屬性。
194 $(」p」).hover(function () {
195 $(this).css({ backgroundColor:」yellow」, fontWeight:」bolder」 });
196 }, function () {
197 var cssObj = {
198 backgroundColor: 「#ddd」,
199 fontWeight: 「」,
200 color: 「rgb(0,40,244)」
201 }
202 $(this).css(cssObj);
203 });
204 css( name, value ) 在全部匹配的元素中,設置一個樣式屬性的值。
205 offset( ) 取得匹配的第一個元素相對於當前可視窗口的位置。返回的對象有2個屬性,
206 top和left,屬性值爲整數。這個函數只能用於可見元素。
207 var p = $(」p:last」);
208 var offset = p.offset();
209 p.html( 「left: 」 + offset.left + 「, top: 」 + offset.top );
210 width( ) 取得當前第一匹配的元素的寬度值,
211 width( val ) 爲每一個匹配的元素設置指定的寬度值。
212 height( ) 取得當前第一匹配的元素的高度值,
213 height( val ) 爲每一個匹配的元素設置指定的高度值。
214 
215 JQuery Utilities 方法說明
216 jQuery.browser
217 .msie 表示ie
218 jQuery.browser.version 讀取用戶瀏覽器的版本信息
219 jQuery.boxModel 檢測用戶瀏覽器針對當前頁的顯示是否基於w3c CSS的盒模型
220 jQuery.isFunction( obj ) 檢測傳遞的參數是否爲function
221 function stub() { }
222 var objs = [
223 function () {},
224 { x:15, y:20 },
225 null,
226 stub,
227function228 ];
229 jQuery.each(objs, function (i) {
230 var isFunc = jQuery.isFunction(objs[i]);
231 $(」span:eq( 」 + i + 「)」).text(isFunc);
232 });
233 jQuery.trim( str ) 清除字符串兩端的空格,使用正則表達式來清除給定字符兩端的空格
234 jQuery.each( object, callback ) 一個通用的迭代器,能夠用來無縫迭代對象和數組
235 jQuery.extend( target, object1, [objectN] ) 擴展一個對象,修改原來的對象並返回,這是一個強大的實現繼承的
236 工具,這種繼承是採用傳值的方法來實現的,而不是JavaScript中的
237 原型鏈方式。
238 合併settings和options對象,返回修改後的settings對象
239 var settings = { validate: false, limit: 5, name: 「foo」 };
240 var options = { validate: true, name: 「bar」 };
241 jQuery.extend(settings, options);
242 
243 合併defaults和options對象,defaults對象並無被修改。options對象中的值
244 代替了defaults對象的值傳遞給了empty。
245 
246 var empty = {}
247 var defaults = { validate: false, limit: 5, name: 「foo」 };
248 var options = { validate: true, name: 「bar」 };
249 var settings = $.extend(empty, defaults, options);
250 jQuery.grep( array, callback, [invert] ) 經過一個篩選函數來去除數組中的項
251 $.grep( [0,1,2], function(n,i){
252 return n > 0;
253 });
254 jQuery.makeArray( obj ) 將一個相似數組的對象轉化爲一個真正的數組
255 將選取的div元素集合轉化爲一個數組
256 var arr = jQuery.makeArray(document.getElementsByTagName(」div」));
257 arr.reverse(); // use an Array method on list of dom elements
258 $(arr).appendTo(document.body);
259 jQuery.map( array, callback ) 使用某個方法修改一個數組中的項,而後返回一個新的數組
260 jQuery.inArray( value, array ) 返回value在數組中的位置,若是沒有找到,則返回-1
261 jQuery.unique( array ) 刪除數組中的全部重複元素,返回整理後的數組
相關文章
相關標籤/搜索