如何使用JQuery获取不在form中的输入框值？

嘿，我看你在尝试用jQuery获取不在form里的输入框值却卡壳了，这事儿我熟，帮你捋捋！

首先看你贴的代码片段，按钮的onclick函数只写了一半（getv...），这肯定没法正常工作。另外就算函数写完了，也得注意几个容易踩的坑：

• 得确保jQuery真的加载成功了：你用的CDN链接是有效的，但有时候网络问题可能导致加载失败，最好打开浏览器控制台看看有没有报错
• 别在DOM还没加载完就去获取元素：如果脚本写在<head>里，直接调用$('#ac3')可能拿不到元素，因为这时候输入框还没渲染出来
• 选择器别写错：输入框的id是ac3，那jQuery选择器就得是$('#ac3')，大小写、拼写都不能错

给你写个完整的可运行示例，两种绑定方式都放上，你选顺手的用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取输入框值示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// 推荐用这种方式：等DOM完全加载好再绑定事件
$(document).ready(function(){
    $('button').eq(0).click(function(){
        var inputVal = $('#ac3').val();
        alert('输入框的值是：' + inputVal);
        console.log(inputVal); // 也可以在控制台查看内容
    });
});

// 如果习惯用onclick属性绑定，那得把函数定义成全局的
function getInputValue(){
    var inputVal = $('#ac3').val();
    alert('你输入的内容是：' + inputVal);
}
</script>
</head>
<body>
<input type="text" id="ac3" size="20" placeholder="请输入内容">
<br><br>
<button onclick="getInputValue()">点击获取值（onclick方式）</button>
<button>点击获取值（jQuery绑定方式）</button>
</body>
</html>

简单说下两种方式的区别：

• jQuery绑定事件：不用写全局函数，代码更模块化，还能一次性给多个元素绑定事件，后期维护更方便
• onclick属性：写法直接，但函数必须是全局的，容易造成变量污染，适合简单场景

你把这段代码复制过去试试，输入内容后点击按钮就能拿到值啦！

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