シュテル(@sterchannel2020)です！
HTML、CSS、JavaScriptに続いてjQueryを勉強しています。
毎日Twitterでアウトプットしながら学んでいるのですが、これが案外役立ってます。
この記事ではこの『初心者目線の備忘メモ』をまとめておきます。
jQueryの使い方
①『jQueryオブジェクト』を作成
②そのjQueryオブジェクトに対して『メソッド』（機能）を呼び出して変化を起こす
※jQueryはJavaScript（JS）なので文末にセミコロン必要
jQueryオブジェクトセレクタ
$(‘セレクタ’)
HTMLのタグ名やclass名をセレクタに入れると『オブジェクト』になる
メソッドとは便利な機能のこと
・メソッドはjQueryオブジェクトでしか利用できない
・jQueryオブジェクトの内容（HTMLの要素）を変更したり動きをつけられる
・「$(‘セレクタ’).メソッド」（ドットを付ける）
メソッドの一例
・hide→消える
・fadeOut→フェードアウト※
・slideUp→下から上に消す※
jQueryのコードを書く場所
JavaScriptファイルの
「$(function(){」と「})」の間に書く
※引数で動作の速度を指定できる（slowと表記するのもあり）
jQueryを書く手順
①jQueryの読み込み
内でURLを読み込む
②jQueryファイルの読み込み
HTMLでの直前にと書きjsファイルを読み込む(表示速度早められる)
③jQueryの型
$(function(){ });
classとidの書き方はCSSのセレクタの時と同じ
・class名の前にはドット（.）
・id名の前にはシャープ（#）
◎idは同一ページに一箇所しか存在しないのでjQueryの処理が高速化される
◎jQueryオブジェクトのセレクタにはできるだけidを用いる
◎CSSでdisplay:noneしている要素をjQueryの.showメソッド使うことで表示させられる(hideとセットで覚える)
jQueryのイベントとは？
・処理を行うタイミングを設定できる
・ページ内でクリックなどの操作が行われた時、あらかじめイベント内に指定しておいた処理を実行
・構文は$(‘セレクタ’).イベント名(function(){ });
CSSメソッドとは？
・CSSを変更できる
・color,width,font-sizeなど
・1つ目の引数にCSSのプロパティ、
2つ目の引数にプロパティの値を入れる
・$(‘セレクタ’).CSS(‘display’,’none’);
は
hideメソッドと同じ
（＝hide/showメソッドはdisplayの値を変更しているだけ）
textメソッドとは？
$(‘セレクタ’).text(‘書き換える文字列’);
htmlメソッドとは？
html
〈p〉こんにちは〈/p〉
jQuery
$(‘p’).html(‘〈span〉こんばんは〈/span〉’);
p要素の中がspan要素としてこんばんはに差し替わる
$(this)の使い方
・イベントの中で、そのイベントが起こった要素を取得する
・$()の中でthisをクォーテーション（”や’）で囲まない
・重要な概念なので覚えておく
複数設置しているclassのうちクリックされたものだけに対してメソッドを発動させることができる
変数とは？
・同じjQueryオブジェクトを複数回使う時は変数を活用
・コードが見やすくなり処理も高速化
・JavaScriptと同じくjQueryでの変数宣言にはvarを使う
・変数には文字列/数値/jQueryオブジェクトなどを格納できる
・jQueryオブジェクトを格納する時は変数の頭に$付けるのが慣例
メソッドチェーンとは？
同じjQueryオブジェクトを複数回使用する場合これを使うことでも処理高速化
$(‘セレクタ’).メソッド().メソッド()…
と書くとそれぞれのメソッドが適用される
findメソッドとは？
・すべての子孫要素(自分よりも下の階層の要素すべて）の中から、指定したセレクタを持つ要素を取得する
例
$(‘#wrapper’).find(‘a’).css(‘color’,’red’);
wrapperというidの中にあるすべてのa要素を取得して色を赤にする
childrenメソッドとは？
指定したセレクタが持つ子要素（一階層だけ下）の中から指定したセレクタに合致した要素を取得する
例
$(‘#wrapper’).children(‘a’).css(‘color’,’red’); 内の孫要素にaがあったとしても子要素のaのみ取得する
hoverイベントとは
・要素にマウスが乗った時や外れた時に指定した処理を行うイベント
・マウスが乗った時にだけ説明文が表示させたりなど
$(‘セレクタ’).hover(マウスをのせた時の処理, マウスをはずした時の処理);
と書く
※clickイベントと違い、引数を2つ書くことに注意
モーダルとは？
・clickイベントなどに基づいて表示/非表示が行われる要素
①CSSでモーダルを非表示に
②ログインボタンにclickイベントを設定
③clickイベンドでモーダル表示
【モーダルとサイトの重なり】
CSSでz-index:整数値;で設定する
◎複数のボタンから同じモーダルを表示させる場合
idでなくclassを使う
◎複数のセレクタに対して同じCSSを適用する場合、セレクタをコンマ（,）で区切り並べる
【モーダルの非表示】
・閉じるボタン設置
・閉じるボタンにclickイベント設定
・fadeOutメソッドでモーダル非表示に
・複数のモーダルを設定している場合はやはりidでなくclassを使う
☁hoverイベント☁
要素をマウスオンで表示/アウトで非表示
①CSSで要素をdisplay:none;
②jsでhoverイベント設置
③CSSで.text-active{display: block}を指定
④マウスオンで要素にtext-activeクラスをつけ、アウトで外れるようにイベント設定(addClass/removeClass)
$(‘.lesson-hover’).hover(
function() {
$(this).find(‘.text-contents’).addClass(‘text-active’);
},
function() {
$(this).find(‘.text-contents’).removeClass(‘text-active’);
}
);
