JQuery入門(mén)基礎(chǔ)小實(shí)例(1)

更新時(shí)間：2015年09月17日 14:31:52 作者：yjjm1990

這篇文章主要講述了一個(gè)JQuery入門(mén)基礎(chǔ)小實(shí)例，實(shí)現(xiàn)的過(guò)程效果都很簡(jiǎn)單，特別適合初學(xué)者來(lái)學(xué)習(xí)，感興趣的小伙伴們可以參考一下

先展示一下這個(gè)例子實(shí)現(xiàn)的效果：

頁(yè)面剛剛加載的時(shí)候，顯示如圖所示：

當(dāng)在文本框中輸入數(shù)據(jù)后，文本框的紅色標(biāo)識(shí)消失，如圖所示：

點(diǎn)擊確定按鈕后，會(huì)通過(guò)后臺(tái)來(lái)向頁(yè)面輸出數(shù)據(jù)，如圖所示：

前臺(tái)的代碼如下（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"> 
  請(qǐng)輸入用戶(hù)名：<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; 
}

頁(yè)面的后臺(tái)代碼如下：

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" /> 
//上面這句話(huà)，可以在我們當(dāng)前的JS里顯示智能提示。 
$("document").ready(function () { 
 var userName = $("#userName"); 
 
 $("#verifyButton").click(function () { 
  var value = userName.val(); 
  if (value=="") { 
   alert("請(qǐng)輸入用戶(hù)名！"); 
  } 
  else { 
   //兩次encodeURI解決中文亂碼問(wèn)題 
   $.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(); 
  } 
 }); 
});

特別適合初學(xué)者學(xué)習(xí)的一個(gè)Jquery入門(mén)小實(shí)例，希望大家喜歡，今天開(kāi)始就陸續(xù)為大家整理有關(guān)jquery的知識(shí)點(diǎn)，也希望大家繼續(xù)關(guān)注。

您可能感興趣的文章: