? ?歇息了好幾天,最終又開始學(xué)習(xí)了.jQuery?

• JQuery is designed to change the way that you write JavaScript.
• The focus of jQuery is "find some elements, do something with them".
• write less,do more。

? ? 它是一個兼容多瀏覽器的javascript框架，兼容CSS3,使用戶能方便地處理HTML,events,制作動畫效果,使用Ajax等.特點(diǎn)是以強(qiáng)大的CSS選擇器為基礎(chǔ),差點(diǎn)兒全部的操作都先使用選擇器查找DOM對象,然后對其進(jìn)行各種操作.

?

? ? 今天實(shí)現(xiàn)的是一個username校驗(yàn)的小樣例,分為server端分頁面端兩部分,在server端,當(dāng)輸入的username已經(jīng)存在時,提示username已存在,否則username可用.重點(diǎn)是client代碼的編寫,對輸入過程中的頁面信息進(jìn)行提示.對了,由于其他js文件使用jQuery寫的,所以要寫引入jQuery文件,就比方是先拿工具(jQuery),再用工具操作(其他js文件)吧,不然程序是執(zhí)行不起來的呦.引入文件如圖一:

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖一

userVarify.js的代碼例如以下:

?

/* *須要通過Javascript代碼來做兩件事 *1.button被按下的時候,獲取文本框中的數(shù)據(jù),發(fā)送給server端,最后接受server返回的數(shù)據(jù),填充到我們預(yù)留的div中 *2.文本框上,用戶按鍵之后,須要推斷文本框中內(nèi)容是否為空,假設(shè)不為空,取消紅色的邊框和背景圖,否則保留 */$(document).ready(function(){//這里面的內(nèi)容就是頁面裝載完畢后須要運(yùn)行的代碼var userNameNode=$("#userName");//須要找到button按鈕,注冊事件$("#varifyButton").click(function(){//獲取文本框的內(nèi)容var userName=userNameNode.val();//將這個內(nèi)容發(fā)送給server端if(userName==""){alert("username不能為空!");}else{$.get("http://192.168.24.118:8080/UserVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){ //3.接收server端返回的數(shù)據(jù)。填充到div中 $("#result").html(response); });} });//須要找到文本框,注冊事件userNameNode.keyup(function(){//獲取當(dāng)前文本框的內(nèi)容var value=userNameNode.val();if (value==""){//讓邊框變紅,帶背景圖userNameNode.addClass("userText");}else{//去掉邊框和背景圖userNameNode.removeClass("userText");}});});

userVarify.css的代碼也是相當(dāng)?shù)暮唵?/span>,僅僅幾句話就實(shí)現(xiàn)了提示線的效果,CSS的強(qiáng)大我們還是慢慢體會吧~~

.userText{/*控制文本框的邊框是紅色的實(shí)線*/border:1px solid red;background-image:url(images/userVerify.gif);background-repeat:repeat-x;background-position:bottom; }
顆粒歸倉:

? ? 小小實(shí)例也涉及到不少技術(shù)呢,小谷童鞋非常認(rèn)真的總結(jié)了一下:

? ? 1.不難發(fā)現(xiàn),HTML是負(fù)責(zé)頁面內(nèi)容的,CSS是負(fù)責(zé)頁面樣式的,而Javascript負(fù)責(zé)頁面行為.

? ? 2.圖一中第一段標(biāo)記部分,指定了瀏覽器在解釋HTML代碼時所採用的渲染規(guī)范,如個元素的顯示位置及大小等.這個渲染規(guī)范由w3c給出,各瀏覽器依據(jù)這個規(guī)范去解釋HTML代碼,終于呈現(xiàn)給大家豐富多彩的頁面效果.但即使在同一個Doctype規(guī)范下,不同的瀏覽器也會採用不同的文本模式對HTML頁面進(jìn)行渲染.文本模式有三種:詭異模式,標(biāo)準(zhǔn)模式和差點(diǎn)兒標(biāo)準(zhǔn)模式.我們能夠通過js獲取document.compatMode的值來獲取當(dāng)前瀏覽器所採用的文本模式,該值一般有兩個,BackCompat(詭異文本模式),CSS1Compat(標(biāo)準(zhǔn)文本模式).

? ? 3.定義div或span節(jié)點(diǎn)用于以后顯示server返回數(shù)據(jù).算是一個小技巧吧,方便我們獲取數(shù)據(jù).

? ? 4.$(document).ready(function(){})定義頁面裝載完畢時須要運(yùn)行的方法.

? ? 5.$()方法獲取頁面指定節(jié)點(diǎn),參數(shù)是某種CSS的選擇器,通過獲取DOM并對其定義事件,運(yùn)行操作或獲取數(shù)據(jù)完畢我們想要實(shí)現(xiàn)的內(nèi)容.

? ? 6.$.get()方法能夠和server端進(jìn)行g(shù)et方式的交互,數(shù)據(jù)返回來時調(diào)用callback方法,該方法會接收到代表server端返回數(shù)據(jù)的一個純文本參數(shù).

? ? 7.我們想讓某個CSS效果可有可無,能夠通過addClass()/removeClass()方法給某個節(jié)點(diǎn)加入或刪除一個class,從而控制CSS對于具有該class的HTML的節(jié)點(diǎn)的效果.

?

? ? 事實(shí)上,做完了這個實(shí)例,小谷童鞋真心認(rèn)為JQuery好簡單啊.

總結(jié)

以上是生活随笔為你收集整理的实战Jquery(一)--username校验的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。