在 jQuery 中通过 ID 获取元素

JavaScript 1年前 22

在 JavaScript 中，我们可以使用 document.getElementById() 方法通过 ID 获取元素。在 jQuery 中，我们可以使用 $('#contents') 通过 ID 获取元素。

本教程演示了如何使用这两种方法通过 ID 获取元素。

在 JavaScript 中通过 ID 获取元素

document.getElementById() 是最流行的通过 ID 获取元素的方法。此方法主要用于网页设计中以更改元素的值或获取该元素。

此方法的语法是：

document.getElementById('id')

让我们尝试一个示例，使用此方法通过 ID 获取元素：

<!DOCTYPE html>
<html>
<head>
    <title>
        Select element by ID in javascript
    </title>
</head>
<body style="border: 4px solid blue; min-height: 300px; text-align: center;">
    <h1 style="color:blue;" id="delftstack">
        DELFTSTACK
    </h1>
    <script>
        setTimeout(function() {
            document.getElementById('delftstack').style.color = "green"
            }, 3000);
    </script>
</body>
</html>

上面的代码获取 h1 元素 ID 并在超时时更改其颜色。见输出：

在 jQuery 中通过 ID 获取元素

在 jQuery 中按 ID 获取元素

jQuery 有一个更简单的方法来通过 ID 选择元素。jQuery 有一个 ID 选择器，可以选择具有唯一 ID 的元素。

此方法的语法是：

$("#idname");

让我们试试 jQuery 中的示例，它将通过 ID 获取元素的背景来改变它：

<!DOCTYPE html>
<html>
<head>
    <title>
    Select element by ID in JQuery
    </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body style="border: 4px solid blue; min-height: 300px; text-align: center;">
    <h1 style="color:blue;" id="delftstack">
        DELFTSTACK
    </h1>
    <script>
        setTimeout(function () {
            $('#delftstack').css("background-color", "yellow");;
        }, 3000);
    </script>
</body>
</html>

请参阅此代码的输出：

在 jQuery 中通过 ID 获取元素