jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第7章 jQuery操作表單_第1頁
jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第7章 jQuery操作表單_第2頁
jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第7章 jQuery操作表單_第3頁
jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第7章 jQuery操作表單_第4頁
jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程 課件 第7章 jQuery操作表單_第5頁
已閱讀5頁，還剩62頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第7章jQuery操作表單《jQuery前端開發(fā)任務(wù)驅(qū)動(dòng)教程》學(xué)習(xí)目標(biāo)/Target

掌握表單提交事件的使用方法，能夠?qū)崿F(xiàn)表單提交事件的注冊(cè)

掌握序列化表單數(shù)據(jù)的方法，能夠使用serialize()方法將表單數(shù)據(jù)序列化為字符串，

以及使用serializeArray()方法將表單數(shù)據(jù)序列化為數(shù)組掌握焦點(diǎn)事件的使用方法，能夠?qū)崿F(xiàn)焦點(diǎn)事件的注冊(cè)掌握改變事件的使用方法，能夠?qū)崿F(xiàn)改變事件的注冊(cè)學(xué)習(xí)目標(biāo)/Target

掌握鍵盤事件的使用方法，能夠?qū)崿F(xiàn)鍵盤事件的注冊(cè)

掌握表單選擇器的使用方法，能夠使用表單選擇器獲取表單元素掌握獲取用戶注冊(cè)信息的實(shí)現(xiàn)方法，能夠完成獲取用戶注冊(cè)信息的開發(fā)掌握表單數(shù)據(jù)驗(yàn)證的實(shí)現(xiàn)方法，能夠完成表單數(shù)據(jù)驗(yàn)證的開發(fā)章節(jié)概述/Summary在網(wǎng)頁開發(fā)中，表單用于收集用戶輸入的數(shù)據(jù)，它由多個(gè)表單控件（例如文本框、復(fù)選框、單選按鈕、下拉列表等）和提交按鈕組成，用于向服務(wù)器提交數(shù)據(jù)或執(zhí)行相關(guān)操作。為確保數(shù)據(jù)的準(zhǔn)確性和完整性，可以在前端頁面對(duì)表單進(jìn)行驗(yàn)證，驗(yàn)證用戶輸入的數(shù)據(jù)是否符合要求，并提供必要的反饋和錯(cuò)誤提示。本章將詳細(xì)講解如何使用jQuery操作表單。目錄/Contents任務(wù)7.1任務(wù)7.2獲取用戶注冊(cè)信息表單數(shù)據(jù)驗(yàn)證獲取用戶注冊(cè)信息任務(wù)7.1任務(wù)需求某科技公司致力于為用戶打造個(gè)性化定制和舒適的智能家居系統(tǒng)，以提供智能、便捷和舒適的生活體驗(yàn)。為了進(jìn)一步提升用戶體驗(yàn)，該公司正在開發(fā)一個(gè)在線平臺(tái)項(xiàng)目，在這個(gè)項(xiàng)目中用戶注冊(cè)具有重要的意義和作用。用戶注冊(cè)不僅有助于公司了解用戶的需求，還能為用戶提供個(gè)性化定制的智能家居服務(wù)。一旦用戶注冊(cè)成功，將獲得更多智能家居系統(tǒng)的使用和管理權(quán)限。為此，領(lǐng)導(dǎo)安排前端開發(fā)工程師小磊負(fù)責(zé)用戶注冊(cè)前端頁面的開發(fā)任務(wù)。設(shè)計(jì)一個(gè)包含用戶名、密碼、確認(rèn)密碼和郵箱字段的表單。用戶名、密碼和確認(rèn)密碼為必填項(xiàng)，郵箱為選填項(xiàng)。當(dāng)用戶提交表單時(shí)，獲取用戶注冊(cè)信息。任務(wù)需求為了便于測(cè)試，小磊將獲取到的用戶注冊(cè)信息輸出到控制臺(tái)中，通過查看控制臺(tái)的輸出，確認(rèn)用戶注冊(cè)信息是否成功獲取，以及檢查信息的準(zhǔn)確性和完整性。當(dāng)用戶填寫完注冊(cè)信息并單擊“注冊(cè)”按鈕后，系統(tǒng)會(huì)將用戶的注冊(cè)信息輸出到控制臺(tái)中，注冊(cè)過程及控制臺(tái)輸出結(jié)果如下圖所示。任務(wù)需求知識(shí)儲(chǔ)備1.表單提交事件

