JQuery를 시작하기 위한 간단한 기본 예(1)_jquery
- WBOY원래의
- 2016-05-16 15:38:511013검색
먼저 다음 예를 통해 얻은 효과를 보여주세요.
페이지가 방금 로드되면 그림과 같이 표시됩니다.
텍스트 상자에 데이터를 입력하면 그림과 같이 텍스트 상자의 빨간색 표시가 사라집니다.
확인 버튼을 클릭하면 그림과 같이 배경을 통해 해당 페이지에 데이터가 출력됩니다.
프런트엔드 코드는 다음과 같습니다(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에 대한 지식 포인트를 정리해 보겠습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.