JavaScript06:操作表單

9、操作表單

獲取值

如果我們獲得了一個(gè) <input>節(jié)點(diǎn)的引用，就可以直接調(diào)用 value 獲得對(duì)應(yīng)的用戶輸入值：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n567" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="js">// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用戶輸入的值'</pre>

這種方式可以應(yīng)用于text 、 password 、 hidden 以及 select 。但是，對(duì)于單選框和復(fù)選框， value屬性返回的永遠(yuǎn)是HTML預(yù)設(shè)的值，而我們需要獲得的實(shí)際是用戶是否“勾上了”選項(xiàng)，所以應(yīng)該用checked 判斷：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n569" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="js">// <label><input type="radio" name="weekday" id="monday" value="1">
Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2">
Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false</pre>

設(shè)置值

設(shè)置值和獲取值類似，對(duì)于 text 、 password 、 hidden 以及 select ，直接設(shè)置 value就可以：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n572" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="js">// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的內(nèi)容已更新</pre>

提交表單

通過(guò) <form>元素的 submit()方法提交一個(gè)表單，例如，響應(yīng)一個(gè) button 的click 事件，在JavaScript代碼中提交表單：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n575" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="html">
<form id="test-form">
<input type="text" name="test">
<button type="button" onclick="doSubmitForm()">Submit</button>
</form>
<script>
function doSubmitForm() {
var form = document.getElementById('test-form');
// 可以在此修改form的input...
// 提交form:
form.submit();
}
</script></pre>

這種方式的缺點(diǎn)是擾亂了瀏覽器對(duì)form的正常提交。瀏覽器默認(rèn)點(diǎn)擊 <button type="submit"> 時(shí)提交表單，或者用戶在最后一個(gè)輸入框按回車鍵。因此，第二種方式是響應(yīng) <form>本身的onsubmit 事件，在提交form時(shí)作修改：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n577" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="html">
<form id="test-form" onsubmit="return checkForm()">
<input type="text" name="test">
<button type="submit">Submit</button>
</form>
<script>
function checkForm() {
var form = document.getElementById('test-form');
// 可以在此修改form的input...
// 繼續(xù)下一步:
return true;
}
</script></pre>

注意要return true來(lái)告訴瀏覽器繼續(xù)提交，如果return false ，瀏覽器將不會(huì)繼續(xù)提交form，這種情況通常對(duì)應(yīng)用戶輸入有誤，提示用戶錯(cuò)誤信息后終止提交form。

加Md5

提交隱藏域的密碼

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n581" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="html">
<form id="test-form" onsubmit="return checkForm()">
<input type="text" name="test">
<input type="password" name="input_password">
<input type="indden" id="md5_psd" name="password">

<button type="submit">Submit</button>
</form>
<script>
function checkForm() {
var form = document.getElementById('test-form');
// 可以在此修改form的input...
// 繼續(xù)下一步:
//可以校驗(yàn)表單內(nèi)容
return true;
}
</script></pre>

10、jQuery

JavaScript和JQuery庫(kù)的關(guān)系

JQuery庫(kù)，里面存在大量的函數(shù)

獲取jquery

cdn jquery :

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n588" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="html"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script></pre>

官網(wǎng)下載：https://jquery.com/download/

公式

$(selector).action();

Jquery選擇器

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n593" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="html"> //原生js，選擇器少，麻煩不好記

? 標(biāo)簽選擇器

? document.getElementsByTagName();

? id選擇器

? document.getElementsById();

? 類選擇器

? document.getElementsByClassName();

? //jQuery

? $('p').click() ;//標(biāo)簽選擇器

? $('#id1').click(); //id選擇器

? $('.class1').click(); //類選擇器 </pre>

文檔工作站：https://jquery.cuishifeng.cn/

Jquery事件

鼠標(biāo)事件，鍵盤事件，其他事件

JQuery操作DOM

節(jié)點(diǎn)文本操作

$('#test-ul li[name=python]').text()；//獲得值

$('#test-ul li[name=python]').text('123')；//設(shè)置值

$('#test-ul').html()；//獲得值

$('#test-ul').html('<strong>123<strong>')；//設(shè)置值

CSS操作

$('#test-ul li[name=python]').css("color","red");

元素的顯示和隱藏 本質(zhì)display = none;

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" cid="n606" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;" lang="html">$('#test-ul li[name=python]').show();

$('#test-ul li[name=python]').hide();</pre>

Layer 彈窗組件

Element-ui

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • <!DOCTYPE html> 瀏覽器對(duì)象:操作表單 <!-- html表單的輸入控件主要有以下幾種 1.文本框...
    正陽(yáng)Android閱讀 468評(píng)論 0贊 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HT...
    kismetajun閱讀 28,825評(píng)論 1贊 45
  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,853評(píng)論 0贊 3
  • 1.javascript的typeof返回哪些數(shù)據(jù)類型 object number function boolea...
    洛珎閱讀 308評(píng)論 0贊 0
  • 推薦指數(shù)： 6.0 書(shū)籍主旨關(guān)鍵詞：特權(quán)、焦點(diǎn)、注意力、語(yǔ)言聯(lián)想、情景聯(lián)想 觀點(diǎn)： 1.統(tǒng)計(jì)學(xué)現(xiàn)在叫數(shù)據(jù)分析，社會(huì)...
    Jenaral閱讀 5,988評(píng)論 0贊 5

友情鏈接更多精彩內(nèi)容