第六章 jQuery操作表单
1.单行文本框的应用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body{
font:normal 12px/17px Arial;
}
div{
padding:2px;
}
input, textarea {
width: 12em;
border: 1px solid #888;
}
.focus {
border: 1px solid #f00;
background: #fcc;
}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
if($(this).val() ==this.defaultValue){
$(this).val("");
}
}).blur(function(){
$(this).removeClass("focus");
if ($(this).val() == '') {
$(this).val(this.defaultValue);
}
});
})
</script> </head>
<body>
<form action="" method="post" id="regForm">
<fieldset>
<legend>个人基本信息</legend>
<div>
<label for="username">名称:</label>
<input id="username" type="text" value="名称" />
</div>
<div>
<label for="pass">密码:</label>
<input id="pass" type="password" value="密码" />
</div>
<div>
<label for="msg">详细信息:</label>
<textarea id="msg" rows="2" cols="20">详细信息</textarea>
</div>
</fieldset>
</form>
</body>
</html>
2.多行文本框高度变化
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
font: normal 12px/17px Arial;
}
.msg
{
width: 300px;
margin: 100px;
}
.msg_caption
{
width: 100%;
overflow: hidden;
margin-bottom: 1px;
}
.msg_caption span
{
display: block;
float: left;
margin: 0 2px;
padding: 4px 10px;
background: #898989;
cursor: pointer;
color: white;
}
.msg textarea
{
width: 300px;
height: 80px;
height: 100px;
border: 1px solid #000;
}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var $comment = $('#comment'); //获取评论框
$('.bigger').click(function () { //放大按钮绑定单击事件
if (!$comment.is(":animated")) { //判断是否处于动画
if ($comment.height() < 500) {
$comment.animate({ height: "+=50" }, 400); //重新设置高度，在原有的基础上加50
}
}
})
$('.smaller').click(function () {//缩小按钮绑定单击事件
if (!$comment.is(":animated")) {//判断是否处于动画
if ($comment.height() > 50) {
$comment.animate({ height: "-=50" }, 400); //重新设置高度，在原有的基础上减50
}
}
});
});
</script>
</head>
<body>
<form action="" method="post">
<div class="msg">
<div class="msg_caption">
<span class="bigger">放大</span> <span class="smaller">缩小</span>
</div>
<div>
<textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>
</div>
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
font: normal 12px/17px Arial;
}
.msg
{
width: 300px;
margin: 100px;
}
.msg_caption
{
width: 100%;
overflow: hidden;
margin-bottom: 1px;
}
.msg_caption span
{
display: block;
float: left;
margin: 0 2px;
padding: 4px 10px;
background: #898989;
cursor: pointer;
color: white;
}
.msg textarea
{
width: 300px;
height: 80px;
height: 100px;
border: 1px solid #000;
}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var $comment = $('#comment'); //获取评论框
$('.up').click(function () { //向上按钮绑定单击事件
if (!$comment.is(":animated")) {//判断是否处于动画
$comment.animate({ scrollTop: "-=50" }, 400);
}
})
$('.down').click(function () {//向下按钮绑定单击事件
if (!$comment.is(":animated")) {
$comment.animate({ scrollTop: "+=50" }, 400);
}
});
});
</script>
</head>
<body>
<form action="" method="post">
<div class="msg">
<div class="msg_caption">
<span class="up">向上</span> <span class="down">向下</span>
</div>
<div>
<textarea id="comment" rows="8" cols="20">多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.多行文本框高度变化.</textarea>
</div>
</div>
</form>
</body>
</html>
3.复选框应用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//全选
$("#CheckedAll").click(function () {
$('[name=items]:checkbox').attr('checked', true);
});
//全不选
$("#CheckedNo").click(function () {
$('[type=checkbox]:checkbox').attr('checked', false);
});
//反选
$("#CheckedRev").click(function () {
$('[name=items]:checkbox').each(function () {
//此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。
//$(this).attr("checked", !$(this).attr("checked")); //直接使用JS原生代码，简单实用
this.checked = !this.checked;
});
});
//输出值
$("#send").click(function () {
var str = "你选中的是：\r\n";
$('[name=items]:checkbox:checked').each(function () {
str += $(this).val() + "\r\n";
})
alert(str);
});
}) </script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="CheckedAll" value="全 选" />
<input type="button" id="CheckedNo" value="全不选" />
<input type="button" id="CheckedRev" value="反 选" />
<input type="button" id="send" value="提 交" />
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
$(function(){
//全选
$("#CheckedAll").click(function(){
if(this.checked){ //如果当前点击的多选框被选中
$('input[type=checkbox][name=items]').attr("checked", true );
}else{
$('input[type=checkbox][name=items]').attr("checked", false );
}
});
$('input[type=checkbox][name=items]').click(function(){
var flag=true;
$('input[type=checkbox][name=items]').each(function(){
if(!this.checked){
flag = false;
}
});
if( flag ){
$('#CheckedAll').attr('checked', true );
}else{
$('#CheckedAll').attr('checked', false );
}
});
//输出值
$("#send").click(function(){
var str="你选中的是：\r\n";
$('input[type=checkbox][name=items]:checked').each(function(){
str+=$(this).val()+"\r\n";
})
alert(str);
});
})
</script>
</head>
<body> <form>
你爱好的运动是？<input type="checkbox" id="CheckedAll" />全选/全不选<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
<input type="button" id="send" value="提 交"/>
</form> </body>
</html>
4.下拉框左右选择
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
div.centent
{
float: left;
text-align: center;
margin: 10px;
}
span
{
display: block;
margin: 2px 2px;
padding: 4px 10px;
background: #898989;
cursor: pointer;
font-size: 12px;
color: white;
}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//移到右边
$('#add').click(function () {
//获取选中的选项，删除并追加给对方
$('#select1 option:selected').appendTo('#select2');
});
//移到左边
$('#remove').click(function () {
$('#select2 option:selected').appendTo('#select1');
});
//全部移到右边
$('#add_all').click(function () {
//获取全部的选项,删除并追加给对方
$('#select1 option').appendTo('#select2');
});
//全部移到左边
$('#remove_all').click(function () {
$('#select2 option').appendTo('#select1');
});
//双击选项
$('#select1').dblclick(function () { //绑定双击事件
//获取全部的选项,删除并追加给对方
$("option:selected", this).appendTo('#select2'); //追加给对方
});
//双击选项
$('#select2').dblclick(function () {
$("option:selected", this).appendTo('#select1');
});
});
</script>
</head>
<body>
<div class="centent">
<select multiple="multiple" id="select1" style="width: 100px; height: 160px;">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
</select>
<div>
<span id="add">选中添加到右边>></span> <span id="add_all">全部添加到右边>></span>
</div>
</div>
<div class="centent">
<select multiple="multiple" id="select2" style="width: 100px; height: 160px;">
<option value="8">选项8</option>
</select>
<div>
<span id="remove"><<选中删除到左边</span> <span id="remove_all"><<全部删除到左边</span>
</div>
</div>
</body>
</html>
5.表单验证
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function () {
//如果是必填的，则加红星标识.
$("form :input.required").each(function () {
var $required = $("<strong class='high'> *</strong>"); //创建元素
$(this).parent().append($required); //然后将它追加到文档中
});
//文本框失去焦点后
$('form :input').blur(function () {
var $parent = $(this).parent();
$parent.find(".formtips").remove();
//验证用户名
if ($(this).is('#username')) {
if (this.value == "" || this.value.length < 6) {
var errorMsg = '请输入至少6位的用户名.';
$parent.append('<span class="formtips onError">' + errorMsg + '</span>');
} else {
var okMsg = '输入正确.';
$parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');
}
}
//验证邮件
if ($(this).is('#email')) {
if (this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {
var errorMsg = '请输入正确的E-Mail地址.';
$parent.append('<span class="formtips onError">' + errorMsg + '</span>');
} else {
var okMsg = '输入正确.';
$parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');
}
}
}).keyup(function () {
$(this).triggerHandler("blur");
}).focus(function () {
$(this).triggerHandler("blur");
}); //end blur //提交，最终验证。
$('#send').click(function () {
$("form :input.required").trigger('blur');
var numError = $('form .onError').length;
if (numError) {
return false;
}
alert("注册成功,密码已发到你的邮箱,请查收.");
}); //重置
$('#res').click(function () {
$(".formtips").remove();
});
})
//]]>
</script>
</head>
<body>
<form method="post" action="">
<div class="int">
<label for="username">
用户名:</label>
<input type="text" id="username" class="required" />
</div>
<div class="int">
<label for="email">
邮箱:</label>
<input type="text" id="email" class="required" />
</div>
<div class="int">
<label for="personinfo">
个人资料:</label>
<input type="text" id="personinfo" />
</div>
<div class="sub">
<input type="submit" value="提交" id="send" /><input type="reset" id="res" />
</div>
</form>
</body>
</html>
PS:参考文献《锋利的jQuery》
第六章 jQuery操作表单的更多相关文章
- jquery 第五章 jQuery操作表单与表格
1.回顾 对象.bind("事件名称",function(){ // }) 阻止冒泡事件 return false, event stopProapagation() 模拟事件 ...
- jQuery系列 第六章 jQuery框架事件处理
第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...
- 2017.2.28 activiti实战--第六章--任务表单（二）外置表单
学习资料:<Activiti实战> 第六章 任务表单(二)外置表单 6.3 外置表单 考虑到动态表单的缺点(见上节),外置表单使用的更多. 外置表单的特点: 页面的原样显示 字段值的自动填 ...
- 2017.2.28 activiti实战--第六章--任务表单（一）动态表单
学习资料:<Activiti实战> 第六章 任务表单(一)动态表单 内容概览:本章要完成一个OA(协同办公系统)的请假流程的设计,从实用的角度,讲解如何将activiti与业务紧密相连. ...
- 2017.2.22 activiti实战--第六章--任务表单
学习资料:<Activiti实战> 第六章 任务表单 本章将一步步完成一个协同办公系统(OA)的请假流程的设计,讲解如何将Activiti和实际业务联系起来. 首先讲解动态表单与外置表单的 ...
- 前端 ----jQuery操作表单
05-使用jQuery操作input的value值 表单控件是我们的重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等 那么通过上节知识点我们了解到,我们在使用j ...
- 第5章 jQuery对表单、表格的操作及更多应用
本章主要是对前面4章的小结和应用. 一. 表单form应用 表单分为3个组成部分 (1)form标签 表单可包含文本域,复选框,单选按钮等等.表单用于向指定的 URL 传递用户数据. (2)表单域 - ...
- jQuery 第六章 jQuery在Ajax应用
1.本章目标 ajax 2.ajax 异步刷新技术,我们的网页不需要全部刷新,按需实现局部刷新,上线后台的交互 用户体验好 地图,前台验证,表单提交,修改,查询等等 原生的js和ajax packag ...
- 第六章 jQuery和ajax应用
ajax是异步JavaScript和xml的简称. 一. ajax补白 优势 不足(不一定是不足) 不需要任何插件(但需要浏览器支持js) XMLHttpRequest对象在不同浏览器下有差异 优秀的 ...
随机推荐
- dmesg 信息实时监控其改变
方法一: 最新的dmesg版本有一个 -w (-w, --follow) 选项,可以实时监控并输出: $ dmesg -wH 方法二: watch -n 0.1 "dmesg | tail ...
- A Tour of Go Interfaces
An interface type is defined by a set of methods. A value of interface type can hold any value that ...
- [Xcode使用 - 2] 设置APP图标和启动画面
1.App Icon 把所有图标文件拖放到 “Images.xcassets” 的”AppIcon” 里面 应对非视网膜和视网膜屏,APP有时会提供两套不同大小的图片,1倍图和2倍图,它们 ...
- Java循环语句 for
语法: 特点:相比 while 和 do...while 语句结构更加简洁易读 例如,输出 1000 遍"我爱慕课网",使用 for 的实现代码为: 需要留心的几个小细节: 1. ...
- iOS开发 autoResizingMask使用
autoResizingMask 是UIView的一个属性,在一些简单的布局中,使用autoResizingMask,可以实现子控件相对于父控件的自动布局. autoResizingMask 是UIV ...
- Oracle12c功能增强 新特性之管理功能的增强
1. 数据文件在线重命名和迁移 不想先前的版本号.在Oracle12cR1中,数据文件的迁移或重命名不再要求一系列的步骤,比如:将表空间至于仅仅读模式,然后数据文件逻辑等操作.在12cR1中.数 ...
- C#/Access-数据库获取自动编号的最大值
//conStrSQL你改成你的access,我这里用的SQL2005string conStrSQL = "Data Source=xx.xx.xx.xx;Initial Catalog= ...
- SHGetSpecialFolderLocation
uses shlobj;function GetDesktopFolder():string;var pItem: PItemIDList; temp: array[0..MAX_PATH] of ...
- ios开发——实用技术篇Swift&Swift调用C、C++、Object
Swift调用C.C++.Object 1.Swift调用C语言a,首先在项目中添加 CFile 文件命名为CHello,同时产生桥梁文件. b,创建之后的项目结构 b,在CHello.h文件中编写接 ...
- C _数据结构 _线性表的顺序存储
#ifndef __MY_SEQLIST_H__ #define __MY_SEQLIST_H__ typedef void SeqList; typedef void SeqListNode; // ...