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 相关文章推荐
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
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
实用函数4
2007/11/08 PHP
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
php实现的简单检验登陆类
2015/06/18 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
Linux下编译安装MySQL-Python教程
2015/02/02 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
Python Django 命名空间模式的实现
2019/08/09 Python
pytorch 共享参数的示例
2019/08/17 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
python路径的写法及目录的获取方式
2019/12/26 Python
Python计算IV值的示例讲解
2020/02/28 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
浅析python 字典嵌套
2020/09/29 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
经营理念口号
2014/06/21 职场文书
如何写好闭幕词
2019/04/02 职场文书
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python