因为目前的项目会用到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内容如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
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了:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
1
<script type="text/javascript" src="jquery-1.2.6.js"></script>
2![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script type="text/javascript">
3![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$(document).ready(function()
{
4![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$("#btnReg").click(function()
{
5
var userid=$("#userid").val(); //$("#userid").text()是不行的,因为text()是静态文本,不提供输入的;
6
var password=$("#pass").val();
7
$("#RegInfo").text("");
8
if(userid=="")
9![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
10
$("#RegInfo").text("请输入用户名");
11
return;
12
}
13
if(password=="")
14![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
15
$("#RegInfo").text("请输入用户密码");
16
return;
17
}
18![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$.ajax(
{
19
type:"GET",
20
url:"Check.aspx?userid="+userid+"&password="+password,
21
cache:true,
22
async: false,
23![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
success:function(result)
{
24
$("#RegInfo").html(result); //也可以是$("#RegInfo").text(result),但最好不要这个,原因可以查api
25
}
26
});
27
});
28
});
29
</script>
xml文件就存放用户名和密码,结构就这样了:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
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文件内容和传过来的用户信息校验下,写出相应的校验结果就行了。代码如下:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
1
protected void Page_Load(object sender, EventArgs e)
2![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
3
if (!IsPostBack)
4![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
17
if (xn.Name == "userinfo")
18![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
19
foreach (XmlNode cxn in xn)
20![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
21
if (cxn.Name == "userid")
22![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
23
userid = cxn.InnerText;
24
}
25
if (cxn.Name == "password")
26![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
27
password = cxn.InnerText;
28
}
29
if (userid == LoginUserid)
30![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
31
isExist = true;
32
}
33
}
34
}
35
}
36
if (isExist == false)
37![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
38
Response.Write("可以注册!");
39
}
40
else
41![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
42
Response.Write("该用户名已注册!");
43
}
44
}
45
}
二jQuery 效果
效果有很多现成的方法,有基本效果,滑动效果,弹入弹出效果,自定义效果,这个demo都是用了写现成的方法,show(speed,callback)显示隐藏的匹配元素,hide(speed,callback)隐藏显示的元
素,多了一个图片显示和隐藏的动画效果,speed控制显示和隐藏的速度,由speed的控制做出flash的效
果。slideDown(speed,callback)和slideUp(speed,callback)控制显示内容相对高度的上升和下降。做这个demo的时候看着图片那动起来的效果心里是一种莫大的满足。
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
1
<script type="text/javascript" src="../js/jquery-1.2.6.js"></script>
2![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script type="text/javascript">![](https://www.cnblogs.com/Images/dot.gif)
3![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$(function()
{
4![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
//图片显示
6![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$("#imgArea").show(1000,function()
{
7
$("#result").html("<input type=button value=把图片收起来></input>");
8
});
9
//单击按钮
10![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$("#result").click(function()
{
11
//图片隐藏
12![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$("#imgArea").hide(1000,function()
{
13
//图片下降
14![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$("#imgArea").slideDown(1000,function()
{
15
//图片上升
16![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$("#imgArea").slideUp(1000,function()
{
17
$("#result").html("");})
18![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
;});
20
});
21
});
22![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
});
24![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
$(function()
{
26![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
27
$("#imgArea").fadeIn(1000);
28
});
29
</script>
30
</head>
31![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
32
<body>
33
<div id="imgArea"><img src="images/20071013210557521.bmp" /></div>
34
<div id="result"></div>
35
</body>
要想了解一个东西,得深入其内部,过看官方网站,看开发api,每个人都在进步!,我觉得api是个很好的东东,贴上来,希望有朋友用得着!
jQuery api下载