表单元素和一般元素不太一样,它们的值都是通过 value 属性来定义的。因此,我们不能使用 html() 和 text() 这两个方法来获取表单元素的值。
在 jQuery 中,我们可以使用 val() 来获取和设置表单元素的值。
语法:
举例:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- <script src="js/jquery-1.12.4.min.js"></script>
- <script>
- $(function () {
- $("#btn_get").click(function(){
- var str1 = $("#txt1").val();
- alert(str1);
- });
- $("#btn_set").click(function(){
- var str2 = "给你初恋般的感觉";
- $("#txt2").val(str2);
- });
- })
- </script>
- </head>
- <body>
- <input id="txt1" type="text" value="城东书院"/><br/>
- <input id="txt2" type="text" /><br/>
- 获取第1个文本框的值:<input id="btn_get" type="button" value="获取"/><br/>
- 设置第2个文本框的值:<input id="btn_set" type="button" value="设置">
- </body>
- </html>
预览效果如图 1 所示。
val() 方法不仅可以用来获取表单元素的值,也可以用来设置表单元素的值。
html()、text()、val() 这 3 个方法都可以实现两点:无参数时用于“获取值”,有参数时用于“设置值”。一般来说,很多 jQuery 方法都有这个特点。