niunan
- 浏览: 701315 次
- 性别:
- 来自: 南宁
-
文章分类
最新评论
-
如果我爱上你的笑容：
牛腩老师讲的课很棒 目前新闻发系统学习中 `(*∩_∩*)′
64位win8.1系统安装intelhaxm -
k04110411：
jhlovett 写道牛哥,想问下 public void P ...
ASP.NET通过HTML的上传文件标签来上传文件 -
liuzhijie3：
我也留个脚印用到了,讲的不错
.NET中获取字符串的MD5码 -
han_yankun2009：
,楠老师不错呀
在一堆数中查询相加得某个数的组合 -
allstara609：
请问牛老师，datalist中如何去掉数字中多余的0？
去掉数字中多余的0(ASP.NET)
从ITCAST上看到出了个jQuery实战的视频(http://www.itcast.net/portal/courses/unit/198),目前不用钱,呵呵,昨晚看了一下,觉得很不错,遂记录下来,以便日后复习!!!
JQuery实战课程是一个系列课，采用每节课动手实战一个实例效果的方式来介绍如何使用JQuery快速开发AJAX前端应用，并结合实例介绍一些前端开发中HTML，CSS，Javascript的知识以及跨浏览器差异问题的解决方法。
第一节课除了讲了一些环境的安装及参考资料,还讲了一个使用jQuery的AJAX功能来进行进一简单的用户验证,视频里用的是JAVA,于是我把他改成了.NET版的.
因为这是一系列的课程,所以我在VS中建立了一个jQueryTest的工程,来专门做这些实例,为了分类,我专门在工程中建立了css,js,handler,images文件夹,用于存放不同的文件,在这里我的服务器端全都使用一般处理程序,存在于handler文件夹下,整个源码之后我会随之传上来.
实例中还加了样子的变化,同样也是用jQuery来实现样子的切换的,代码如下:
首先是HTML页面文件的代码,很简单,两个文本框一个按钮,在这里我全都使用ID来命名:
一开始文本框里是没有值的,所以拥有notValue样式,样式表文件userlogin.css的源码如下:
接下来就是编写JS文件,下面是userlogin.js的源码:
以上的JS代码没什么好说的,只要花点时间查查jQuery的API文档就懂,我会把需要用于的jQuery的参数资料放在附件里,包括jQuery中文API,jQuery的1.2.6版本, CSS参考手册,DHTML参考手册, 需要注意的是:打开下载好的CHM文件的时候,我的XPSP3会弹出一个"打开文件-安全警告"的对话框,我要把对话框里的"打开此文件前总是询问"的勾勾取消掉,否则的话打开后是看不到任何内容的!
以上就是第一课讲的小实例,今晚下班回去继续看第二课,嘿嘿!!!
用你的代码中文就不会乱码 我自己写的就会 都是utf-8 的编码 encodeURI(encodeURI($("#userName").val())); 郁闷了。
找到问题所在了 粗心造成
错误代码：
$.get("handler/test.ashx?username ="+userName+ "&userpassword="+password,null,function(data){
$("#mes").text(data);
});
正确
$.get("handler/test.ashx?username="+userName+ "&userpassword="+password,null,function(data){
$("#mes").text(data);
});
在ashx?username=
我写成了ashx?username =
哎！花了我一下午时间。
JQuery实战课程是一个系列课，采用每节课动手实战一个实例效果的方式来介绍如何使用JQuery快速开发AJAX前端应用，并结合实例介绍一些前端开发中HTML，CSS，Javascript的知识以及跨浏览器差异问题的解决方法。
第一节课除了讲了一些环境的安装及参考资料,还讲了一个使用jQuery的AJAX功能来进行进一简单的用户验证,视频里用的是JAVA,于是我把他改成了.NET版的.
因为这是一系列的课程,所以我在VS中建立了一个jQueryTest的工程,来专门做这些实例,为了分类,我专门在工程中建立了css,js,handler,images文件夹,用于存放不同的文件,在这里我的服务器端全都使用一般处理程序,存在于handler文件夹下,整个源码之后我会随之传上来.
实例中还加了样子的变化,同样也是用jQuery来实现样子的切换的,代码如下:
首先是HTML页面文件的代码,很简单,两个文本框一个按钮,在这里我全都使用ID来命名:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="userlogin.aspx.cs" Inherits="userlogin" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AJAX用户登陆</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/userlogin.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/userlogin.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
请输入用户名: <input type="text" id="userName" class="notValue" /><br />
请输入密 码: <input type="password" id="userPassword" class="notValue" /><br />
<input type="button" value="登陆" id="btnLogin" />
<div id="mes"></div>
</form>
</body>
</html>
一开始文本框里是没有值的,所以拥有notValue样式,样式表文件userlogin.css的源码如下:
.hasValue{ /* 文本框有值的时候的样式 */
border: 1px solid #9EC9FF;
}
.notValue{ /* 文本框无值的时候的样式 */
border: 1px solid #f00;
background: url(../images/userVerify.gif) repeat-x bottom;
}
接下来就是编写JS文件,下面是userlogin.js的源码:
$(document).ready(function() { // 页面加载后就执行此函数,相当于以前在body标签上加上onload=....
// 注册登陆按钮点击事件
$("#btnLogin").click(function() {
// 获取文本框内容并二次转码,防止中文乱码
var userName = encodeURI(encodeURI($("#userName").val()));
var userPassword = encodeURI(encodeURI($("#userPassword").val()));
// 判断是否文本框是否有内容
if (userName == "") {
alert("请输入用户名!");
return;
}
if (userPassword == "") {
alert("请输入密码!");
return;
}
// AJAX发送数据
$.get("handler/userlogin.ashx?username="+userName+"&userpassword="+userPassword, null, function(data) {
$("#mes").text(data);
});
});
// 注册文本框的键盘按键事件
$("#userName").keyup(function() {
// alert($("#userName").val());
if ($("#userName").val() != "") {
// 如果文本框里的内容不为空,则切换样式到hasValue
$("#userName").removeClass("notValue").addClass("hasValue");
} else {
$("#userName").removeClass("hasValue").addClass("notValue");
}
});
$("#userPassword").keyup(function() {
if ($("#userPassword").val() != "" && $("#userPassword").val() != null) {
// 如果文本框里的内容不为空,则切换样式到hasValue
$("#userPassword").removeClass("notValue").addClass("hasValue");
} else {
$("#userPassword").removeClass("hasValue").addClass("notValue");
}
});
});
以上的JS代码没什么好说的,只要花点时间查查jQuery的API文档就懂,我会把需要用于的jQuery的参数资料放在附件里,包括jQuery中文API,jQuery的1.2.6版本, CSS参考手册,DHTML参考手册, 需要注意的是:打开下载好的CHM文件的时候,我的XPSP3会弹出一个"打开文件-安全警告"的对话框,我要把对话框里的"打开此文件前总是询问"的勾勾取消掉,否则的话打开后是看不到任何内容的!
以上就是第一课讲的小实例,今晚下班回去继续看第二课,嘿嘿!!!
- 实例源码_用VS打开网站即可_.rar (21.7 KB)
- 下载次数: 156
- jQuery参考资料.rar (6 MB)
- 下载次数: 753
4
顶
顶
0
踩
踩
分享到：
评论
3 楼
greatwqs
2010-03-29
找了好久的文档,居然在你代码里面全部找到,谢谢你..
2 楼
沉子风
2008-12-18
沉子风 写道
用你的代码中文就不会乱码 我自己写的就会 都是utf-8 的编码 encodeURI(encodeURI($("#userName").val())); 郁闷了。
找到问题所在了 粗心造成
错误代码：
$.get("handler/test.ashx?username ="+userName+ "&userpassword="+password,null,function(data){
$("#mes").text(data);
});
正确
$.get("handler/test.ashx?username="+userName+ "&userpassword="+password,null,function(data){
$("#mes").text(data);
});
在ashx?username=
我写成了ashx?username =
哎！花了我一下午时间。
1 楼
沉子风
2008-12-18
用你的代码中文就不会乱码
我自己写的就会 都是utf-8 的编码
encodeURI(encodeURI($("#userName").val()));
郁闷了。
我自己写的就会 都是utf-8 的编码
encodeURI(encodeURI($("#userName").val()));
郁闷了。
发表评论
-
jquery制作select列表双向选择
2010-06-15 12:43 1860做项目的时候要用到的一个小功能，以前做过的，用的纯JS ... -
锋利的jQuery实例－图片滚动
2009-11-15 16:02 2749效果看图： 点击按钮后的动画思路倒很容易弄懂，主要就是开始的 ... -
jquery访中关村商城排行榜特效
2009-08-08 11:04 1716目前公司的网站上要用到的效果，其实也算不上什么特效，无非 ... -
框架frame自适应内容高度
2009-07-31 16:17 2980让框架frame自动适应内容的高度 在每个框架子页面中加入如下 ... -
jQuery插件—获取URL参数
2009-06-20 12:44 3976做的项目中需要用到通过JS获取GET参数，上网找了一下，找到如 ... -
中关村网站产品参数页的参数纠错的制作
2009-06-16 21:20 996今天突然想在正在做的网站中加上个像中关村一样的参数纠错的功能， ... -
鼠标移到某一元素则在元素旁边出现弹出框
2009-05-12 20:54 1860类似于当当网的发货以后的那个发货反馈，鼠标移上去后自动会 ... -
JQuery控制图片无缝滚动
2009-05-10 21:05 6399经常有人问怎么在HTML上制作图片的无缝滚动，我自己在一些项目 ... -
jquery xpath详解
2009-02-17 11:27 3143比如下面html代码 <ul> <li cl ... -
jQuery中使用插件解决ie6下selectfqg元素设置z-index无效的问题！
2009-02-11 11:05 3981没用插件时的效果如下，这是在IE6下预览的结果，层 ... -
jQuery控制元素间隔滚动!
2009-01-12 12:14 1861只记录了本人需要用到的,转载自http://www.yaosa ... -
jquery中筛选表格的特定行数后进行操作
2009-01-06 11:55 3034项目中有个地方，一个页面显示两种商品，显示商品参数的时 ... -
jQuery插件_jcarousel(用于图片滚动)
2008-12-26 14:17 7603效果图如下: 目前制作的项目中用到,先记下来,以备不时之需 ... -
制作多级滑动tab菜单
2008-11-26 11:47 4395效果演示网站:http://kr.shopping.yahoo ... -
jQuery实战(四) - tab菜单
2008-11-19 13:55 2307很多天前就已经看完jQuery实战第四讲了,不过一直没有时间做 ... -
jQuery实战（三）
2008-11-16 15:37 2037刚刚看完第三讲，是用jQuery制作下拉菜单，自己也试着做了一 ... -
只能输入数字的文本框(兼容ie6,7,8,opera,ff,chrome)
2008-11-16 10:36 5632星期天上班真不知道干什么事哦，只好随便看看之前下载的电子书了， ... -
jQuery实战(二)
2008-11-06 11:06 2988很久不上来写文章了,嘿嘿,最近在做一个简单的新闻发布系 ... -
制作符合WEB标准的QQ弹出消息(jQuery)
2008-10-29 11:49 4874这里所说的弹出消息指的是在网页右下角升起又下去的那种框框,在这 ... -
符合WEB标准的浮动层（jQuery版）！
2008-10-26 15:10 11288网上有好多的浮动层之类的代码，所谓的浮动层，就是层里的 ...
相关推荐
JavaScript和jquery实战手册
JavaScript和jQuery实战手册原书第2版.mobi，完美版本，亚马逊上自费下载的电子版。
jQuery实战 源代码 JQuery实战 源代码 JQuery
《JavaScript和jQuery实战手册 原书第3版》
教程名称：王兴魁jQuery实战系列视频课程目录：【】CSDN ITCAST王兴魁jQuery参考代码及PDF课件【】JQuery实战第一讲：概述、环境准备及入门实例【】JQuery实战第三讲：横向纵向菜单【】JQuery实战第二讲：可以编辑的...
JQuery实战第一讲：概述、环境准备及入门实例 JQuery实战第二讲：可以编辑的表格 JQuery实战第三讲：横向纵向菜单 JQuery实战第四讲：标签页效果 JQuery实战第五讲：级联下拉框效果 JQuery实战第六讲：窗口效果
jQuery实战中文版.pdf 个人收集电子书，仅用学习使用，不可用于商业用途，如有版权问题，请联系删除！
JQuery实战（中文版）+源码JQuery实战（中文版）+源码JQuery实战（中文版）+源码JQuery实战（中文版）+源码JQuery实战（中文版）+源码JQuery实战（中文版）+源码JQuery实战（中文版）+源码JQuery实战（中文版）+源码...
《 jQuery实战.pdf》高清下载 《 jQuery实战.pdf》高清下载 《 jQuery实战.pdf》高清下载 《 jQuery实战.pdf》高清下载
jQuery实战(jQuery in Action) 中文版 PDF 人民邮电出版社 Part 4 of 6
jQuery实战中文版
jQuery实战-权威经典书籍-前端开发人员必看的书籍。
jquery实战电子书！！！！ jquery实战电子书！！！！
[jQuery实战第二版].pdf,对开发者学习Jquery带来大量的实例，该书对于开发者学习Jquery提供了很好的帮助。
有了jQuery和这《jQuery实战》，你不需要再费心劳力地纠缠于各种高深复杂的javascript技巧，只需要使用层迭样式表、XHTML以及普通的javascript知识，就能直接操作页面元素，实现更快速更高效的Web开发。
JQuery实战课程是一个系列课，采用每节课动手实战一个实例效果的方式来介绍如何使用JQuery快速开发AJAX前端应用， 并结合实例介绍一些前端开发中HTML，CSS，Javascript的知识以及跨浏览器差异问题的解决方法。
《jQuery实战》全面介绍jQuery知识，展示如何遍历HTML文档、处理事件、执行动画以及给网页添加Ajax。书中紧紧地围绕“用实际的示例来解释每一个新概念”这一宗旨，生动描述了...《jQuery实战》适合各层次Web开发人员。
《JavaScript和jQuery实战手册》