学习jQuery之旅--jQuery的经典实例应用

jQuery是一个强大的Javascript类库，里面封装好了很多现有的方法和属性。可以使开发人员用很少的代码更好更快的开发出自己想实现的效果。
在平时的开发中，我们可能经常会用到jQuery。这里总结了一些经典的实例应用。分享给大家。

>>>>>jQuery=轻松实现表单验证：

在我们的开发中，常会有注册或是添加信息的时候，难免的我们就会需要对表单进行验证。jQuery对此作出了很好的支持。
jQuery代码：

Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><scriptsrc="js/jquery.js"type="text/javascript"></script>

<scriptsrc="js/jquery.validate.js"type="text/javascript"></script>

<scripttype="text/javascript">
$.validator.setDefaults({
submitHandler:function(){alert("submitted!");}
});

$().ready(function(){
$("#signupForm").validate({
rules:{
username:{
required:true,
minlength:2
},
password:{
required:true,
minlength:5
},
confirm_password:{
required:true,
minlength:5,
equalTo:"#password"
},
email:{
required:true,
email:true
}
},
messages:{
username:{
required:"请输入用户名",
minLength:"用户名至少2个字符"
},
password:{
required:"请输入密码",
minLength:"密码长度至少为5位"
},
confirm_password:{
required:"请确认密码",
minLength:"密码长度至少为5位",
equalTo:"请输入一致的密码"
},
email:"请输入正确格式的邮件地址"
}
});
});
</script>

HTML代码：

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><formclass="cmxform"id="signupForm"method="get"action="">
<p>
用户名：<inputid="username"name="username"/>
</p>
<p>
密码：<inputid="password"name="password"type="password"/>
</p>
<p>
重复密码：<inputid="confirm_password"name="confirm_password"type="password"/>
</p>
<p>
Email：<inputid="email"name="email"/>
</p>
<p>
<inputclass="submit"type="submit"value="Submit"/>
</p>
</form>

代码很如意理解，简单说下：
这里需要将Form的id="signupForm"，然后就可以对需要尽心验证的控件进行规则的设定：
username: {required: true,minlength: 2}。username是空间的id，required意思是不能为空，最小值不能小于2。从下面的message的设定中，大家也应该知道是什么意思了。
恩，就是这么简单。这样就可以实现对表单进行验证。 jquery.validate.js
运行效果：

>>>>>jQuery + HttpHandler =图片裁剪

大家可能在园子中看过这个不错的Demo。这里也强烈的推荐一下，很实用的功能。
jQuery为我们提过了一个很好的图片区域选取的插件：jquery.bitmapcutter.js。但是美中不足的是我没有找到区域图片截取的功能。刚好有大牛帮我们完善了这一点。
这里我们需要引入用于剪切图片的dll，并在config中声明：

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><httpHandlers>
<addpath="scissors.axd"
verb="*"
type="BitmapCutter.Core.HttpHandler.BitmapScissors,BitmapCutter.Core"
validate="false"/>
</httpHandlers>

jQuery代码：

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><scriptsrc="js/jquery-1.3.1.min.js"type="text/javascript"></script>

<scriptsrc="js/jquery.bitmapcutter.js"type="text/javascript"></script>

<scripttype="text/javascript">
$().ready(function(){
$.fn.bitmapCutter({
src:'Photo/P1010005.JPG',
renderTo:'#container',
cutterSize:{width:220,height:220},
onGenerated:function(src){
alert(src);
},
rotateAngle:90,
lang:{clockwise:'顺时针旋转{0}度.'}
});
})
</script>

运行效果：

详细的开发说明参看：http://www.cnblogs.com/fromearth/archive/2009/05/27/1490833.html

