jquery實戰第一講---概述及其入門例項
就在5月28號週四下午五點的時候，接到xxx姐姐的電話，您是xxx嗎？準備一下，週五上午八點半去遠洋麵試，一路風塵僕僕，顛顛簸簸，由於小編暈車，帶著暈暈乎乎的腦子，小編就稀裡糊塗的去面試了，溫馨提醒，暈車的小夥伴家中常備暈車藥，關於遠洋麵試的一些總結，小編會後續在部落格中貼出，希望對有需要的小夥伴一些幫助，通過面試發現面試官大量的提問jquery的相關知識，那時年少，學習jquery的時候，想起來就是一把辛酸淚，於是，小編勵志再把JQuery的相關知識複習一遍，把相關的知識點總結到部落格中，歡迎不同意見的小夥伴一起討論交流。今天小編主要跟大家分享一下jquery的一些概述，環境以及一個簡單的入門例項。
有的小夥伴可能會問，我是否適合學習jquery這門課程呢？小編告訴你，肯定適合，就像談戀愛一樣，開始的開始，你並不能很好的判斷對方究竟是不是你共度一生的那個人，從相識相守相知相惜，需要一個過程，對於準備做ajax前臺開發的，熟悉js，瞭解ajax，想提高自己技術的小夥伴，想熟練掌握jquery使用方式的小夥伴都適合學習這門課程，通過jquery的學習，我們會學習到jquery的API的使用，一些小例項的實現方法，一些html、css、js的小知識。好了，接下來小編就簡單介紹一下第一個jquery的例項，使用者名稱校驗，我們來簡單分析一下這個小例子，首先我們來看伺服器端思路分析，對指定使用者名稱比如dingguohua返回使用者名稱已經存在，對其他使用者名稱，返回使用者名稱可以使用，首先我們倆可能整個例子的路徑結構如下所示：
首先，我們需要一個html檔案，小編把她取名為UserVerify，除此之外我們需要編寫css和js的檔案，從遵循web標準的方式來看，我們要把css和js檔案分別放置，為了便於管理，我們分別建立css和js的檔案目錄，放置這兩種型別的檔案，除此之外，我們可能會用到圖片，我們需要單獨來建立一個images的檔案目錄，放置一些圖片資訊，完成這個小例子的第一步就是來編寫我們的html檔案，要保證先把頁面當中需要的一些內容資訊通過html的一些標籤把她表示出來，我們來看如何編寫我們的html檔案的程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jquery實戰1-使用者名稱校驗</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/userUerify.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/userVerify.js"></script>
</head>
<body>
請輸入使用者名稱:<input type="text" id="userName" class="userText"/><input type="button" value="校驗" id="verifyButton"/>
<div id="result"></div>
</body>
</html> .userText{
/*控制文字框的邊框是紅色的實線*/
border: 1px solid red;
background-image:url(../images/userVerify.gif);
background-repeat:repeat-x;
background-position:bottom;
}/*
*需要通過Javascript程式碼來做兩件事
*1.button被按下的神話，需要將文字框的資料獲取到，然後傳送給伺服器端，最後接受伺服器端返回的資料，填充我們預留的div中，這樣用就可以看到結果
*2.文字框上，使用者按鍵之後，需要判斷文字框中的內容是否為空，如果不為空，紅色的邊框和背景圖就應該取消，否則保留
* */
/*
*需要在頁面裝載完成時註冊上這些工作
**/
$(document).ready(function(){
//這裡面的內容就是頁面裝載完成後需要執行的程式碼
var userNameNode=$("#userName");
//需要找到button按鈕，註冊事件
$("#verifyButton").click(function(){
//1.獲取文字框的內容
var userName=userNameNode.val();
//2.將這個內容傳送給伺服器端
if(userName==""){
alert("使用者名稱不能為空");
}else{
$.get("http://127.0.0.1:8080/JQuery/UserVerify?userName="+encodeURL(encodeURL)(userName)),null,function(response){
//3.接受伺服器端返回的資料，填充到div中
$("#result").html(response);
});
}
});
//需要找到文字框，註冊事件
userNameNode.keyup(function(){
//獲取當前文字框中的內容
var value=userNameNode.val();
if(value==""){
//讓邊框變成紅色，並且並且帶背景圖
userNameNode.addClass("userText");
}else{
//去掉邊框和背景圖
userNameNode.removeClass("userText");
}
})
})
小例子，小編就演示到這裡，通過這個小例子，我們知道html負責頁面內容，css負責頁面樣式，js負責頁面行為，html中應該有doctype來告知瀏覽器的渲染顯示方式，border屬相可以控制頁面元素的邊框，background-***可以控制背景圖，以及背景圖的位置，重複顯示的方式等等，這些小知識點，我們都可以在這個小例子得到充分的認識，補充一個小的知識點，傳送給伺服器端的資料在js中做連詞encodeURL，然後再伺服器端的程式碼中按UTF-8的方式做一次URLDecode，可以解決中文中的亂碼問題。
小編寄語：這篇部落格，小編主要簡單的介紹了JQuery的一些基礎知識，然後舉了一個簡單的使用者名稱校驗的例子，文章的末尾，小編簡單總結一下jquery的一些特點，Write less，Do More；JQuery is designed 頭change the way that you write js；支援各種主流瀏覽器，包括IE6以上；以強大的css選擇器為基礎，幾乎所有的操作都先使用選擇器查詢DOM物件，然後對其進行各種操作；遮蔽瀏覽器差異，對DOM的操作提供了方便的擴充套件，具有強大的外掛機制。jquery學習，未完待續~~~~~~