先定一個(gè)小目標(biāo)！掌握表單提交事件的使用方法，能夠?qū)崿F(xiàn)表單提交事件的注冊(cè)知識(shí)儲(chǔ)備1.表單提交事件表單提交事件在表單提交時(shí)觸發(fā)，可用于驗(yàn)證和處理用戶輸入的數(shù)據(jù)，以確保數(shù)據(jù)的準(zhǔn)確性和安全性，該事件只能作用在form元素上。表單提交事件也被稱為submit事件，可以通過jQuery的on()方法進(jìn)行注冊(cè)。知識(shí)儲(chǔ)備下面通過代碼演示如何注冊(cè)表單提交事件，示例代碼如下。<body>

<form>

<labelfor="username">賬號(hào)</label>

<inputtype="text"name="username"placeholder="請(qǐng)輸入賬號(hào)"required>

<inputtype="submit"value="提交">

</form>

<script>

$('form').on('submit',function(e){

e.preventDefault();

console.log('表單提交事件執(zhí)行了');

});

</script></body>1.表單提交事件知識(shí)儲(chǔ)備上述示例代碼運(yùn)行后，頁面會(huì)顯示一個(gè)賬號(hào)輸入框和一個(gè)“提交”按鈕，在賬號(hào)輸入框中輸入內(nèi)容并單擊“提交”按鈕后，控制臺(tái)輸出“表單提交事件執(zhí)行了”，說明成功為元素注冊(cè)了表單提交事件。1.表單提交事件

先定一個(gè)小目標(biāo)！掌握序列化表單數(shù)據(jù)的方法，能夠使用serialize()方法將表單數(shù)據(jù)序列化為字符串，以及使用serializeArray()方法將表單數(shù)據(jù)序列化為數(shù)組知識(shí)儲(chǔ)備2.序列化表單數(shù)據(jù)知識(shí)儲(chǔ)備2.序列化表單數(shù)據(jù)在實(shí)際開發(fā)中，我們有時(shí)需要將表單數(shù)據(jù)序列化為字符串，以便使用localStorage存儲(chǔ)數(shù)據(jù)，或者對(duì)序列化后的表單數(shù)據(jù)進(jìn)行額外處理，例如轉(zhuǎn)換為數(shù)組形式。為了方便進(jìn)行這些操作，jQuery提供了serialize()方法和serializeArray()方法。知識(shí)儲(chǔ)備2.序列化表單數(shù)據(jù)（1）serialize()方法作用：serialize()方法會(huì)自動(dòng)提取表單中所有含有name屬性的元素的數(shù)據(jù)，并將其序列化為一個(gè)以URL參數(shù)形式表示的字符串。被序列化的字符串的格式如下。其中，name表示表單控件的名稱，value表示對(duì)應(yīng)的值。例如，對(duì)于表單中的一個(gè)輸入框<inputname="username"value="Alice">，調(diào)用serialize()方法將會(huì)得到字符串"username=Alice"。name1=value1&name2=value2&…知識(shí)儲(chǔ)備2.序列化表單數(shù)據(jù)此外，當(dāng)使用serialize()方法序列化表單數(shù)據(jù)時(shí)，可能會(huì)遇到中文亂碼的問題。這是因?yàn)閟erialize()方法內(nèi)部使用encodeURLComponent()方法對(duì)數(shù)據(jù)進(jìn)行了編碼。如果希望正確解碼序列化后的數(shù)據(jù)，需要使用decodeURIComponent()方法，該方法接收2個(gè)參數(shù)，第1個(gè)參數(shù)是調(diào)用serialize()方法后返回的序列化字符串，第2個(gè)參數(shù)需要設(shè)置為true。使用方法：在jQuery中，可以使用基于form元素創(chuàng)建的jQuery對(duì)象來調(diào)用serialize()方法將表單數(shù)據(jù)序列化為字符串。serialize()方法不接收任何參數(shù)，并且會(huì)忽略未設(shè)置name屬性或處于禁用狀態(tài)的元素，這些元素將不會(huì)被序列化。知識(shí)儲(chǔ)備下面通過代碼演示如何使用serialize()方法將表單數(shù)據(jù)序列化為字符串，示例代碼如下。<body>

