jQuery实战(一)

niunan

浏览: 719531 次
性别:
来自: 南宁

最近访客更多访客>>

u012363178

abc123

Gootearsine

草料场

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jQuery Ajax CSS JavaScript 应用服务器

    从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来命名:

<%@ 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
踩

分享到：

鼠标点击一幅矩形图片,以矩形对角线为界算 ... | 前天买了10块的彩票,今天对奖发现又中了5 ...

2008-10-27 12:02
浏览 5127
评论(3)
分类:Web前端
查看更多

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()));
郁闷了。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论