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 相关文章推荐
调整小数的格式保留小数点后两位
May 14 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
vue实现简单loading进度条
Jun 06 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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 中文字符串首字母的获取函数分享
2013/11/04 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
php图片上传类 附调用方法
2016/05/15 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
python去掉字符串中重复字符的方法
2014/02/27 Python
Python 抓取动态网页内容方案详解
2014/12/25 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
django主动抛出403异常的方法详解
2019/01/04 Python
python实现字符串和数字拼接
2020/03/02 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
《春晓》教学反思
2014/04/20 职场文书
改进作风怎么办发言材料
2014/08/17 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers