jQuery 中級編

2018年9月15日

jQuery中級編では、jQueryを記述するときの型、サイトでもよくみたれるモーダル表示の実装、hoverの設定、アコーディオンの実装を勉強しました。

jQueryはHTMLを操作するため、HTML全体の読み込みが終わってから実行するようにします。

jQueryの型
$(document).ready(function(){
処理;
});

ready()メソッドは、HTMLファイル内に記述されたDOM(HTMLの構成要素)がすべて読み込まれた(操作可能になった)時に引数のfunctionを実行するメソッドです。

readyイベントの省略文
$(function(){
処理;
});

モーダルとは子ウィンドウのことで、子ウィンドウが閉じるまで親ウィンドウは操作できない仕組み。Webサイトでよく見かけるのは、リンクをクリックすると背景が半透過の黒バックになってその上に子ウィンドウが表示されるものですね。

ホバーとは、要素にマウスカーソルをのせたときに起こる動作です。
hoverイベントは2つのfunction()を設定する必要があります。1つ目がマウスがのったとき、2つ目がマウスが離れたときの処理になります。
$(‘セレクター’).hover(
function(){
//マウスがのったときの処理
},
function(){
//マウスが離れたときの処理
}
);

メソッドとは、オブジェクトに関連づけされた関数のことです。
JSの用語については、この辺がわかりやすかったです^^
https://qiita.com/hirotatsu/items/1e56186dd24e55d0bcac

addClassメソッドは、新たにクラスを追加できる関数です。
removeClassメソッドは、addClassメソッドとは逆にクラスを取り除く関数です。

findメソッドは、指定したセレクター内の子要素を取得するメソッドです。
findメソッドの構文
$(‘セレクター1’).find(‘セレクター2′).メソッド(’処理’);
セレクター1の中の子要素で、セレクター2に対して処理を実行します。

アコーディオンは、クリックしたりホバーしたときに隠れているボックスが下にスライドしながら開いたり、閉じたりする機能です。メニューボタンやQ&Aなどで利用されてるのをよく見ますね。

hasClassメソッドは、引数にクラス名を指定し、そのクラス名が対象のHTML要素にあるかを判定するメソッドです。
もっていればtrue、もっていなければfalseを返します。
$(‘対象となるHTML要素’).hasClass(‘判定したいクラス名’);

hasClassメソッドの戻り値がtrue/falseなので、if文などの条件分岐を組み合わせて使うと便利そうです。