第5章使用jquery操作表單和表格

本章要求：第5章使用jQuery操作表單和表格

HTML表單概述操作文本框和文本域操作單選按鈕和復(fù)選框操作下拉框表單驗(yàn)證表格的隔行換色表格的展開(kāi)與關(guān)閉表格內(nèi)容的篩選主要內(nèi)容1.HTML表單概述2.使用jQuery操作表單元素3.使用jQuery操作表格4.綜合實(shí)例：刪除記錄時(shí)的提示效果第6章使用jQuery操作表單和表格

6.1HTML表單概述6.1.1表單標(biāo)記<form>6.1.2輸入標(biāo)記<input>6.1.3文本域標(biāo)記<textarea>6.1.4菜單和列表標(biāo)記<select>，<option>6.1.1表單標(biāo)記<form>

表單是網(wǎng)頁(yè)上的一個(gè)特定區(qū)域。這個(gè)區(qū)域是由一對(duì)<form>標(biāo)記定義的。在<form>與</form>之間的一切都屬于表單的內(nèi)容。每個(gè)表單元素開(kāi)始于form元素，可以包含所有的表單控件，還有任何必需的伴隨數(shù)據(jù)，如控件的標(biāo)簽、處理數(shù)據(jù)的腳本或程序的位置等。在表單的<form>標(biāo)記中，還可以設(shè)置表單的基本屬性，包括表單的名稱(chēng)、處理程序、傳送方式等。一般情況下，表單action屬性和傳送方法method是必不可少的參數(shù)。1．a(chǎn)ction屬性action屬性是指定處理表單提交數(shù)據(jù)的腳本文件。該文件可以是JSP、或PHP腳本文件等具體語(yǔ)法如下：<formaction=”URL”>……</form>URL：表單提交的地址。說(shuō)明：在action屬性中指定處理腳本文件時(shí)可以指定文件在Web服務(wù)器上的路徑?？梢允墙^對(duì)路徑，也可以是相對(duì)路徑。2表單名稱(chēng)name屬性名稱(chēng)屬性name用于給表單命名。這一屬性不是表單的必需屬性，但是為了防止表單信息在提交到后臺(tái)處理程序時(shí)出現(xiàn)混亂，一般要設(shè)置一個(gè)與表單功能符合的名稱(chēng)。例如登錄的表單可以命名為loginForm。不同的表單盡量用不同的名稱(chēng)，以避免混亂。具體語(yǔ)法如下：

<formname=”form_name”>……</form>

form_name：表單名稱(chēng)。3提交方式method屬性表單的method屬性用來(lái)定義處理程序從表單中獲得信息的方式，可取值為get或post，它決定了表單中已收集的數(shù)據(jù)是用什么方式提交到服務(wù)器的。具體語(yǔ)法如下：

<formmethod=”method”>……</form>

method：提交方式，它的值可以為get或post。說(shuō)明：Method=get：使用這種方式提交表單時(shí)，輸入的數(shù)據(jù)會(huì)附加在URL之后，由客戶(hù)端直接發(fā)送至服務(wù)器，所以速度上會(huì)比post快。缺點(diǎn)是數(shù)據(jù)長(zhǎng)度不能夠太長(zhǎng)，在沒(méi)有指定method的情形下，一般都會(huì)視get為默認(rèn)值。Method=post：使用這種設(shè)置時(shí)，表單數(shù)據(jù)是與URL分開(kāi)發(fā)送的，用戶(hù)端的計(jì)算機(jī)會(huì)通知服務(wù)器來(lái)讀取數(shù)據(jù)，所以通常沒(méi)有數(shù)據(jù)長(zhǎng)度上的限制，缺點(diǎn)是速度上會(huì)比get慢。

4編碼方式enctype屬性表單中的enctype參數(shù)用于設(shè)置表單信息提交的編碼方式。具體語(yǔ)法如下：<formenctype=”value”>……</form>value：取值如表6-1所示。取值描述text/plain以純文本的形式傳送application/x-www-form-urlencoded默認(rèn)的編碼形式multipart/form-dataMIME編碼，上傳文件的表單必須選擇該項(xiàng)5目標(biāo)顯示方式target屬性target屬性用來(lái)指定目標(biāo)窗口的打開(kāi)方式。表單的目標(biāo)窗口往往來(lái)顯示表單的返回信息，例如是否成功提交了表單的內(nèi)容、是否出錯(cuò)等。具體語(yǔ)法如下：

<formtarget=”target_win”>……</form>target_win：取值如表6-2所示。取值描述_blank將返回信息顯示在新打開(kāi)的瀏覽器窗口中_parent將返回信息顯示在父級(jí)瀏覽器窗口中_self將返回信息顯示在當(dāng)前瀏覽器窗口中_top將返回信息顯示在頂級(jí)瀏覽器窗口中輸入標(biāo)記<input>是表單中最常用的標(biāo)記之一。常用的文本域、按鈕等都使用這個(gè)標(biāo)記。具體語(yǔ)法如下：<form> <inputname=”field_name”type=”type_name”></form>field_name：控件名稱(chēng)。type_name：控件類(lèi)型，所包含的控件類(lèi)型如表6-3所示。6.1.2輸入標(biāo)記<input>

取值描述text文本框password密碼域，用戶(hù)在頁(yè)面輸入時(shí)不顯示具體的內(nèi)容，以*代替radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖形域，也稱(chēng)為圖像提交按鈕hidden隱藏域，隱藏域?qū)⒉伙@示在頁(yè)面上，只將內(nèi)容傳遞到服務(wù)器中file文件域1．文本框texttext屬性值用來(lái)設(shè)定在表單的文本域中，輸入任何類(lèi)型的文本、數(shù)字或字母。輸入的內(nèi)容以單行顯示。具體語(yǔ)法如下：