>>>>>>jQuery+Json=无刷新的数据显示与分页
这个基本上就是Ajax的思想：将参数通过脚本传入服务器处理文件，获得数据后将DataTable转换为Json返回给客户端，客户端利用脚本显示数据。
JS代码：

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><scriptsrc="JavaScript/jquery.js"type="text/javascript"></script>
<scriptlanguage="javascript"type="text/javascript">
var_AjaxTablePostPage="<%=_AjaxTablePostPage%>";
var_AjaxTableName="<%=_AjaxTableName%>";
var_AjaxTableKey="<%=_AjaxTableKey%>";
var_AjaxFiledsStr="<%=_AjaxFiledsStr%>";
var_AjaxFiledsStrCN="<%=_AjaxFiledsStrCN%>";
var_AjaxConvertFiled="<%=_AjaxConvertFiled%>";
var_AjaxConvertInfo="<%=_AjaxConvertInfo%>";
var_AjaxSelectWhere="<%=_AjaxSelectWhere%>";
var_AjaxIsEdit="<%=_AjaxIsEdit%>"=="True"?true:false;
var_AjaxIsDel="<%=_AjaxIsDel%>"=="True"?true:false;
var_AjaxIsPage="<%=_AjaxIsPage%>"=="True"?true:false;
var_AjaxIsSort="<%=_AjaxIsSort%>"=="True"?true:false;
var_AjaxAllSelect="<%=_AjaxAllSelect%>"=="True"?true:false;
var_AjaxCustomColumn="<%=_AjaxCustomColumn%>"=="True"?true:false;
var_AjaxCustomColumnCN="<%=_AjaxCustomColumnCN%>";
var_AjaxPageSize=<%=_AjaxPageSize%>;
var_DQPageInfoArray=newArray();
var_DQPageNum=newNumber(1);
var_DQPageAllNum=newNumber(1);
var_TableSorteJSIsLoad=false;
</script>
<scriptsrc="JavaScript/min.js"type="text/javascript"></script>
<scriptlanguage="javascript"type="text/javascript">
eval(
function(p,a,c,k,e,r){
e=function(c){returnc.toString(a)};
if(!''.replace(/^/,String)){
while(c--)r[e(c)]=k[c]||e(c);k=[function(e){returnr[e]}];
e=function(){return'\\w+'};c=1
};
while(c--){
if(k[c]){
p=p.replace(newRegExp('\\b'+e(c)+'\\b','g'),k[c]);
}
}
returnp
}
('4g(){6("在页面的h中调用7()的反回值\\0\\1\\0\\1就可以得到你选择的结果\\0\\1\\0\\1"+7())}48(3,2){6("你要在页面写一个9的函数8(3,2)\\0\\1\\0\\1用来实现编辑接口\\0\\1\\0\\5:表名2:主键2\\0\\1\\0\\5:"+3+"2:"+2)}4a(3,2){6("你要在页面写一个9的函数a(3,2)\\0\\1\\0\\1用来实现编辑接口\\0\\1\\0\\5:表名2:主键2\\0\\1\\0\\5:"+3+"2:"+2)}4i(){$("#b").c("d","e/j.f")}4k(){$("#b").c("d","e/l.f")}',22,22,'r|n|ID|TableName|function|nTableName|alert|CheckBoxSelectKeyStr|DataRowEditClick|JavaScript|CustomColumnClick|styleCss|attr|href|Style|css|selectStr_btnClick|JS|styleCss1|Style1|styleCss2|Style2'.split('|'),0,{}));
</script>

服务器端：利用个.ashx文件

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->publicclassAjaxTable:IHttpHandler{

publicvoidProcessRequest(HttpContextcontext){
context.Response.ContentType="text/plain";
if(context.Request.Form["_type"]!=null)
{
switch(context.Request.Form["_type"])
{
case"_DownPageAllPageNum":SendAllPageNum(context);break;
case"_DownDQPageInfoArray":SendPageInfoArray(context);break;
case"_DownDQPageInfoArray_all":SendAllPageInfoArray(context);break;
case"_DataRowDel":SendDelIsTrue(context);break;
default:break;
}
}
}
.

过多的代码就不贴出来了，感兴趣的朋友文后有源码下载。就是根据不同的参数执行不同的函数。这里值得注意的是DataTable<<--->>Json
运行效果：

>>>>>jQuery在Ajax中的应用
jQuery中为我们提供了很多有关处理Ajax的函数。是我们的开发变得更容易。
大家可以参看：

学习jQuery之旅--让Ajax变的更简单

>>>>>jQuery在WCF中的应用

首先是 WCF上：我们要在类和方法前进行如下的声明：

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->[ServiceContract(Namespace="")]
[AspNetCompatibilityRequirements(RequirementsMode=AspNetCompatibilityRequirementsMode.Allowed)]
publicclassWCFservice
{
[OperationContract]
[WebInvoke(RequestFormat=WebMessageFormat.Json,ResponseFormat=WebMessageFormat.Json,BodyStyle=WebMessageBodyStyle.WrappedRequest)]
publicstringSayHello(stringname)
{
return"hello:"+name;
}
}

接着就是 配置文件：

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><system.serviceModel>
<behaviors>
<endpointBehaviors>
<behaviorname="AllenBehavior">
<enableWebScript/>
</behavior>
</endpointBehaviors>
</behaviors>
<serviceHostingEnvironmentaspNetCompatibilityEnabled="true"/>
<services>
<servicename="jqueryWCF.WCFservice">
<endpointaddress=""behaviorConfiguration="AllenBehavior"binding="webHttpBinding"contract="jqueryWCF.WCFservice"/>
</service>
</services>
</system.serviceModel>

<behavior name="AllenBehavior"><enableWebScript /></behavior>
准备工作做好后就可以 前台调用了：

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>wcf</title>
<scriptlanguage="javascript"type="text/javascript"src="jquery.js"></script>
<scriptlanguage="javascript"type="text/javascript">
functionsayhello(){
varname=$("#name").val();
$.ajax({
type:'post',
url:'/WCFservice.svc/SayHello',
contentType:'text/json',
data:'{"name":"'+name+'"}',
success:function(msg){
vara=eval('('+msg+')');
if(String(a.d).length>0){alert(a.d);}
else{alert("服务器超时");}
}
});
}
</script>
<styletype="text/css">
#content{height:181px;width:549px;}
#title{width:544px;}
</style>
</head>
<body>
<formid="form1"runat="server">
<div>
name：<inputtype="text"id="name"/>
<br/>
<inputtype="button"value="hello"onclick="sayhello();"/>
</div>
</form>
</body>
</html>

这里的一些注意事项大家可以参看 http://www.cnblogs.com/dudu/archive/2009/07/14/1523082.html.
这样，我们就可以利用jQuery调用wcf了。


小结：jQuery在开发中我们可以经常的用到，灵活的使用jQuery和其他的技术结合起来，可以给我们带来很不错的效果，也希望大家有什么好的jQuery实例多多分享。
源码： /Files/gaoweipeng/JQDemo.rar原创转载请注明