こんにちは、アンドレです。
今日は、未だ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()

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

サンプル

divを１つずつ見て、「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を用いて書かれていれば、引き継ぐ人がある程度理解しやすい、というのもメリットでしょう。
今後もお世話になります！