<inputtype=”text”name=”field_name”maxlength=max_valuesize=size_valuevalue=”field_value”>文字域?qū)傩缘暮x如表6-4所示。取值描述name文本框的名稱(chēng)maxlength文本框的最大輸入字符數(shù)size文本框的寬度（以字符為單位）value文本框的默認(rèn)值【例6-1】在頁(yè)面中使用文本框，做一個(gè)人口調(diào)查的頁(yè)面。代碼如下所示，運(yùn)行效果如圖6-2所示。<form><h3align="center">人口調(diào)查</h3><!--設(shè)置表示姓名的文本域-->

姓名：<inputtype=”text”name=”username”size=20><br/> <!--設(shè)置表示姓名的文本域長(zhǎng)度為4最大輸入字符數(shù)為1-->

性別：<inputtype=”text”name=”sex”size=4maxlength=1>   <!--設(shè)置表示年齡的文本域長(zhǎng)度為4最大輸入字符數(shù)為3-->

年齡：<inputtype=”text”name=”age”size=4maxlength=3><br/> <!--設(shè)置表示地址的文本域長(zhǎng)度為50，文本域中默認(rèn)值為吉林省長(zhǎng)春市-->

居住地址：<inputtype=”text”name=”address”size=50value="吉林省長(zhǎng)春市"></form>圖6-2在頁(yè)面中添加了文字域2．密碼域password在表單中還有一種文本域的形式為密碼域，輸入到文本域中的文字均以星號(hào)“*”或圓點(diǎn)顯示。具體語(yǔ)法如下：

<inputtype=”password”name=”field_name”maxlength=max_valuesize=size_value>密碼域?qū)傩缘暮x如表6-5所示。取值描述name密碼域的名稱(chēng)maxlength密碼域的最大輸入字符數(shù)size密碼域的寬度（以字符為單位）value密碼域的默認(rèn)值

【例6-2】

在網(wǎng)絡(luò)中常常有需要修改密碼的時(shí)候，現(xiàn)在使用密碼域，創(chuàng)建一個(gè)修改密碼的頁(yè)面代碼如下所示，運(yùn)行效果如圖6-3所示。<form><h3align="center">修改密碼</h3>用

戶(hù)

名：<inputtype="text"name="username"size=15><br>原

密

碼：<inputtype="password"name="oldpassword"maxlength=8size=15><br>新

密

碼：<inputtype="password"name="newpassword1"maxlength=8size=15><br>確認(rèn)新密碼：<inputtype="password"name="newpassword2"maxlength=8size=15></form>圖6-3在頁(yè)面中添加密碼域3．單選按鈕radio在網(wǎng)頁(yè)中，單選按鈕用來(lái)讓瀏覽者進(jìn)行單一選擇，在頁(yè)面中以圓框表示。單選按鈕必須設(shè)置參數(shù)value的值。而對(duì)于一個(gè)選擇中的所有單選框來(lái)說(shuō)，往往要設(shè)定同樣的名稱(chēng)，這樣在傳遞時(shí)才能更好地對(duì)某一個(gè)選擇內(nèi)容的取值進(jìn)行判斷。具體語(yǔ)法如下：

<inputtype=”radio”name=”field_name”checkedvalue=”value”>checked：表示此項(xiàng)為默認(rèn)選中。value：表示選中項(xiàng)目后傳送到服務(wù)器端的值。【例6-3】

在頁(yè)面中使用單選框，做一個(gè)外來(lái)人員登記頁(yè)面。代碼如下所示，運(yùn)行效果如圖6-4所示。<form><h3align="center">外來(lái)人員登記表</h3>姓名：<inputtype="text"name="username"size=15/><br>性別：<inputtype="radio"name="field_name"checkedvalue="男"/>男 <inputtype="radio"name="field_name"value="女"/>女<br>身份證號(hào)：<inputtype="text"name="IDcard"size=20/><br>原因：<inputtype="text"name="causation"size=50/></form>圖6-4在頁(yè)面中使用單選框4．復(fù)選框checkbox瀏覽者填寫(xiě)表單時(shí)，有一些內(nèi)容可以通過(guò)讓瀏覽者進(jìn)行選擇的形式來(lái)實(shí)現(xiàn)。例如常見(jiàn)的網(wǎng)上調(diào)查，首先提出調(diào)查的問(wèn)題，然后讓瀏覽者在若干個(gè)選項(xiàng)中進(jìn)行選擇。又例如收集個(gè)人信息時(shí)，要求在個(gè)人愛(ài)好的選項(xiàng)中進(jìn)行選擇等。復(fù)選框能夠進(jìn)行項(xiàng)目的多項(xiàng)選擇，以一個(gè)方框表示。具體語(yǔ)法如下：

<inputtype=”checkbox”name=”field_name”checkedvalue=”value”>checked：表示此項(xiàng)為默認(rèn)選中。value：表示選中項(xiàng)目后傳送到服務(wù)器端的值?！纠?-4】

在頁(yè)面中使用復(fù)選框，選擇你所喜歡的運(yùn)動(dòng)。代碼如下所示，運(yùn)行效果如圖6-5所示。<form><h3align="center">選擇你喜歡的運(yùn)動(dòng)</h3><inputtype="checkbox"name="hobby"value="游泳">游泳<inputtype="checkbox"name="hobby"value="足球">足球<inputtype="checkbox"name="hobby"value="籃球">籃球<br/><inputtype="checkbox"name="hobby"value="滑冰">滑冰<inputtype="checkbox"name="hobby"value="滑雪">滑雪<inputtype="checkbox"name="hobby"value="乒乓球">乒乓球</form>圖6-5在頁(yè)面中使用復(fù)選框5．普通按鈕button在網(wǎng)頁(yè)中按鈕也很常見(jiàn)，在提交頁(yè)面、恢復(fù)選項(xiàng)時(shí)常常用到。普通按鈕一般情況下要配合腳本來(lái)進(jìn)行表單處理。具體語(yǔ)法如下：

