[Rails] jQueryを利用する

はじめに

1.gemの追加

Gemfile

gem "jquery-rails"

bundle installを行いましょう

2.application.jsファイルに追記する

app/assets/javascripts/application.js

//= require jquery  // ←ここを追加
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .

これで、jQueryを使う準備が整いました。

【イベントの記述】

セレクタ名にはclass,idの=の後が入ることが多い
.はclass名の前に　#はid名の前につく

$('.セレクタ名').イベント名(function(){
        　イベント発生時に行われる処理
});

イベントの一覧

click	指定した要素で左クリックしたときに処理がおこなわれる。
dblclick	指定した要素でダブルクリックときに処理がおこなわれる。
contextmenu	指定した要素で右クリックしたときに処理がおこなわれる。
mousedown	指定した要素で左もしくは右クリックしたときに処理がおこなわれる。
mouseup	指定した要素で左もしくは右ボタンが押してから離れたときに処理がおこなわれる。
mouseout	指定した要素からマウスが離れるときに処理がおこなわれる。
mouseover	指定した要素にマウスがオーバーしたときに処理がおこなわれる。
mousemove	指定した要素にマウスカーソルが動いたときに処理がおこなわれる。
scroll	画面がスクロールしたときに処理がおこなわれる。
resize	ウィンドウの幅が変更したときに処理がおこなわれる。
blur	要素がフォーカスを失った時に発生
focus	要素がフォーカスを得た時に発生
load	ドキュメント内の全リソースの読み込みが完了したときに発生
change	要素がフォーカスを得て値の修正が完了した時に発生
select	type属性値が”text”のinput要素、textarea要素のテキストが選択された時に発生
submit	フォームが送信された時に発生
keydown	キーが押し下げられた時に発生
keypress	キーが押された時に発生
keyup	キーが上がった時に発生
error	javascriptのエラーが発生した時に発生

jQueryで要素にクラスを追加する

要素にclassを追加する.addClass()
$(".セレクタ名").addClass("追加するclass名");

要素からclassを削除する.removeClass()
$(".セレクタ名").removeClass("追加するclass名");

クラスを追加・削除する.toggleClass()
toggleClass()は、指定した要素に指定したclassがない場合は追加、すでにある場合は削除するメソッドです。
$(".セレクタ名").on("click", function(){
$(".セレクタ名").toggleClass("追加、削除するclass名");
});

animate()とは？

特定のHTML要素のCSSプロパティを連続して変化させることでアニメーションを実現してくれます。

対象要素.animate( CSSプロパティ, duration, easing, 関数 )

「duration」は、ミリ秒で指定するようになっており、アニメーションが完了するまでの時間を設定できます。
「easing」は、アニメーションの挙動を指定可能で、「linear」と「swing」の2種類を文字列で設定します。

例

$('h1').animate({
    'fontSize': '200px'
}, 3000);

実行すると、現在の文字サイズから指定した200pxまでアニメーションしながら変化していき、3秒かけてサイズが変化します。

用語

var: 変数を宣言して、任意で指定した値を初期化します。

var 変数名 = 値;

attr(): 　要素の値を取得することができます。
IDセレクタ：　HTML要素のid属性で指定し、取得したいid属性の値に#を付けたセレクタのことです。
クラスセレクタ：　HTML要素のclass属性で指定し、取得したいclass属性の値に.を付けたセレクタのことです。
要素セレクタ：　h1やpのようなHTML要素を対象とし、取得したい要素名をそのままセレクタとして利用します。
属性セレクタ：　HTMLのタグの属性値を指定したい場合、$("[ 属性 = '値' ]")で属性セレクタを取得できます。

まとめ

・jQueryを使うと任意のhtmlを取得、追加、削除
classの追加削除
・アニメーションで任意の動きをさせたりすることができる。