2021-12-20 学习记录--JS- .val() 和 .value 的相似与区别_input的jquery获取val和js获取value值一样吗

.val()和.value的相似与区别

一、相似点

均可获取input / textarea 的value值

二、区别

1、.val()是JQuery写法，.value是原生JS写法

2、用法不同【重点来啦~】

一、获取input对应的value值

1、.val()获取input对应的value值：$('').val()

example：

HTML：

<input id="input" type="text" placeholder="请输入姓名">
<button class="btn">点击获取input对应value值</button>
1
2

JS：

<script src="./js/jquery.min.js"></script>

$('.btn').on('click',function () {
   console.log($('#input').val());
})
1
2
3
4
5

结果：

2、.value获取input对应的value值：DOM节点.value

example：

HTML：

<input id="input" type="text" placeholder="请输入姓名">
<button onclick="showValue()">点击获取input对应value值</button>
1
2

JS：

var input = document.getElementById('input');
console.log(input); // 获取到input对应的DOM节点 <input id="input" type="text" placeholder="请输入姓名">

function showValue() {
  // 获取input的value值
  console.log(input.value);
}
1
2
3
4
5
6
7

结果：
二、修改input对应的value值

1、.val()修改input对应的value值：$(' ').val('修改后的值')

example：

HTML：

<input id="input" type="text" value="乔治">
<button class="btn">点击修改input对应value值</button>
1
2

JS：

<script src="./js/jquery.min.js"></script>
$('.btn').on('click',function () {
   // 修改input对应value值
   $('#input').val('乔二娃');
   // 获取到修改后的input对应的value值
   console.log($('#input').val());
})
1
2
3
4
5
6
7

结果：

2、.value修改input对应的value值：DOM节点.value = '修改后的值'

example：

HTML：

<input id="input" type="text" value="修改前!我叫小杨同学">
<button onclick="showValue()">点击修改input对应value值</button>
1
2

JS：

var input = document.getElementById('input');
console.log(input); // 获取到input对应的DOM节点 <input id="input" type="text" placeholder="请输入姓名">

function showValue() {
   // 修改input的value值
   input.value = '修改后!我叫杨咩咩'
   // 弹出修改后的input的value值
   alert(input.value);
}
1
2
3
4
5
6
7
8
9

结果：