はじめに

この記事では、jQueryを初めて扱う人向けに作成したものです。
もし、ご興味ある方は是非読んでみてください。

jsファイルの注意点

jQueryは、js（javascript）ファイルに記載するものなのですが、ファイルを読み込む際は注意が必要です。例として、htmlファイルにjsファイル（sample.js）を読み込む場合は

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="sample.js"></script>
  </head>
  <body>
    <p>jsファイルに読み込ませる文章</p>
  </body>
</html>

というように記載する（jQueryを使用するため、scriptタグがもう一つあります）のですが、htmlファイルを読み込んだ際に「jsファイルに読み込ませる文章」という文を変更させる場合に、もしsample.jsが

$("p").text("文章が変化するかも")

となっていると、

文章は変化しません！

・・なぜかといいますと、javascriptはhtmlファイルを読み込んでhtmlの要素（pタグなど）を識別できるようになってからでないと要素を認識してくれないので、htmlファイルが読み込み終えた後に起動する場合は、以下のように書きます。

// この中に実行したい内容を入れると、実行される
$(function(){
  $("p").text("文章が変化するかも")
})

もし、気になる方は２つのケースでhtmlファイルを開くとどうなるかみてみてください！

jQueryの構文

さて、ここまでで実行した内容の方に目がいった方がおられると思われますので、そちらの解説をいたします。まず、jQueryの基本的な構文といたしましては、次の通りです。

$("セレクタ（要素名、クラス名など）")・・・（この後には、セレクタに実行するメソッドが付いてきます）

これは実はと言うとCSSと似ていて、最初にセレクタで指定した後にどんな処理を行うかを書いていくスタイルをとっております。そのため、先ほどのjsファイルの中身は

  $("p").text("文章が変化するかも")
　→　pタグを指定して、その中の文章（text）を「文章が変化するかも」に変える

というようになります。（セレクタに$を付けることで要素が取得され、jQueryのメソッドが使えるようになります）

セレクタに関する注意点

後は慣れていくと自然と使えるようになると思うのですが、ここで気をつけて欲しいのがセレクタがかぶることです。どういうことかといいますと、例えば

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="sample.js"></script>
  </head>
  <body>
    <p>赤色にしたい！</p>
    <p>青色にしたい！</p>
  </body>
</html>

というhtmlファイルがあり、sample.jsを次のように書きます。

$(function(){
 $("p").css("color","red")
 $("p").css("color","blue")
})

このように書いてしまうと、

全ての文章が青色になります。

理由といたしましては、pをセレクタにすると全てのpタグが指定された状態になり、その全てに色を変化させるように指示してしまっているからです。そのため、別々に指定したい場合には、クラス名かid名などを使用するようにしましょう。

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="sample.js"></script>
  </head>
  <body>
    <p id="red">赤色にしたい！</p>
    <p id="blue">青色にしたい！</p>
  </body>
</html>

$(function(){
 $("#red").css("color","red")
 $("#blue").css("color","blue")
})

【補足】 Railsにおけるクラス名の指定方法

Railsにおいて、最初にクラス名を「コントローラー名_アクション名」としておくと便利です。
例えば、mainsコントローラーのindexアクションであれば、

class = "mains_index"

というように、ファイルの一番上のタグに指定しておけば、他のファイル内のクラス名とかぶらなくていいかなと思います。

jQueryの考え方