JQuery入门基础小实例(1)


Posted in Javascript onSeptember 17, 2015

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

页面刚刚加载的时候,显示如图所示:

JQuery入门基础小实例(1)

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

JQuery入门基础小实例(1)

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

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="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的知识点,也希望大家继续关注。

Javascript 相关文章推荐
javascript Array数组对象的扩展函数代码
May 22 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
jQuery网页右侧广告跟随滚动代码分享
Apr 20 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
JS简单实现禁止访问某个页面的方法
Sep 13 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
jquery实现手风琴案例
May 04 jQuery
JQuery实现级联下拉框效果实例讲解
Sep 17 #Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 #Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 #Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 #Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 #Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 #Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 #Javascript
You might like
PHP时间和日期函数详解
2015/05/08 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
windows下python连接oracle数据库
2017/06/07 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
元旦联欢会主持词
2014/03/26 职场文书
企业口号大全
2014/06/12 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
婚宴领导致辞
2015/07/28 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