台技术设计与应用NET第八章V2.ppt

8.6 Web站点的页面设计 本节介绍利用jQuery技术实现Web站点的页面设计。并掌握下述技术： 1. 掌握jQuery对象的获取及使用； 2. 掌握jQuery事件的使用； 3. 了解jQuery的用途； 8. 使用第三方jQuery插件。 * 本例利用jQuery技术实现Web站点的页面设计，该页面具有： 1. 使用jQuery实现浮动图片； 2. 使用DataGrid插件； 3. 使用lightbox插件实现图片的放大、前后切换和关闭效果。 例子8.6 用JQuery设计Web站点页面 * * 8.4 使用JQuery进行表单验证 使用JQuery可以对表单中录入的信息进行各种验证，包括对表单元素进行非空验证、格式验证、长度验证及相关值的获取及显示，并对验证结果进行提示。本节将通过实例8.1来介绍如何使用jQuery来验证表单。 * * 例子8.3 使用jQuery进行表单验证 本实验主要介绍如何使用jQuery来验证表单。内容包括： 1．对表单元素进行非空验证； 2．验证用户输入信息的长度是否足够； 3．验证Email的格式； 8.获取单选按钮的值； 5．获取下拉框的文字和值； 首先制作如下的前台页面： * 例子8.3 程序的运行界面 * 例子8.3 页面布局的代码 每一行后面都带有span标 签，它用来显示验证结果 * jQuery 事件的blur() 方法 当元素失去焦点时发生 blur 事件。 blur() 函数触发 blur 事件，如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码。 语法 $(selector).blur() 提示：早前，blur 事件仅发生于表单元素上。在新浏览器中，该事件可用于任何元素。 * 对用户名的非空验证代码 定义用户名文本框失去焦点事件来触发验证，判断当前获取的id为name的jQuery对象的val来判断当前元素是否为空。为空时，通过id为nameTip的jQuery元素进行“用户名不能为空”的提示，并将提示字体颜色设置为红色；非空时，也显示相应的提示信息，并设置字体颜色为绿色。 * 对两个密码进行非空、长度验证 长度的验证用length属 性来判断当前值的长度 * 对两个密码进行一致性验证 一致性用两个jQuery 对象的val来进行判断 * Email格式验证 * Email格式验证的说明 验证Email中必须包含关键字“.”和“@”时，需用到indexOf函数。indexOf函数用来判断指定字符在总字符中的位置。如总字符中存在关键字的话，将返回其索引值，否则返回-1。 通过判断indexOf返回值是否为-1，来判断用户所输入的Email中是否包含“.”和“@”这两个特殊字符。 * 还需要判断关键字“.”和“@”的相对位置；关键字“.”必须在“@”前面，且两者还不能紧挨着。 此处仍然用到indexOf函数来判断其位置，并用两者的位置之差来判断它们的相对位置。 Email格式验证的说明（续1） * Email格式还要求不能以“.”开头，不能以“@”结尾。这两种验证仍需用到indexOf函数和length属性来进行验证。 用$(this).val().indexOf(@)和$(this).val().length-1的是否相等来判断是否是以“@”结尾。这里为什么是$(this).val().length-1呢？因为indexOf函数返回的索引值是从0开始算起的，所以此处是跟length-1进行比较。 Email格式验证的说明（续2） * jQuery如何获取单选按钮值 对单选按钮的jQuery对象定义click事件，在该事件中实现获取单选按钮选中值的功能。此处是用val来获取值，但获取到的是单选按钮的value属性，要通过三元条件判断式将其值转化成其对应的文本信息。三元条件判断式：(ustype==1)? ‘企业’:‘个人’，当ustype==1为true时，ustypemsg将被赋值为“企业”；若返回false时，ustypemsg将被赋值为“个人”。这样就将value：0或1转化成对应的文本：个人或企业了。 * 获取下拉框中选中的option的value和text 用find遍历函数还获取下拉框中选中的option，在通过text函数来获取下拉框中选中项的文本信息；直接通过val函数就能获取下拉框中选中项的value。 * 8.5 使用jQuery实现订单管理 本节介绍对客户订单处理的应用环境中，利用jQuery的事件绑定技术，为事件添加处理函数，从而实现遍历元素的方法以及动态添加元素。最终达到下述操作： 1．对订单记录进行删除操作； 2．对订单记录进行修改操作； 3．动态添加订单记录； 8.实现订单的