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

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

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

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

Code
HTML代码

Code
代码很如意理解,简单说下:
这里需要将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

jQuery代码

Code

运行效果:

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

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

Code

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

Code

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

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


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

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

 

Code
接着就是配置文件
Code
<behavior name="AllenBehavior"><enableWebScript /></behavior>
准备工作做好后就可以前台调用了:
Code
这里的一些注意事项大家可以参看http://www.cnblogs.com/dudu/archive/2009/07/14/1523082.html.
这样,我们就可以利用jQuery调用wcf了。


小结:jQuery在开发中我们可以经常的用到,灵活的使用jQuery和其他的技术结合起来,可以给我们带来很不错的效果,也希望大家有什么好的jQuery实例多多分享。
源码:/Files/gaoweipeng/JQDemo.rar原创转载请注明
posted @ 2009-08-08 10:46  GWPBrian  阅读(...)  评论(...编辑  收藏