正文 

当前位置： 首页 > java > java教程

第5章jquery对表单表格的操作及更多应用

葡萄美酒夜光杯 葡萄美酒夜光杯     2022-08-07     594

关键词：

本章主要是对前面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】某网站的评论框

附加要求：评论框设置最值高度

 

 html

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
锋利的jquery学习总结(代码片段)

通过对《锋利的jQuery》（第二版）一书的学习，发现此书讲解通俗易懂，是学习jQuery的一本很好的指导书，特作如下总结。此书主要讲解了jQuery的常用操作，包括认识jQuery，jQuery选择器，jQuery中的DOM操作，jQuery中的事件和动画，... 查看详情

第21章dom操作表格及样式

学习要点：1.操作表格2.操作样式DOM在操作生成HTML上，还是比较简明的。不过，由于浏览器总是存在兼容和陷阱，导致最终的操作就不是那么简单方便了。本章主要了解一下DOM操作表格和样式的一些知识。 一．操作表格<tab... 查看详情

《锋利的jquery》第5章

一、总结第五章写过的小例子：1、单行文本框应用，为文本框添加获得和失去焦点的应用。2、多行文本框应用，点击“放大”或“缩小”按钮，让字放大或缩小。3、复选框应用，“全选”，“全不选”，“反选”，“提交”<... 查看详情

docker从入门到实战应用(代码片段)

第1章概念第2章基础操作-镜像第3章基础操作-容器第4章容器的修改及保存第5章容器进阶操作第6章Dockerfile第1章概念什么是沙箱机制#1、沙箱是一个虚拟系统程序，沙箱提供的环境相对于每一个运行的程序都是独立的，而且不会对... 查看详情

matlab编程与应用系列-第2章数组及矩阵的创建及操作(代码片段)

...问题，请联系：[email protected]2.2数组及矩阵的创建和操作本节将介绍数组及矩阵的创建和操作，包括数组的输 查看详情

matlab编程与应用系列-第2章数组及矩阵的创建及操作(代码片段)

...有问题，请联系：[email protected]###2.2.2数组及矩阵元素操作对矩阵元素的操作是矩阵操作的基本技巧，下 查看详情

jquery源码解读第5章---对callbacks的解读

jQuery.Callbacks()是一个多用途的回调函数列表对象提供了一种强大的方法来管理回调函数队列先来看看Callbacks的常见的用法1-------不带参数先看看不用回调函数的例子eqfunctiona1(){　　console.log(‘a1‘)}(function(){　　functiona2(){　　　... 查看详情

matlab编程与应用系列-第2章数组及矩阵的创建及操作(代码片段)

本系列教程来源于出版设计《基于MATLAB编程基础与典型应用书籍》，如涉及版权问题，请联系：[email protected]。出版社：人民邮电出版社，页数：525。本系列教程目前基于MATLABR2006a，可能对于更高级版本的功能和函数有差异... 查看详情

第5章运算符

ECMA-262描述了一组用于操作数据值的运算符，包括一元运算符、布尔运算符、算术运算符、关系运算符、三元运算符、位运算符及赋值运算符。ECMAScript中的运算符适用于很多值，包括字符串、数值、布尔值、对象等。不过，通过... 查看详情

matlab编程与应用系列-第2章数组及矩阵的创建及操作(代码片段)

本系列教程来源于出版设计《基于MATLAB编程基础与典型应用书籍》，如涉及版权问题，请联系：[email protected]。出版社：人民邮电出版社，页数：525。本系列教程目前基于MATLABR2006a，可能对于更高级版本的功能和函数有差异... 查看详情

运筹学的图书目录

...学发展简史1.2运筹学的内容及特点1.3运筹学在管理领域的应用1.4运筹学的展望第2章线性规划及单纯形法2.1线性规划的概念及其建模2.2图解法2.3线性规划解的概念、性质2.4单纯形法2.5线性规划应用举例2.6上机指导——使用QSB软件... 查看详情

第5章字符串及正则表达式(代码片段)

第5章字符串及正则表达式5.1字符串常用操作 在Python开发过程中，为了实现某项功能，经常需要对某些字符串进行特殊处理，如拼接字符串、截取字符串、格式化字符串等。下面将对Python中常用的字符串操作方法进行介绍。5.... 查看详情

r语言游戏数据分析与挖掘：为啥要对游戏进行分析

...论知识、R语言的安装与使用、R语言中的数据结构、常用操作和绘图功能。第1章主要介绍了游戏数据分析的必要性和流程；第2章讲解了R语言和RStudio的安装及使用方法，并对数据对象和数据导入进行了介绍；第3章介绍了R语言绘... 查看详情

20200109《jquery基础教程》归档

目录前言第1章：jQuery入门第2章：选择元素第3章：事件第4章：样式和动画第5章：操作DOM第6章：通过Ajax发送数据第7章：使用插件第8章：开发插件第9章：高级选择符与遍历第10章：高级事件处理第11章：高级效果第12章：高级DOM... 查看详情

《锋利的jquery（第2版）》笔记-第1章-认识jquery

第1章认识jQuery1.1JavaScript和JavaScript库1.1.1JavaScript简介JS是一种脚本语言。JS的优点：是网页和用户之间实现了一种实时的、动态的和交互的关系，是网页可以包含更多活跃的元素和更加精彩的内容。JS的不足：复杂的文档对象模型... 查看详情

jquery源码学习笔记

在慕课网上学习jQuery源码，做一些笔记小研究。第1章节点遍历 第2章文档处理 第3章元素操作 第4章样式操作 第5章事件体系 第6章数据交互 第7章动画引擎 首先瞅瞅目录，大概可以了解一下这个是怎么... 查看详情

第4章操作列表

...临时变量，可指定任何名称。4.1.2在for循环中执行更多的操作4.1.3在for循环结束后执行一些操作在for循环后面，没有缩进的代码都只执行一次 查看详情

计算机算法设计与分析（第5版）pdf

...决途径。第8章：介绍线性规划与网络流算法。许多实际应用问题可以转化为线性规划和网络流问题，并可用第8章中的算法有效求解。第9章：介绍串和序列的算法。在大数据和人工智能中有应用的串和序列的算法。网盘下载地址... 查看详情