WEB 教程
实践 示例
HTML 参考手册
CSS 参考手册
PHP 参考手册

如何在 jQuery 中按名称选择元素

主题:JavaScript / jQuery上一页|下一页

答案:使用属性选择器

您可以使用 CSS 属性选择器使用 jQuery 按名称选择 HTML 元素。 属性选择器为选择元素提供了一种非常灵活和强大的机制。

让我们看一下下面的例子,看看它是如何工作的:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Select Element by its Name Attribute</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    // Select and style elements on click of the button
    $("button").click(function(){
        // 选择名称属性值以"_name"结尾的输入
        $('input[name$="_name"]').css("border-color", "lime");
        
        // 选择名称属性值是"email"的输入
        $('input[name="email"]').css("border-color", "blue");
        
        // 选择名称属性值以"zip"开头的输入
        $('input[name^="zip"]').css("border-color", "red");
    });    
});
</script>
</head>
<body>
    <form>
        <p><label>First Name: <input type="text" name="first_name"></label><p>
        <p><label>Last Name: <input type="text" name="last_name"></label><p>        
        <p><label>Email Address: <input type="text" name="email"></label><p>
        <p><label>Zip Code: <input type="text" name="zip_code"></label><p>
        <button type="button">Style Inputs</button>
    </form>
</body>
</html>

请查看 CSS 属性选择器 的教程以了解更多信息。


FAQ 相关问题解答

以下是与此主题相关的更多常见问题解答:

Advertisements