<inputtype=”button”name=”field_name”value=”button_text”>field_name：普通按鈕的名稱(chēng)。button_text：按鈕上顯示的文字。6．提交按鈕submit提交按鈕是一種特殊的按鈕，在單擊該類(lèi)按鈕時(shí)可以實(shí)現(xiàn)表單內(nèi)容的提交。具體語(yǔ)法如下：

<inputtype=”submit”name=”field_name”value=”submit_text”>field_name：提交按鈕的名稱(chēng)。submit_text：按鈕上顯示的文字。【例6-5】在頁(yè)面中分別創(chuàng)建一個(gè)普通按鈕和一個(gè)提交按鈕，普通按鈕用來(lái)關(guān)閉該頁(yè)面，提交按鈕用來(lái)提交表單。代碼如下所示，運(yùn)行效果如圖6-6所示。<!--表單提交到一個(gè)郵箱地址--><formaction=""> <!--使用submit提交表單-->提交按鈕：<inputtype="submit"value="提交表單頁(yè)面"/><br/> <!--onclick為鼠標(biāo)單擊事件，window.close()為關(guān)閉該頁(yè)面的方法-->普通按鈕：<inputtype="button"value="關(guān)閉當(dāng)前頁(yè)面"onclick="window.close();"/></form>圖6-6單擊普通按鈕的效果在HTML中還有一種特殊定義的文本樣式，稱(chēng)為文字域或文本域。它與文字字段的區(qū)別在于可以添加多行文字，從而可以輸入更多的文本。這類(lèi)控件在一些留言板中最為常見(jiàn)。具體語(yǔ)法如下：

<textareaname=”textname”value=”text_value”rows=rows_valuecols=cols_valuevalue=”value”>這些屬性的含義如表6-6所示。6.1.3文本域標(biāo)記<textarea>文本域標(biāo)記屬性描述name文本域的名稱(chēng)rows文本域的行數(shù)cols文本域的列數(shù)value文本域的默認(rèn)值【例6-6】

創(chuàng)建一個(gè)留言板頁(yè)面，使用在頁(yè)面中使用文本域。代碼如下所示，運(yùn)行效果如圖6-7所示。<form><h3align="center">留言板</h3>標(biāo)題：<inputtype="text"name="username"size=50><br/><br/><!--設(shè)置一個(gè)文本域，設(shè)置該文本域的行數(shù)為10列數(shù)為70-->內(nèi)容：<br/><textareaname="word"rows=10cols=70></textarea></form>圖6-7在頁(yè)面中添加文本域菜單列表類(lèi)的控件主要是為了節(jié)省頁(yè)面空間而設(shè)計(jì)的。菜單和列表都是通過(guò)<select>和<option>標(biāo)記來(lái)實(shí)現(xiàn)的。菜單是一種最節(jié)省空間的方式，正常狀態(tài)下只能看到一個(gè)選項(xiàng)，單擊按鈕打開(kāi)菜單后才能看到全部的選項(xiàng)。列表可以顯示一定數(shù)量的選項(xiàng)，如果超出了這個(gè)數(shù)量，會(huì)自動(dòng)出現(xiàn)滾動(dòng)條，瀏覽者可以通過(guò)拖動(dòng)滾動(dòng)條來(lái)觀看各選項(xiàng)。具體語(yǔ)法如下：

<selectname=’select_name’size=select_sizemultiple>

<optionvalue=”option_value”selected>選項(xiàng)</option>

<optionvalue=”option_value”>選項(xiàng)</option>

</select>這些屬性的含義如表6-7所示。6.1.4菜單和列表標(biāo)記<select>，<option>菜單和列表標(biāo)記屬性描述name菜單和列表的名稱(chēng)size顯示的選項(xiàng)數(shù)目multiple列表中的項(xiàng)目多卷value選項(xiàng)值selected默認(rèn)選項(xiàng)【例6-7】

利用<select>標(biāo)簽創(chuàng)建一個(gè)用來(lái)做學(xué)生業(yè)余生活調(diào)查的頁(yè)面。代碼如下所示，運(yùn)行效果如圖6-8所示。<form><h3>學(xué)生業(yè)余生活調(diào)查</h3>調(diào)查人姓名：<inputtype="text"name="username"size="10"/><br><br>愛(ài)好的體育運(yùn)動(dòng)：<selectname="hobby"> <optionvalue="游泳"selected>游泳</option> <optionvalue="足球">足球</option> <optionvalue="籃球">籃球</option> <optionvalue="跑步">跑步</option></select><br><br>周末一般都在哪：<br><br><selectname="where"size="4"> <optionvalue="在家"selected>在家</option> <optionvalue="去逛街">去逛街</option> <optionvalue="去訪(fǎng)友">去訪(fǎng)友</option> <optionvalue="去郊游">去郊游</option></select></form>圖-8學(xué)生業(yè)余生活調(diào)查6.2.1操作文本框6.2.2操作文本域6.2.3操作單選按鈕和復(fù)選框6.2.4操作下拉框6.2.5表單驗(yàn)證6.2使用jQuery操作表單元素

文本框是表單中最基本也是最常見(jiàn)的元素，在jQuery中，獲取文本框的值，方法如下：

vartextCon=$("#id").val();或者

vartextCon=$("#id").attr("value");設(shè)置文本框的值，可以使用attr()方法，代碼如下：

