JQuery入门基础小实例(1)

2019-11-20 11:33:19

字体：大中小

来源：转载

供稿：网友

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

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

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

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

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

上一篇：JQuery实现可编辑的表格实例讲解（2）

下一篇：JQuery实现级联下拉框效果实例讲解