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

页面刚刚加载的时候,显示如图所示:

JQuery入门基础小实例(1)

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

JQuery入门基础小实例(1)

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

JQuery入门基础小实例(1)

前台的代码如下(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="/UploadFiles/2021-04-02/jquery-1.9.1.min.js">

 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"+ encodeURI(encodeURI(value)), function (response) { 
    $("#returnVal").html(response); 
   }); 
  } 
 }); 
 
 userName.keyup(function () { 
  var value = userName.val; 
  if (value != "") { 
   userName.removeClass(); 
  } 
  else { 
   userName.addClass(); 
  } 
 }); 
}); 

特别适合初学者学习的一个Jquery入门小实例,希望大家喜欢,今天开始就陆续为大家整理有关jquery的知识点,也希望大家继续关注。

标签:
JQuery入门基础,JQuery入门基础教程,JQuery入门教程,JQuery入门,JQuery快速入门

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“JQuery入门基础小实例(1)”

暂无“JQuery入门基础小实例(1)”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。