jQuery中val()方法用法实例


Posted in Javascript onDecember 25, 2014

本文实例讲述了jQuery中val()方法用法。分享给大家供大家参考。具体分析如下:

此方法设置或获取匹配元素的value属性值。

只有具有value属性的元素才能够使用此方法。比如input元素可以使用此方法,而div元素就不可以。

使用方式:

用法一:

此方法不带参数的时候是返回第一个匹配元素的value属性值。例如:

$("input").val()

以上代码是获取第一个input元素的value属性值。
实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>val()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    alert($("input").val());

  })

})

</script>

</head>

<body>

<div>

  <ul>

    <li>

      <input type="text" value="请输入用户名" />

    </li>

  </ul>

</div>

<button>点击查看效果</button>

</body>

</html>

用法二:

此方法带有参数的时候是设置所有匹配元素的属性值。例如:

$("input").val("这是测试脚本")

以上代码将所有input元素的value属性值设置为"这是测试脚本"。
实例:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>val()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("input").val("这是测试脚本");

  })

})

</script>

</head>

<body>

<div>

  <ul>

    <li>

      <input type="text" value="请输入用户名" />

    </li>

  </ul>

</div>

<button>点击查看效果</button>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
vue将时间戳转换成自定义时间格式的方法
Mar 02 Javascript
微信小程序block的使用教程
Apr 01 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
js实现全选和全不选
Jul 28 Javascript
24款热门实用的jQuery插件推荐
Dec 24 #Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 #Javascript
Javascript 多物体运动的实现
Dec 24 #Javascript
Javascript 运动中Offset的bug解决方案
Dec 24 #Javascript
jQuery中height()方法用法实例
Dec 24 #Javascript
jQuery中width()方法用法实例
Dec 24 #Javascript
jQuery中animate()方法用法实例
Dec 24 #Javascript
You might like
在PHP的图形函数中显示汉字
2006/10/09 PHP
php 表单验证实现代码
2009/03/10 PHP
关于php mvc开发模式的感想
2011/06/28 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
document.write的几点使用心得
2014/05/14 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
2016/02/05 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
Python去除列表中重复元素的方法
2015/03/20 Python
详解Python中的Cookie模块使用
2015/07/06 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
python 全文检索引擎详解
2017/04/25 Python
python学生管理系统
2019/01/30 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
英国网上花店:Bunches
2016/11/29 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
国际政治个人自荐信范文
2013/11/26 职场文书
优秀大学生推荐信范文
2013/11/28 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
百年孤独读书笔记
2015/06/29 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书