<form>

<div>姓名：<inputtype="text"name="username"required></div>

<div>年齡：<inputtype="number"name="age"required></div>

<div>性別：

<inputtype="radio"name="gender"value="male"required>男

<inputtype="radio"name="gender"value="female"required>女

</div>

<div><inputtype="submit"value="注冊(cè)"></div>

</form>2.序列化表單數(shù)據(jù)知識(shí)儲(chǔ)備>>接上頁代碼

<script>

$('form').on('submit',function(e){

e.preventDefault();

varresult=$(this).serialize();

result=decodeURIComponent(result,true);

console.log(result);

});

</script></body>2.序列化表單數(shù)據(jù)知識(shí)儲(chǔ)備2.序列化表單數(shù)據(jù)上述示例代碼運(yùn)行后，在表單中的姓名輸入框中輸入張三，在年齡輸入框中輸入20，并選擇性別為男，然后單擊“注冊(cè)”按鈕。使用serialize()方法序列化表單數(shù)據(jù)的結(jié)果如下圖所示。知識(shí)儲(chǔ)備2.序列化表單數(shù)據(jù)（2）serializeArray()方法serializeArray()方法會(huì)自動(dòng)提取表單中所有含有name屬性的元素的數(shù)據(jù)，并將其序列化為一個(gè)包含對(duì)象的數(shù)組。被序列化的數(shù)組遵循如下格式。其中每個(gè)對(duì)象都具有name和value屬性。例如，對(duì)于表單中的兩個(gè)輸入框：<inputname="username"value="Alice"><inputname="age"value="25">調(diào)用serializeArray()方法將會(huì)得到如下數(shù)組：[{name:'username',value:'Alice'},{name:'age',value:'25'}][{name:'name1',value:'value1'},{name:'name2',value:'value2'},…]知識(shí)儲(chǔ)備2.序列化表單數(shù)據(jù)在jQuery中，可以使用基于form元素創(chuàng)建的jQuery對(duì)象來調(diào)用serializeArray()方法將表單數(shù)據(jù)序列化為數(shù)組。serializeArray()方法不接收任何參數(shù)，并且會(huì)忽略未設(shè)置name屬性或處于禁用狀態(tài)的元素，這些元素將不會(huì)被序列化。知識(shí)儲(chǔ)備2.序列化表單數(shù)據(jù)下面通過代碼演示如何使用serializeArray()方法將表單數(shù)據(jù)序列化為數(shù)組，示例代碼如下。<body>

<form>

<div>姓名：<inputtype="text"name="username"required></div>

<div>年齡：<inputtype="number"name="age"required></div>

<div>性別：

<inputtype="radio"name="gender"value="male"required>男

<inputtype="radio"name="gender"value="female"required>女

</div>

<div><inputtype="submit"value="注冊(cè)"></div>

</form>知識(shí)儲(chǔ)備>>接上頁代碼

<script>

$('form').on('submit',function(e){

e.preventDefault();

varresult=$(this).serializeArray();

console.log(result);

});

