JQuery教程：第一节：使用JQuery处理表单元素

JQuery教程

Headsen编著,Email：Headsen@163.com
JQuery号称写最少的代码，处理更多的事，那么我们赶紧看看吧。

一、使用JQuery处理表单元素

HTML表单(Form)常用控件有：
·
input type="text" 单行文本输入框
·
input type="password" 密码输入框(输入的文字用*表示)
·
input type="radio" 单选框
·
input type="checkbox" 复选框
·
textArea 多行文本输入框
·
select 下拉框 (单选和多选)
在jQuery里，我们可以下面方法来获取这些元素的值：
1.获取input类的值：
$("input").val();
//包括radio、checkbox
2.获取textarea类的值:
$("textarea").val();
3.获取select类的值：
$("select").val();
当表单上含有多个input类（或者textarea类和select类），使用上述方法得到的将是一个数组。当然，你可以给这些控件加上ID，从而对某个特定的控件取值，例如：$("input#myID").val()。
下面逐一实例讲解：

（1）输入框、密码框、多行文本框

输入框：<input name="inp_name1" id="inp_id1"
value="ww"><br/>
密码框：<input type="password" name="pass_name1"
id="pass_id1"><br/>
输入域：<textarea name="area_name1" id="area_name1"
rows="4" cols="10"/><br/>
普通方式：
document.getElementById("myid").value或document.all.myname.value
如：document.getElementById("id1").value或document.all. inp_name1.value
JQuery方式：
$("input#id").val()，其中$()为选择器，id对应元素ID值，通过ID选择时“#”不能省，val()获取元素对象的值。input、textarea可省略。
如：var pass_value = $("#pass_id1").val();
var area_value = $("#area_id1").val();

（2）单选框、多选框

单选框：<input name="ro_name1" id="ro_id1"
type="radio" value="本科" checked="checked">本科<input name="ro_name1"
id="ro_id1" type="radio"
value="研究生">研究生<br>
复选框：<input name="chk_name1" type="checkbox"
value="足球">足球
<input name="chk_name1" type="checkbox"
value="篮球">篮球
<input name="chk_name1" type="checkbox"
value="乒乓球">乒乓球<br>
普通方式：
通过document.getElementsByName("name")获取元素数组，然后遍历数组，筛选选中值
如： var ros = document.getElementsByName("ro_name1");
for(var i=0;i<ros.length;i++){
if(ros[i].checked){
alert(ros[i].value); break;//单选框只有一个值
}
}
var chks =
document.getElementsByName("chk_name1");
var ckd_value =[];
for(var i=0;i<chks.length;i++){
if(chks[i].checked)
ckd_value.push(chks[i].value);//多选框返回数组
}
alert(ckd_value)
JQuery方式：
单选框：
var ro_value =$("input:checked#ro_id1").val();
多选框：注意返回是数组，使用each()函数迭代。
var chk_value =[];
var chk_values = $("input:checked#chk_id1").each(function(index){
chk_value.push($(this).val());
});

（3）下拉单

<select id="sel_id1" name="sel_name1">
<option value="河北" selected="selected">河北</option>
<option value="山东">山东</option>
<option value="江苏">江苏</option>
</select><br/>
普通方式：
var sel_value = document.getElementById("sel_id1").value;
JQuery方式：
var sel_value = $("select#sel_id1").val();
如果允许复选，返回数组。

语法汇总解释：

val() ;
返回值String和Array 描述：获得第一个匹配元素的当前值。
$(“#ID”) ;
描述：根据给定的ID匹配一个元素。
如果选择器中包含特殊字符，可以用两个斜杠转义。
如：
HTML
代码:
<span
id="foo:bar"></span>
<span
id="foo[bar]"></span>
<span
id="foo.bar"></span>
jQuery
代码:
#foo//:bar
#foo//[bar//]
#foo//.bar
:checked
返回值:Array<Element(s)>
概述：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
如：

$("input:checked")

:selected
返回值:Array<Element(s)>:selected
概述：匹配所有选中的option元素
如：$("select
option:selected#id")，等价于例子中的$("select#sel_id1")
each(callback)
返回值:jQuery
概述:以每一个匹配的元素作为上下文来执行一个函数。
参数:callback Function对于每个匹配的元素所要执行的函数

更多内容将陆续发布。