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 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
JavaScript入门教程(7) History历史对象
Jan 31 Javascript
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
JavaScript中点击事件的写法
Jun 28 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
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/07/12 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
Yii2中cookie用法示例分析
2016/07/18 PHP
Jquery之美中不足小结
2011/02/16 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
Python实现GIF图倒放
2020/07/16 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
印度民族服装购物网站:BIBA
2019/08/05 全球购物
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
运动会方阵解说词
2014/02/12 职场文书
铲车司机岗位职责
2014/03/15 职场文书
房产公证书范本
2014/04/10 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android