Jquery實戰1:概述，環境準備及入門實例

jQuery是一套跨瀏覽器的JavaScript函數庫，簡化HTML與JavaScript之間的操作。由約翰·雷西格（John Resig）在2006年1月的BarCamp NYC上發佈第一個版本。目前是由Dave Methvin領導的開發團隊進行開發。全球前10,000個訪問最高的網站中，有65% ...

jQuery是一套跨瀏覽器的JavaScript函數庫，簡化HTML與JavaScript之間的操作。由約翰·雷西格（John Resig）在2006年1月的BarCamp NYC上發佈第一個版本。目前是由Dave Methvin領導的開發團隊進行開發。全球前10,000個訪問最高的網站中，有65%使用了jQuery，是目前最受歡迎的JavaScript函數庫。

jQuery的特點：

Write less, Do more。
jQuery is designed to change the way that you write JavaScript。
支持各種主流瀏覽器,包括IE,FireFox2以上,Safari2以上和Opera9以上的版本。
以強大的CSS選擇器為基礎,幾乎所有的操作都先使用選擇器查找DOM對象,然後對其進行各種操作。
屏蔽瀏覽器差異,對DOM的操作提供了方便的擴展,易用的事件處理API和動畫API。
強大的插件機制。

版本發佈

JQuery目前分成1.x版與2.x版，這兩種版本發佈，後者不再支持IE 6/7/8，前者通過jQuery Migrate plugin與先前版本保持相容。

發佈日期	版本號碼	備註
2006年8月26日	1.0	最初的穩定版本
2006年8月31日	1.0.1
2006年10月9日	1.0.2
2006年10月27日	1.0.3
2006年12月12日	1.0.4	Last 1.0 bug fix
2007年1月14日	1.1
2007年1月22日	1.1.1
2007年2月27日	1.1.2
2007年7月1日	1.1.3
2007年7月5日	1.1.3.1
2007年8月24日	1.1.4
2007年9月10日	1.2	jQuery 1.2版以後預設取消XPath支持，改為插件支持
2007年9月16日	1.2.1
2008年1月15日	1.2.2
2008年2月8日	1.2.3
2008年5月19日	1.2.4
2008年5月21日	1.2.5	修正1.2.4版的bug
2008年5月24日	1.2.6
2009年1月14日	1.3	Sizzle選擇器引擎導入至核心，移除過時API^[11]
2009年1月21日	1.3.1
2009年2月20日	1.3.2
2010年1月14日	1.4
2010年1月25日	1.4.1
2010年2月19日	1.4.2
2010年10月16日	1.4.3
2010年11月11日	1.4.4
2011年1月31日	1.5
2011年2月24日	1.5.1
2011年3月31日	1.5.2
2011年5月3日	1.6	改善attr()與val()的效能
2011年5月12日	1.6.1
2011年6月30日	1.6.2
2011年9月1日	1.6.3
2011年9月12日	1.6.4
2011年11月3日	1.7	移除過時API^[12]
2011年11月21日	1.7.1
2012年3月21日	1.7.2
2012年8月9日	1.8.0	Sizzle選擇器引擎重寫，提高動畫與$（html, props）更具彈性.，移除過時API^[13]
2012年8月30日	1.8.1
2012年9月20日	1.8.2
2012年11月13日	1.8.3
2013年1月15日	1.9.0	移除過時API^[14]
2013年2月4日	1.9.1
2013年5月23日	1.10.0	移除過時API^[15]
2013年5月30日	1.10.1
2013年7月3日	1.10.2
2014年1月24日	1.11.0
2014年5月1日	1.11.1
2014年12月18日	1.11.2
2015年4月28日	1.11.3	修復在iOS 8.2與8.3裡的錯誤。
2013年4月18日	2.0.0	除去對Internet Explorer 6-8的支援以提高性能，並降低文件大小
2013年5月24日	2.0.1
2013年5月30日	2.0.2
2013年7月3日	2.0.3
2014年1月24日	2.1.0
2014年5月1日	2.1.1
	2.1.2
2014年12月18日	2.1.3
2015年4月28日	2.1.4	修復在iOS 8.2與8.3裡的錯誤。

學習環境準備

1.一款自己喜歡的IDE。作為一名Java程式員，Eclipse是我最佳選擇。
2.各種主流瀏覽器。考慮到瀏覽器的相容問題，機器上最好同時裝上Firefox,Chrome,Opera，IE等。由於我使用的操作系統是ubuntu,所以暫時不考慮IE。
3.自己熟悉的web伺服器。這裡以tomcat6.0為例進行學習。
4.api參考手冊。Jquery1.8.3和w3school,w3school裡面的api較多，覆蓋了html,css到js,前端到後臺的一些參考手冊，但是針對性沒有Jquery的參考手冊，建議兩者都可以選擇，或者重點放在前者。

