JQuery获取与设置HTML元素的值value
JQuery获取与设置HTML元素的值value
作者:简明现代魔法图书馆 发布时间:2011-07-07 10:16:13 20481 次阅读
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()方法不仅能设置元素的值,同时也能获取元素的值。
JQuery获取与设置HTML元素的值value的更多相关文章
- jQuery 获取和设置radio 和 checkbox 值的操作
jquery 中的val(),可以取值也可赋值,表单元素中的radio和checkbox是比较常用的控件,下面说说对它们的取值和赋值的使用 1.取值 表单如下: <div class=" ...
- js / jquery 获取和设置 FCK Editor 的值
开发中遇到 通过 $("#content").val(); 或者 document.getElementById("content"); 并不能获取到 id 为 ...
- jQuery获取表单各元素的值
radio值获取 $("input[type='radio']:checked").val(); 2,设置指定的项为当前选中项 $("input[type='radio' ...
- jquery获取和设置元素高度宽度
jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...
- jQuery基础之获取和设置标签元素属性
jQuery基础之获取和设置标签元素属性方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script& ...
- jQuery获取或设置元素的宽度和高度
jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...
- jquery】常用的jquery获取表单对象的属性与值
[jquery]常用的jquery获取表单对象的属性与值 1.JQuery的概念 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的 ...
- Jquery获取select选中的文本与值
jquery获取select选择的文本与值获取select :获取select 选中的 text : $("#ddlregtype").find("option:s ...
- Js/Jquery获取iframe中的元素
转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...
随机推荐
- C语言宏的特殊用法和几个坑(转)
总结一下C语言中宏的一些特殊用法和几个容易踩的坑.由于本文主要参考GCC文档,某些细节(如宏参数中的空格是否处理之类)在别的编译器可能有细微差别,请参考相应文档. 宏基础 宏仅仅是在C预处理阶段的一种 ...
- 转:用JS判断IE浏览器的版本(-- 很巧妙实用的方法)
~~在看到这篇文章之前如果让我来判断IE的版本,那么我基本上会用 navigator.userAgent去做字符串检索,现在觉得特性检测的确比较靠谱一点 今天一个项目中需要判断IE版本号,又因为 jQ ...
- Android studio dabao
首先肯定是配置gradle,百度一下就知道了,我的是mac下配置的,sudo vim ~/.bash_profile ,然后设置环境变量 GRADE_HOME=/Users/Admin/gradle; ...
- AseoZdpAseo.init(this, AseoZdpAseo.INSERT_TYPE);
让以后的人知道吧,这就是一个广告包,相当于广告插件.
- BZOJ 1621: [Usaco2008 Open]Roads Around The Farm分岔路口
题目 1621: [Usaco2008 Open]Roads Around The Farm分岔路口 Time Limit: 5 Sec Memory Limit: 64 MB Submit: 56 ...
- (3)选择元素——(3)$()方法(The $() function)
No matter which type of selector we want to use in jQuery, we always start with the same function: $ ...
- Lucene 实例教程(二)
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本人声明.否则将追究法律责任. 作者: 永恒の_☆ 地址: http://blog.csdn.net/chenghui031 ...
- Redis 突然报错 NOAUTH Authentication required
查找相关资料,说是添加了密码 只需要在redis的配置文件redis.conf中开启requirepass就可以了,比如我设置我的访问密码是mypassword requirepass mypassw ...
- 我的Python成长之路---GitHub使用克隆GitHub(SSH key配置)
六.克隆GitHub仓库 1.创建仓库目录,目录位置没有要求,比如D:\learngit. 2.配置ssh(如果不配置会每次都输入用户名和密码) 使用TortoiseGit生成ssh-key:开始菜单 ...
- Android 代码设置密码输入框内容的显示/隐藏
//内容可见 mEtPassword.setTransformationMethod(HideReturnsTransformationMethod.getInstance()); //内容不可见 m ...