JQuery获取与设置HTML元素的值value
作者：简明现代魔法图书馆 发布时间：2011-07-07 10:16:13 20481 次阅读
服务器君一共花费了13.221 ms进行了6次数据库查询，努力地为您提供了提供了这个页面。
val()方法
此方法类似于JavaScript中的value属性，可以用来设置和获取元索的值。无论元素是文本框，下拉列表还足单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。先看看下面的效果演示：
欢迎访问简明现代魔法图书馆
- 简单易懂的PHP魔法
- 简单易懂的JavaScript魔法
- 简单易懂的JQuery魔法
上面效果的实现很简单，如下面代码：
$(function(){
$("#btn_1").click(function(){
// 获取按钮的value值
alert( $(this).val() );
});
$("#btn_2").click(function(){
// 设置按钮的value值
$(this).val("我被点击了!");
});
});
比如网站的邮箱登录界面，默认状态下，邮箱地址文本框和邮箱密码框内分别有“请输入邮箱地址”和“请输入邮箱密码”的提示。当将鼠标聚焦到邮箱地址文本框时，文本框内的“请输入邮箱地址”文字将被清空。
如果此时未在邮箱地址框中输入任何内容，而将鼠标焦点直接聚焦到密码输入框，则会发现密码框内的提示文字被清空了，同时邮箱地址输入框的提示也被还原了。
如何实现上面的效果呢？
第1步：设计网页的基本结构。在页面中添加两个文本框，分别对两个文本框设置id，同时设置它们的默认值为“请输入邮箱地址”和“请输入邮箱密码”。
<div> <input type="text" id="address" value="请输入邮箱地址"/> <br/><br/> <input type="text" id="password" value="请输入邮箱密码"/> <br/><br/> <input type="button" value="登陆"/> </div>
第2步：对“地址框”进行操作。
当地址框获取鼠标焦点时，如果地址框的值为“请输入邮箱地址”，则将地址框中的值清空。可以使用如下的JQuery代码：
// 地址框获得鼠标焦点
$("#address").focus(function(){
// 得到当前文本框的值
var txt_value = $(this).val();
if(txt_value=="请输入邮箱地址"){
// 如果符合条件，则清空文本框内容
$(this).val("");
}
});
当地址框失去鼠标焦点时，如果地址框的值为空，则将地址框的值设置为“清输入邮箱地址”。可以使用如下的JQuery代码：
// 地址框失去鼠标焦点
$("#address").blur(function(){
// 得到当前文本框的值
var txt_value = $(this).val();
if(txt_value==""){
// 如果符合条件，则设置内容
$(this).val("请输入邮箱地址");
}
})
PS：focus()方法相当于JavaScript中的onfocus()方法，作用是处理获得焦点时的事件。blur()方法相当于JavaScript中的onblur()方法，作用是处理失去焦点时的事件。
第3步：对“密码框”进行操作，实现过程与“地址框”相同。此时，类似于YAHOO邮箱登录框的提示效果就完成了。
也可以使用表单元素的defaultValue属性来实现同样的功能，defaultValue属性包含该表单元素的初始值。代码如下：
$("#address").focus(function(){ // 地址框获得鼠标焦点
var txt_value = $(this).val(); // 得到当前文本框的值
if(txt_value==this.defaultValue){
$(this).val(""); // 如果符合条件，则清空文本框内容
}
});
$("#address").blur(function(){ // 地址框失去鼠标焦点
var txt_value = $(this).val(); // 得到当前文本框的值
if(txt_value==""){
$(this).val(this.defaultValue);// 如果符合条件，则设置内容
}
})
注意：this指向当前的文本框，“this.defaultValue”就是当前文本框的默认值。通过上面的例子可以发现val()方法不仅能设置元素的值，同时也能获取元素的值。