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 捕获窗口关闭事件
Jul 26 Javascript
JavaScript学习笔记(十七)js 优化
Feb 04 Javascript
JS比较2个日期间隔的示例代码
Apr 15 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 Javascript
jQuery+ajax实现文件上传功能
Dec 22 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数组的使用方法小结
2010/09/23 PHP
Laravel 5 学习笔记
2015/03/06 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
2019/07/03 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
vue实现防抖的实例代码
2021/01/11 Vue.js
python异步任务队列示例
2014/04/01 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
Python实现的端口扫描功能示例
2018/04/08 Python
Python应用库大全总结
2018/05/30 Python
Python之list对应元素求和的方法
2018/06/28 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
python数据类型强制转换实例详解
2020/06/22 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
请介绍一下Ant
2016/07/22 面试题
法律专业自我鉴定
2013/10/03 职场文书
学生请假条格式
2014/04/11 职场文书
信息员培训方案
2014/06/12 职场文书
企业整改报告范文
2014/11/08 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
慰问信格式
2015/02/14 职场文书
学校推普周活动总结
2015/05/07 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js