$("#id").attr("value","要設(shè)定的值");設(shè)置文本框不可編輯的方法如下：

$("#id").attr("disabled","disabled");設(shè)置文本框可編輯的方法如下：

$("#id").removeAttr("disabled");【例6-8】

獲取文本框的值以及切換編輯狀態(tài)（1）創(chuàng)建一個(gè)名稱(chēng)為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語(yǔ)句引入jQuery庫(kù)。<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）在頁(yè)面的<body>標(biāo)記中，一個(gè)文本框，用來(lái)輸入用戶(hù)名，以及兩個(gè)按鈕，其中一個(gè)是提交按鈕，另外一個(gè)是普通按鈕，關(guān)鍵代碼如下：用戶(hù)名：<inputtype="text"name="testInput"id="testInput"/><br/><br/><inputtype="submit"name="vbtn"id="vbtn"value="提交"/> <inputtype="button"name="dbtn"id="dbtn"value="修改"/>6.2.1操作文本框（3）在引入jQuery庫(kù)的代碼下方編寫(xiě)jQuery代碼，實(shí)現(xiàn)當(dāng)點(diǎn)擊提交按鈕時(shí)，如果文本框內(nèi)容不為空，則彈出文本框的值，并且將文本框的編輯狀態(tài)變?yōu)閐isabled，如果文本框沒(méi)有內(nèi)容，則給出提示信息；當(dāng)點(diǎn)擊修改按鈕時(shí)，如果文本框?yàn)椴豢删庉嫚顟B(tài)，則將其變?yōu)榭删庉嫚顟B(tài)，具體代碼如下：

$(document).ready(function(){ $("#vbtn").click(function(){ if($("#testInput").val()!=""){ alert($("#testInput").val());//彈出文本框的值

$("#testInput").attr("disabled","disabled");//將文本框變?yōu)椴豢删庉嫚顟B(tài)

}else{ alert("請(qǐng)輸入文本內(nèi)容！"); $("#testInput").focus();//將焦點(diǎn)設(shè)置到文本框處

returnfalse; } }); $("#dbtn").click(function(){ if($("#testInput").attr("disabled")=="disabled"){ $("#testInput").removeAttr("disabled");//移除文本框的disabled屬性

} }); })運(yùn)行本實(shí)例，輸入用戶(hù)名，點(diǎn)擊提交，將顯示如圖6-11所示的運(yùn)行結(jié)果，點(diǎn)擊“確定”按鈕可以看到，文本框變?yōu)椴豢删庉嫚顟B(tài)，如圖6-12所示。圖6-11彈出文本框的值

圖6-12文本框不可編輯

提交完畢后，點(diǎn)擊“修改“按鈕可以看到，文本框變?yōu)榭删庉嫚顟B(tài)，如圖6-13所示。圖6-13文本框可編輯文本域的屬性設(shè)置、值的獲取以及編輯狀態(tài)的修改與文本框都相同。本節(jié)介紹文本域的實(shí)際應(yīng)用。1．文本域的高度變化【例6-9】

制作一個(gè)高度可變的評(píng)論框（1）創(chuàng)建一個(gè)名稱(chēng)為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語(yǔ)句引入jQuery庫(kù)。<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）在頁(yè)面的<body>標(biāo)記中，放置一個(gè)評(píng)論框，即文本域，在評(píng)論框的上方放置兩個(gè)按鈕，用來(lái)控制評(píng)論框的高度，關(guān)鍵代碼如下：<divclass="message"> <divclass="msg_top"> <inputtype="button"value="放大"id="bigBtn"/>  <inputtype="button"value="縮小"id="smallBtn"/> </div> <divclass="tt"> <textareaid="content"rows="4"cols="35">明日編程詞典系列軟件是由近百位軟件開(kāi)發(fā)專(zhuān)業(yè)人士聯(lián)手打造，國(guó)內(nèi)第一部為編程開(kāi)發(fā)人員研制的編程專(zhuān)業(yè)軟件。

</textarea> </div></div>（3）該文件的CSS樣式請(qǐng)?jiān)斠?jiàn)光盤(pán)。6.2.2操作文本域（4）在引入jQuery庫(kù)的代碼下方編寫(xiě)jQuery代碼，實(shí)現(xiàn)當(dāng)點(diǎn)擊放大按鈕時(shí)，判斷評(píng)論框是否處于動(dòng)畫(huà)中，如果沒(méi)處于動(dòng)畫(huà)中，則判斷評(píng)論框的高度是否小于350px，小于350px則在原來(lái)基礎(chǔ)上增加70px；點(diǎn)擊縮小時(shí)，仍然先判斷評(píng)論框是否處于動(dòng)畫(huà)中，如果沒(méi)有處于動(dòng)畫(huà)中，則判斷評(píng)論框的高度是否大于70px，大于70px，則將評(píng)論框高度在原來(lái)基礎(chǔ)上減少70px，具體代碼如下：

