今の現場ではjQueryを使用しています。
jQueryで要素を指定して
イベントを発火したり
値を取得する実装がよくあります。
class、id、nameのそれぞれの
要素の指定の方法を解説します。
classで要素を指定する
classを使って要素を指定するには、jQueryの$(".class-name")セレクタを使用します。
classは複数の要素に適用できるため、一度に複数の要素を操作するのに便利です。
例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>class指定の例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="example">これはclass指定された要素です。</div>
<div class="example">もう一つのclass指定された要素です。</div>
<script>
$(document).ready(function() {
$(".example").css("color", "red");
});
</script>
</body>
</html>
上記の例では、class「example」を持つすべての要素のテキストの色を赤に変更します。
idで要素を指定する
idを使って要素を指定するには、jQueryの$("#id-name")セレクタを使用します。
idは文書内で一意であるため、特定の1つの要素を操作するのに適しています。
例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>id指定の例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="unique-element">これはid指定された要素です。</div>
<script>
$(document).ready(function() {
$("#unique-element").css("font-size", "20px");
});
</script>
</body>
</html>
上記の例では、id「unique-element」を持つ要素のフォントサイズを20pxに変更します。
name属性で要素を指定する
name属性を使って要素を指定するには、jQueryの$("[name='name-value']")セレクタを使用します。
name属性は主にフォーム要素に使われます。
例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>name属性指定の例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="text" name="username" value="ユーザー名">
<input type="password" name="password" value="パスワード">
<script>
$(document).ready(function() {
$("[name='username']").val("新しいユーザー名");
});
</script>
</body>
</html>
上記の例では、name属性が「username」である入力フィールドの値を「新しいユーザー名」に変更します。
まとめ
jQueryを使用すると、class、id、name属性でHTML要素を簡単に指定して操作できます。
これにより、ページの動作やスタイルを動的に変更することが可能です。
各セレクタの使い方を理解して、適切な場面で使用することで、
より効果的なコーディングが可能になります。
コメント