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 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
js面向对象编程OOP及函数式编程FP区别
Jul 07 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
Laravel5中contracts详解
2015/03/02 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
简单谈谈Python流程控制语句
2016/12/04 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
简单实现python画圆功能
2018/01/25 Python
Python基于opencv调用摄像头获取个人图片的实现方法
2019/02/21 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
奥地利网上书店:Weltbild
2017/07/14 全球购物
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
企业业务员岗位职责
2014/03/14 职场文书
自主招生自荐信范文
2015/03/04 职场文书
旷工辞退通知书
2015/04/17 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
销售人员管理制度
2015/08/06 职场文书
Python基础知识之变量的详解
2021/04/14 Python
如何有效防止sql注入的方法
2021/05/25 SQL Server