如何在jQuery中通过ID选择元素
在这篇文章中,我们将看到如何使用jQuery来选择元素的id。要学习这个话题,你应该有关于HTML、CSS、JavaScript和jQuery的知识。
使用JavaScript:这个问题也可以通过一个流行的JavaScript方法来解决,这个方法叫做d ocument.getElementById() ,用于通过id属性来选择元素。getElementById()方法返回具有给定ID的元素,该ID被传递给该函数。这个函数在网页设计中被广泛使用,以改变任何特定元素的值或获得一个特定元素。如果传递给函数的ID没有退出,那么它将返回null。
语法:
document.getElementById('idname')
示例:
<!DOCTYPE html>
<html>
<head>
<title>
How do you select element by ID in javascript?
</title>
</head>
<body style="border: 2px solid green;
min-height: 240px; text-align: center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="element" style="margin-top:20px;"></p>
<script>
setTimeout(function() {
document.getElementById('element').innerText
= 'Hello Geeks !! Welcome to GeeksforGeeks';
}, 2000);
</script>
</body>
</html>
输出:
使用jQuery:上述代码也是通过使用jQuery方法完成的,它非常简单,用较少的代码完成。#id选择器为要选择的元素指定一个id。它不应该以数字开头,而且id属性在一个文档中必须是唯一的,这意味着它只能被使用一次。
syntax:
$("#idname");
示例:
<!DOCTYPE html>
<html>
<head>
<title>
How do you select element
by ID in javascript?
</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
</head>
<body style="border: 2px solid green;
min-height: 240px; text-align: center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="element" style="margin-top:20px;"></p>
<script>
setTimeout(function () {
$('#element').text(
'Hello Geeks !! Welcome to GeeksforGeeks');
}, 2000);
</script>
</body>
</html>
输出: