静的なWebページをHTMLである程度コーディングができるようになったら次のステップとして動きのある動的なページを作りたくなると思いますが、そんな時にjQueryを使うといいでしょう。
初心者の方向けにjQueryの使い方について紹介したいと思います。
目次
目次
- jQueryとは？
- jQueryの読み込み
- 処理の書き方
- セレクタ要素の取得
- 機能的セレクタ
- クリックやスクロールなどのイベント
- 属性の取得と書き換え
- CSSの取得・追加・変更
- ウィンドウや要素の大きさを取得
- アニメーション
- プラグイン
jQueryとは？
Webページで動きのあるページを作る方法に、Webブラウザで利用できるプログラミング言語の一つであるJavascriptを使う方法がありますが、それを使うにはある程度の知識と習得する時間や検証などが必要となり手間暇がかかります。
そこで登場するのがjQuery。
jQueryはJavascriptで書かれたライブラリで、簡単な記述で様々な動きのあるページを作成することができます。
例えば、ざっとですがこんなことができます。
- 動きのあるアコーディオンメニュー
- 画像を自動で再生するスライドショー
- ブラウザウィンドウの要素やサイズを取得
- カレンダー(デートピッカー)
- CSSの制御
- イベントの制御
- 色の変更
- フェードイン・フェードアウト
- etc…
jQueryの読み込み
さくっと使い方を見ていきたいと思います。
まずはライブラリファイルを読み込む方法です。
読み込む方法は二通りあり、Googleがホストしているライブラリから読み込む方法と本家からファイルをダウンロードして読み込む方法があります。
Googleライブラリから読み込む
まずはこちらにアクセス。
https://developers.google.com/speed/libraries/#jquery
下記のような感じでバージョン1から3までのライブラリを読み込む記述がありますので、それをコピーして使います。
|
1 2 |
[sourcecode lang="javascript"] <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>[/sourcecode] |
ダウンロードして使う
本家のサイトにアクセスします。
https://jquery.com/download/
この記事を執筆している時点ではバージョンが「3.1.1」となっていますが、下記のようなテキストリンクがありますので、それをクリックしてダウンロード＆保存します。
「Download the compressed, production jQuery 3.1.1」
ダウンロード保存したファイルを下記のように記述してライブラリを読み込みます。
実際の処理は「sample.js」に書いていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
[sourcecode lang="html"] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery</title> </head> <body> <a href="#" class="btn_trigger demo01_trigger">ボタン</a> <!-- bodyを閉じる直前でjQueryを読み込む --> <script src="js/jquery-3.1.1.min.js"></script> <!-- jQueryを読み込んだ後に実行するスクリプトを読み込む --> <script src="js/sample.js"></script> </body> </html> [/sourcecode] |
処理の書き方
sample.jsにはこんな感じで処理を書いていきますが、このように簡単な処理を書くだけで利用できます。
|
1 2 3 4 5 6 7 8 |
[sourcecode lang="javascript"] $(function() { // ここに処理を書く $('.demo01_trigger').on('click', function(){ alert('アラート'); }); }); [/sourcecode] |
ここまでの詳細、及び他のサンプルはこちらで確認できます。
【jQuery入門 1】超基本！ jQuery のダウンロードと書き方
セレクタ要素の取得
CSSのセレクタの書き方とほぼ同じで、jQueryを記述するときに$()の中に記述する要素のことです。
classセレクタ
|
1 2 3 |
[sourcecode lang="javascript"] $('.demo').css(... [/sourcecode] |
idセレクタ
|
1 2 3 |
[sourcecode lang="javascript"] $('#demo').css(... [/sourcecode] |
下記は、セレクタの指定を使って色を替えるサンプルです。
html
|
1 2 3 4 5 6 7 |
[sourcecode lang="html"] <ul id="warabi"> <li class="maccha">抹茶わらびもち</li> <li class="kuromitsu">黒蜜わらびもち</li> <li class="kinako">きなこわらびもち</li> </ul> [/sourcecode] |
sample.js
|
1 2 3 4 5 6 |
[sourcecode lang="javascript"] $(function() { // 「抹茶味」の色を変える $('.maccha').css('color', '#f2639c'); }); [/sourcecode] |
セレクタの基本詳細＆デモサンプルはこちら。
【jQuery入門 2】セレクタって何？要素を取得しよう。基本編
機能的セレクタ
jQueryには様々な機能が使えるセレクタがあります。
- .find()
指定された条件に当てはまる要素を取得 - .eq()
指定された条件に当てはまるn番目の要素を取得 - .not()
指定された条件と一致しない要素を取得 - etc…
「demo04_inner p」の4番目の要素を取得して、class「demo04_target」を追加するというサンプルです。
html
|
1 2 3 4 5 6 7 8 9 |
[sourcecode lang="html"] <div class="demo04_inner"> <p>01</p> <p>02</p> <p>03</p> <p>04</p> <p>05</p> <p>06</p> </div>[/sourcecode] |
sample.js
|
1 2 3 4 5 |
[sourcecode lang="javascript"] $(function() { $('.demo04_inner p').eq(4).toggleClass('demo04_target'); }); [/sourcecode] |
実行するとこんな結果になります。
html
|
1 2 3 4 5 6 7 8 9 |
[sourcecode lang="html"] <div class="demo04_inner"> <p>01</p> <p>02</p> <p>03</p> <p class="demo04_target">04</p> <p>05</p> <p>06</p> </div>[/sourcecode] |
より詳細なセレクタ機能はこちらを参照してください。
【jQuery入門 3】要素を取得しよう。セレクタって何？機能的セレクタ編
jQuery UIには様々なサンプルがありますので、どんなのがあるのか覗いてみるといいかもしれません。
クリックやスクロールなどのイベント
クリックされた時や画面サイズが変更されたとき、スクロールがされた時など特定のイベントが発生した時に処理を実行することができます。
- .click()
クリックされたとき - .resize()
画面サイズが変更されたとき - .scroll()
スクロールされたとき - etc…
class「demo01_trigger」をクリックした時にアラート画面が表示されるサンプルです。
html
|
1 2 |
[sourcecode lang="html"] <a href="#" class="btn_trigger demo01_trigger">テキスト</a>[/sourcecode] |
sample.js
|
1 2 3 4 5 6 7 |
[sourcecode lang="javascript"] $(function() { $('.demo01_trigger').on('click', function(){ alert('アラート画面の登場'); }); }); [/sourcecode] |
イベントの詳細とデモサンプルはこちら。
【jQuery入門 4】イベントって何？on、offを使ってみよう
属性の取得と書き換え
続いては、要素の属性の取得と書き換えです。
属性とは、widthやheight、href、titleなどで指定してる値や設定などで、要素の高さや横幅などを取得して変更したりすることができます。
- .width()
要素の幅を取得 - .height()
要素の高さを取得 - .toggleClass()
classを切り替える
ボタンをクリックしたら、高さが変わるというサンプルです。
html
|
1 2 3 4 5 6 7 8 |
[sourcecode lang="html"] <div class="btn_wrap"> <button class="btn_trigger demo02_trigger1">40px</button> <button class="btn_trigger demo02_trigger2">80px</button> </div> <div class="demo02_target demo02_target1">40px</div> <div class="demo02_target demo02_target2">80px</div> [/sourcecode] |
sample.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
[sourcecode lang="javascript"] $(function() { $('.demo02_trigger1').on('click', function(){ $('.demo02_target1').height(40); }); $('.demo02_trigger2').on('click', function(){ $('.demo02_target2').height(80); }); $('.demo02_trigger3').on('click', function(){ $('.demo02_target3').height(120); }); }); [/sourcecode] |
要素の属性の取得と書き換えとサンプルデモはこちら。
【jQuery入門 5】要素の属性の取得と書き換え
CSSの取得・追加・変更
続いては、CSSの取得・追加・変更を見ていきたいと思います。
CSSのプロパティを変更することで色を変更したり、要素の表示・非表示ができます。イベントと組み合わせることでユーザー操作による動きのあるコンテンツを作成できます。
リンクをクリックしたら、指定した要素を非表示にサンプルです。
html
|
1 2 3 4 5 6 7 8 9 10 |
[sourcecode lang="html"] <div class="btn"> <a href="#">クリック</a> </div> <ul class="momotaro"> <li class="saru">サル</li> <li class="inu">イヌ</li> <li class="kiji">キジ</li> </ul> [/sourcecode] |
sample.js
|
1 2 3 4 5 6 7 |
[sourcecode lang="javascript"] $(function() { $('.btn a').on('click', function(){ $('.momotaro .kiji').hide(); }); }); [/sourcecode] |
CSSの取得・追加・変更の詳細、サンプルはこちら。
【jQuery入門 7】CSSの取得・追加・変更をしよう
ウィンドウや要素の大きさを取得
ブラウザウィンドウの大きさを取得したい時に使用します。
リンクをクリックすると、横幅と縦幅の値をアラート画面で表示するサンプルです。
html
|
1 2 3 |
[sourcecode lang="html"]<div class="btn"> <a href="#">クリック</a> </div>[/sourcecode] |
sample.js
|
1 2 3 4 5 6 7 8 9 |
[sourcecode lang="javascript"]$(function() { $('.btn a').on('click', function(event){ // ウィンドウの幅 var winW = $(window).width(); // ウィンドウの高さ var winH = $(window).height(); alert('幅 = ' + winW + '\n高さ = ' + winH); }); });[/sourcecode] |
【jQuery入門8】ウィンドウや要素の大きさを取得してみよう。
アニメーション
jQueryの得意なことの一つにアニメーションがありますが、それも簡単な記述をするだけでフェードイン・フェードアウトやスライドを実現することができます。
- .fadeIn()
非表示な要素をフェードイン表示 - .fadeOut()
表示している要素をフェードアウト表示 - .slideDown()
要素を開いた状態に - etc…
リンクをクリックしたら、要素がフェードアウトするサンプルです。
html
|
1 2 3 4 |
[sourcecode lang="html"]<div class="btn"> <a href="#">クリック</a> </div> <div class="box">消えるよー</div>[/sourcecode] |
sample.js
|
1 2 3 4 5 |
[sourcecode lang="javascript"]$(function() { $('.btn a').on('click', function(event){ $('.box').fadeOut(1500); }); });[/sourcecode] |
詳細はこちら。
【jQuery入門 9】Animateなどを使って様々なアニメーションをつけよう
プラグイン
単純な操作だったら、jQuery単体とちょっとした記述で処理させることができますが、やはりちょっとした凝ったことをしようと思うとそれなりに記述する必要があります。
しかし、jQueryには様々なプラグインが開発、公開されています。それを利用するだけで凝った動きのあるサイトを作成できます。
こちらの記事「【jQuery入門 10】プラグインを使ってみよう。」では、サンプルでslickというプラグインの導入から使い方について紹介していますので、チェックしてみてください。
やり方が分かったら、こちらのオススメのプラグインもチェックしてみてください。
ちょちょいと簡単実装で凄い効果！おすすめの jQuery プラグイン 9選
