Web前端基础(19)jQuery对文本框和表单的操作

单行文本框

首先在网页中创建一个表单,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
input:focus, textarea:focus{
border:1px solid #f00;
background: #fcc;
}
</style>
</head>
<body>
<form action="#" method="POST" id="regForm">
<legend>个人基本信息</legend>
<div>
<label for="username">名称:</label>
<input id="username" type="text"></label>
</div>
<div>
<label for="pass">密码:</label>
<input id="pass" type="password"></label>
</div>
<div>
<label for="msg">详细信息:</label>
<textarea id="msg"></textarea>
</div>
</form>
</body>
</html>
个人基本信息

但是IE6并不支持除超链接元素之外的:hover伪类选择器,此时可以用jQuery来弥补。

添加一个类名为focus的样式

1
2
3
4
.focus{
border: 1px solid #f00;
background: #fcc;
}

然后为文本框添加获取和失去焦点事件。

1
2
3
4
5
6
7
$(function(){
$(":input").focus(function(){
$(this).addClass("focus");
}).blur(function(){
$(this).removeClass("focus");
})
})

多行文本框应用

高度变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(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
}
}
});
});

滚动条高度变化

1
2
3
4
5
6
7
8
9
10
11
12
13
$(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);
}
});
});

复选框应用

对复选框最基本的应用,就是对复选框进行全选、反选和全选、全不选等操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
你爱好的运动是?
足球篮球羽毛球乒乓球

全选和全部选

1
2
3
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').attr('checked', true); //全不选设置为false
})

反选

1
2
3
4
5
6
$("#CheckedRev").click(function(){
$('[name=items]:checkbox').each(function(){
//$(this).attr("checked", !$(this).attr("checked"));
this.checked = !this.checked;
})
})

下拉框应用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<style>
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>
<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" >选中添加到右边&gt;&gt;</span>
<span id="add_all" >全部添加到右边&gt;&gt;</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">&lt;&lt;选中删除到左边</span>
<span id="remove_all">&lt;&lt;全部删除到左边</span>
</div>
</div>

左边的添加到右边

1
2
3
$('#add').click(function() {
$('#select1 option:selected').appendTo('#select2');
});

右边的移动到左边

1
2
3
$('#remove').click(function() {
$('#select2 option:selected').appendTo('#select1');
});

全部移动到右边

1
2
3
4
$('#add_all').click(function() {
//获取全部的选项,删除并追加给对方
$('#select1 option').appendTo('#select2');
});

全部移动到左边

1
2
3
$('#remove_all').click(function() {
$('#select2 option').appendTo('#select1');
});

双击移动到对面

1
2
3
4
$('#select1').dblclick(function(){ //绑定双击事件
//获取全部的选项,删除并追加给对方
$("option:selected",this).appendTo('#select2'); //追加给对方
});

表单验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
$(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();
});
})