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实现表格排序方法
Jun 14 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
Vue如何获取数据列表展示
Dec 11 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函数常用用法小结
2010/02/08 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
详解react-redux插件入门
2018/04/19 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
利用python求相邻数的方法示例
2017/08/18 Python
使用Scrapy爬取动态数据
2018/10/21 Python
python实现flappy bird小游戏
2018/12/24 Python
Django Rest framework权限的详细用法
2019/07/25 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
python3.8下载及安装步骤详解
2020/01/15 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
CSS3实现时间轴特效
2020/11/02 HTML / CSS
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
婚假请假条怎么写
2014/04/10 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
代码复现python目标检测yolo3详解预测
2022/05/06 Python
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python