はじめてjQueryを使ってみた

今回、jQueryを使って要素の高さを算出してCSSに設定する処理を作ってみました。
はじめてjQueryを使ったのでかなり悪戦苦闘しました。
備忘録として残しておきます。
※jQuery初心者の為、もっと効率的な処理があるかもしれませんが、ご了承ください。。

【更新情報】2017年6月8日 追記
WordPressにjQueryを読み込み方法は、以下ブログ記事に纏めました。
WordPressにjQueryを読み込む方法

jQueryとは

以下、ウィキペディアからの引用です。

jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる。

要は、JavaScriptを便利に使うためのライブラリということだと思います。

WordPressでのjQuery

スクリプトファイルの読み込み

WordPressには、すでにjQueryがパッケージされているようです。
WordPressにパッケージされているjQueryスクリプトを読み込むには、header.phpのの上に
wp_enqueue_script(‘jquery’);を追加します。

<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>

WordPressでのスクリプトの書き方

WordPressのJQueryスクリプトでは、他のパッケージとの競合を防ぐ為、
$マークをjQueryに書き換える必要があります。

通常のjQuery書き方

$(function(){
 //処理
});

WordPressでのjQuery書き方

jQuery(function(){
 //処理
});

要素の高さを算出するjQueryを作る

前回記事で、アイキャッチ画像を拡大させる際、親要素にoverflow:hiddenを設定し、画像のはみ出しを隠すように対応していましたが、
親要素の縦幅が画像の縦幅とは異なるため、縦方向だけは、画像がはみ出していました。
そこで、jQueryを使い、アイキャッチ画像の親要素divの縦幅を動的に設定するようにしてみました。

画像の縦幅と横幅の比率は300px(横）／200px（縦）なので、div.eyecatchの横幅のサイズを取得し、縦幅を計算しました。
※以下の処理
img_height = (jQuery(‘.eyecatch’).width() * 200)/300;

そして、計算結果の縦幅をCSSへ設定します。
※以下の処理
jQuery(‘.eyecatch’).css(‘height’, img_height);

<script type="text/javascript">
var img_height =0;

jQuery(function(){
  if (window.matchMedia('(min-width:500px)').matches) {
    img_height = (jQuery('.eyecatch').width() * 200)/300;
    jQuery('.eyecatch').css('height', img_height);
    console.log(img_height);
  } else {
    jQuery('.eyecatch').css('height', 'auto');
    console.log("SP");
  }
});

var timer = false;
jQuery(window).resize(function() {
  if(timer != false) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    console.log('resized');
    if (window.matchMedia('(min-width:500px)').matches) {
      img_height = (jQuery('.eyecatch').width() * 200)/300;
      jQuery('.eyecatch').css('height', img_height);
      console.log(img_height);
    } else {
      jQuery('.eyecatch').css('height', 'auto');
      console.log("SP");
    }
  }, 200);
});

</script>

最後に

以上、はじめてjQueryでスクリプトを作ってみました。
jQueryが使えるようになると他にもいろんなことができそうです。
また勉強したら記事にしてみます。

以上、参考になれば幸いです。