[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips

jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。
Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。

jQueryのスニペットのまとめ

jQuery Tips Everyone Should Know -GitHub
イラスト: Girls Design Materials

コードはMITライセンスで、個人でも商用でも無料で利用できます。

ページの上に戻るボタン

クリックするとページの最上部にスムーズにスクロールして戻るボタンをjQueryの「animate」と「scrollTop」メソッドを使ってシンプルに実装します。

JavaScript

スピードを調整したい時は、scrollTopの値(800)を変更します。

HTML

画像のプリロード

ページ上に最初は表示されない画像(ホバーして見えるとか)が多い時は、画像をプリロードさせておくとよいです。

JavaScript

画像がロードされているかチェック

スクリプトを実行する時に、画像が完全にロードされているか調べる必要があるかもしれません。

JavaScript

imgタグは、idやclassに変更して利用することもできます。

リンク切れの画像を自動修復

リンク切れの画像を一つずつ修正するのは大変な作業です。とり急ぎの対応として下記のコードを使うことで、代替画像を表示させることができます。

JavaScript

リンク切れがない場合には何も影響がなく、通常の画像が表示されます。

ホバーのトグル

クリック可能な要素をホバーした際に、要素のビジュアルを変えることはよい方法です。下記のコードはホバーした際にその要素にclass(.hover)を加え、ホバーがはずれた際にclassを取り去ります。

JavaScript

さらに簡単な方法が必要なら、toggleClassを使うとよいでしょう。

入力欄を使用できなくする

フォームの入力欄や送信ボタンを一時的に使用できなくさせる必要があるかもしれません。例えば「説明を読んだ」をチェックしないと送信できないなど。そんな時は下記のコードで実現できます。

JavaScript

フォームの入力欄や送信ボタンを使用できるようにするには、下記のコードを使用します。

aタグのクリックイベントだけを利用する

aタグは通常クリックするとリンクしますが、リンク機能を無効化し、クリックイベントだけを利用するこもできます。

JavaScript

クリックイベントだけに利用するa要素には、「.no-link」を加えます。

アニメーションを簡単に設定する

フェードやスライドなど、アニメーションが簡単に利用できるのもjQueryの便利なとこです。下記のコードはユーザーがその要素をクリックすると、フェードやスライドのアニメーションを実行します。

JavaScript

シンプルなアコーディオン

アコーディオンも数行のコードで簡単に実装できます。

JavaScript

異なる高さのdiv要素を揃える

div要素内のコンテンツの量が異なっていても、高さを揃えます。

JavaScript

このコードは一番高い要素に高さを揃えます。

外部リンクを新しいタブ・ウインドウで開く

外部サイトへのリンクは新しいタブ・ウインドウで開き、自サイトへのリンクは同一タブ・ウインドウで開きます。

JavaScript

テキストが無い要素は非表示にする

jQueryの「contains()セレクタ」を使い、要素の内容に含まれているテキストを見つけることができます。もしテキストが無いのであれば、その要素を非表示にします。

JavaScript

sponsors

top of page

©2018 coliss