jQuery - 基本セレクタ
公開日：2018-12-10
更新日：2019-05-14
更新日：2019-05-14
1. 概要
基本セレクタで要素を指定します。
$(タグ名)
$(.クラス名)
$(#id名)
2.1 タグ名で指定
<span> の文字を赤くします。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<div id="fruits">
<div id="apple">apple</div>
<span id="orange">orange</span><br />
<span id="banana">banana</span><br />
</div>
<!-- Script -->
<script>
$(function(){
//タグ指定
$("span").css("color", "red");
});
</script>
</body></html>
実行結果：画面
2.2 クラス名で指定
class が error の要素の文字を赤くします。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<div id="fruits">
<div id="apple">apple</div>
<span id="orange" class="error">orange</span><br />
<span id="banana">banana</span><br />
</div>
<!-- Script -->
<script>
$(function(){
//クラス指定
$(".error").css("color", "red");
});
</script>
</body></html>
実行結果：画面
2.3 idで指定
id が banana の要素の文字を赤くします。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- 画面 -->
<div id="fruits">
<div id="apple">apple</div>
<div id="orange">orange</span><br />
<div id="banana">banana</span><br />
</div>
<!-- Script -->
<script>
$(function(){
//id指定
$("#banana").css("color", "red");
});
</script>
</body></html>
実行結果：画面
