**從一個框架核心功能層面上說，實現了選擇器、DOM操作、事件、動畫，功能已經完備了。而任何框架寫出了就是應用的，所以這篇涉及的表單與表格知識，雖在DOM操作中有所涉及，但更偏于實際項目中的應用技巧的使用。ajax部分的內容更是前端與后端交互的核心。** **一、jQuery中的表單與表格應用** **實際項目中，表單和表格分別扮演采集、提交用戶輸入的信息和顯示列表的數據。在HTML中非常重要。下面是這部分知識導圖：** **** **1.表單** **（1）單行文本框** **單行文本框職能是獲取用戶輸入的指定格式的數據。這就涉及兩點交互。** **** **這兩點交互都體現在獲取焦點與失去焦點的變化上，當獲取焦點時，單選框添加背景色、內容提示清空。失去焦點時，背景色去除，如果內容為空，內容提示恢復。** **jQuery代碼如下：** ~~~ $(":input").focus(function(){ $(this).addClass("focus"); if($(this).val() ==this.defaultValue){ $(this).val(""); } }).blur(function(){ $(this).removeClass("focus"); if ($(this).val() == '') { $(this).val(this.defaultValue); } }); ~~~ **（2）多行文本框** **多行文本框一個比較重要的應用是控制滾動條的變化。如果有上滑的命令，則對文本框滾動條上移50px。反之亦然。** **jQuery代碼如下：** ~~~ var $comment = $('#comment');//獲取評論框 $('.up').click(function(){ //向上按鈕綁定單擊事件 if(!$comment.is(":animated")){//判斷是否處于動畫 $comment.animate({ scrollTop : "-=50" } , 400); } }) $('.down').click(function(){//向下按鈕綁定單擊事件 if(!$comment.is(":animated")){ $comment.animate({ scrollTop : "+=50" } , 400); } }); ~~~ **（3）復選框應用** **復選框對于用戶文件管理非常重要，主要涉及三個功能：全選、全不選、反選。此三個功能都會涉及修改每個復選框checked屬性。** **實現如上三個功能代碼如下：** ~~~ $("#CheckedAll").click(function(){ $('[name=items]:checkbox').each(function(){ this.checked = true; }) }); //全不選 $("#CheckedNo").click(function(){ $('[name=items]:checkbox').each(function(){ this.checked=false; }); }); //反選 $("#CheckedRev").click(function(){ $('[name=items]:checkbox').each(function(){ //直接使用JS原生代碼，簡單實用 this.checked=!this.checked; }); ~~~ **實現上述功能僅僅是第一步，常見的全選/全不選是一個按鈕，當列表選項全選時，全選又必須選中。所以全選與列表項存在著雙向通信。體現在代碼中，就必須做到雙向控制：即除了對自身狀態的修改，還需要判斷是否需要修改另一個的狀態。** **如下代碼采用一個臨時變量記錄，判斷是否全選中：** ~~~ //全選 $("#CheckedAll").click(function() { //所有checkbox跟著全選的checkbox走。 var self =this; $('[name=items]:checkbox').each(function(){ this.checked=self.checked; }); }); $('[name=items]:checkbox').click(function() { //定義一個臨時變量，避免重復使用同一個選擇器選擇頁面中的元素，提升程序效率。 var $tmp = $('[name=items]:checkbox'); //用filter方法篩選出選中的復選框。并直接給CheckedAll賦值。 $('#CheckedAll').attr('checked', $tmp.length == $tmp.filter(':checked').length); }); ~~~ **（4）下拉框應用** **下拉框的應用主要集中于兩欄之間，下拉項在下拉框之前切換，主要涉及option標簽selected屬性用來篩選選中項，另外涉及dom移動。主要涉及移動選中、全部移動、雙擊移動。注意雙擊移動采用了上下文篩選移動項。** **代碼如下：** ~~~ $('#add').click(function() { //獲取選中的選項，刪除并追加給對方 $('#select1 option:selected').appendTo('#select2'); }); $('#add_all').click(function() { //獲取全部的選項,刪除并追加給對方 $('#select1 option').appendTo('#select2'); }); $('#select1').dblclick(function(){ //綁定雙擊事件 //獲取全部的選項,刪除并追加給對方 $("option:selected",this).appendTo('#select2'); //追加給對方 }); ~~~ **（5）表單驗證** **表單驗證最為常見，需要對用戶輸入信息實時提示，這里采用失去焦點判斷的方法，為了實時顯示，同時在keyup和focus事件中，都觸發blur方法，同時避免瀏覽器默認blur事件。** **代碼如下：** ~~~ $('form :input').blur(function(){ var $parent = $(this).parent(); $parent.find(".formtips").remove(); //驗證用戶名 if( $(this).is('#username') ){ if( this.value=="" || this.value.length < 6 ){ var errorMsg = '請輸入至少6位的用戶名.'; $parent.append('<span class="formtips onError">'+errorMsg+'</span>'); }else{ var okMsg = '輸入正確.'; $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); } } //驗證郵件 if( $(this).is('#email') ){ if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){ var errorMsg = '請輸入正確的E-Mail地址.'; $parent.append('<span class="formtips onError">'+errorMsg+'</span>'); }else{ var okMsg = '輸入正確.'; $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); } } }).keyup(function(){ $(this).triggerHandler("blur"); }).focus(function(){ $(this).triggerHandler("blur"); });//end blur ~~~ **2.表格** **（1）展開關閉** **表格的展開關閉，也即展開關閉兩種狀態的切換，前面動畫講過toggle方法可以切換顯示隱藏，這里通過點選控制同類兄弟節點的關閉顯示切換。** **代碼如下：** ~~~ $('tr.parent').click(function(){ // 獲取所謂的父行 $(this) .toggleClass("selected") // 添加/刪除高亮 .siblings('.child_'+this.id).toggle(); // 隱藏/顯示所謂的子行 }).click(); ~~~ **（2）內容篩選** **對于列表的內容篩選，主要采用過濾方法filter，篩選包含指定內容的列表項。當keyup時即篩選。** **代碼如下：** ~~~ $("#filterName").keyup(function(){ $("table tbody tr") .hide() .filter(":contains('"+( $(this).val() )+"')") .show(); }).keyup(); ~~~ **二.jquery與ajax** **Ajax出現最大的意義在于，改變了以往前后端傳數據需要全頁面刷新來獲取頁面內容的方式，可以局部刷新頁面。工作原理是在客戶端實現了一個ajax引擎，使用戶操作與服務器響應異步化。** **《jQuery攻略》上列出了ajax幾大不足，但這似乎并沒有影響ajax的廣泛應用。作為前端開發人員，ajax帶來的最大弊病就是異步響應的問題。異步響應需要開發人員時刻保持對時序執行邏輯的關注，往往很多問題都處在這里。** **jQuery提供了非常簡便的ajax操作，代替了原生代碼復雜冗余的操作，使ajax應用變得簡單。以下是樂帝對ajax這部分內容的知識導圖：** **** **1.ajax操作方法** **如上知識所示，ajax操作方法可以分為三層，由簡單到復雜，由高層到底層。其中第二層最常用。這幾個ajax方法底層都是對原生ajax方法的封裝。但應用場景稍有不同，越是上層應用場景越具針對性，靈活性則不足。最底層$.ajax()靈活性雖足，配置起來則更為復雜。** **每個ajax操作方法都會涉及的參數有3個url（請求地址）、data（發送至服務器數據）、callback（請求完成時回調）。** **最常用的兩個分別是$.get()與$.post(),兩者分別對應ajax操作的get請求方式與post請求方式，這兩種方式區別有三點：** **** **$.getScript()與$.getJSON()兩個ajax方法分別是針對動態加載腳本與json文件場景設定的方法。** **$.ajax()方法是上述ajax操作方法最底層的構建，此方法可以替代上述方法。** **2.參數序列化方法** **本文第一部分提到表單是獲取用戶數據的方式，用戶填寫完表單，發送到服務器就需要收集用戶表單數據。如果一個個取數據還是很繁瑣的。** **參數序列化方法正是自動將表單數據序列化，用于ajax請求。** **serialize()用于將DOM元素內容序列化為字符串：**  **serializeArray()用于將DOM元素序列化，返回JSON格式數據：** **** **$.param()方法用來對數組或對象鍵值對序列化：** **** **3.ajax請求控制方法** **這里主要涉及兩個方法：Ajax請求開始時，會觸發ajaxStart方法；Ajax請求結束時，會觸發ajaxStop方法。常用于加強用戶體驗，給用戶添加加載提示。** **使用示例：** ~~~ $("#send").click(function(){ $("#resText").load("test.html"); }) $("#resText").ajaxStart(function(){ console.log("ajax has started"); }); $("#resText").ajaxStop(function(){ console.log("ajax has stopped"); }); ~~~