HOWTO · jQuery
jQuery で ID で要素を取得
このチュートリアルでは、jQuery で ID によって要素を取得する方法を示します。
JavaScript では、メソッド document.getElementById() を使用して、ID で要素を取得できます。jQuery では、$('#contents') を使用して ID で要素を取得できます。
このチュートリアルでは、両方の方法を使用して ID で要素を取得する方法を示します。
JavaScript で ID で要素を取得
document.getElementById() は、ID で要素を取得するために使用される最も一般的なメソッドです。このメソッドは主に、要素の値を変更したり、その要素を取得したりするために Web デザインで使用されます。
このメソッドの構文は次のとおりです。
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 を持つ要素を選択できる 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>
このコードの出力を参照してください。
