實戰Jquery(一)--username校正

標籤：node   pos   方法   邊框   track   addclass   focus   提示   運行   

   歇息了好幾天,最終又開始學習了.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等.特點是以強大的CSS選取器為基礎,差點兒全部的操作都先使用選取器尋找DOM對象,然後對其進行各種操作.

 

    今天實現的是一個username校正的小範例,分為server端分頁面端兩部分,在server端,當輸入的username已經存在時,提示username已存在,否則username可用.重點是client代碼的編寫,對輸入過程中的頁面資訊進行提示.對了,由於其他js檔案使用jQuery寫的,所以要寫引入jQuery檔案,就比方是先拿工具(jQuery),再用工具操作(其他js檔案)吧,不然程式是執行不起來的呦.引入檔案一:

                                                                                                      圖一

userVarify.js的代碼例如以下:

 

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

userVarify.css的代碼也是相當的簡單,僅僅幾句話就實現了提示線的效果,CSS的強大我們還是慢慢體會吧~~

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

顆粒歸倉:

    小小執行個體也涉及到不少技術呢,小穀童鞋非常認真的總結了一下:

    1.不難發現,HTML是負責頁面內容的,CSS是負責頁面樣式的,而Javascript負責頁面行為.

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

    3.定義div或span節點用於以後顯示server返回資料.算是一個小技巧吧,方便我們擷取資料.

    4.$(document).ready(function(){})定義頁面裝載完畢時須要啟動並執行方法.

    5.$()方法擷取頁面指定節點,參數是某種CSS的選取器,通過擷取DOM並對其定義事件,運行操作或擷取資料完畢我們想要實現的內容.

    6.$.get()方法能夠和server端進行get方式的互動,資料返回來時調用callback方法,該方法會接收到代表server端返回資料的一個純文字參數.

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

 

    事實上,做完了這個執行個體,小穀童鞋真心認為JQuery好簡單啊.

實戰Jquery(一)--username校正