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+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
jQuery 解析xml文件
Aug 09 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
详解原生js实现offset方法
Jun 15 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
全面了解JavaScript的作用域链
Apr 03 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 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程序--记数器
2006/10/09 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
Javascript this指针
2009/07/30 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
把pandas转换int型为str型的方法
2019/01/29 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
不用游标的SQL语句有哪些
2012/09/07 面试题
高级Java程序员面试要点
2013/08/02 面试题
综合测评自我鉴定
2013/10/08 职场文书
幼儿园家长评语
2014/02/10 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
中学总务处工作总结
2015/08/12 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
教你使用TensorFlow2识别验证码
2021/06/11 Python
美元符号 $
2022/02/17 杂记
python lambda 表达式形式分析
2022/04/03 Python