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()方法不仅能设置元素的值,同时也能获取元素的值。

 

JQuery获取与设置HTML元素的值value的更多相关文章

  1. jQuery 获取和设置radio 和 checkbox 值的操作

    jquery 中的val(),可以取值也可赋值,表单元素中的radio和checkbox是比较常用的控件,下面说说对它们的取值和赋值的使用 1.取值 表单如下: <div class=" ...

  2. js / jquery 获取和设置 FCK Editor 的值

    开发中遇到 通过 $("#content").val(); 或者 document.getElementById("content"); 并不能获取到 id 为 ...

  3. jQuery获取表单各元素的值

    radio值获取 $("input[type='radio']:checked").val(); 2,设置指定的项为当前选中项 $("input[type='radio' ...

  4. jquery获取和设置元素高度宽度

    jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...

  5. jQuery基础之获取和设置标签元素属性

    jQuery基础之获取和设置标签元素属性方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script& ...

  6. jQuery获取或设置元素的宽度和高度

    jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...

  7. jquery】常用的jquery获取表单对象的属性与值

    [jquery]常用的jquery获取表单对象的属性与值 1.JQuery的概念 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的 ...

  8. Jquery获取select选中的文本与值

    jquery获取select选择的文本与值获取select :获取select 选中的 text :    $("#ddlregtype").find("option:s ...

  9. Js/Jquery获取iframe中的元素

    转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...

随机推荐

  1. jQuery + svg/vml

    流程设计器jQuery + svg/vml(Demo7 - 设计器与引擎及表单一起应用例子)   去年就完成了流程设计器及流程引擎的开发,本想着把流程设计器好好整理一下,形成一个一步一步的开发案例,结 ...

  2. SkipFish

    https://zmap.io/ http://code.google.com/p/skipfish/wiki/SkipfishDoc#How_to_run_the_scanner?

  3. linux 命令之sar——监视系统状态

    摘要:在进行系统或者内核测试的时候,我们经常需要观察cpu利用率,缓冲区使用情况,文件读写情况等等.在linux系统下,我们可以用sar命令来达到这个要求. sar 命令行的常用格式: sar [op ...

  4. HH的军训(容斥)

    1248: HH的军训 时间限制: 1 Sec  内存限制: 128 MB 提交: 95  解决: 11 [提交][状态][讨论版] 题目描述 大学里,最难忘的事情莫过于军训了,白白的HH童鞋就被无情 ...

  5. C# RSA在服务上使用出现拒绝方法错误的解决方法

    在做一个快钱接口的时候,遇到了.net RSA加密无法在一台win2008服务器上运行正常,更换到Win2003服务器后出现问题,具体表现如下: “/”应用程序中的服务器错误. ----------- ...

  6. Android 使用动态载入框架DL进行插件化开发

    如有转载,请声明出处: 时之沙: http://blog.csdn.net/t12x3456    (来自时之沙的csdn博客) 概述: 随着应用的不断迭代.应用的体积不断增大,项目越来越臃肿,冗余添 ...

  7. 如何快速方便的输出向量vector容器中不重复的内容

    在vector容器中,存入的内容难免会出现重复,那么如何快速输出或提前非重复的那些数据呢,即重复的数据只输出一次,直观的方法是每次输出都要通过循环比较是否已经输出过,这种方法还是比较费时的,可以利用u ...

  8. spark sql 基本用法

    一.通过结构化数据创建DataFrame: publicstaticvoid main(String[] args) {    SparkConf conf = new SparkConf() .se ...

  9. ubuntu15.04更新软件源

    1,首先备份原来的源 sudo cp /etc/apt/sources.list /etc/apt/sources.list_backup2,编辑软件源的文件 sudo vim /etc/apt/so ...

  10. iOS8模拟器键盘弹不出来

    command + k  或 command + shift + k  切换到模拟器键盘 其默认是Mac键盘