Jquery .val 与 .value 区别

最新推荐文章于 2023-08-27 01:42:36 发布

屋顶的黑喵

最新推荐文章于 2023-08-27 01:42:36 发布

阅读量380

点赞数

文章标签： jQuery .val 与 .value 区别

原文链接：https://blog.csdn.net/qq_20617983/article/details/81139152

版权

原理了解：

.val() 方法，如果是带参就是给输入框赋值 ; 如果是不带参数的方法，就是获取输入框的值;
.value:获取Dom标签元素的value值，属于原生态JavaScript的写法

例子：（复制直接使用）

.val 例子

<!DOCTYPE HTML>
<html>
 
	<head>
		<meta charset=UTF-8 />
		<title></title>
		<style type="text/css">
 
		</style>
		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js" ></script>
		<script type="text/javascript">
		$(document).ready(function(){
			$("#t1").val("");
			$("#bs1").on("click",function(){
					//.val可以获取文本框的值
					alert($("#t1").val());
			})
			$('#bs2').on("click",function(){
					//.val可以给文本框赋值
					$("#t2").val("999")
			})
		})
		</script>
	</head>
 
	<body>
		输入框1<input type="text" id="t1" placeholder="请输入值,点击按钮获取"/>
		<input type="button" id="bs1" value="获取输入框的值"> <br/>
		
		输入框2<input type="text" id="t2"/>
		<input type="button" id="bs2" value="给输入框赋值(999)" />
		
	</body>
 
</html>

.value 例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
</head>
<body>
    <div id="box">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="button" id="btn" onclick="Total()" value="转化为数组">
    </div>
    <script>
    function Total() {
        var numArr = []; // 定义一个空数组
        var txt = $('#box').find(':text'); // 获取所有文本框
        var s=txt.eq(0).val(); //jquery的写法
        var ss=txt[0].value;//JavaScript的写法 //如果是获取btn的值就要用value了 
        alert(s);
        
    }
    </script>
</body>
</html>