[JQuery-第06章表单、表格的操作及更多应用.pptVIP

jQuery基础教程 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 第六章 表单、表格的操作 表单应用 — 单行文本框应用 — 多行文本框应用 — 复选框应用 — 下拉框应用 — 表单验证 表格应用 表格变色 表格展开与关闭 表格内容筛选 其他应用 网页字体大小 网页选项卡 网页换肤 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 1、表单应用 表单有3个基本组成部分 表单标签 包含处理表单数据所用的服务端程序URL(action)以及数据提交到服务器的方式(method) 表单域 包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和上传域 表单按钮 包含提交按钮、复位按钮、图片按钮和一般按钮 本节主要讲解jQuery在表单域中的应用 Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 单行文本框应用 获取(focus)和失去(blur)焦点改变样式 $(:input).focus(function(){ $(this).addClass(focus); }).blur(function(){ $(this).removeClass(focus); }); Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 多行文本框应用 高度变化 当单击放大按钮后,如果评论框的高度小于500px则在原来的高度上增加50px if( $comment.height() 500 ){ $comment.animate({ height : +=50 },400); } 当单击缩小按钮后,如果评论框的高度大于50px则在原来的高度上减少50px if( $comment.height() 50 ){ $comment.animate({ height : -=50 },400); } Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 多行文本框应用(续) 滚动条高度变化 当单击向上按钮时,评论框的滚动条就向上滚动50px $comment.animate({ scrollTop : -=50 } , 400); 当单击向下按钮时,评论框的滚动条就向下滚动50px $comment.animate({ scrollTop : +=50 } , 400); Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 复选框应用 复选框基本应用:(控制元素的checked) 全选 $(:checkbox).attr(checked, true); 反选 $(:checkbox).each(function(){ //$(this).attr(checked, !$(this).attr(checked)); this.checked=!this.checked; }); 演示:使用checkbox实现 全不选 $(:checkbox).attr(checked, false); 获取选中的值 $(:checkbox).each(function(){ alert($(this).val()); }); Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile 5.2.0.0. Copyright 2004-2011 Aspose Pty Ltd. 下拉框应用 双击某个选项时将其移到另一个下拉框 $(#sele