先展示一下這個例子實現的效果：
頁面剛剛加載的時候，顯示如圖所示：
當在文本框中輸入數據后，文本框的紅色標識消失，如圖所示：
點擊確定按鈕后，會通過后臺來向頁面輸出數據，如圖所示：
前臺的代碼如下（asp.net）：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/UserVerify.js"></script> <link href="css/StyleSheet.css" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> 請輸入用戶名：<input type="text" class="userName" id="userName" /><input type="button" id="verifyButton" value="確定" /> <div id="returnVal"></div> </form> </body> </html>
CSS()
.userName { border:1px solid red; background-image:url("../images/userVerify.gif"); background-position:bottom; background-repeat:repeat-x; } 頁面的后臺代碼如下：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string userName =HttpUtility.UrlDecode(Request.QueryString["userName"]); //HttpContext.Current.Response.Write(userName); if (userName != null) { Response.Write("您輸入的是："+userName); Response.End(); } } } 添加的UserVerify.js文件如下：
/// <reference path="jquery-1.9.1.min.js" /> //上面這句話，可以在我們當前的JS里顯示智能提示。 $("document").ready(function () { var userName = $("#userName"); $("#verifyButton").click(function () { var value = userName.val(); if (value=="") { alert("請輸入用戶名！"); } else { //兩次encodeURI解決中文亂碼問題 $.get("Default.aspx?userName="+ encodeURI(encodeURI(value)), function (response) { $("#returnVal").html(response); }); } }); userName.keyup(function () { var value = userName.val; if (value != "") { userName.removeClass(); } else { userName.addClass(); } }); }); 特別適合初學者學習的一個Jquery入門小實例，希望大家喜歡，今天開始就陸續為大家整理有關jquery的知識點，也希望大家繼續關注。
新聞熱點
疑難解答
