js里怎么拿input的值

在JavaScript中，获取input元素的值主要有以下几种方式：通过原生的JavaScript、通过jQuery、通过事件监听。

1. 通过原生JavaScript获取：

你可以使用document.getElementById、document.getElementsByClassName或document.querySelector等方法来获取input元素，然后使用value属性来获取其值。
2. 通过jQuery获取：

jQuery是一个简化JavaScript编程的库，使用jQuery可以更方便地获取input的值。
3. 通过事件监听获取：

你可以使用事件监听器来在用户输入时实时获取input的值。
4. 使用表单序列化：

在复杂表单中，你可以使用表单序列化来获取所有输入值。

详细描述：通过原生JavaScript获取input值
这种方法是最常见且最基础的方式，适用于大多数简单的场景。首先，通过document.getElementById或其他选择器方法获取到input元素，然后使用value属性获取其值。例如：

let inputElement = document.getElementById("myInput");
let inputValue = inputElement.value;
console.log(inputValue);

一、通过原生JavaScript获取

1. 使用document.getElementById

document.getElementById是最常用的方法之一，用于通过元素的id获取该元素。下面是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Input Value</title>
</head>
<body>
    <input type="text" id="username" value="John Doe">
    <button onclick="getInputValue()">Get Value</button>
    <script>
        function getInputValue() {
            let inputElement = document.getElementById("username");
            let inputValue = inputElement.value;
            console.log(inputValue);
        }
    </script>
</body>
</html>

2. 使用document.getElementsByClassName

如果你的input没有id，而是有一个特定的class，你可以使用document.getElementsByClassName方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Input Value</title>
</head>
<body>
    <input type="text" class="user-input" value="Jane Doe">
    <button onclick="getInputValue()">Get Value</button>
    <script>
        function getInputValue() {
            let inputElements = document.getElementsByClassName("user-input");
            let inputValue = inputElements[0].value; // 获取第一个匹配的元素
            console.log(inputValue);
        }
    </script>
</body>
</html>

3. 使用document.querySelector

document.querySelector方法更为灵活，它允许你使用CSS选择器来选择元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Input Value</title>
</head>
<body>
    <input type="text" id="user" value="Alice">
    <button onclick="getInputValue()">Get Value</button>
    <script>
        function getInputValue() {
            let inputElement = document.querySelector("#user");
            let inputValue = inputElement.value;
            console.log(inputValue);
        }
    </script>
</body>
</html>

二、通过jQuery获取

1. 使用基本的jQuery选择器

jQuery提供了更简洁的语法来选择和操作DOM元素。首先，确保你已经包含了jQuery库：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Input Value</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="user" value="Bob">
    <button onclick="getInputValue()">Get Value</button>
    <script>
        function getInputValue() {
            let inputValue = $("#user").val();
            console.log(inputValue);
        }
    </script>
</body>
</html>

2. 使用事件监听

你还可以使用jQuery来监听input元素的变化，并实时获取其值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Input Value</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="user">
    <p id="display"></p>
    <script>
        $(document).ready(function(){
            $("#user").on("input", function() {
                let inputValue = $(this).val();
                $("#display").text(inputValue);
            });
        });
    </script>
</body>
</html>

三、通过事件监听获取

1. 使用原生JavaScript事件监听器

你可以使用addEventListener方法来监听input元素的输入事件，并实时获取其值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Input Value</title>
</head>
<body>
    <input type="text" id="user">
    <p id="display"></p>
    <script>
        document.getElementById("user").addEventListener("input", function() {
            let inputValue = this.value;
            document.getElementById("display").textContent = inputValue;
        });
    </script>
</body>
</html>

2. 使用表单提交事件

在表单提交时获取input值也是一个常见的场景：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Input Value</title>
</head>
<body>
    <form id="userForm">
        <input type="text" id="user" value="Charlie">
        <button type="submit">Submit</button>
    </form>
    <script>
        document.getElementById("userForm").addEventListener("submit", function(event) {
            event.preventDefault(); // 防止表单实际提交
            let inputValue = document.getElementById("user").value;
            console.log(inputValue);
        });
    </script>
</body>
</html>

四、使用表单序列化

1. 使用原生JavaScript序列化表单

在复杂表单中，你可能需要一次性获取所有输入值。你可以通过序列化表单来实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Input Value</title>
</head>
<body>
    <form id="userForm">
        <input type="text" name="firstName" value="John">
        <input type="text" name="lastName" value="Doe">
        <button type="submit">Submit</button>
    </form>
    <script>
        document.getElementById("userForm").addEventListener("submit", function(event) {
            event.preventDefault(); // 防止表单实际提交
            let formData = new FormData(this);
            for (let [name, value] of formData) {
                console.log(name, value);
            }
        });
    </script>
</body>
</html>

2. 使用jQuery序列化表单

使用jQuery序列化表单更加简便，可以直接将表单数据转换为URL编码字符串：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Input Value</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="userForm">
        <input type="text" name="firstName" value="Jane">
        <input type="text" name="lastName" value="Doe">
        <button type="submit">Submit</button>
    </form>
    <script>
        $(document).ready(function(){
            $("#userForm").on("submit", function(event) {
                event.preventDefault(); // 防止表单实际提交
                let formData = $(this).serialize();
                console.log(formData);
            });
        });
    </script>
</body>
</html>

以上是几种常见的获取input值的方法，根据具体需求和项目情况，可以选择适合的方法。在复杂的项目中，使用合适的工具和方法可以大大提高开发效率和代码的可维护性。例如，使用研发项目管理系统PingCode和通用项目协作软件Worktile可以帮助你更好地管理和协作项目。