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 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
Js和VUE实现跑马灯效果
May 25 Javascript
vue实现员工信息录入功能
Jun 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模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
图片自动更新(说明)
2006/10/02 Javascript
js的with语句使用方法
2007/09/21 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
JavaScript中实现单体模式分享
2015/01/29 Javascript
nodeJS微信分享
2017/12/20 NodeJs
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
Python记录详细调用堆栈日志的方法
2015/05/05 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
高一化学教学反思
2014/02/05 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
应届生简历自我评价
2015/03/11 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
《圆明园的毁灭》教学反思
2016/02/16 职场文书
创业计划书详解
2019/07/19 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技
LeetCode189轮转数组python示例
2022/08/05 Python