##はじめに
1.gemの追加
gem "jquery-rails"
bundle installを行いましょう
2.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の追加削除
・アニメーションで任意の動きをさせたりすることができる。