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对于每个匹配的元素所要执行的函数

 

 

 更多内容将陆续发布。