Ein kleines einfaches Beispiel für den Einstieg in JQuery (1)

Ein kleines einfaches Beispiel für den Einstieg in JQuery (1)_jquery

WBOY

Freigeben： 2016-05-16 15:38:51

Original

1035 Leute haben es durchsucht

Zeigen Sie zunächst die durch dieses Beispiel erzielte Wirkung:

Wenn die Seite gerade geladen wird, wird sie wie im Bild angezeigt:

Nachdem Sie Daten in das Textfeld eingegeben haben, verschwindet die rote Markierung des Textfelds, wie in der Abbildung gezeigt:

Nachdem Sie auf die Schaltfläche „OK“ geklickt haben, werden die Daten über den Hintergrund auf der Seite ausgegeben, wie in der Abbildung dargestellt:

Der Front-End-Code lautet wie folgt (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>

Nach dem Login kopieren

CSS()

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

Nach dem Login kopieren

Der Hintergrundcode der Seite

lautet wie folgt:

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

Nach dem Login kopieren

Die hinzugefügte UserVerify.js-Datei lautet wie folgt:

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

Nach dem Login kopieren

Ein kleines Einführungsbeispiel für JQuery, das sich besonders für Anfänger eignet. Ich hoffe, dass es Ihnen gefällt. Ab heute werde ich die Wissenspunkte zu JQuery für Sie klären.