使用 jQuery 按名称选择元素的方法

技术背景

在前端开发中，我们经常需要通过不同的方式来选择 HTML 元素。使用 jQuery 按名称选择元素就是一种常见的需求，尤其是在处理表单元素、复选框和单选框时。它能让开发者根据元素的 name 属性来精准地获取特定元素，以便进行后续的操作，如修改元素内容、隐藏或显示元素等。

实现步骤

1. 基本的属性选择器

可以使用 jQuery 的属性选择器，按照 [attribute_name=value] 的方式来选择元素。以下是一些基本示例：

$('td[name="tcol1"]');    // 精确匹配 'tcol1'
$('td[name^="tcol"]');    // 匹配以 'tcol' 开头的元素
$('td[name$="tcol"]');    // 匹配以 'tcol' 结尾的元素
$('td[name*="tcol"]');    // 匹配包含 'tcol' 的元素

2. 获取元素的值

如果要获取输入框中 name 属性对应的值，可以使用以下方法：

1 2	`var firstname = jQuery("#form1 input[name=firstname]").val(); var lastname = jQuery("#form1 input[name=lastname]").val();`

3. 处理带有方括号名称的元素

对于一些使用方括号名称的表单元素，需要进行转义处理，具体示例如下：

1 2	`<input type="text" name="foo"> <input type="text" name="foo[bar]">`

1 2	`$('[name="foo"]'); $('[name="foo\\[bar\\]"]');`

核心代码

按名称选择元素并处理

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
</head>

<body>
    <p>
        <input type="text" name="foo" value="copy name='foo'">
        <input type="text" disabled id="result-1" placeholder="i'm disabled">
    </p>
    <p>
        <input type="text" name="foo[bar]" value="copy name='foo[bar]'">
        <input type="text" disabled id="result-2" placeholder="i'm disabled">
    </p>
    <input type="button" id="copy" value="copy values">

    <script>
        $('#copy').on('click', () => {
            let $from = $('[name="foo"]');
            let $to = $('#result-1');
            $to.val($from.val());

            $from = $('[name="foo\\[bar\\]"]');
            $to = $('#result-2');
            $to.val($from.val());
        });
    </script>
</body>

</html>

性能测试代码

// https://jsbench.me/o6kbhyyvib/1
// https://jsbench.me/2fkbi9rirv/1

function A() {
    return $('[name=tcol1]');
}

function B() {
    return $(document.getElementsByName("tcol1"));
}

function C() {
    return document.getElementsByName("tcol1");
}

function D() {
    return document.querySelectorAll('[name=tcol1]');
}

function E() {
    $('[name=tcol1]').hide();
}

function F() {
    $(document.getElementsByName("tcol1")).hide();
}

function G() {
    document.getElementsByName("tcol1").forEach(e => e.style.display = 'none');
}

function H() {
    document.querySelectorAll('[name=tcol1]').forEach(e => e.style.display = 'none');
}

function I() {
    let elArr = [...document.getElementsByName("tcol1")];
    let length = elArr.length;
    for (let i = 0; i < length; i++) elArr[i].style.display = 'none';
}

// 测试
function reset() {
    $('td[name=tcol1]').show();
}
[A, B, C, D].forEach(f => console.log(`${f.name} rows: ${f().length}`));