</script></body>2.序列化表單數(shù)據(jù)知識(shí)儲(chǔ)備2.序列化表單數(shù)據(jù)上述示例代碼運(yùn)行后，在表單中的姓名輸入框中輸入李四，在年齡輸入框中輸入25，并選擇性別為男，然后單擊“注冊(cè)”按鈕。使用serializeArray()方法序列化表單數(shù)據(jù)的結(jié)果如下圖所示。任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握獲取用戶注冊(cè)信息的實(shí)現(xiàn)方法，能夠完成獲取用戶注冊(cè)信息的開發(fā)任務(wù)實(shí)現(xiàn)創(chuàng)建D:\jQuery\chapter07目錄，將jquery-3.6.4.min.js文件放入該目錄下，并使用VSCode編輯器打開該目錄。創(chuàng)建registerForm.html文件，編寫用戶注冊(cè)表單的結(jié)構(gòu)并引入jquery-3.6.4.min.js文件。步驟1步驟2獲取用戶注冊(cè)信息功能的開發(fā)編寫用戶注冊(cè)表單的樣式代碼。編寫邏輯代碼，實(shí)現(xiàn)在提交表單時(shí)獲取表單信息時(shí)，將表單信息輸出到控制臺(tái)中。步驟3步驟4任務(wù)實(shí)現(xiàn)在瀏覽器中打開registerForm.html文件，初始頁面效果如下圖所示。任務(wù)實(shí)現(xiàn)在用戶名輸入框中輸入張三，密碼和確認(rèn)密碼為123456，郵箱為test@mail.test，單擊“注冊(cè)”按鈕。提交用戶注冊(cè)信息后的頁面效果如下圖所示。表單數(shù)據(jù)驗(yàn)證任務(wù)7.2任務(wù)需求某教育科技公司致力于提供綜合的教育解決方案，不僅專注于教學(xué)管理系統(tǒng)的開發(fā)，還提供全方位的教育培訓(xùn)和課程服務(wù)，旨在幫助教育從業(yè)者和學(xué)生在日新月異的教育環(huán)境中獲得更多優(yōu)勢(shì)。該公司正在開發(fā)一個(gè)教學(xué)管理系統(tǒng)，領(lǐng)導(dǎo)安排前端工程師小浩負(fù)責(zé)開發(fā)教學(xué)管理系統(tǒng)的注冊(cè)頁面。任務(wù)要求小浩設(shè)計(jì)一個(gè)用戶友好且安全的注冊(cè)頁面，以方便用戶輕松創(chuàng)建賬戶。任務(wù)需求注冊(cè)頁面需要包含一個(gè)表單，并對(duì)表單數(shù)據(jù)進(jìn)行驗(yàn)證，具體要求如下。設(shè)計(jì)一個(gè)包含用戶名、性別、興趣愛好、密碼、確認(rèn)密碼、密碼保護(hù)問題、密碼問題答案和手機(jī)號(hào)字段的表單。用戶名驗(yàn)證：當(dāng)用戶輸入用戶名并離開輸入框時(shí)，立即檢測(cè)用戶名格式的正確性。要求用戶名可以包含字母（大小寫）和數(shù)字，且長(zhǎng)度為6~20個(gè)字符。密碼驗(yàn)證：當(dāng)用戶輸入密碼并離開輸入框時(shí)，立即檢測(cè)密碼格式的正確性。當(dāng)用戶按下鍵盤上的某個(gè)鍵并在釋放該鍵時(shí)，根據(jù)輸入的內(nèi)容動(dòng)態(tài)更新進(jìn)度條的進(jìn)度和密碼強(qiáng)度（弱、中、強(qiáng)）。任務(wù)需求密碼可以包含字母（大小寫）、數(shù)字和特殊字符（!、@、#、$、%、^、&、*），且長(zhǎng)度為6~18個(gè)字符。根據(jù)輸入的密碼是否包含大寫字母、小寫字母、數(shù)字和特殊字符（!、@、#、$、%、^、&、*）這4個(gè)特征更新進(jìn)度條的進(jìn)度和密碼強(qiáng)度。當(dāng)?shù)陀?個(gè)特征時(shí)，密碼強(qiáng)度為弱；當(dāng)滿足3個(gè)特征時(shí)，密碼強(qiáng)度為中；當(dāng)滿足4個(gè)特征時(shí)，密碼強(qiáng)度為強(qiáng)。每滿足1個(gè)特征，密碼框增加50px的寬度。任務(wù)需求確認(rèn)密碼驗(yàn)證：當(dāng)用戶輸入確認(rèn)密碼并離開輸入框時(shí)，立即檢測(cè)確認(rèn)密碼和密碼是否一致。手機(jī)號(hào)碼驗(yàn)證：當(dāng)用戶輸入手機(jī)號(hào)并離開輸入框時(shí)，立即檢測(cè)手機(jī)號(hào)格式的正確性。手機(jī)號(hào)碼包含11位數(shù)字，開頭必須是數(shù)字1，第2位是3到9之間的數(shù)字，剩余9位數(shù)字可以是0到9之間的任意數(shù)字。表單提交：當(dāng)用戶單擊“注冊(cè)”按鈕時(shí)，檢測(cè)興趣愛好是否至少選擇了2項(xiàng)。如果用戶未選擇或只選擇了1項(xiàng)，則彈出相應(yīng)的提示信息，并阻止表單提交。由于注冊(cè)頁面涉及的數(shù)據(jù)驗(yàn)證較多，在這里以用戶名驗(yàn)證為例，查看用戶名輸入有誤的驗(yàn)證結(jié)果。在用戶名輸入框中輸入“wang”后離開輸入框，用戶名輸入有誤的頁面效果如下圖所示。任務(wù)需求知識(shí)儲(chǔ)備

