本文實例講述了jQuery簡單入門示例之用戶校驗。分享給大家供大家參考，具體如下：
jQuery在小編的世界中，也就是JavaScript和查詢（Query），即是輔助JavaScript開發的庫，百度百科對JQuery的介紹比較詳細，小伙伴可以東東自己可耐的小爪子，上網進行搜索，說不定，有意外驚喜哦，今天這篇文章，小編簡單的介紹一下JQuery的一些基本知識，然后小編在集合實例，講解一下在具體的應用過程中，我們的JQuery又是如何在她的舞臺熠熠生輝......
通過JQuery的學習，我們可以學到哪些知識nie，比如我們會學會JQuery的API函數的使用，以及簡單的實例的實現方法還有一些html、css、js的小知識，作為明星級的框架JQuery，都有誰在使用nie，比如我們熟悉的Goole、IBM、ORACLE、DELL、土豆等等，都在使用JQuery做前端的開發，我們的JQuery是不是很火爆。
介紹完了JQuery的一些基本知識以后，接下來，小編簡單來編寫一個實例---用戶名校驗，首先，我們來分析一下這個小例子的代碼思路，首先服務器端思路分析，對指定用戶名返回用戶名已經存在，對其他用戶名，返回用戶名可以使用；輸入：用戶名；輸出：提示信息，接著我們來編寫代碼，編寫代碼之前，小編簡單對這個小例子的目錄進行一個簡單的描述：我們需要一個html的文件，我們取名叫做UserVerify，除此之外，我們需要寫css和js的文件，現在比較流行。遵循web標準來看，我們需要把css文件和js文件單獨放置，便于管理，我們需要分別建立css文件和js文件，除此之外，應用當中可能要用到圖片，所以我們單獨建立一個images文件，接著，我們開始編寫代碼：
有一個頁面文件，先來編輯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/userVerify.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>
接著，在css文件目錄下建立一個css文件，編寫css的代碼：
.userText { /*控制文本框的邊框是紅色的實線*/ border: 1px solid red; background-image: url(../images/userVerify.gif); background-repeat: repeat-x; background-position: bottom;}相應的，在js中我們也要建立兩個文件，一個jquery一個userVerify，鑒于jquery的代碼較多，所以小編已經上傳相關資源，有需要的小伙伴可以到該鏈接下載，接著，我們來編寫userVerify的代碼，來給整理頁面添加行為能力：
/* * 需要通過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=" + encodeURI(encodeURI(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 form操作技巧匯總》、《jQuery常用插件及用法總結》、《jQuery操作json數據技巧匯總》、《jQuery擴展技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
