jQuery - 基本セレクタ

公開日：2018-12-10 更新日：2019-05-14
[jQuery]

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>

実行結果：画面



Tag

New Article