jQuery——val() 方法的使用

最新推荐文章于 2022-07-12 16:32:59 发布

一只野生饭卡丘

最新推荐文章于 2022-07-12 16:32:59 发布

阅读量2k

点赞数 1

分类专栏： jQuery 文章标签： jQuery JavaScript val() 前端

本文链接：https://blog.csdn.net/Searchin_R/article/details/83015573

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先看一下val()的定义。

val() 方法返回或设置被选元素的值。

元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

如果该方法未设置参数，则返回被选元素的当前值。

从定义可以知道，val()一般有两个用途：返回被选元素的值与设置被选元素的值。下面来看一下如何用val()来实现这两个功。

1.设置被选元素的值。

语法：

$(selector).val(value)

阿福！关门！放代码！

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $(":text").val("Hello Boy");//修改文本框的值
  });
});
</script>
</head>
<body>
<p>Name: <input type="text" name="user" value="Hello girl" /></p>
<button>改变文本域的值</button>
</body>
</html>

注：（使用jQuery语法需要导入jquery库）

上面这段代码定义了一个input元素，还设置了一个button，并为这个按钮绑定了点击事件，如果点击button，则执行函数。初始界面效果如下：

点击按钮，文本框的值将变为“Hello Boy”。

2.返回被选元素的值

语法：

$(selector).val()

阿福，再关门，放代码！

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert($("#hha").val());
  });
});
</script>
</head>
<body>
Firstname: <input id="hha" type="text" name="fname" value="Searchin" /><br />
Lastname: <input type="text" name="lname" value="R" /><br /><br />
<button>获得第一个文本域的值</button>
</body>
</html>

上面这段代码设置了两个input，并给第一个input设置了id，以便于选择器匹配。button也绑定了点击事件，当点击button的时候，执行函数。

初始效果如下：

如果点击button，则弹窗显示第一个input的值。如下图：

好啦，以上就是val()方法的使用，阿福，可以开门啦，把代码晒在这里让大家看看吧~

一只野生饭卡丘

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
jQuery——val() 方法的使用

先看一下val()的定义。val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数，则返回被选元素的当前值。从定义可以知道，val()一般有两个用途：返回被选元素的值与设置被选元素的值。下面来看一下如何用val()来实现这两个功。1.设置被选元素的值。语法：$(selector).va...
复制链接

扫一扫