JQuery入门基础小实例(1)

先展示一下这个例子实现的效果：

页面刚刚加载的时候，显示如图所示：

当在文本框中输入数据后，文本框的红色标识消失，如图所示：

点击确定按钮后，会通过后台来向页面输出数据，如图所示：

前台的代码如下(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=' http : js/jquery-1。9 .1 .量滴js '/script script src=' http : js/user verify。js/脚本链接href=' CSS/样式表。CSS“rel=”样式表/head body表单id=“表单1”runat=“服务器”请输入用户名：输入类型=' text ' class=' userName ' id=' userName '/输入类型=' button ' id=' verify button '值='确定/div id=' returnVal '/div/form/body/html CSS()。用户名{ border:1px纯红；背景-image:url('./图像/用户验证。gif ')；背景-位置：底部；背景-重复：次重复-x；} 页面的后台代码如下：

使用系统；使用系统。集合。通用；使用系统Linq .使用系统网络.使用系统网络。用户界面使用系统。网络控件；公共部分类_默认：系统网络。ui。页面{受保护的无效页面_加载(对象发送方，事件参数e){字符串userName=Httputity .请求查询字符串[' userName '])；//HttpContext .当前。响应。写入（用户名);如果（用户名！=null){ 0响应。写('您输入的是：' userName)；回应end()；} } } 添加的UserVerify.js文件如下：

///引用路径='jquery-1.9.1.min.js'///上面这句话，可以在我们当前的射流研究…里显示智能提示$("文档")。ready(function(){ var userName=$(' # userName ')；$('#verifyButton ').单击(function(){ var value=username。val()；if (value=='') { alert('请输入用户名!');} else { //两次encodeURI解决中文乱码问题$.get('Default.aspx？userName=' encodeURI(encodeURI(value))，function(response){ $(' # returnVal ').html(响应);});} });用户名。向上键(function(){ var value=username。瓦尔；如果(值！=' '){用户名。移除类()；} else {用户名。add class()；} });});特别适合初学者学习的一个Jquery入门小实例，希望大家喜欢，今天开始就陆续为大家整理有关jquery的知识点，也希望大家继续关注。