JQuery入门基础小实例(1)
更新时间：2015年09月17日 14:31:52 作者：yjjm1990
这篇文章主要讲述了一个JQuery入门基础小实例，实现的过程效果都很简单，特别适合初学者来学习，感兴趣的小伙伴们可以参考一下
先展示一下这个例子实现的效果：
页面刚刚加载的时候，显示如图所示：
当在文本框中输入数据后，文本框的红色标识消失，如图所示：
点击确定按钮后，会通过后台来向页面输出数据，如图所示：
前台的代码如下（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解析XML字符串和XML文件的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
很久没写文章了，这段时间一直在做类似鲜果的一个应用和数据采集，还有就是对企业和个人成长的思考。2010-04-04
本文仅供参考，如有不足或错误，请不吝赐教，这里以一个弹出层的jQuery插件制作实例为基础，进行插件制作的说明。2010-04-04
本文主要给大家介绍的是在jQuery中使用delegate的时候遇到的几个小小的坑，主要是习惯了使用bind,live，一时改不过来的问题，这里记录下来推荐给大家。2015-07-07
本篇文章给大家讲述了用webpack开发jquery插件需要的环境以及配置讲解，有需要的读者们参考下吧。2017-12-12
jQuery.parseJSON(json)将JSON字符串转换成js对象
本节主要介绍了使用jQuery.parseJSON(json)将JSON字符串转换成js对象,需要的朋友可以参考下2014-07-07
本篇文章是关于JQuery 常用方法和事件详细介绍。需要的朋友参考下2013-04-04
下面小编就为大家带来一篇jQuery获取table表中的td标签(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了jquery实现仿JqueryUi可拖动的DIV,实例分析了jquery模拟jqueryUI实现div拖动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
JavaScript的jQuery库中function的存在和参数问题
这篇文章主要介绍了JavaScript的jQuery库中function的存在和参数问题,包括function的参数传递和检测一个jQuery方法是否存在等,需要的朋友可以参考下2015-08-08
最新评论