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操作Cookie写入和读取实例代码
Oct 20 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 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
Yii框架中memcache用法实例
2014/12/03 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
简单谈谈JS中的正则表达式
2017/09/11 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
Tesserocr库的正确安装方式
2018/10/19 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
英国精品买手店:Browns Fashion
2016/09/29 全球购物
爸爸的花儿落了教学反思
2014/02/20 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis