JS視頻看完了牛腩老師這部分，還有一部分沒有看完，等看完了再總結一下了。最近的JQuery總結了一下。其中包括幾個JQuery的實例。
初次接觸JQuery，感覺到了JQuery的強大，一個動態的展開摺疊只需要一個函數調用就可以了，JQuery和js相比，個人感覺JQuery集成度比js集成度高，JQuery就是js，是js框架，更能提高效率，減少代碼量，去實現更多微小絢麗多彩的頁面效果。跟着老師敲例子，也僅僅是過了一遍。
實例一：用戶名登陸校驗。
爲了實現用戶名登陸時在文本框中報錯動態效果，我們用到了JQuery。在我們的程序中建立的js文件夾中有兩個js文件，一個是js編寫的JQuery框架,一個是我們自己程序調用的js,很顯然,我們在用瀏覽器調試的時候就會,瀏覽器報錯的時候就會給出相應的提示,並跳轉到js編寫的JQuery框架代碼中。我們再進行檢查。
效果顯示：
html代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Jquery實戰 用戶名校驗</title>
<link href="css/userVerify.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="js/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="js/userVerify.js"></script>
</head>
<body>
請輸入用戶名:<input type="text" id="userName" class="userText"/><input type="button" value="校驗" id="verifyButton" />
<div id="result">
</div>
</body>
</html>
一定要注意js的鏈接，把jquery框架鏈接放到我們用戶自定義的js鏈接的前面。
JQuery代碼：
// JavaScript Document
/*
*需要通過javascript做兩件事情.
*1 button被觸發時,發送給服務器,最後接受服務器返回的數據,填充預留的div中.
*2 文本框是否爲空,如果不爲空,我們就取消紅色的背景圖片,如果爲空我們保留圖片.
*
*需要在頁面裝載完成時註冊上這些工作.
*/
$(document).ready(function(){
//這裏面是頁面裝載之完成後要執行的代碼;
//需要找到button按鈕,註冊事件.
//獲取Button按下的事件,在jquery中我們直接用click事件.
$("#verifyButton").click(function(){
//1 獲取文本框的內容.
var strUserName =$("#userName").val();
//2將用戶名發送給服務器端.
//如果輸入的用戶民爲空.
if(strUserName =="")
{
alert("用戶名不能爲空!");
}
else
{
$.get("http://127.0.0.1:8080/JQuery/UserVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){
//3.接收服務器端返回的數據，填充到div中
$("#result").html(response);
});
}
});
//需要找到文本框,註冊事件.
$("#userName").keyup(function(){
//獲取當前文本框中的內容.
var value=$(this).val();
if(value=="")
{
//讓邊框編程紅色.並且帶背景圖,否則去掉邊框.
$(this).addclass("userText");
}
else
{
//去掉邊框和背景圖.
$(this).removeClass("userText");
}
});
});
CSS代碼：
.userText
{
/*控制文本框的邊框是紅色的實線*/
border: 1px solid red;
/*選擇text userName的背景圖片*/
background-image:url(../images/userVerify.gif);
/*讓圖片在橫向方向上重複*/
background-repeat:repeat-x;
/*讓圖片出現在最下方*/
background-position:bottom;
} 上述的三類文件html負責內容，CSS負責頁面樣式，Javascript負責頁面行爲。文件開頭的DOCTYPE是告訴瀏覽器的渲染方式，紅色的下劃線是文本框的背景圖片，"
"並把背景圖片顯示爲橫向重複顯示，所以出現紅色下劃曲線的效果。JQuery中用$來獲得頁面的指定節點,參數是某種CSS選擇器,$(document).ready(function())方法是定義頁面加載完後需要執行的方法，addClass()removeClass()用來刪除和增加節點。