JQuery入门基础小实例(1)

前端技术 2023/09/03 JavaScript

先展示一下这个例子实现的效果：

页面刚刚加载的时候，显示如图所示：

当在文本框中输入数据后，文本框的红色标识消失，如图所示：

点击确定按钮后，会通过后台来向页面输出数据，如图所示：

前台的代码如下（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的知识点，也希望大家继续关注。

本文地址：https://www.stayed.cn/item/8052

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案