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实现仿百度瀑布流的方法
Feb 05 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
理解javascript中的严格模式
Feb 01 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
js实现模糊匹配功能
Feb 15 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
详解如何探测小程序返回到webview页面
May 14 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 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
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
php可变长参数处理函数详解
2017/02/22 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
Python列表切片用法示例
2017/04/19 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
中专毕业生自我鉴定范文
2013/11/09 职场文书
机电专业个人求职信范文
2013/12/30 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
大学生心理活动总结
2014/07/04 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
思想作风建设心得体会
2014/10/22 职场文书
2014年双拥工作总结
2014/11/21 职场文书
就业导师推荐信范文
2015/03/27 职场文书
学术会议通知范文
2015/04/15 职场文书
2019大学生实习报告
2019/06/21 职场文书