第六章 jQuery操作表单
http://www.cnblogs.com/shuibing/p/4087177.html
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.下拉框左右选择
View Code5.表单验证
<!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>
