jQueryで個人的によく使うメソッド8選。


andre_160829_img01
こんにちは、アンドレです。
今日は、未だweb制作においてJavaScriptを用いる際のデファクトスタンダードといえるライブラリ、jQueryで、個人的によく使うメソッドとサンプルをご紹介します。

.on()

イベント発生時に実行する関数を割り当てます。
(サンプルはこの後の.toggleClass()とまとめます。)

.toggleClass()

クラスの切り替えを行います。

サンプル

.on()を使って「クリックされたdivにclass=”is-pl100″(padding-left: 100pxを指定)を付けたり外したりする」ようにしています。
サンプルではCSSのtransitionと組み合わせて、アニメーションさせています。

See the Pen .on()と.toggleClass()のサンプル by Takamasa Okada (@NP-okada) on CodePen.

.hasClass()

要素に特定のクラスがあるかをtrue/falseで返します。
(サンプルはこの後の.each()とまとめます。)

.css()

CSSプロパティを変化させます。
(サンプルはこの後の.each()とまとめます。)

.each()

各要素に対して1つずつ処理を行います。

サンプル

divを1つずつ見て、「aru」というクラスがあれば背景色を緑、文字色を白にしています。

See the Pen .hasClass()と.each()のサンプル by Takamasa Okada (@NP-okada) on CodePen.

.slideToggle()

要素をアコーディオンさせます。

サンプル

まず、アコーディオンで切り替える要素(dd)を.hide()で非表示にします。
クリックされたdtのクラス「is-opened」を切り替え、その次の要素(このマークアップではdd)のアコーディオン展開を切り替えています。
.slideToggle()前の.stop()はアニメーションのキュー(予約)を動作前にクリアするものです(入れないとクリックした回数分必ず動作してしまいます)。

See the Pen .slideToggle()のサンプル by Takamasa Okada (@NP-okada) on CodePen.

.data()

data属性を操作します。
(サンプルはこの後の.animate()とまとめます。)

.animate()

CSSプロパティを徐々に変化させます。

サンプル

クリックされたdivのdata-pl属性を取得し、変数plに格納。
そのdivのpadding-leftがdata-pl属性に設定された値になっていれば初期値(4px)、いなければdata-pl属性の値までpadding-leftを徐々に変化させています。
.animate()の第2引数には各種パラメータを渡すことができ、ここでは「duration: 400」を渡して400ミリ秒かけて変化するようにしています。

See the Pen .data()と.animate()のサンプル by Takamasa Okada (@NP-okada) on CodePen.

まとめ

jQueryに関しては様々な意見がありますが、シンプルな書き方で、操作に集中できるのはやはり強みだと思います。
またJavaScriptはかなり自由度の高い言語で、人によって色々な書き方ができるのですが、例えば管理が自分の手を離れることになった場合も、jQueryを用いて書かれていれば、引き継ぐ人がある程度理解しやすい、というのもメリットでしょう。
今後もお世話になります!