Heim > Artikel > Web-Frontend > Ein kleines einfaches Beispiel für den Einstieg in JQuery (1)_jquery

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

WBOYOriginal: 2016-05-16 15:38:51981Durchsuche

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>

CSS()

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

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

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

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jquery implementiert den elastischen Popup-Menüeffekt, der auf der linken Seite_jquery ausgeblendet istNächster Artikel：jquery implementiert den elastischen Popup-Menüeffekt, der auf der linken Seite_jquery ausgeblendet ist

In Verbindung stehende Artikel

Mehr sehen