先定一個(gè)小目標(biāo)！掌握焦點(diǎn)事件的使用方法，能夠?qū)崿F(xiàn)焦點(diǎn)事件的注冊(cè)1.焦點(diǎn)事件焦點(diǎn)事件是指元素獲得焦點(diǎn)或失去焦點(diǎn)時(shí)觸發(fā)的事件。常見的焦點(diǎn)事件包括focus事件、blur事件、focusin事件和focusout事件，這些焦點(diǎn)事件可以監(jiān)測(cè)用戶與頁面元素的交互，實(shí)現(xiàn)表單驗(yàn)證、樣式變化、交互反饋等功能。知識(shí)儲(chǔ)備1.焦點(diǎn)事件知識(shí)儲(chǔ)備焦點(diǎn)事件可以通過jQuery的on()方法進(jìn)行注冊(cè)，常見的焦點(diǎn)事件及其說明如下表所示。事件類型說明focus當(dāng)元素獲得焦點(diǎn)時(shí)觸發(fā)的事件blur當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)的事件focusin當(dāng)元素或其子元素獲得焦點(diǎn)時(shí)觸發(fā)的事件focusout當(dāng)元素或其子元素失去焦點(diǎn)時(shí)觸發(fā)的事件1.焦點(diǎn)事件知識(shí)儲(chǔ)備注意：進(jìn)行焦點(diǎn)事件注冊(cè)時(shí)，必須將焦點(diǎn)事件注冊(cè)在可見的元素上。此外，focus事件和blur事件不會(huì)冒泡，只會(huì)在具體的元素上觸發(fā)，而focusin和focusout事件是冒泡的，可以在祖先元素上捕獲這些事件。1.焦點(diǎn)事件知識(shí)儲(chǔ)備下面通過代碼演示如何注冊(cè)focus事件和blur事件，改變輸入框的背景顏色和文字顏色，示例代碼如下。<body>

賬號(hào)：<inputtype="text"value="請(qǐng)輸入賬號(hào)"name="username">

<script>

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

$(this).css({'background-color':'gray','color':'white'});

}).on('blur',function(){

$(this).css({'background-color':'','color':'black'});

});

