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判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
js加强的经典分页实例
Mar 15 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
JS解析XML实例分析
Jan 30 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
如何基于jQuery实现五角星评分
Sep 02 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 上传文件大小限制
2009/07/05 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
PHP实现下载功能的代码
2012/09/29 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
python分割和拼接字符串
2013/11/01 Python
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
python多任务及返回值的处理方法
2019/01/22 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
你懂得怎么写自荐信吗?
2013/12/27 职场文书
司机职责范本
2014/03/08 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
单位授权委托书范本
2014/09/26 职场文书
2015年调度员工作总结
2015/04/30 职场文书