JQuery：各种操作表单元素方法小结

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

表单元素无处不在，已然成了Web应用不可或缺的一个部分。对表单最最最常见的操作就是获取表单元素的&＃20540;或者更改表单元素的&＃20540;。那在JQuery和Javascript中怎么操作表单元素的&＃20540;？

JQuery操作表单总结：

1、文本框、密码框、隐藏域、文本域（id换成对应的,value属性存在，才能利用attr(‘value’) 获取&＃20540;，否则返回undefined）：

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

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

2、按钮：普通按钮、重置按钮和提交按钮（id换成对应的,value属性存在，才能利用attr(‘value’) 或者val()获取&＃20540;，否则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()获取&＃20540;，否则attr返回undefined,val返回on（不管是否存在checked属性））

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

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

3.3 获取选中的复选框的&＃20540;：$(“input[type=checkbox][checked]“).attr(‘value’)或者$(“input[type=checkbox][checked]“).val()【ps:只会返回第一个被选中的&＃20540;】

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 获取选中选项的&＃20540;—>$(“#slt”).val()（ps:$(“#slt”).attr(‘value’)会返回undefined）

4.2 设置—>$(“#slt”).val(‘audi’)（ps:如果select中有&＃20540;为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的最大&＃20540;不能超过option的最大索引，否则$(“#slt”).get(0).selectedIndex 返回-1)

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

4.8 添加option—>$(‘1’).appendTo($(“#slt”))  或者  $(“#slt”).append(‘2’);

4.9 删除option—>$(“#slt option[value='opel']“).remove()：删除&＃20540;是opel的option（value属性要存在，同样可以根据存在的text/index属性删除option）

5、元素的可用性(disabled的官方&＃20540;是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的返回&＃20540;判断）

下一篇：XAMPP:访问phpmyadmin出错的解决方案