jquery获取元素name属性值

jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作，在网页开发中，我们经常需要获取表单元素的值，如input、select、textarea等，本文将介绍如何使用jQuery获取name属性的值。

1、获取单个name属性的值

要获取单个name属性的值，可以使用jQuery的选择器，需要引入jQuery库，然后使用$()函数选择目标元素，最后通过.val()方法获取name属性的值。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery获取name属性的值</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form>
        <input type="text" name="username" placeholder="请输入用户名">
        <button type="button" id="getValue">获取值</button>
    </form>
    <script>
        $(document).ready(function(){
            $("#getValue").click(function(){
                var username = $("input[name='username']").val();
                alert("用户名：" + username);
            });
        });
    </script>
</body>
</html>

在这个示例中，我们创建了一个包含用户名输入框的表单，当用户点击“获取值”按钮时，会触发getValue事件处理函数，在该函数中，我们使用jQuery选择器$("input[name='username']")选择了name属性为“username”的input元素，然后通过.val()方法获取其值，并将其显示在弹出框中。

2、获取多个name属性的值

如果要获取多个具有相同name属性的元素的值，可以使用jQuery的.map()方法将这些值映射到一个数组中，需要引入jQuery库，然后使用$()函数选择目标元素，接着使用.map()方法将每个元素的值映射到一个新的数组中。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery获取多个name属性的值</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form>
        <input type="text" name="hobbies" placeholder="请输入爱好，用逗号分隔">
        <button type="button" id="getValues">获取值</button>
    </form>
    <script>
        $(document).ready(function(){
            $("#getValues").click(function(){
                var hobbies = $("input[name='hobbies']").map(function(){
                    return this.value;
                }).get();
                console.log(hobbies); // 输出：["篮球", "足球", "乒乓球"]
            });
        });
    </script>
</body>
</html>

jquery获取元素name属性值

在这个示例中，我们创建了一个包含爱好输入框的表单，用户可以输入多个爱好，用逗号分隔，当用户点击“获取值”按钮时，会触发getValues事件处理函数，在该函数中，我们使用jQuery选择器$("input[name='hobbies']")选择了name属性为“hobbies”的input元素，然后使用.map()方法将每个元素的值映射到一个新的数组中，我们使用.get()方法将映射后的数组转换为普通数组，并输出到控制台。

jquery获取元素name属性值