デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

はじめて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 で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

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

CAPTCHA


ページトップボタン