實戰Jquery(一)--username校驗
歇息了好幾天,最終又開始學習了.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選擇器為基礎,差點兒全部的操作都先使用選擇器查找
今天實現的是一個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校驗