因为目前的项目会用到jQuery,所以要先有个尝试，网上search，关于jQuery的东西太多了，已经看到了Jquery的240个插件，那些插件一个demo保准每个人都会用了，但关于jQuery底层的东西不是一个demo就能说明的问题，今天看了看jQuery的api,做了两个demo,感觉真的很爽。第一个demo是jQuery.ajax()的一个用户注册是用户名存在与否的一个应用，第二个demo是jQuery 效果的一些小演示。
一、jQuery实现用户注册检验。
这样的需求或者说功能相信很多人都有见识了，今天看了jQuery的api，实现起来会比之前的asp.net ajax简单多，直接调用jQuery.ajax()方法就搞定。还是先说说本demo结果吧，两个.aspx页面，一个提供注册用，我把它叫Default.aspx,一个检验用户名存在与否用，Check.aspx,一个Users.xml文件，存放用户信息，jQuery库就不说了,我现在的版本是2.6，这肯定是少不了的！
在default.aspx文件中没有一行代码，前台就只有两个输入框，一个是用户名，一个是用户密码，一个提交按钮，html内容如下：
Code
1
<body>
2 <form id="form1" runat="server">
3 <div>
4 userid: <asp:TextBox ID="userid" runat="server"></asp:TextBox><br />
5 password:<asp:TextBox ID="pass" runat="server" TextMode="Password"></asp:TextBox><br />
6 <asp:Button ID="btnReg" Text="Reg" runat="server" /> <asp:Label ID="RegInfo" runat="server" BackColor="Red"></asp:Label>
7 </div>
8 </form>
9</body>这没什么好说的了，重要角色就是js了:
Code
1<script type="text/javascript" src="jquery-1.2.6.js"></script>
2 <script type="text/javascript">
3
$(document).ready(function(){
4 $("#btnReg").click(function(){
5
var userid=$("#userid").val(); //$("#userid").text()是不行的，因为text()是静态文本，不提供输入的;
6 var password=$("#pass").val();
7 $("#RegInfo").text("");
8 if(userid=="")
9 {
10 $("#RegInfo").text("请输入用户名");
11 return;
12
}
13 if(password=="")
14 {
15 $("#RegInfo").text("请输入用户密码");
16 return;
17 }
18 $.ajax({
19 type:"GET",
20 url:"Check.aspx?userid="+userid+"&password="+password,
21 cache:true,
22 async: false,
23 success:function(result){
24 $("#RegInfo").html(result); //也可以是$("#RegInfo").text(result)，但最好不要这个，原因可以查api
25 }
26 });
27 });
28 });
29
</script>
xml文件就存放用户名和密码，结构就这样了：
Code
1<?xml version="1.0" encoding="utf-8" ?>
2<user>
3 <userinfo>
4 <userid>medal</userid>
5 <password>123456</password>
6 </userinfo>
7 <userinfo>
8 <userid>tyh</userid>
9 <password>19841002</password>
10 </userinfo>
11</user>
check.asp文件前台是不需要任何html元素的，只要代码里读取xml文件内容和传过来的用户信息校验下，写出相应的校验结果就行了。代码如下：
Code
1protected void Page_Load(object sender, EventArgs e)
2 {
3 if (!IsPostBack)
4 {
5 string userid = "";
6 string password = "";
7 string LoginUserid = "";
8 string LoginPassword = "";
9 LoginUserid = Request.Params["userid"].ToString().Trim();
10 LoginPassword = Request.Params["password"].ToString().Trim();
11 bool isExist = false;
12 XmlDocument xmldoc = new XmlDocument();
13 xmldoc.Load(Server.MapPath("Users.xml"));
14 XmlNodeList nodelist = xmldoc.SelectSingleNode("user").ChildNodes;
15 foreach (XmlNode xn in nodelist)
16 {
17 if (xn.Name == "userinfo")
18 {
19 foreach (XmlNode cxn in xn)
20 {
21 if (cxn.Name == "userid")
22 {
23 userid = cxn.InnerText;
24 }
25 if (cxn.Name == "password")
26 {
27 password = cxn.InnerText;
28 }
29 if (userid == LoginUserid)
30 {
31 isExist = true;
32 }
33 }
34 }
35 }
36 if (isExist == false)
37 {
38 Response.Write("可以注册！");
39 }
40 else
41 {
42 Response.Write("该用户名已注册！");
43 }
44 }
45 }
二jQuery 效果
效果有很多现成的方法，有基本效果，滑动效果，弹入弹出效果，自定义效果，这个demo都是用了写现成的方法，show(speed,callback)显示隐藏的匹配元素，hide(speed,callback)隐藏显示的元
素，多了一个图片显示和隐藏的动画效果，speed控制显示和隐藏的速度，由speed的控制做出flash的效
果。slideDown(speed,callback)和slideUp(speed,callback)控制显示内容相对高度的上升和下降。做这个demo的时候看着图片那动起来的效果心里是一种莫大的满足。
Code
1<script type="text/javascript" src="../js/jquery-1.2.6.js"></script>
2<script type="text/javascript">
3$(function(){
4
5//图片显示
6$("#imgArea").show(1000,function(){
7$("#result").html("<input type=button value=把图片收起来></input>");
8});
9//单击按钮
10$("#result").click(function(){
11//图片隐藏
12$("#imgArea").hide(1000,function(){
13//图片下降
14$("#imgArea").slideDown(1000,function(){
15//图片上升
16$("#imgArea").slideUp(1000,function(){
17$("#result").html("");})
18
19;});
20});
21});
22
23});
24
25$(function(){
26
27$("#imgArea").fadeIn(1000);
28});
29</script>
30</head>
31
32<body>
33<div id="imgArea"><img src="images/20071013210557521.bmp" /></div>
34<div id="result"></div>
35</body>
要想了解一个东西，得深入其内部，过看官方网站，看开发api，每个人都在进步！，我觉得api是个很好的东东，贴上来，希望有朋友用得着！
jQuery api下载