</script></body>2.焦點(diǎn)事件1.焦點(diǎn)事件知識(shí)儲(chǔ)備1.焦點(diǎn)事件上述示例代碼運(yùn)行后，頁面會(huì)顯示一個(gè)輸入框，單擊該輸入框，使其獲得焦點(diǎn)（左圖）；單擊輸入框以外的區(qū)域，使其失去焦點(diǎn)（右圖），如下圖所示。圖中，當(dāng)輸入框獲得焦點(diǎn)時(shí)，文字的顏色變?yōu)榱税咨?，且背景色變?yōu)榱嘶疑?；?dāng)輸入框失去焦點(diǎn)時(shí)，文字的顏色變?yōu)榱撕谏冶尘邦伾謴?fù)默認(rèn)樣式。知識(shí)儲(chǔ)備2.改變事件

先定一個(gè)小目標(biāo)！掌握改變事件的使用方法，能夠?qū)崿F(xiàn)改變事件的注冊(cè)改變事件在元素的值發(fā)生改變且失去焦點(diǎn)時(shí)觸發(fā)，適用于監(jiān)控文本框、單選按鈕、復(fù)選框、下拉列表等表單控件的內(nèi)容變化。例如，在文本框中輸入內(nèi)容、選擇單選按鈕、選中復(fù)選框、選擇下拉列表中的選項(xiàng)等情況下，當(dāng)元素失去焦點(diǎn)時(shí)，如果值發(fā)生變化，改變事件就會(huì)觸發(fā)。改變事件也被稱為change事件，可以通過jQuery的on()方法進(jìn)行注冊(cè)。知識(shí)儲(chǔ)備2.改變事件2.改變事件知識(shí)儲(chǔ)備下面通過代碼演示如何注冊(cè)change事件，示例代碼如下。<body>

賬號(hào)：<inputtype="text"name="username"><span></span><script>$('input').on('change',function(){varoInput=$(this).val();$('span').text(oInput);$(this).css('background-color','gray');});</script></body>2.改變事件知識(shí)儲(chǔ)備上述示例代碼運(yùn)行后，頁面會(huì)顯示一個(gè)輸入框，在輸入框中輸入張三，然后單擊輸入框以外的區(qū)域，改變事件被觸發(fā)后的頁面效果如下圖所示。圖中，賬號(hào)張三在頁面中顯示，并且輸入框的背景顏色變?yōu)榛疑?。知識(shí)儲(chǔ)備3.鍵盤事件

先定一個(gè)小目標(biāo)！掌握鍵盤事件的使用方法，能夠?qū)崿F(xiàn)鍵盤事件的注冊(cè)鍵盤事件是指在用戶使用鍵盤時(shí)觸發(fā)的事件。常見的鍵盤事件包括keydown事件和keyup事件，這些鍵盤事件用于監(jiān)聽和處理鍵盤操作的變化。知識(shí)儲(chǔ)備3.鍵盤事件知識(shí)儲(chǔ)備3.鍵盤事件通常情況下，我們會(huì)給哪些元素注冊(cè)鍵盤事件呢？通?？梢越o文檔對(duì)象（document）、窗口對(duì)象（window）以及表單元素（如input元素、textarea元素和select元素等）注冊(cè)鍵盤事件來監(jiān)聽用戶的鍵盤輸入。文檔對(duì)象和窗口對(duì)象可以用來監(jiān)聽整個(gè)文檔或窗口的鍵盤操作。表單元素主要用于監(jiān)聽用戶在表單中的鍵盤輸入。知識(shí)儲(chǔ)備鍵盤事件可以通過jQuery的on()方法進(jìn)行注冊(cè)，常見的鍵盤事件及其說明如下表所示。事件類型說明keydown當(dāng)用戶按下鍵盤上的任意按鍵時(shí)觸發(fā)，只能檢測(cè)單個(gè)鍵被按下的情況。在長(zhǎng)時(shí)間按住某個(gè)鍵的情況下，事件會(huì)不斷重復(fù)觸發(fā)keyup當(dāng)用戶釋放鍵盤上的按鍵時(shí)觸發(fā)的事件，適用于所有鍵盤按鍵，包括字符鍵、功能鍵和修飾鍵等3.鍵盤事件知識(shí)儲(chǔ)備下面演示如何注冊(cè)keydown事件，實(shí)時(shí)監(jiān)測(cè)用戶按下的鍵，并做出相應(yīng)的響應(yīng)，示例代碼如下。<script>

