表單元素與js的互動

2021-07-25 07:41:34 字數 1882 閱讀 4465

一、關於焦點的事件

1.獲取焦點 onfocus

2.失去焦點 onblur

二、關於值的變化

1.onchange事件

當前元素失去焦點並且元素的內容發生改變而觸發此事件

2.實時監測值得變化(試想,沒有測試過)

1)獲取到輸入元素,用鍵盤的onkeydown 事件實時監測 值得的變化

2)當輸入元素獲取到焦點時,觸發乙個檢測value的定時器,實現輸入元素值的變化

三、radio,checkbox,select和js的互動

1.radio、checkbox 的選中原理是在html中新增checked=」checked」屬性,那麼獲取/設定它們的選中就是遍歷這些元素,設定/查詢具有checked屬性的元素

2.select的選中原理是在option內新增selected=」selected」屬性,那麼獲取或設定他們的值的原理也和上面的方法一樣

四、通過jquery設定/獲取radio,checkbox,select的選中

重點是熟練使用jquery的選擇器

1.在乙個表單中我們要獲取被選中的那個radio項的值,所以要加checked來篩選,方法如下:

$('input[name="testradio"]:checked').val();2、

$('input:radio:checked').val();3、

$('input[@name="testradio"][checked]');4、

$('input[name="testradio"]').filter(':checked');

jquery的遍歷方法 each

$('input[name="testradio"]').each(function

());

2.在乙個表單中我們通常是要獲取被選中的那個checkbox值,所以也是要加checked來篩選,方法如上。

注意多選時,提取出來是乙個陣列,要獲取它們的value值時,利用遍歷的方法提取value值

3.select在jquery下獲取/設定選中

1).value值

獲取 $( 「select」).val()

設定

$(

".selector").find("option[value='pxx']").attr("selected",true);

2)text值

獲取 $(「select」).find(「option:selected」).text();

設定 迴圈 +判斷

select的級聯操作,即第二個select的值隨著第乙個select選中的值變化。

原理:在第乙個沒有選擇的時候,第二個沒值。

在第乙個選擇完成後,清空第二個select的option,然後設定新的option的資料。

name=""

id="select1">

value="0">0option>

value="1">1option>

value="2"

selected="true">2option>

value="3">3option>

value="4">4option>

select>

name=""

id="select2">

select>

$("#select1").change(function

())script>

HTML表單元素

表單元素是允許使用者在表單中 比如 文字域,下拉列表,單選框,核取方塊等等 輸入資訊的元素 表單標籤 文字域 text fields 當使用者要在表單中鍵入字母,數字等內容時,就會用到文字域 單選按鈕 radio buttons 當使用者從若干給定的的選擇中選取其一時,就會用到單選框 核取方塊 ch...

form表單元素

文字框 text 密碼框 password 文字域 textarea 單選框 radio 同一組單選按鈕的name取值一定要一致 核取方塊 checkbox 下拉列表框 選項 如果所有都沒有寫selected selected 則預設顯示第乙個的選項值 提交 submit value值是顯示在按鈕上...

html表單元素

自學打卡 2 form 表單元素,讓使用者把資料提交給伺服器 action 指定把請求和資料提交給哪個頁面 伺服器。元素 type text 文字內容 password 密碼 hidden 隱藏框 checkbox 核取方塊 radio 單選框 submit 提交 reset 重置 image 可以...