はじめて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’);を追加します。
|
1 2 |
<?php wp_enqueue_script('jquery'); ?> <?php wp_head(); ?> |
WordPressでのスクリプトの書き方
WordPressのJQueryスクリプトでは、他のパッケージとの競合を防ぐ為、
$マークをjQueryに書き換える必要があります。
通常のjQuery書き方
|
1 2 3 |
$(function(){ //処理 }); |
WordPressでのjQuery書き方
|
1 2 3 |
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);
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<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(function()){・・・・});
⇒ページが読み込まれたら実行されるスクリプト。
・jQuery(window).resize(function(){・・・});
⇒ブラウザのサイズが変更されたら実行されるスクリプト。
・if (window.matchMedia(‘(min-width:500px)’).matches){
//幅が500px以上の処理
} else {
//幅が499px以下の処理
}
⇒CSSで記載する@media (min-width: 500px)と同じ意味です。
・setTimeout(処理, 200);
⇒ブラウザサイズを変更するたびに処理が動くのを避けるため、
サイズ変更から200msec後に処理させるようにしています。
・console.log(“”);
⇒デバッグ用です。コンソール画面にログを出力します。
最後に
以上、はじめてjQueryでスクリプトを作ってみました。
jQueryが使えるようになると他にもいろんなことができそうです。
また勉強したら記事にしてみます。
以上、参考になれば幸いです。
スポンサーリンク