$(document).on('keydown',function(e){

varisAlphabetKey=/[a-zA-Z]/.test(e.key);

varisNumericKey=/[0-9]/.test(e.key);

if(e.key==='Shift'){

console.log('按下了Shift鍵');

}elseif(isAlphabetKey){

console.log('按下了字母鍵');

}elseif(isNumericKey){

console.log('按下了數(shù)字鍵');

}

});</script>3.鍵盤事件知識(shí)儲(chǔ)備上述示例代碼運(yùn)行后，在瀏覽器窗口具有焦點(diǎn)的情況下，當(dāng)用戶按下Shift鍵、字母鍵和數(shù)字鍵時(shí)，控制臺(tái)會(huì)顯示相應(yīng)的信息。這說明成功注冊(cè)了keydown事件并且監(jiān)測(cè)到了Shift鍵、字母鍵和數(shù)字鍵的變化。3.鍵盤事件知識(shí)儲(chǔ)備4.表單選擇器

先定一個(gè)小目標(biāo)！掌握表單選擇器的使用方法，能夠使用表單選擇器獲取表單元素知識(shí)儲(chǔ)備4.表單選擇器在日常開發(fā)中，如果需要對(duì)表單進(jìn)行操作，首先需要獲取目標(biāo)表單元素。為了方便地獲取表單元素，可以使用jQuery提供的表單選擇器。知識(shí)儲(chǔ)備常用的表單選擇器如下表所示。4.表單選擇器選擇器說明:input用于獲取頁面中的所有表單元素，包括input元素、select元素和textarea元素:text用于獲取所有的文本框元素，即type="text"的input元素:password用于獲取所有的密碼框元素，即type="password"的input元素:radio用于獲取所有的單選按鈕元素，即type="radio"的input元素:checkbox用于獲取所有的復(fù)選框元素，即type="checkbox"的input元素知識(shí)儲(chǔ)備>>續(xù)上表4.表單選擇器選擇器說明:submit用于獲取所有提交按鈕元素，即type="submit"的input元素:reset用于獲取所有重置按鈕元素，即type="reset"的input元素:image用于獲取所有圖像域元素，即type="image"的input元素:button用于獲取所有按鈕元素，包括button元素和type="button"的input元素:file用于獲取所有文件域元素，即type="file"的input元素知識(shí)儲(chǔ)備>>續(xù)上表4.表單選擇器選擇器說明:hidden用于獲取所有隱藏表單項(xiàng)元素，即type="hidden"的input元素:enabled用于獲取所有可用表單元素:disabled用于獲取所有不可用表單元素:checked用于獲取所有選中的表單元素，主要針對(duì)單選按鈕和復(fù)選框:selected用于獲取所有選中的表單元素，主要針對(duì)下拉列表知識(shí)儲(chǔ)備4.表單選擇器注意：雖然表單選擇器input與:input都可以獲取表單元素，但是它們的功能有一定的區(qū)別，前者僅能獲取input元素，后者則可以同時(shí)獲取頁面中的所有表單元素，包括input元素、select元素和textarea元素。任務(wù)實(shí)現(xiàn)

先定一個(gè)小目標(biāo)！掌握表單數(shù)據(jù)驗(yàn)證的實(shí)現(xiàn)方法，能夠完成表單數(shù)據(jù)驗(yàn)證的開發(fā)任務(wù)實(shí)現(xiàn)創(chuàng)建js\form.js文件，該文件用于保存表單邏輯代碼。創(chuàng)建formValidation.html文件，編寫用戶注冊(cè)表單的結(jié)構(gòu)并引入jquery-3.6.4.min.

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論