IT工程師數位筆記本

  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,
225 “function”
226 ];
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 5、集合處理功能
 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 6、擴展我們需要的功能
 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 7、支持方法的連寫
 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 8、操作元素的樣式
 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 9、完善的事件處理功能
 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 10、幾個實用特效功能
116 其中toggle()和slidetoggle()方法提供了狀態切換功能。
117 如toggle()方法包括了hide()和show()方法。
118 slideToggle()方法包括了slideDown()和slideUp方法。
119 
120 11、幾個有用的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 12、解決自定義方法或其他類庫與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,
227 “function”
228 ];
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 ) 刪除數組中的所有重復元素，返回整理后的數組