入門案例

1.下載jQuery文件。共有兩個版本的 jQuery 可供下載：一份是精簡過的，另一份是未壓縮的（供調試或閱讀）。壓縮版一般以min.js結為，其目的是為了在生產時減少文件大小，降低網路帶寬,這裡兩者都可以下載下來，官方下載地址。

2.jQuery 庫位於上訴下載的js文件中，其中包含了所有的 jQuery 函數。可以通過下麵的標記把 jQuery 添加到網頁中：

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

src裡面的內容替換成你的jQuery文件的位置。除了上訴引入jQuery的方法之外，還可以引入谷歌或者微軟的CDN裡面的jQuery文件，用法如下：

使用 Google 的 CDN

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>

使用 Microsoft 的 CDN

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>

jQuery的基礎語法是:

$(selector).action()

美元符號定義 jQuery
選擇符（selector）“查詢”和“查找” HTML 元素
jQuery 的 action() 執行對元素的操作，簡單案例如:

$(document).ready(function(){
    alert("Hello Jquery");
});

$表示這是jQuery語法，document與JavaScript的document相同，對整個頁面這個節點，ready()表示當頁面載入結束這一事件，與js的onload有些相同，$(document).ready();裡面是一個匿名函數，表示載入結束這也這個頁面之後將觸發函數體裡面的內容。而這裡的函數體只有一句話alter("Hello Jquery"),表示在頁面彈出視窗顯示"Hello Jquery",如果你是第一次接觸jQuery，一定要運行出這個HelloWorld級別的程式出來，因為今後的博客與知識都是建立在這個程式的基礎之上的。

好了，現在讓我們來正式入門《jQuery實戰》系列課程的第一節，做一個校驗用戶名合法性的模塊。
功能需求：
一般在註冊用戶名之前，先對用戶名的合法性進行校驗。如果資料庫中已經存在用戶名則返回不可註冊字樣，如果資料庫中沒有被註冊過，則返回可以註冊字樣。輸入框中沒有輸入任何字元時，輸入框紅色波浪線提示，當輸入框輸入有字元時，紅色波浪線自動消失。

html/jsp頁面代碼如下:

<body>
    請輸入用戶名: <input type="text" id="userName" class="userText"/>
    <button id="verifyButton">校驗</button><br />
    <div id="result"></div>
</body>

body里的標簽比較簡單，一個input輸入框提供給用戶輸入將要註冊的用戶名，button是一個按鈕，這裡不是用form表單提交，而是用ajax提交，所以不用form括起來，此外，這裡還預留了一個內容空白的div,留作顯示相應結果之用。
為了方便管理js文件，每個模塊都單獨的寫一個js文件，本模塊的userVerify.js，需要通過Javascript代碼來做兩件事情：
1.button被按下的時候，需要將文本框中的數據獲取到，然後發送給伺服器端，最後接受伺服器返回的數據，填充到我們預留的div中，這樣用戶就可以看到結果
2.文本框上，用戶按鍵之後，需要判斷文本框中的內容是否為空，如果不為空，紅色的邊框和背景圖就應該取消，否則保留。

    //這裡面的內容就是頁面裝載完成後需要執行的代碼
    var userNameNode = $("#userName");  
    //需要找到button按扭，註冊事件
    $("#verifyButton").click(function() {
        //1.獲取文本框的內容
        var userName = userNameNode.val();
        //2.將這個內容發送給伺服器端
        if (userName == "") {
            alert("用戶名不能為空");
        } else {
            $.get("../userVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){
                    //3.接收伺服器端返回的數據，填充到div中 
                    $("#result").html(response);
            });                 
        }
    });

註意：上面的代碼是囊括在$(document).ready();體裡面。第一行代碼的意思是將id為userName的節點取出來，賦值給變數userNameNode。$("#verifyButton").click(function() {});的含義是監聽id為verifyButton的元素，觸發單擊事件時執行匿名函數，做的處理是將userNameNode的值取出來，判斷是否為空，若不為空，則通過ajax的get方法向伺服器發送數據請求。
jQuery的ajax get請求語法如下:

jQuery $.get() 方法
$.get() 方法通過 HTTP GET 請求從伺服器上請求數據。
語法：

$.get(URL,callback);

必需的 URL 參數規定您希望請求的 URL。
可選的 callback 參數是請求成功後所執行的函數名。

