《锋利的jQuery》六、jQuery的表单与表格

---

title: 《锋利的jQuery》六、jQuery的表单与表格
date: 2017-07-23 22:48:00
tags: 锋利的jQuery

---

表单的应用

表单的组成部分

1. 表单标签：包含处理表单数据所用的服务器端程序URL以及数据提交到服务器的方法。

2. 表单域：包含文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

3. 表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上或者取消传送，还可以用来控制其它定义了处理脚本的处理工作。

文本框

单行文本框有失去和获取焦点事件。

$('input').focus(function(){

}).blur(function(){

})

也可以不传参数直接focus()和blur()，可以直接让文本框失去和获得焦点。

复选框

jQuery可以控制复选框的就是是否被选择，checked属性如果为true就是被选中，为false就是没有选中。而最常用的就是全选、反选、全不选这三种按钮控制复选框的状态。

// 全选
$('input:checkbox').prop('checked','true');

// 全不选
$('input:checkbox').prop('checked','false');

// 反选
$('input:checkbox').each(function(){
    $(this).prop('checked',!$(this).prop('checked'));
    // 这里也可以直接用原生来写
    // this.checked = !this.checked;
})

还有一种复选框是 全选/全不选，这是用一个复选框控制其他复选框选项的状态。

// 全选和全不选
$('#allChecked').click(function(){
    $('input:checkbox').prop('checked',$(this).prop('checked'))
})

// 在其他选项被取消勾选后，全选的状态也应该改为false
$('input:checkbox').click(function(){
    var flag = true;
    if(!$(this).prop('checked')){
        flag = false;
    }
    $('#allChecked').prop('checked',flag);
})

下拉框

下拉框的应用通常是在左右两个<select>元素中相互移动<option>选项，常用的包括将选中项添加到右边/左边，全部添加到右边/左边。还有双击移动选中的选项。

选项从左边<select>移动到右边<select>

// 获取选中的选项
var $options = $('#select1 option:selected');
// 追加给对方，appendTo方法会移动且删除原来的元素。
$options.appendTo($('#select2'));

全部添加到右边

// 获取全部选项
var $options = $('#select1 option');
// 追加给对方
$options.appendTo($('#select2'));

双击某个选项添加给对方

$('#select1').dblclick(function(){
    var $options = $(this).find('option:selected');
    $options.appendTo('#select2')
})

表单验证

表单注册最常用的地方就是登录注册，比如有些设置为required的必填项要检查其是否填写正确。

$('form:input').blur(function(){
    var $parent = $(this).parent();
    // 需要先将上次的提示删除
    $parent.find('span').remove();

    // 验证用户名
    if($(this).is('#username')){
        if(this.value == '' || this.value.length < 6){
            var errMsg = '至少要输入6位的用户名';
            $parent.append('<span class="tips error">' + errMsg + '</span>');
        }else{
            var okMsg = '输入正确';
            $parent.append('<span class="tips success">' + okMsg + '</span>');
        }
    }

    // 其他密码、邮箱等验证都是类似的，只是判断规则不同
    ......
})

// 表单提交时对整个表单再做一次验证
$('#submit').click(function(){
    $('form:input').blur();
    var numErr = $('form:input .error').length;
    if(numErr){
        // 阻止表单提交
        return false;
    }
    alert('注册成功')
})

除了在表单blur时判断，也可以在其输入文字时进行实时判断。

$('form:input').blur(function(){
    // 上面的事件处理程序，这里就不再重复写了
}).keyup(function(){
    // 输入文字时执行blur的事件处理程序，triggerHandler不会触发blur的浏览器默认事件，所以不会真的失去焦点导致无法输入
    $(this).triggerHandler('blur')  
})

表格的应用

表格变色

普通的隔行变色

css部分

.even {
    background:#fff38f;
}
.odd {
    background:#ffffff;
}

js部分

$('tbody > tr:odd').addClass('odd');  // 奇数行
$('tbody > tr:even').addClass('even');   // 偶数行

:odd和:even选择器的索引是从0开始，所以第一行是偶数。

单选框控制表格行高亮

有种表格的选择是，点击当前行之后，当前行会变色，有可能在第一列是一个单选框，也需要被选中。

$('tbody>tr').click(function(){
    // 给当前行增加selected样式
    $(this).addClass('selected').siblings().removeClass('selected').end().find(':radio').attr('checked',true);
})
// 初始化表格时让默认选中的行业要变色
$('table :radio:checked').parent().parent().addClass('selected')

这里使用了end()方法，当执行siblings()时，this已经被改变为当前元素的兄弟元素，而使用end()则会让this重新回归原本的元素。

复选框控制表格高亮

和上面的样式相似，只是单选改为复选框

$('tbody>tr').click(function(){
    // 判断是否被选中，有selected类名就是被选中了
    var hasSelected = $(this).hasClass('selected');
    // 如果选中移除selected类，否则就加上
    $(this)[hasSelected?'removeClass':'addClass'].('selected');
    // 查找内部的checkbox，设置相对应的属性
    $(this).find(':checkbox').attr('checked',!hasSelected);
})
// 初始化表格时让默认选中的行业要变色
$('table :checkbox:checked').parent().parent().addClass('selected')

表格的内容筛选

相对是在表格内部进行姓名的搜索，输入'王'就显示出所有名字带有'王'字的行。

$('#inputName').keyup(function(){
    $('table tbody tr').hide().filter(':contains("' + ( $(this).val() ) + '")').show();
}).keyup();  // 打开页面时自动执行一次

:contains()是匹配包含指定文本的元素，在这里指的是输入的文字，filter()是在this中筛选出符合条件的元素集合

其他应用

网页字体大小

假设字体的放大和缩小都是span标签，文字内容元素的id为para。

$('span').click(function(){
    var thisEle = $('#para').css('font-size');
    var textFontSize = parseInt(thisEle,10);
    // 获取现在的字号的单位
    var unit = thisEle.slice(2);
    var cName = $(this).attr('class');
    // 根据按钮的类名判断是放大还是缩小
    if(cName == 'bigger'){
        textFontSize += 2;
    }else if(cName == 'smaller'){
        textFontSize -= 2;
    }
    $('#para').css('font-size',textFontSize + unit);
})