JQuery：各種動作表單元素方法小結

標籤：jquery

來源：http://www.ido321.com/1220.html

表單元素無處不在，已然成了Web應用不可或缺的一個部分。對錶單最最最常見的操作就是擷取表單元素的值或者更改表單元素的值。那在JQuery和JavaScript中怎麼動作表單元素的值？

JQuery動作表單總結：

1、文字框、密碼框、隱藏欄位、文本域（id換成對應的,value屬性存在，才能利用attr(‘value’) 擷取值，否則返回undefined）：

1.1 擷取—>$(“#text”).val()或者$(“#text”).attr(‘value’)

1.2 設定—>$(“#text”).val(‘test’)或者$(“#text”).attr(‘value’,’test’)

2、按鈕：普通按鈕、重設按鈕和提交按鈕（id換成對應的,value屬性存在，才能利用attr(‘value’) 或者val()擷取值，否則attr返回undefined,val返回空）

2.1 擷取—>$(“#btn”).val()或者$(“#btn”).attr(‘value’)

2.2 設定—>$(“#btn”).val(‘test’)或者$(“#btn”).attr(‘value’,’test’)

3、複選框、單選框：（id換成對應的,value屬性存在，才能利用attr(‘value’) 或者val()擷取值，否則attr返回undefined,val返回on（不管是否存在checked屬性））

3.1 擷取—>$(“#check”).val()或者$(“#check”).attr(‘value’)

3.1 設定—>$(“#check”).val(‘test’)或者$(“#check”).attr(‘value’,’test’)

3.3 擷取選中的複選框的值：$(“input[type=checkbox][checked]“).attr(‘value’)或者$(“input[type=checkbox][checked]“).val()【ps:只會返回第一個被選中的值】

//擷取全部選中的複選框的值
$(“input[type=checkbox][checked]“).each(function(){
alert($(this).val());
})

//若要將全選中的值傳遞給後台，則將複選框的name屬性命名為namevalue[]形式

3.4 全選、取消全選和反選（單選框不能全選，可以反選）//全選，checked的值可以是true或者checked,後者是w3c給出的值
$(“[name=‘test1‘]“).attr(“checked”,‘checked’);
//取消全選
$(“[name=‘test1‘]“).removeAttr(“checked”)//反選

$(“[name=‘test1‘]“).each(function()
{
if($(this).attr(“checked”))
{
$(this).removeAttr(“checked”);
}
else
{
$(this).attr(“checked”,’true’);
}
});

3.5 判斷選中狀態：$(“#test1″).attr(“checked”) ：未選中返回undefined,選中返回checked。所以，$(“#test1″).attr(“checked”) == true不能作為是否選中的判斷，$(“#test1″).attr(“checked”) == undefined可以作為未選中的判斷。

3.6取消選擇—>$(“#test1″).attr(“checked”,false)或者$(“#test1″).removeAttr(“checked”)（ps:$(“#test1″).attr(“checked”,””)在FireFox中有效，在Google中無效)

3.7 選中某個複選框(單選框)–>$(“#test2″).attr(“checked”,true)或者$(“#test2″).attr(“checked”,”checked”)

4、下拉框：

4.1 擷取選中選項的值—>$(“#slt”).val()（ps:$(“#slt”).attr(‘value’)會返回undefined）

4.2 設定—>$(“#slt”).val(‘audi’)（ps:如果select中有值為audi的選項,該選項就會被選中,如果不存在,則select不做任何變動）

4.3 擷取選中選項的文本—>$(“#slt option:selected”).text()或者$(“#slt”).find(“option:selected”).text()

4.4 設定選中選項的文本—>$(“#slt”).find(“option:selected”).text(‘test’)或者$(“#slt option:selected”).text(‘test’);

4.5 擷取選中項的索引—>$(“#slt”).get(0).selectedIndex

4.6 設定索引—>$(“#slt”).get(0).selectedIndex = index(ps:索引從0開始,index的最大值不能超過option的最大索引，否則$(“#slt”).get(0).selectedIndex 返回-1)

4.7 清空select—>$(“#slt”).html(”) 或者$(“#slt”).empty()

4.8 添加option—>$(‘<option value=”1″>1</option>’).appendTo($(“#slt”))  或者  $(“#slt”).append(‘<option value=”3″>2</option>’);

4.9 刪除option—>$(“#slt option[value=‘opel‘]“).remove()：刪除值是opel的option（value屬性要存在，同樣可以根據存在的text/index屬性刪除option）

5、元素的可用性(disabled的官方值是disabled)

5.1 禁用元素—>$(“#text”).attr(“disabled”,true)或者$(“#text”).attr(“disabled”,”disabled”);

5.2 啟用元素—>$(“#text”).attr(“disabled”,false) 或者$(“#text”).removeAttr(“disabled”);

5.3 是否可用—>$(“#text”).attr(“disabled”) 返回disabled則不可用，返回undefined則可用（ps:可以根據$(“#text”).attr(“disabled”) ==undefined的返回值判斷）

下一篇：XAMPP:訪問phpmyadmin出錯的解決方案

JQuery：各種動作表單元素方法小結