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 相关文章推荐
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
Javascript获取某个月的天数
May 30 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
微信小程序关键字变色实现代码实例
Dec 13 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 file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
javascript常见操作汇总
2014/09/03 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
Python抽象类的新写法
2015/06/18 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
综合办公室个人的自我评价
2013/12/22 职场文书
中学门卫岗位职责
2013/12/26 职场文书
大二学生学习个人自我评价
2014/01/19 职场文书
2014年清明节寄语
2014/04/03 职场文书
客户经理岗位职责
2015/01/31 职场文书
光荣之路观后感
2015/06/12 职场文书
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server