第5章 jQuery对表单表格的操作及更多应用
Posted 葡萄美酒夜光杯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第5章 jQuery对表单表格的操作及更多应用相关的知识，希望对你有一定的参考价值。
本章主要是对前面4章的小结和应用。
一. 表单form应用
表单分为3个组成部分
（1）form标签
表单可包含文本域，复选框，单选按钮等等。表单用于向指定的 URL 传递用户数据。
（2）表单域
——文本框、密码框(password)，隐藏域，多行文本域（textarea）,复选框（checkbox），单选框（radio）,下拉框（select）文件上传框
（3）表单按钮
——提交按钮（submit）、复位（reset），一般按钮（button）
1.单行文本框（input type="text"）
【例5.1.1】获取和失去焦点
依靠纯css实现方法是：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<fieldset> <legend>个人信息</legend> <div> <label for="username">名称：</label> <input id="username" type="text"/> </div> <div> <label for="pass">密码：</label> <input id="pass" type="password"/> </div> <div> <label for="msg">详细信息：</label> <textarea id="msg"></textarea> </div></fieldset> |
css
|
1
2
3
4
5
6
7
|
fieldset{ width: 600px;}input:focus,textarea:focus{ border: 1px solid #f00; background: #fcc;} |
在IE6下不支持a:hover之外的伪类选择器。试用jQuery实现之。
思路：IE6不支持，但是jq1.x支持。把:focus元素选出来，应用一个预设样式.focus
|
1
2
3
|
$(function(){ $(\':focus\').addClass(\'focus\');}) |
但是，当你点选窗体，连窗体都应用了。而且对象不明确，没事件。
|
1
2
3
4
5
6
7
8
9
|
$(function(){ $(\':input\')//注意选择器不是$(\'input\') .focus(function(){ $(this).addClass(\'focus\'); }) .blur(function(){ $(this).removeClass(\'focus\'); })}) |
2.多行文本框的应用
【例5.1.2】某网站的评论框
附加要求：评论框设置最值高度
|
1
2
3
4
5
6
7
|
<form><div class="msg"><input id="btn1" type="button" value="放大" /><input id="btn1" type="button" value="放大" /></div><textarea id="comment" rows="8" cols="20">多行文本框变化多行文本框变化多行文本框变化多行文本框变化多行文本框变化多行文本框变化多行文本框变化多行文本框变化多行文本框变化多行文本框变化</textarea></form> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
$(function(){ $(\'#btn1\').click(function(){ if($(\'#comment\').height()<500){ $(\'#comment\').height($(\'#comment\').height()+50); //注意虽然$(\'#comment\').height()打印出是一个数字，但是 //不能使用$(\'#comment\').height()+=50； }else{ return false; } }) $(\'#btn2\').click(function(){ if($(\'#comment\').height()>50){ $(\'#comment\').height($(\'#comment\').height()-50); }else{ return false; } })}) |
改进：
（1）使用动画方法让它变化——这需要在css中给#comment设固定宽度（假设为200px）。
（2）控制动画
|
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
|
$(function(){ $(\'#btn1\').click(function(){ if($(\'#comment\').is(\':animated\')==true){ return false; }else{ if($(\'#comment\').height()<500){ $(\'#comment\').animate({height:\'+=50\'},200); }else{ return false; } } }) $(\'#btn2\').click(function(){ if($(\'#comment\').is(\':animated\')==true){ return false; }else{ if($(\'#comment\').height()>50){ $(\'#comment\').animate({height:\'-=50\'},200); }else{ return false; } } })}) |
【进一步扩展】滚动条高度变化——这需要scrollTop属性
如果把上面的代码属性换成scrollTop——
3.复选框的应用
最基本的，就是全选，反选，全不选，主要应用的还是选择器功能。
【例5.1.3】制作一个表单实现上述功能。
如图先布局
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<form> 你爱好的动漫是？<br/> <input name="items" type="checkbox" value="寄生兽" />寄生兽 <input name="items" type="checkbox" value="Monster" />Monster <input name="items" type="checkbox" value="猎人" />猎人 <input name="items" type="checkbox" value="棋魂" />棋魂<br/> <input type="button" id="checkAll" value="全选" /> <input type="button" id="checkNone" value="不选" /> <input type="button" id="checkRev" value="反选" /> <input type="submit" id="send" value="提交" /></form> |
|
1
2
3
4
5
6
|
form{ margin: 100px auto; width: 300px;height: 100px; border: 1px solid #ccc; padding: 20px;} |
反选的思路是循环取反。循环没一个对象，用的是each(function(){})
|
1
|
jq对象组.each(function(){操作}) |
另一个问题；当使用attr(\'checked\',\'true\')时，第二次失效。
这事应该用prop()方法替代attr。
官方给出的解释是：
获取在匹配的元素集中的第一个元素的属性值。
随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误
大概可以这样理解：比方说checked属性表示选中有checked="checked";和checked=true，在不同浏览器中解析造成混乱。
官方建议是存在布尔值的都用prop()
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$(function(){ $(\'#checkAll\').click(function(){ $(\'[name=items]:checkbox\').prop(\'checked\',true); }) $(\'#checkNone\').click(function(){ $(\'[name=items]:checkbox\').prop(\'checked\',false); }) $(\'#checkRev\').click(function(){ $(\'[name=items]:checkbox\').each(function(){ this.checked=!this.checked; }) })}) |
基本功能算是实现了。
接下来进一步：要求输出提交按钮的值。弹出框选择的是......
|
1
2
3
4
5
6
7
8
9
|
$(\'#send\').click(function(){ var str=\'您选中的是：\'; $(\'[name=items]:checkbox\').each(function(){ if(this.checked){ str+=this.value+\' \'; } }) alert(str);}) |
根据each方法的思想来做。
进一步优化——我要用一个复选框来表示全选和全不选状态。
留意到要求中，点选（全选/全不选时与所有item同步），所以全选.全不选的状态就是所有item的状态。
再留意到，设置一个布尔值bCheckedAll，当为假时把全选/不选框取消选中——这个值绑定在item的点击事件上。
|
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
|
$(function(){ $(\'#checkAll\').click(function(){ $(\'[name=items]:checkbox\').prop(\'checked\',this.checked); })//全选状态就是所有item的状态 $(\'[name=items]:checkbox\').click(function(){ var bCheckAll=true; $(\'[name=items]:checkbox\').each(function(){ if(!this.checked){ bCheckAll=false; } }) $(\'#checkAll\').prop(\'checked\',bCheckAll); })//当item有没被点选的时候，全选按钮不得为选中 $(\'#checkRev\').click(function(){ $(\'[name=items]:checkbox\').each(function(){ (this).checked=!this.checked; }) })//反选：遍历取反 $(\'#send\').click(function(){ var str=\'您选中的是：\'; $(\'[name=items]:checkbox\').each(function(){ if(this.checked){ str+=this.value+\' \'; } }) alert(str); })//输出}) |
4. 下拉框——select
【例5.1.4】在一个网页增加一左一右两个下拉框，分别加上几个按钮，实现以下功能。双击可以转移
ps：option的选中状态为selected。
先布局（样式在HTML里）
|
1
2
3
4
5
6
7
8
9
|