当前位置：首页 > jquery

jquery通过name获取元素

2026-03-17 06:56:21jquery

使用 jQuery 通过 name 属性获取元素

jQuery 提供了多种方法通过元素的 name 属性来获取 DOM 元素。以下是几种常用的方法：

方法一：使用属性选择器

通过 [name="value"] 选择器可以精确匹配 name 属性值：

$('[name="elementName"]')

方法二：使用 filter 方法

jquery通过name获取元素

通过 filter 方法筛选出符合 name 属性的元素：

$('input').filter('[name="elementName"]')

方法三：结合表单元素选择器

如果目标元素是表单元素（如 input、select 等），可以结合表单选择器：

jquery通过name获取元素

$('input[name="elementName"]')

方法四：使用 document.getElementsByName

虽然这不是 jQuery 的原生方法，但可以结合 jQuery 使用：

$(document.getElementsByName('elementName'))

示例代码

以下是一个完整的示例，展示如何通过 name 属性获取元素并操作：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Get Element by Name</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" name="username" placeholder="Username">
    <input type="password" name="password" placeholder="Password">
    <button id="submit">Submit</button>

    <script>
        $(document).ready(function() {
            // 通过 name 获取元素
            var usernameInput = $('[name="username"]');
            var passwordInput = $('input[name="password"]');

            // 操作元素
            usernameInput.val('defaultUser');
            passwordInput.css('border', '1px solid red');

            // 通过 getElementsByName 获取
            var inputsByName = $(document.getElementsByName('username'));
            console.log(inputsByName.length); // 输出 1
        });
    </script>
</body>
</html>