为什么jQuery的val()方法无法获取<button>标签的value属性值？

问题原因排查 #

• HTML标签写法不规范：<button>属于HTML双标签，不能使用自闭合写法<button/>，错误的标签写法会导致浏览器解析DOM结构异常，元素的value属性无法被正确识别读取。
• 未引入jQuery依赖：如果你的项目没有提前引入jQuery库，代码中的$符会直接报错，导致整个逻辑无法执行。
• 选择器匹配精度问题：$("button")是全局匹配所有button元素，当页面存在多个button时，默认只会返回第一个匹配元素的value，可能匹配到你不想要的元素。

修复方案 #

1. 首先在你的JS代码之前引入jQuery库，示例：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. 修正button标签写法，使用标准双标签格式：

<button value="text">按钮</button>

3. （可选优化）给button添加唯一id，使用id选择器精准匹配元素，避免匹配冲突：

<!-- HTML部分 -->
<button id="targetBtn" value="text">按钮</button>

<!-- JS部分 -->
<script>
$(document).ready(function(){
    var a = $("#targetBtn").val();
    alert(a)
});
</script>

内容的提问来源于stack exchange，提问作者UHS