JQuery를 시작하기 위한 간단한 기본 예(1)

JQuery를 시작하기 위한 간단한 기본 예(1)_jquery

WBOY

풀어 주다： 2016-05-16 15:38:51

원래의

1041명이 탐색했습니다.

먼저 다음 예를 통해 얻은 효과를 보여주세요.

페이지가 방금 로드되면 그림과 같이 표시됩니다.

텍스트 상자에 데이터를 입력하면 그림과 같이 텍스트 상자의 빨간색 표시가 사라집니다.

확인 버튼을 클릭하면 그림과 같이 배경을 통해 해당 페이지에 데이터가 출력됩니다.

프런트엔드 코드는 다음과 같습니다(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&#63;userName="+ encodeURI(encodeURI(value)), function (response) { 
    $("#returnVal").html(response); 
   }); 
  } 
 }); 
 
 userName.keyup(function () { 
  var value = userName.val; 
  if (value != "") { 
   userName.removeClass(); 
  } 
  else { 
   userName.addClass(); 
  } 
 }); 
});

로그인 후 복사

특히 초보자가 배우기에 적합한 작은 입문 예제입니다. 오늘부터 Jquery에 대한 지식 포인트를 정리해 보겠습니다.