当前位置：首页 > 资讯 > 技术文档

JQuery入门基础小实例(1)

时间：2021-12-14 05:55 编辑：来源：阅读：
扫一扫，手机访问

摘要：JQuery入门基础小实例(1)

[b]先展示一下这个例子实现的效果：[/b] 页面刚刚加载的时候，显示如图所示： [img]http://files.jb51.net/file_images/article/201509/2015091714195311.png[/img] 当在文本框中输入数据后，文本框的红色标识消失，如图所示： [img]http://files.jb51.net/file_images/article/201509/2015091714195312.png[/img] 点击确定按钮后，会通过后台来向页面输出数据，如图所示： [img]http://files.jb51.net/file_images/article/201509/2015091714195313.png[/img] [b]前台的代码如下（asp.net）：[/b]

<%@ 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>

[b]CSS()[/b]

.userName { 
 border:1px solid red; 
 background-image:url("../images/userVerify.gif"); 
 background-position:bottom; 
 background-repeat:repeat-x; 
}

[b]页面的后台代码如下：[/b]

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(); 
  } 
 
 
 } 
}

[b]添加的UserVerify.js文件如下：[/b]

/// <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的知识点，也希望大家继续关注。

全部评论(0)

上一篇：JQuery-tableDnD 拖拽的基本使用介绍
下一篇：jQuery实现图片向左向右切换效果的简单实例

资讯排行榜
更多>>