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 三种不同位置代码的写法
Oct 25 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
轮播图组件js代码
Aug 08 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
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随机生成唯一HASH值自定义函数
2015/04/20 PHP
PHP类的特性实例分析
2016/09/28 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
2016/12/27 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
python共享引用(多个变量引用)示例代码
2013/12/04 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
python类的实例化问题解决
2019/08/31 Python
python操作gitlab API过程解析
2019/12/27 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
年终自我鉴定
2013/10/09 职场文书
机电一体化职业规划书
2014/01/07 职场文书
关于环保的建议书
2014/05/12 职场文书
病假证明模板
2015/06/19 职场文书
导游词之无锡唐城
2019/12/12 职场文书
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js