? ?歇息了好幾天,最終又開始學習了.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校验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。