簡単jQuery少しのコードで使えるテクニック7選＋応用

By

公開日: 更新日:

簡単jQuery少しのコードで使えるテクニック7選＋応用

JavaScriptライブラリの1つjQueryをコピペで簡単に使えるコード集です。初心者にもすぐに扱うことができますが、その前にJQueryはどのようなことができるのか掴むきっかけになればと思います。

少しコードがかけるようになったらインスピレーションを得るきっかけにあなたの自由な使い方をしてみてください。

jQueryの使い方

まず、jQueryを使えるようにライブラリを呼び込みます。WordPressで作られたサイト、そうでないWebサイトでは、呼込み方が異なるのでWordPressサイトと分けて解説します。

ライブラリを読み込む（WordPressでない場合）

jQuery公式サイトからjQueryファイルをダウンロードし、HTMLファイルの<head>に下記のように記述して、jQueryファイルを呼込みます。

<script type="text/javascript" src="js/jquery.min.js"></script>

WordPressに呼び込むには？

WordPressの場合は、jQueryライブラリが標準で用意されています。ただし、初期設定では読み込まれていないのでwp_enqueue_script関数を使いライブラリを呼込みます。functions.phpに下記のように記述してください。

if( !is_admin() ) {
  function my_theme_script_function() {
    wp_enqueue_script('jquery');
  }
}
add_action('wp_enqueue_scripts','my_theme_script_function');

WordPressに用意されているものより新しいバージョンを使いたい場合は、jQuery公式サイトからライブラリをダウンロードして、下記のように記述してください。

if( !is_admin() ) {
  function my_theme_script_function() {
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery.min.js');
  }
}
add_action('wp_enqueue_scripts','my_theme_script_function');

get_template_directory_uri() . '/js/jquery.min.js'の部分(4行目)にダウンロードしたファイルのパスを記述します。

get_template_directory_uri関数は現在のテンプレートのパス名を取得するので、同じ階層にファイルがある場合は、'/jquery.min.js'でOKです。パスの取得に最後にスラッシュが付かないので文字列最初にスラッシュを入れるのを忘れないようにしましょう。関数の後ろのドットは結合を意味する文字列連結演算子です。

Javascriptコードを書こう

これでjQueryを使える準備が整いましたので、いよいよJavaScriptのコードを書いていきます。基本的な書き方はこんな感じです。

<script type="text/javascript">
$(function(){
  // ここにコードを書いていきます。
});
</script>

WordPressで動かす

WordPressの場合は上記の書き方ではうまく動作しないので、このような記述をしてください。

<script type="text/javascript">
jQuery(document).ready(function($) {
  // ここにコードを書いていきます。
}); </script>

WordPressでjQueryを動かすのにこのような書き方が必要か、もっと深く知りたいのであれば、下記の記事が参考になります。

リンクを別タブで開く

準備が整ったところでコードとデモです。

http//で始まるリンク全てに自動的にtarget="_blank"を追加します。クリックすると別タブで開かれるようになります。さらに少しコードを加えて外部リンクのみ別タブで開くように実装してみます。

外部リンクのみ別タブで開く

$( function() {
    $('a[href^=http]').each(function() {
        if(this.href.indexOf(location.hostname) == -1) {
            $(this).attr({ target: '_blank' });
        } else {
            $(this).removeAttr('target');
        }
    });
});

this.href.indexOf(location.hostname) == -1の部分はURLのホストネームを取得して、aのhref属性にホストネームがあれば最初の位置を返すコードです。なかった場合-1を返すので、上記のコードでは、ホスト名の含まれていないリンクにのみtarget="_blank"が追加されます。それ以外はtarget属性は削除されます。

Topへ戻るリンク

右下のTopへ戻るリンクをクリックするとスルスルッとアニメーションしながらTopに戻ります。さらに一定量スクロールしたらリンクが出現するように実装します。

スクロールするとTopへ戻るリンクが現れる

スクロール値が200に達したところでfadeInして、リンクが現れます。スクロ―ルして現れる距離を変更するには200の数値を変更してください。他にfadeIn(300)、fadeOut(300)、animate({scrollTop:0}, 500 )の300と500の数値を変更するとアニメーションのスピードを変えることができます。

ページ内スクロール移動リンク