$(document).ready(function(){ var$content=$("#content");//獲取文本域?qū)ο?/p>

$("#bigBtn").click(function(){//放大按鈕單擊事件

if(!$content.is(":animated")){//是否處于動(dòng)畫(huà)中

if($content.height()<350){ //將文本域高度在原來(lái)的基礎(chǔ)上增加70 $content.animate({height:"+=70"},500); } } }) $("#smallBtn").click(function(){//縮小按鈕單擊事件

if(!$content.is(":animated")){//是否處于動(dòng)畫(huà)中

if($content.height()>70){ //將文本域高度在原來(lái)的基礎(chǔ)上減少70 $content.animate({height:"-=70"},500); } } }) })運(yùn)行本實(shí)例，點(diǎn)擊“放大”按鈕之后，可以看到如圖6-14所示效果，點(diǎn)擊“縮小”按鈕之后，可以看到如圖6-15所示效果。圖6-14評(píng)論框放大效果圖6-15評(píng)論框縮小效果2．文本域的滾動(dòng)條高度變化【例6-10】

制作一個(gè)高度可變的評(píng)論框（1）創(chuàng)建一個(gè)名稱(chēng)為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語(yǔ)句引入jQuery庫(kù)。<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）在頁(yè)面的<body>標(biāo)記中，放置一個(gè)評(píng)論框，即文本域，在評(píng)論框的上方放置兩個(gè)按鈕，用來(lái)控制滾動(dòng)條滾動(dòng)，關(guān)鍵代碼如下：<divclass="message"> <divclass="msg_top"> <inputtype="button"value="向上"id="upBtn"/>  <inputtype="button"value="向下"id="downBtn"/> </div> <divclass="tt"> <textareaid="content"rows="4"cols="35">明日編程詞典系列軟件是由近百位軟件開(kāi)發(fā)專(zhuān)業(yè)人士聯(lián)手打造，……<!—省略部分文字

</textarea> </div></div>（3）該文件的CSS樣式請(qǐng)?jiān)斠?jiàn)光盤(pán)。（4）在引入jQuery庫(kù)的代碼下方編寫(xiě)jQuery代碼，實(shí)現(xiàn)當(dāng)點(diǎn)擊“向上”或“向下”按鈕時(shí)，滾動(dòng)條滾動(dòng)到指定位置，具體代碼如下：

$(document).ready(function(){ var$content=$("#content");//獲取文本域?qū)ο?/p>

$("#upBtn").click(function(){//向上按鈕單擊事件

if(!$content.is(":animated")){//是否處于動(dòng)畫(huà)中

if($content.height()<350){ $content.animate({scrollTop:"-=40"},500); } } }) $("#downBtn").click(function(){//向下按鈕單擊事件

if(!$content.is(":animated")){//是否處于動(dòng)畫(huà)中

if($content.height()>40){ $content.animate({scrollTop:"+=40"},500); } } }) })運(yùn)行本實(shí)例，點(diǎn)擊“向下”按鈕之后，可以看到如圖6-16所示效果，點(diǎn)擊“向上”按鈕之后，可以看到如圖6-17所示效果。圖6-16評(píng)論框向下滾動(dòng)效果圖6-17評(píng)論框向上滾動(dòng)效果6.2.3操作單選按鈕和復(fù)選框通常對(duì)單選按鈕和復(fù)選框的常用操作都類(lèi)似，都是選中、取消選中、判斷選擇狀態(tài)等。1.選中單選按鈕和復(fù)選框使用attr()方法可以設(shè)置選中的單選按鈕和復(fù)選框，用法如下：

$("#id").attr("checked",true);2.取消選中單選按鈕和復(fù)選框使用attr()方法取消選中的單選按鈕和復(fù)選框的選中，用法如下：

$("#id").removeAttr("checked");3.判斷選擇狀態(tài)判斷單選按鈕和復(fù)選框的選擇狀態(tài)，用法如下：

if($("#id")..attr("checked")=='checked'){

//省略部分代碼

}

【例6-11】

使用按鈕控制單選框的選中狀態(tài)（1）創(chuàng)建一個(gè)名稱(chēng)為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語(yǔ)句引入jQuery庫(kù)。<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）在頁(yè)面的<body>標(biāo)記中，放置兩個(gè)單選按鈕，再創(chuàng)建兩個(gè)button按鈕控制單選按鈕的選中狀態(tài)，代碼如下：<form><h3>選擇你喜歡吃的水果</h3><inputtype="radio"name="fruit"value="香蕉"/>香蕉<inputtype="radio"name="fruit"value="葡萄"/>葡萄<br/><inputtype="button"id="bbtn"value="香蕉"/> <inputtype="button"id="gbtn"value="葡萄"/></form>（3）在引入jQuery庫(kù)的代碼下方編寫(xiě)jQuery代碼，當(dāng)點(diǎn)擊普通按鈕“香蕉”時(shí)，選中“香蕉”單選框，當(dāng)點(diǎn)擊普通按鈕“葡萄”時(shí)，選中“葡萄”單選框，具體代碼如下：$(function(){ $("#bbtn").click(function(){ $("input[type=radio]").eq(0).attr("checked",true); }) $("#gbtn").click(function(){ $("input[type=radio]").eq(1).attr("checked",true); })})運(yùn)行本實(shí)例，可以看到如圖6-18所示效果。圖6-18操作單選按鈕【例6-12】

控制復(fù)選框的全選、全不選和反選（1）創(chuàng)建一個(gè)名稱(chēng)為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語(yǔ)句引入jQuery庫(kù)。<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）在頁(yè)面的<body>標(biāo)記中，創(chuàng)建form表單，在表單中放置一組復(fù)選框，再創(chuàng)建4個(gè)按鈕，分別控制復(fù)選框的全選、全不選、反選和表單的提交，代碼如下：<form><h3align="center">選擇你喜歡的運(yùn)動(dòng)</h3><inputtype="checkbox"name="hobby"value="游泳">游泳<inputtype="checkbox"name="hobby"value="足球">足球<inputtype="checkbox"name="hobby"value="籃球">籃球<inputtype="checkbox"name="hobby"value="滑冰">滑冰<inputtype="checkbox"name="hobby"value="滑雪">滑雪<inputtype="checkbox"name="hobby"value="乒乓球">乒乓球<br/><br/><inputtype="button"id="checkAll"value="全選"> <inputtype="button"id="unCheckAll"value="全不選"> <inputtype="button"id="revBtn"value="反選"> <inputtype="button"id="subBtn"value="提交"> </form>（3）在引入jQuery庫(kù)的代碼下方編寫(xiě)jQuery代碼，控制復(fù)選框的全選、全不選、反選以及表單提交，具體代碼如下：$(function(){ $("#checkAll").click(function(){ $("input[type=checkbox]").attr("checked",true); }) $("#unCheckAll").click(function(){ $("input[type=checkbox]").removeAttr("checked"); })

$("#revBtn").click(function(){ $("input[type=checkbox]").each(function(){ this.checked=!this.checked; }); }) $("#subBtn").click(function(){ varmsg="你喜歡的運(yùn)動(dòng)是：\r\n"; $("input[type=checkbox]:checked").each(function(){ msg+=$(this).val()+"\r\n"; }); alert(msg); })})

運(yùn)行本實(shí)例，可以看到如圖6-19所示效果。圖6-19操作復(fù)選框

通過(guò)運(yùn)行本實(shí)例可以看到，全選操作就是將復(fù)選框全部選中，因此，為“全選”按鈕綁定單擊事件，將全部type屬性為checkbox的<input>元素的checked屬性設(shè)置為true。同理全不選操作是將全部type屬性為checkbox的<input>元素的checked屬性移除。反選操作相對(duì)復(fù)雜一些，需要遍歷每個(gè)復(fù)選框，將元素的checked屬性設(shè)置為與當(dāng)前值的相反的值。注意，此處的

this.checked=!this.checked;使用的是原生JavaScript的DOM方法，“this”為JavaScript對(duì)象，而非jQuery對(duì)象，這樣書(shū)寫(xiě)更加的簡(jiǎn)介易懂。最后是“提交”按鈕的功能，將選中項(xiàng)的值彈出，獲取復(fù)選框的值可以通過(guò)val()方法實(shí)現(xiàn)。6.2.4操作下拉框1.讀取下拉框的值讀取下拉框的值可以使用val()方法，它的用法如下：

varselVal=$("#id").val();2.設(shè)置下拉框的選中項(xiàng)使用attr()方法設(shè)置下拉框的選中項(xiàng)，用法如下：

$("#id").attr("value",選中項(xiàng)的值);3.清空下拉菜單可以使用empty()方法清空下拉菜單，用法如下：

if($("#id").empty();4.向下拉菜單中添加菜單項(xiàng)可以使用append()方法向下拉菜單中添加菜單項(xiàng)，用法如下：

if($("#id").append("<optionvalue=’值’>文本</option>");【例6-13】jQuery操作下拉框（1）創(chuàng)建一個(gè)名稱(chēng)為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語(yǔ)句引入jQuery庫(kù)。<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）在頁(yè)面的<body>標(biāo)記中，創(chuàng)建2個(gè)下拉框以及四個(gè)功能按鈕，代碼如下：<divclass="first"> <selectmultiplename="hobby"id="hobby"class="sel"> <optionvalue="游泳">游泳</option> <optionvalue="足球">足球</option> <optionvalue="籃球">籃球</option> <optionvalue="跑步">跑步</option> <optionvalue="滑冰">滑冰</option> <optionvalue="乒乓球">乒乓球</option> <optionvalue="游泳">游泳</option> <optionvalue="跳遠(yuǎn)">跳遠(yuǎn)</option> <optionvalue="跳高">跳高</option> </select> <divclass="sd"> <buttonid="add">添加>></button><br/><br/> <buttonid="add_all">全部添加>></button> </div></div><divclass="second"> <selectmultiplename="other"id="other"class="sel"></select> <divclass="sd"> <buttonid="to_left"><<刪除</button><br/><br/> <buttonid="all_to_left"><<全部刪除</button> </div></div>（3）編寫(xiě)CSS樣式，具體內(nèi)容請(qǐng)參加光盤(pán)。（4）在引入jQuery庫(kù)的代碼下方編寫(xiě)jQuery代碼，點(diǎn)擊“添加”按鈕，將下拉框中選中的選項(xiàng)添加給另一個(gè)下拉框，點(diǎn)擊“全部添加”按鈕，將全部選項(xiàng)添加到另一個(gè)下拉框，雙擊某個(gè)下拉選項(xiàng)，將其添加至另一個(gè)下拉框中，具體代碼如下：$(function(){ $("#add").click(function(){ var$options=$("#hobbyoption:selected");//獲取左邊選中項(xiàng)

$options.appendTo("#other");//追加到右邊

}) $("#add_all").click(function(){ var$options=$("#hobbyoption");//獲取全部選項(xiàng)

$options.appendTo("#other");//追加到右邊

}) $("#hobby").dblclick(function(){//鼠標(biāo)雙擊事件

var$options=$("option:selected",this);//獲取選中項(xiàng)

$options.appendTo("#other");//追加到右邊

})

$("#to_left").click(function(){ var$options=$("#otheroption:selected");//獲取右邊選中項(xiàng)

$options.appendTo("#hobby");//追加到左邊

})

$("#all_to_left").click(function(){ var$options=$("#otheroption");//獲取全部選項(xiàng)

$options.appendTo("#hobby");//追加到左邊

}) $("#other").dblclick(function(){//鼠標(biāo)雙擊事件

var$options=$("option:selected",this);//獲取選中項(xiàng)

$options.appendTo("#hobby");//追加到左邊

})})運(yùn)行本實(shí)例，可以看到如圖6.20所示效果。圖6.20操作單選按鈕6.2.5表單驗(yàn)證表單是HTML中非常重要的部分，在表單中，表單驗(yàn)證也是至關(guān)重要的?！纠?-14】

表單驗(yàn)證（1）創(chuàng)建一個(gè)名稱(chēng)為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語(yǔ)句引入jQuery庫(kù)。<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）在頁(yè)面的<body>標(biāo)記中，創(chuàng)建一個(gè)form表單，用來(lái)實(shí)現(xiàn)用戶(hù)注冊(cè)，給予必填的字段樣式“required”關(guān)鍵代碼如下：<form> <h3align="center">用戶(hù)注冊(cè)</h3> <divclass="dt">用戶(hù)名：<inputtype="text"id="username"name="username"size=20class="required"/></div> <divclass="dt">密

碼：<inputtype="password"id="pwd"name="pwd"size=20class="required"/></div> <divclass="dt">性

別：<inputtype="text"id="sex"name="sex"size=4maxlength=3/></div> <divclass="dt">年

齡：<inputtype="text"id="age"name="age"size=4maxlength=3/></div> <divclass="dt"> <inputtype="submit"name="sub"value="注冊(cè)"/> </div> </form>（3）該文件的CSS樣式請(qǐng)?jiān)斠?jiàn)光盤(pán)。（4）在引入jQuery庫(kù)的代碼下方編寫(xiě)jQuery代碼，給form表單下input元素的樣式為“required”的元素添加一個(gè)紅色的“*”號(hào)，表示必填。當(dāng)光標(biāo)的焦點(diǎn)從“用戶(hù)名”移出時(shí)，需要判斷用戶(hù)名是否符合驗(yàn)證規(guī)則，因此要給元素添加失去焦點(diǎn)事件，即blur。用blur事件判斷用戶(hù)名和密碼不能為空，并且密碼不能小于6位，具體代碼如下：

$(function(){ $("form:input.required").each(function(){ var$required=$("<strongclass='star'>*</strong>");//創(chuàng)建元素

$(this).parent().append($required);//將其追加到文檔中

}) $("form:input").blur(function(){ if($(this).is("#username")){//判斷元素id是否為用戶(hù)名的文本框

if($(this).val()==""){//判斷用戶(hù)名是否為空

alert("用戶(hù)名不能為空！"); } } if($(this).is("#pwd")){//判斷是否為密碼框

if($(this).val()==""){//判斷密碼是否為空

alert("密碼不能為空！"); } if(this.value.length<8){//判斷密碼的長(zhǎng)度是否小于8 alert("密碼不能小于8位，請(qǐng)重新輸入！"); } } })})運(yùn)行本實(shí)例，輸入用戶(hù)名mr，密碼mrsoft，可以看到如圖6-21所示效果。圖6-21表單驗(yàn)證6.3.1控制表格顏色顯示6.3.2表格的展開(kāi)與關(guān)閉6.3.3表格內(nèi)容的篩選6.3使用jQuery操作表格

6.3.1控制表格顏色顯示1.隔行換色實(shí)現(xiàn)表格的隔行換色，首先需要為表格的奇數(shù)行和偶數(shù)行設(shè)定樣式，之后使用jQuery為表格的奇數(shù)行和偶數(shù)行分別添加樣式，代碼如下：

$("tr:odd").addClass("odd");//為表格奇數(shù)行添加樣式

$(“tr:even”).addClass(“even”);//為表格偶數(shù)行添加樣式注意：$(“tr:odd”)和$(“tr:even”)選擇器中索引是從0開(kāi)始的，因此第一行是偶數(shù)行。

【例6-15】

表格的隔行換色（1）創(chuàng)建一個(gè)名稱(chēng)為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語(yǔ)句引入jQuery庫(kù)。<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）在頁(yè)面的<body>標(biāo)記中，創(chuàng)建一個(gè)6行2列的表格，其中第1行是表頭部分，關(guān)鍵代碼如下：<tableborder="1"align="center"><caption>JavaScript開(kāi)發(fā)非常之旅套系圖書(shū)</caption><theadbgcolor="#B2B2B2"align="center"valign="bottom"> <tr> <th>書(shū)名</th> <th>出版單位</th> </tr></thead><tbody><tr><tdwidth="185">JavaScript從入門(mén)到精通</td><tdwidth="220">吉林省明日科技有限公司</td></tr><tr><td>JavaScript自學(xué)視頻教程</td><td>吉林省明日科技有限公司</td></tr><tr><td>JavaScript程序設(shè)計(jì)</td><td>吉林省明日科技有限公司</td></tr><tr><td>jQuery開(kāi)發(fā)基礎(chǔ)教程</td><td>吉林省明日科技有限公司</td></tr><tr><td>jQuery從入門(mén)到精通</td><td>吉林省明日科技有限公司</td></tr></tbody></table>（3）編寫(xiě)CSS樣式，詳細(xì)請(qǐng)參見(jiàn)光盤(pán)。（4）在引入jQuery庫(kù)的代碼下方編寫(xiě)jQuery代碼，實(shí)現(xiàn)表格的隔行換色，除去表頭部分，奇數(shù)行為黃色，偶數(shù)行為淺藍(lán)色。具體代碼如下：$(function(){ $("tbody>tr:odd").addClass("odd");//為表格奇數(shù)行添加樣式

$("tbody>tr:even").addClass("even");//為表格偶數(shù)行添加樣式})運(yùn)行本實(shí)例，可以看到如圖6-22所示運(yùn)行結(jié)果。圖6-22表格的隔行換色說(shuō)明：使用$("tbody>tr:odd")是因?yàn)?("tr:odd")會(huì)將表頭也算進(jìn)去，因此需要排除表格頭部<thead>中的<tr>。

2.控制表格行的高亮顯示實(shí)現(xiàn)表格某一行的高亮顯示，可以使用contains選擇器實(shí)現(xiàn)，例如實(shí)現(xiàn)“JavaScript程序設(shè)計(jì)“這一行高亮顯示，代碼如下：

$("tr:contains('程序設(shè)計(jì)')").addClass("selected");

如圖6-23所示。圖6-23指定行高亮顯示【例6-16】

鼠標(biāo)點(diǎn)擊表格行高亮顯示本實(shí)例中的表格與例6-15中的相同，編寫(xiě)樣式.selected，代碼如下：.selected{ background:pink;}編寫(xiě)jQuery代碼，令鼠標(biāo)點(diǎn)擊某一行，使該行高亮顯示，并且清除該行相鄰元素的高亮顯示，具體代碼如下：$(function(){ $("tbody>tr").click(function(){//使鼠標(biāo)點(diǎn)擊的行高亮顯示，并且清除其兄弟元素的高亮顯示

$(this).addClass("selected").siblings().removeClass("selected"); })})運(yùn)行本實(shí)例，可以看到如圖6-24所示運(yùn)行結(jié)果。圖6-24表格行的高亮顯示6.3.2表格的展開(kāi)與關(guān)閉【例6-17】

表格的展開(kāi)與關(guān)閉（1）創(chuàng)建一個(gè)名稱(chēng)為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語(yǔ)句引入jQuery庫(kù)。<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）在例6-15創(chuàng)建的表格中添加分類(lèi)，為分類(lèi)行增加id，主要代碼如下：<tableborder="1"align="center"width="405"><caption>JavaScript開(kāi)發(fā)非常之旅套系圖書(shū)</caption><theadbgcolor="#B2B2B2"align="center"valign="bottom"> <tr> <thwidth="185">書(shū)名</th> <thwidth="220">出版單位</th> </tr></thead><tbody><trclass="type"id="t1"><tdcolspan="2">JavaScript書(shū)籍</td></tr><trclass="line_t1"><tdwidth="185">JavaScript從入門(mén)到精通</td><tdwidth="220">吉林省明日科技有限公司</td></tr><trclass="line_t1">

<td>JavaScript自學(xué)視頻教程</td><td>吉林省明日科技有限公司</td></tr><trclass="line_t1"><td>JavaScript程序設(shè)計(jì)</td><td>吉林省明日科技有限公司</td></tr>

<trclass="type"id="t2"><tdcolspan="2">jQuery書(shū)籍</td></tr><trclass="line_t2"><td>jQuery開(kāi)發(fā)基礎(chǔ)教程</td><td>吉林省明日科技有限公司</td></tr><trclass="line_t2"><td>jQuery從入門(mén)到精通</td><td>吉林省明日科技有限公司</td></tr></tbody></table>（3）編寫(xiě)CSS樣式，詳細(xì)請(qǐng)參見(jiàn)光盤(pán)。（4）在引入jQuery庫(kù)的代碼下方編寫(xiě)jQuery代碼，實(shí)現(xiàn)點(diǎn)擊分類(lèi)行控制該行分類(lèi)的展開(kāi)與演示，具體代碼如下：$(function(){ $("tr.type").click(function(){//獲取分類(lèi)父行

//獲取本分類(lèi)下的行元素

$(this).toggleClass("selected").siblings(".line_"+this.id).toggle(); })})運(yùn)行本實(shí)例，在如圖所示6-25頁(yè)面中點(diǎn)擊“jQuery書(shū)籍”分類(lèi)，可以看到如圖6-26所示運(yùn)行結(jié)果。圖6-25表格的隔行換色圖6-26表格的收縮效果給每個(gè)<tr>元素設(shè)置屬性是非常重要的，我們可以在上面HTML代碼中看出一些端倪，即給每個(gè)分類(lèi)的行設(shè)置了class=”type”樣式，同時(shí)也給他們?cè)O(shè)置了id，而它們下邊的行，只是設(shè)置了class樣式，并且這個(gè)樣式的值是以“l(fā)ine_”開(kāi)頭，后面連接的是分類(lèi)行的id值，這樣設(shè)計(jì)便于獲取分類(lèi)行的子元素，進(jìn)而設(shè)置子元素的展開(kāi)與收縮效果。

6.3.3表格內(nèi)容的篩選【例6-18】

篩選表格中的指定內(nèi)容（1）創(chuàng)建一個(gè)名稱(chēng)為index.html的文件，在該文件的<head>標(biāo)記中應(yīng)用下面的語(yǔ)句引入jQuery庫(kù)。<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>（2）創(chuàng)建表格，在表頭增加搜索框，具體代碼如下：<tablewidth="260"border="1"align="center"><theadalign="center"valign="bottom"><tr><tdcolspan="2">搜索：<inputtype="texr"name="keyword"id="keyword"/></td></tr> <trbgcolor="#B2B2B2"><td>姓名</td><td>成績(jī)</td></tr></thead><tbodyalign="center"bgcolor="#FFFF88">

<tr><td>王帥</td><td>97</td></tr><tr>

<td>李雷</td><td>91</td></tr><tr><td>高天</td><td>97</td></tr><tr><td>趙衛(wèi)</td><td>84</td></tr><tr><td>王強(qiáng)</td><td>97</td></tr><tr><td>陳美</td><td>88</td></tr></tbody></table>（3）在引入jQuery庫(kù)的代碼下方編寫(xiě)jQuery代碼，實(shí)現(xiàn)當(dāng)鍵盤(pán)按鍵被松開(kāi)時(shí)，如果文本框內(nèi)容不為空，則篩選包含文本框內(nèi)容的行，具體代碼如下：$(function(){ $("#keyword").keyup(function(){ if($("#keyword").val()!=''){ $("tabletbodytr").hide().filter(":contains('"+($(this).val())+"')").show();//顯示指定元素

}