title: 《鋒利的jQuery》六甸箱、jQuery的表單與表格
date: 2017-07-23 22:48:00
tags: 鋒利的jQuery
表單的應(yīng)用
表單的組成部分
表單標(biāo)簽：包含處理表單數(shù)據(jù)所用的服務(wù)器端程序URL以及數(shù)據(jù)提交到服務(wù)器的方法育叁。
表單域：包含文本框、密碼框芍殖、隱藏域豪嗽、多行文本框、復(fù)選框、單選框龟梦、下拉選擇框和文件上傳框等隐锭。
表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕计贰，用于將數(shù)據(jù)傳送到服務(wù)器上或者取消傳送成榜，還可以用來控制其它定義了處理腳本的處理工作。
文本框
單行文本框有失去和獲取焦點(diǎn)事件蹦玫。
$('input').focus(function(){
}).blur(function(){
})
也可以不傳參數(shù)直接focus()和blur()赎婚，可以直接讓文本框失去和獲得焦點(diǎn)。
復(fù)選框
jQuery可以控制復(fù)選框的就是是否被選擇樱溉，checked屬性如果為true就是被選中挣输，為false就是沒有選中。而最常用的就是全選福贞、反選撩嚼、全不選這三種按鈕控制復(fù)選框的狀態(tài)。
// 全選
$('input:checkbox').prop('checked','true');
// 全不選
$('input:checkbox').prop('checked','false');
// 反選
$('input:checkbox').each(function(){
$(this).prop('checked',!$(this).prop('checked'));
// 這里也可以直接用原生來寫
// this.checked = !this.checked;
})
還有一種復(fù)選框是 全選/全不選挖帘，這是用一個(gè)復(fù)選框控制其他復(fù)選框選項(xiàng)的狀態(tài)完丽。
// 全選和全不選
$('#allChecked').click(function(){
$('input:checkbox').prop('checked',$(this).prop('checked'))
})
// 在其他選項(xiàng)被取消勾選后，全選的狀態(tài)也應(yīng)該改為false
$('input:checkbox').click(function(){
var flag = true;
if(!$(this).prop('checked')){
flag = false;
}
$('#allChecked').prop('checked',flag);
})
下拉框
下拉框的應(yīng)用通常是在左右兩個(gè)<select>元素中相互移動(dòng)<option>選項(xiàng)拇舀，常用的包括將選中項(xiàng)添加到右邊/左邊逻族，全部添加到右邊/左邊。還有雙擊移動(dòng)選中的選項(xiàng)骄崩。
選項(xiàng)從左邊<select>移動(dòng)到右邊<select>
// 獲取選中的選項(xiàng)
var $options = $('#select1 option:selected');
// 追加給對(duì)方聘鳞，appendTo方法會(huì)移動(dòng)且刪除原來的元素。
$options.appendTo($('#select2'));
全部添加到右邊
// 獲取全部選項(xiàng)
var $options = $('#select1 option');
// 追加給對(duì)方
$options.appendTo($('#select2'));
雙擊某個(gè)選項(xiàng)添加給對(duì)方
$('#select1').dblclick(function(){
var $options = $(this).find('option:selected');
$options.appendTo('#select2')
})
表單驗(yàn)證
表單注冊(cè)最常用的地方就是登錄注冊(cè)要拂，比如有些設(shè)置為required的必填項(xiàng)要檢查其是否填寫正確抠璃。
$('form:input').blur(function(){
var $parent = $(this).parent();
// 需要先將上次的提示刪除
$parent.find('span').remove();
// 驗(yàn)證用戶名
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>');
}
}
// 其他密碼、郵箱等驗(yàn)證都是類似的脱惰，只是判斷規(guī)則不同
......
})
// 表單提交時(shí)對(duì)整個(gè)表單再做一次驗(yàn)證
$('#submit').click(function(){
$('form:input').blur();
var numErr = $('form:input .error').length;
if(numErr){
// 阻止表單提交
return false;
}
alert('注冊(cè)成功')
})
除了在表單blur時(shí)判斷搏嗡，也可以在其輸入文字時(shí)進(jìn)行實(shí)時(shí)判斷。
$('form:input').blur(function(){
// 上面的事件處理程序拉一，這里就不再重復(fù)寫了
}).keyup(function(){
// 輸入文字時(shí)執(zhí)行blur的事件處理程序采盒，triggerHandler不會(huì)觸發(fā)blur的瀏覽器默認(rèn)事件，所以不會(huì)真的失去焦點(diǎn)導(dǎo)致無法輸入
$(this).triggerHandler('blur')
})
表格的應(yīng)用
表格變色
普通的隔行變色
css部分
.even {
background:#fff38f;
}
.odd {
background:#ffffff;
}
js部分
$('tbody > tr:odd').addClass('odd'); // 奇數(shù)行
$('tbody > tr:even').addClass('even'); // 偶數(shù)行
:odd和:even選擇器的索引是從0開始舅踪，所以第一行是偶數(shù)纽甘。
單選框控制表格行高亮
有種表格的選擇是，點(diǎn)擊當(dāng)前行之后抽碌，當(dāng)前行會(huì)變色悍赢，有可能在第一列是一個(gè)單選框决瞳，也需要被選中。
$('tbody>tr').click(function(){
// 給當(dāng)前行增加selected樣式
$(this).addClass('selected').siblings().removeClass('selected').end().find(':radio').attr('checked',true);
})
// 初始化表格時(shí)讓默認(rèn)選中的行業(yè)要變色
$('table :radio:checked').parent().parent().addClass('selected')
這里使用了
end()方法左权，當(dāng)執(zhí)行siblings()時(shí)皮胡，this已經(jīng)被改變?yōu)楫?dāng)前元素的兄弟元素，而使用end()則會(huì)讓this重新回歸原本的元素赏迟。
復(fù)選框控制表格高亮
和上面的樣式相似屡贺，只是單選改為復(fù)選框
$('tbody>tr').click(function(){
// 判斷是否被選中，有selected類名就是被選中了
var hasSelected = $(this).hasClass('selected');
// 如果選中移除selected類锌杀，否則就加上
$(this)[hasSelected?'removeClass':'addClass'].('selected');
// 查找內(nèi)部的checkbox甩栈，設(shè)置相對(duì)應(yīng)的屬性
$(this).find(':checkbox').attr('checked',!hasSelected);
})
// 初始化表格時(shí)讓默認(rèn)選中的行業(yè)要變色
$('table :checkbox:checked').parent().parent().addClass('selected')
表格的內(nèi)容篩選
相對(duì)是在表格內(nèi)部進(jìn)行姓名的搜索，輸入'王'就顯示出所有名字帶有'王'字的行糕再。
$('#inputName').keyup(function(){
$('table tbody tr').hide().filter(':contains("' + ( $(this).val() ) + '")').show();
}).keyup(); // 打開頁面時(shí)自動(dòng)執(zhí)行一次
:contains()是匹配包含指定文本的元素量没，在這里指的是輸入的文字，filter()是在this中篩選出符合條件的元素集合
其他應(yīng)用
網(wǎng)頁字體大小
假設(shè)字體的放大和縮小都是span標(biāo)簽突想，文字內(nèi)容元素的id為para殴蹄。
$('span').click(function(){
var thisEle = $('#para').css('font-size');
var textFontSize = parseInt(thisEle,10);
// 獲取現(xiàn)在的字號(hào)的單位
var unit = thisEle.slice(2);
var cName = $(this).attr('class');
// 根據(jù)按鈕的類名判斷是放大還是縮小
if(cName == 'bigger'){
textFontSize += 2;
}else if(cName == 'smaller'){
textFontSize -= 2;
}
$('#para').css('font-size',textFontSize + unit);
})
