ソフトエンジニアのブログ、制作ノウハウ等を配信

はじめてjQueryを使ってみた

はじめて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’);を追加します。

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

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

通常のjQuery書き方

WordPressでのjQuery書き方

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

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

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

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

その他の処理説明:
・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が使えるようになると他にもいろんなことができそうです。
また勉強したら記事にしてみます。

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

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン