Do not live to eat!

jQueryをProgateで勉強したことのまとめ

前回のJavaScriptに引き続き、今回はjQueryの勉強をProgateでしました。
jQueryは今回が初めてなので、イチからのスタートです。

jQuery 初級編

これは2h25mが終了目安になっているコースです。
いつもどおりブログに内容をまとめながらで2hくらいかかったかな。
jQueryでどんなことができるのかとか、基本的なところは抑えられたと思います。
実際にHTMLやCSSを変更する内容になっているので、結構わかりやすかった。

jQuery 中級編

2h15mのコースだったけど、なんだか仕事もバタバタしてしまって、まとまってやれなかったので、結局何時間かかったかわからなくなりました。
クリックすると展開されて文章が表示されたりするアコーディオンなど、わりと実践でも使えそうなネタがたくさん含まれていて、とても役に立ちそうな印象でした。
唯一、中級編だけ道場コースがありますが、さくっとやれる(つまずかなければ30分くらい)なので、ぜひやりましょう。

jQuery 上級編

なんと4h30mのコース。
今までで最長のコースですが、まとまった時間が取れず、ダラダラと3日間くらいかけてしまったので実際どれくらいかかったのかわからないのですが、そんなに長い印象はありません。
また、かなり実践で使えそうなメソッドが目白押しだったので、やったほうがいいです、絶対。

jQueryの基本

使うための下準備

jQueryを使用するためには、HTMLのheadにライブラリを読み込む以下の行を追加する。

また、自分で作ったjsファイルは、bodyの一番下(</body>の直前)で読み込むようにすれば、画面の読み込みが遅くなるのを防ぐことができるらしです。

また、作成するjs内では、htmlの読み込みがすべて終わってから処理するようにするために、冒頭で以下のように記述する。

基本的な記述方法とコメント

基本的には以下のように記述する。
コメントアウトはJavaScriptと同じで//を付ける。

セレクタは、CSSと同じように指定する。
例えばidを対象にするのであれば”#”を、
classを対象にする場合は”.”を指定する。

変数

変数はこんな感じ。
jQueryオブジェクトを変数にすると、複数使用する箇所がある場合は処理自体も高速になる。
$は慣習的に付けるが、なくても動く。

jQueryオブジェクト

配列に似た構造になっていて、該当するセレクタとその値が含まれているらしく、入っている順番にインデックス番号も振られている。
eqメソッドを使用すると、該当するインデックス番号の要素を取得できる。

逆にindexメソッドを使用すると、インデックス番号を取得できる。

イベント

ボタンをクリックしたりした時などの何らかの動作を行った時にJavaScriptを動作させたいときは、イベントを使用する。
イベントはclickイベントやhoverイベントなどがある。

メソッドチェーン

同じjQueryオブジェクトに対して複数の処理を加えたい場合に使う。
処理も高速になる。

関数

こんな感じで関数は作れる。

メソッド

要素を消すメソッド、表示するメソッド

hideメソッドは対象の要素を消す。(アニメーション無し)

fadeOutメソッドは全体をうっすら消していくアニメーション付き。
引数にミリ秒単位で消えていく時間を指定できる。

同様に、slideUpメソッドでは下から消えていくアニメーションが付けられる。

一方で、要素を表示させるのはshowメソッド。
fadeOutの逆はfadeInメソッド、slideUpの反対はslideDownメソッド。

cssメソッド

名前のとおり、CSSを変更できるメソッド。

HTMLを変更するメソッド

textメソッドを使うと、HTMLに記述されているテキストを変更できる。

htmlメソッドはhtmlとして書き換えるので、タグも使える。

また、css、text、htmlメソッドは変更だけではなく、入力された値を取ってくることもできる。

HTML属性を付与するattrメソッドもある。

小要素を探して、処理する

findメソッドを使うと、セレクタの配下の要素から、指定したセレクタに該当する要素を取得できる。

childrenメソッドの場合はセレクタの小要素(1階層下だけ)から、指定したセレクタに該当する要素を取得できる。

hoverイベント

マウスが乗ったときと外れたときに処理する。
functionは乗った時と外れたときの両方を記述する必要がある。

HTMLのクラスを変更する

特定の要素にクラスを追加するにはaddClassメソッドを使用する。

↑のメソッドは、hoverしたらテキストを表示するために使っていて、addClassでクラスを付与して、display: blockを反映させることでこれを実現している。
この場合、もともとdisplay: noneにしているスタイルの定義があるはずなので、それより後に付与したクラスの定義(display: block)を記述しておかないと、表示されるようにならない。

逆に要素を抜くにはremoveClassメソッドを使う。

アコーディオン

クリックすると表示したり、閉じて非表示にしたりするアレのこと。
基本はCSSで非表示にしておき、clickイベントでクラスを付与してクラスを付与したり、削除したりする。

その後クラスの付与状況を基にif文で制御するが、クラスの有無を判定するメソッドとして、hasClassメソッドを使用する。

prevメソッドとnextメソッド

prevメソッドとnextメソッドは同じ階層の要素(兄弟要素と呼ぶらしい)の後ろか前を取得するメソッド。

valメソッド

inputタグやtextareaタグに設定されている値を取得する。

大抵の場合、inputタグは送信ボタンと併用されている。
jQueryでは送信ボタンがクリックされたりEnterが押下されたときのイベントをsubmitとしている。

また、セレクトボックスはselectタグとoptionタグで作られている。
セレクトボックスで選択されている値をも、同様にvalメソッドで取得できる。

animateメソッド

アイコンにホバーすると画像を大きくしたりするあれ。
{}内には変更対象のプロパティとその値を複数、連想配列で定義できる。
}の次は、アニメーションの時間をミリ秒単位で指定する。
実際にはhoverイベントの中でanimateメソッドを使う形になるので、わざわざjQueryでやる必要があるのかは不明。

scrollTopメソッド

一番上に戻る的なボタンを作ったりする時に使う。
一番上に戻るだけならこのまま定形で使えばOK。

さらに、先程のanimateメソッドとも組み合わせられるらしい。

offsetメソッド

要素の一番上からの距離を取得する。

Let's share this article!