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初学者应注意的七个细节小结
Jan 30 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 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 strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
Js sort排序使用方法
2011/10/17 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
Python解惑之True和False详解
2017/04/24 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
Sanic框架配置操作分析
2018/07/17 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
python几种常用功能实现代码实例
2019/12/25 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
学习python需要有编程基础吗
2020/06/02 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
施工人员岗位职责
2013/12/12 职场文书
机关门卫制度
2014/02/01 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
一份文言文检讨书
2014/09/13 职场文书
毕业论文致谢信
2015/05/14 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python