本例用的get請求，所以請求的參數是通過url拼接傳遞的。後臺的Servlet接受數據如下:

public class UserVerify extends HttpServlet {
 
    protected void processRequest(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            String param = request.getParameter("userName");
            System.out.println("userName : " + param);
            if (param == null || param.length() == 0) {
                out.println("用戶名不能為空");
            } else {
                String userName = URLDecoder.decode(param, "UTF-8");
                if ("admin".equals(userName) || "超管".equals(userName)) {
                    out.println("用戶名[" + userName + "]已經存在，請使用別的用戶名註冊");
                } else {
                    out.println("可以使用用戶名[" + userName + "]註冊");
                }
            }
        } finally { 
            out.close();
        }
    } 

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    } 

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }

    public String getServletInfo() {
        return "Short description";
    }

}

這個Servlet的doGet,doPost都是繼承自Servlet父類來的，doGet負責相應get請求，doPost負責響應post請求，但是無論是get還是post，我們都可以讓它通通用過processRequest()處理請求。processRequest函數的主要內容為：先獲取前端傳遞過來的userName參數值。當不為空時進行判斷是否是合法的，本系列博客的重點放在前端，所以沒有對資料庫中的用戶名合法性校驗，只是簡單的在Servlet裡面進行簡單的判斷，當用戶名為"admin"或者"超管"的時候不合法，其他字元串都合法。
為了相容中文字元串，js需要將userName進行兩次編碼：encodeURI(encodeURI(userName)。

為了實現輸入框紅色波浪線提示的功能，這裡需要添加css文件，裡面保存了輸入框的樣式。這合法div+css的書寫原則，既html之負責基本骨架，css負責具體樣式展示。
userVerify.css的代碼如下:

/*控制文字邊框是紅色實線*/

.userText{
    border: 1px red solid;
    background-image: url("../image/userVerify.gif");
    background-repeat: repeat-x;
    background-position: bottom;
}

紅色波浪線的效果是通過背景圖片展示出來的,小紅色波浪線通過repeat-x不斷的重覆，達到底部波浪線的效果。
為了達到提示效果，必須監聽鍵盤事件，其中用到keyup事件,keyup語法如下:

$(selector).keyup(function)

function 可選。規定當發生 keyup 事件時運行的函數。

jQuery對應的處理代碼

    //處理用戶名輸入框
    $("#userName").keyup(function() {
        var value = userNameNode.val();
        if(value == "") {
            $("#userName").addClass("userText");
        } else {
            $("#userName").removeClass("userText");
        }
    });

addClass() 方法向被選元素添加一個或多個類。該方法不會移除已存在的 class 屬性，僅僅添加一個或多個 class 屬性。removeClass() 方法從被選元素移除一個或多個類。如果沒有規定參數，則該方法將從被選元素中刪除所有類。上述代碼的含義是當id為userName的節點鍵盤鬆開時候執行函數裡面的內容，從input裡面取到值，當值為空的時候，把userText的class加上，達到顯示波浪線的效果。當輸入框的值不為空的時候移除userText的class,到達去除紅色波浪線的效果。

本節知識點

1.HTML負責頁面內容,CSS負責頁面樣式,Javascript負責頁面行為
2.HTML中應該有DOCTYPE來告知瀏覽器的渲染顯示方式
3.可以先定義div或span節點用於以後顯示伺服器返回數據。
4.border屬性可以控制頁面元素的邊框
5.background-***可以控制背景圖,以及背景圖的位置,重覆顯示的方式
6.可以通過#idname或.classname的方式來個制定的html節點定義樣式
7.可以通過$(document).ready(function(){})的方式來定義頁面裝載完成時,需要執行的方法。
8.可以通過$()方法來獲得頁面的指定節點,參數是某種css的選擇器
9.可以在$()方法返回的jquery對象上執行各種Jquery的方法來獲取數據,定義事件,執行操作。
10.val()方法可以獲得節點的value屬性值
11.html()方法可以設定某個節點中的html內容
12.click()方法可以響應滑鼠點擊事件
13.keyup()方法可以響應鍵盤彈起的事件。
14.$.get()方法可以和伺服器端進行get方式的交互,註冊的callback方法會再數據回來的時候被調用,這個方法會接收到代表伺服器端返回數據的一個純文本的參數
15.addClass(),removeClass()方法可以給某個節點添加或刪除一個class
16.發送給伺服器端的數據在javascript中做兩次encodeURI,然後在伺服器端的代碼中按UTF-8的方式做一次URLDecode,可以解決中文亂碼問題。

代碼下載地址:https://github.com/shizongger/JqueryInAction