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 相关文章推荐
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
javascript帧动画(实例讲解)
Sep 02 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 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
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
python 读入多行数据的实例
2018/04/19 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
详解python 中in 的 用法
2019/12/12 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
python中entry用法讲解
2020/12/04 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
初婚未育证明
2014/01/15 职场文书
学校大课间活动方案
2014/01/30 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技