jQuery簡潔入門示例之用戶校驗(yàn)demo示例_

1、jQuery簡潔入門示例之用戶校驗(yàn)demo示例_ 本文實(shí)例講解并描述了jQuery簡潔入門示例之用戶校驗(yàn)。分享給大家供大家參考，具體如下： jQuery在我的世界中，也就是JavaScript和查詢（Query），即是幫助JavaScript開發(fā)的庫，百度百科對(duì)JQuery的介紹比較具體，小伙伴可以東東自己可耐的小爪子，上網(wǎng)進(jìn)行搜索，說不定，有意外驚喜哦，今日這篇文章，我簡潔的介紹一下JQuery的一些基本學(xué)問，然后我在集合實(shí)例，講解一下在具體的應(yīng)用過程中，我們的JQuery又是如何在她的舞臺(tái)熠熠生輝. 通過JQuery的學(xué)習(xí)，我們可以學(xué)到哪些學(xué)問nie，比如我們會(huì)學(xué)會(huì)JQuery的API函數(shù)

2、的用法，以及簡潔的實(shí)例的實(shí)現(xiàn)方法還有一些html、css、js的小學(xué)問，作為明星級(jí)的框架JQuery，都有誰在用法nie，比如我們熟識(shí)的Goole、IBM、ORACLE、DELL、土豆等等，都在用法JQuery做前端的開發(fā)，我們的JQuery是不是很火爆。 介紹完了JQuery的一些基本學(xué)問以后，接下來，我簡潔來編寫一個(gè)實(shí)例-用戶名校驗(yàn)，首先，我們來分析一下這個(gè)小例子的代碼思路，首先服務(wù)器端思路分析，對(duì)指定用戶名返回用戶名已經(jīng)存在，對(duì)其他用戶名，返回用戶名可以用法；輸入：用戶名；輸出：提示信息，接著我們來編寫代碼，編寫代碼之前，我簡潔對(duì)這個(gè)小例子的名目進(jìn)行一個(gè)簡潔的描述：我們需要一個(gè)html的

3、文件，我們?nèi)∶凶鯱serVerify，除此之外，我們需要寫css和js的文件，現(xiàn)在比較流行。遵循web標(biāo)準(zhǔn)來看，我們需要把css文件和js文件單獨(dú)放置，便于管理，我們需要分別建立css文件和js文件，除此之外，應(yīng)用當(dāng)中可能要用到圖片，所以我們單獨(dú)建立一個(gè)images文件，接著，我們開頭編寫代碼： 有一個(gè)頁面文件，先來編輯html，保證內(nèi)面內(nèi)容通過html標(biāo)簽表示出來，代碼如下： !DOCTYPE html PUBLIC -/W3C/DTD HTML 4.01 Transitional/EN l4/loose.dtd html head titleJQuery實(shí)戰(zhàn)1-用戶名校驗(yàn)/title m

4、eta 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 請(qǐng)輸入用戶名:input type=text id=userName class=userText/ input typ

5、e=button value=校驗(yàn) id=verifyButton / div id=result/div /body /html 接著，在css文件名目下建立一個(gè)css文件，編寫css的代碼： .userText /*掌握文本框的邊框是紅色的實(shí)線*/ border: 1px solid red; background-image: url(./images/userVerify.gif); background-repeat: repeat-x; background-position: bottom; 相應(yīng)的，在js中我們也要建立兩個(gè)文件，一個(gè)jquery一個(gè)userVerify，鑒于jq

6、uery的代碼較多，所以我已經(jīng)上傳相關(guān)資源，有需要的小伙伴可以到該鏈接下載，接著，我們來編寫userVerify的代碼，來給整理頁面添加行為力量： /* * 需要通過Javascript代碼來做兩件事情 * 1.button被按下的時(shí)候，需要將文本框中的數(shù)據(jù)獵取到，然后發(fā)送給服務(wù)器端，最終接受服務(wù)器返回的數(shù)據(jù)，填充到我們預(yù)留的div中，這樣用戶就可以看到結(jié)果 * 2.文本框上，用戶按鍵之后，需要推斷文本框中的內(nèi)容是否為空，假如不為空，紅色的邊框和背景圖就應(yīng)當(dāng)取消，否則保留 * */ /* * 需要在頁面裝載完成是注冊(cè)上這些工作 * */ $(document).ready(function()

7、 /這里面的內(nèi)容就是頁面裝載完成后需要執(zhí)行的代碼 var userNameNode = $(#userName); /需要找到button按扭，注冊(cè)大事 $(#verifyButton).click(function() /1.獵取文本框的內(nèi)容 var userName = userNameNode.val(); /2.將這個(gè)內(nèi)容發(fā)送給服務(wù)器端 if (userName = ) alert(用戶名不能為空); else $.get(l(response); ); ); /需要找到文本框，注冊(cè)大事 userNameNode.keyup(function() /獵取當(dāng)前文本框中的內(nèi)容 var va

8、lue = userNameNode.val(); if (value = ) /讓邊框變成紅色，并且?guī)П尘皥D userNameNode.addClass(userText); else /去掉邊框和背景圖 userNameNode.removeClass(userText); ); ); 我們來看一下運(yùn)行效果： 小例子，我就演示到這里，通過這個(gè)小例子，我們知道html負(fù)責(zé)頁面內(nèi)容，css負(fù)責(zé)頁面樣式，js負(fù)責(zé)頁面行為，html中應(yīng)當(dāng)有doctype來告知掃瞄器的渲染顯示方式，border屬相可以掌握頁面元素的邊框，background-*可以掌握背景圖，以及背景圖的位置，重復(fù)顯示的方式等等，這些小學(xué)問點(diǎn)，我們都可