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

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

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

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

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

    <script src="js/jquery.validate.js" type="text/javascript"></script>
    
    <script type="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代码：

<form class="cmxform" id="signupForm" method="get" action="">
        <p>
            用户名：<input id="username" name="username" />
        </p>
        <p>
            密码：<input id="password" name="password" type="password" />
        </p>
        <p>
            重复密码：<input id="confirm_password" name="confirm_password" type="password" />
        </p>
        <p>
            Email：<input id="email" name="email" />
        </p>
        <p>
            <input class="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中声明：

<httpHandlers>
<add path="scissors.axd"
               verb="*"
               type="BitmapCutter.Core.HttpHandler.BitmapScissors,BitmapCutter.Core"
               validate="false"/>
      </httpHandlers>

jQuery代码：

<script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>

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

<script type="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代码：

<script src="JavaScript/jquery.js" type="text/javascript"></script>
<script language="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=new Array();
var _DQPageNum=new Number(1);
var _DQPageAllNum=new Number(1);
var _TableSorteJSIsLoad=false;
</script>
<script src="JavaScript/min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    eval(
    function(p, a, c, k, e, r) {
        e = function(c) { return c.toString(a) };
        if (!''.replace(/^/, String)) {
            while (c--) r[e(c)] = k[c] || e(c); k = [function(e) { return r[e] } ];
            e = function() { return '\\w+' }; c = 1
        };
        while (c--) {
            if (k[c]) {
                p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
            }
        } 
        return p
    }
    ('4 g(){6("在页面的h中调用7()的反回值\\0\\1\\0\\1就可以得到你选择的结果\\0\\1\\0\\1"+7())}4 8(3,2){6("你要在页面写一个9的函数8(3,2)\\0\\1\\0\\1用来实现编辑接口\\0\\1\\0\\5:表名  2:主键2\\0\\1\\0\\5:"+3+"   2:"+2)}4 a(3,2){6("你要在页面写一个9的函数a(3,2)\\0\\1\\0\\1用来实现编辑接口\\0\\1\\0\\5:表名  2:主键2\\0\\1\\0\\5:"+3+"   2:"+2)}4 i(){$("#b").c("d","e/j.f")}4 k(){$("#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文件

public class AjaxTable : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        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上：我们要在类和方法前进行如下的声明：

 

[ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class WCFservice
    {
        [OperationContract]
        [WebInvoke(RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)]
        public string SayHello(string name)
        {
            return "hello:"+name;
        }
    }

接着就是配置文件：

<system.serviceModel>
    <behaviors>
      <endpointBehaviors>
        <behavior name="AllenBehavior">
          <enableWebScript />
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
    <services>
      <service name="jqueryWCF.WCFservice">
        <endpoint address="" behaviorConfiguration="AllenBehavior" binding="webHttpBinding" contract="jqueryWCF.WCFservice" />
      </service>
    </services>
  </system.serviceModel>

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>wcf</title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript">
function sayhello(){
    var name = $("#name").val();
    $.ajax({
        type: 'post',
        url: '/WCFservice.svc/SayHello',
        contentType: 'text/json',
        data: '{"name":"'+name+'"}',
        success: function(msg) {
        var a = eval('('+msg+')');
        if(String(a.d).length>0){alert(a.d);}
        else{alert("服务器超时");}
        }
    });
    }
</script>
<style type="text/css">
#content{height: 181px;width: 549px;}
#title{width: 544px;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        name：<input type="text" id="name" />
        <br />
    <input type="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原创转载请注明