Topへ戻るリンクができたら、ページ内を移動するリンクも書いてみます。

ページ内リンクではhref属性が#で始まるのでセレクタ部分にa[href^=#]を指定します。myHref変数には、クリックされた要素のhref属性を取得していますので、#から始まる文字列が入ります。これを使えばスクロールで移動したい箇所のid属性がわかりますね、.offset().topを使ってそこまでの距離を変数に入れます。

あとは、Topへ戻るリンクと同じ用にアニメーションで移動するコードを書いて、先ほどは0だったところを移動したい位置に変えるため、先ほど変数に入れたmyHeadingしてあげれば完成です。

空のP要素を削除

WordPressの投稿に使うテキストエディタは自動で<p>をつけてくれます。とても便利な機能ですが、それが返って不都合に感じる時もありませんか。<p>自動挿入を削除する方法は、functions.phpにコードを書いて消せますが、今回は空のp要素だけ削除をjQueryでやってみました。

しかし、上記のコードは空のp要素は削除してくれるんですが、子要素に空の<span>などがある場合も消し去ってしまいます。それでは、CSSを使って画像置換したい場合にうまく実現できず、トラブルが起きるので、テキストが空で子要素を持たない場合に削除するようにしたいと思います。

空のP要素を削除（子要素がある場合を除く）

p要素の子要素をchildren()ですべてを選択し、0と等しい時を追加することで実現できました。これで画像置換したい時に困らなくなりますね。

画像にマウスホバーで透過させる

デモでは、画像を指定していますが、セレクタを変えれば<div>などにも透過アニメーションを施せます。

divの高さを揃える

同じクラスをもつ<div>要素が同じ高さに揃います。

解説

それぞれの要素に対して処理を実行するeach()メソッドを使ってクラスを指定した要素を配列に入れていきます。functionの小文字のiはインデックス番号の略です。

クラスのついたdiv要素が５つあるので配列に５つ入ることになりますが、インデックス番号は0から始まることに注意してください。よって[0],[1],[2],[3],[4]の順で配列に入っていくことになります。

5行目でそれぞれの高さをheight()メソッドで取得して変数hに代入しています。次のif文if(i == 0 || h &gt; max) max = h;でiが0と等しい時か、hがmaxより大きい時maxにhを代入していくと、処理はそれぞれ5回行われてクラスの一番高いheightがmaxに残りますね。

そして最後のif文で５回の処理が行われた時、インデックス番号が4の時つまりカウントした数引く1の時にまたeach()メソッドを使って今度はそれぞれに一番高いheightを代入したmaxを入れていきます。すると綺麗に要素の高さが揃います。

背景をアニメーションさせる

JavaScriptでのfunctionを一定の間隔で繰り返し処理を行う時の指定に使う「setInterval」を使って、background-Positioの値を変え、背景を動かしています。

最後に

比較的短いコードでWebサイトでよく使いそうなことを取り上げてみましたが、jQueryでできることのほんの一部しか触れてません。これがキッカケで少し距離が縮まったらいいなと思います。また便利なプラグインも数多く存在しますので、いろいろ試してみてください。

わからないことがあったらGoogleにキーワードを投げかけたりして、調べたりすると思いますが、正しい情報は玄人の執筆した本から学ぶことも大切だと思います。検索では、間違った情報も多く出回っているので混乱を招く恐れもありますからね。

あとがき

初めての投稿でしたが、いかがだったでしょうか？私は正直、間違いがあるのでないか気になって恥ずかしいです。読みづらい部分、日本語がおかしい部分がいたるところにあるかもしれません。他にも間違い等、見つけましたら優しくご指摘いただければ嬉しく思います。

私は、独学でWebデザインを学んだので、HTMLからWordPress作成まで覚えるのに3ヶ月かかってしまいました。それも誰かにアドバイス求めず自分で解決しようとし、遠回りばかりして、そのくせほとんどアウトプットをしてこなかった自分のやり方がいけなかったなと思います。ですので、ここをご覧のあなたには同じような遠回りをして欲しくないなと思っています。

これからはこのブログを機にアウトプットを増やし、コミュニケーションをとり日々成長していきたいと思います。これからもよろしくお願いします。最後にこの記事を書くにあたって多くのWebサイト、書籍を参考にさせていただきました。心から感謝いたします。

関連記事