アナログCPU：5108843109

ゲームと音楽とプログラミング（酒と女とロックンロールのノリで）

('ω') ＜ ｲｻﾞﾕｹｴﾝｼﾞﾆｬｰ

jQuery入門 #1：導入方法と簡単なスクリプト作成

JavaScript(jQuery)

※「jQuery入門する人向け記事」じゃなくて「自分がjQuery入門してみた記事」です

今までPHPとMySQLでバックエンドばっかりごりごり書いてきたツケが回ってきてjsで苦労しているのできちんと勉強したい（言うだけタダ）
とりあえず今のPJがjQueryなので、jQueryの基本的なところをさわってみました。

jQueryの導入

公式ページからダウンロード
  • http://jquery.com/download/
  • 必要なバージョンとかは適宜調べること
    • 今回はとりあえず「Download the compressed, production jQuery 3.3.1」をDL
  • リンクを右クリックでリンク先保存するなり、リンク先をコピペするなり。
使いたいHTMLから読み込む

こんな感じで。

<!doctype html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>jQueryテスト</title>
 <!-- ここでjQueryを読み込んでいる（パスは適宜調整） -->
 <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
jQueryテスト
</body>
</html>

とりあえずこれだけで導入準備が完了、jQueryを使える状態になりました。

参考
年末までにjQueryをマスターしたい人必見！導入マニュアル＋すぐ使える厳選プラグイン | Find Job! Startup

スクリプトを書いてみる その1

こんなHTMLがあるとします。

<div>ここを押すと開閉する</div>
<div>===== ↓ここから↓ =====</div>

<div>
（開閉したいコンテンツ）
</div>

<div>===== ↑ここまで↑ =====</div>

ここで、
「1つめのdivをクリックすると、3つめのdivを表示したり消したりする」
というのを考えることにします。

まず「クリックに反応させたい部分」と「表示したり消したりしたい部分」に名前を付けます。
また、表示したり消したりしたい部分はデフォルトでは消しておくこととします。

<div id="switch">ここを押すと開閉する</div>
<div>===== ↓ここから↓ =====</div>

<div id="contents" style="display:none">
（開閉したいコンテンツ）
</div>

<div>===== ↑ここまで↑ =====</div>

ここからがjQueryの出番。
スクリプトをjQueryの読み込み部分より後ろに設置します。

<script>
 $(function(){
  // 「id=switch」のかたまりをクリックしたときに起こる処理のかたまり
  $("#switch").click(function() {
    // 「id=contents」のスタイル(へのポインタ的なもの)を取得
    obj = document.getElementById("contents").style;
    // スタイルがnoneならblockに、blockならnoneに書き換える
    obj.display = (obj.display == "none") ? "block" : "none";
  });
 });
</script>

参考
JavaScript・jQueryの関数について
クリックすると展開表示する"折りたたみメニュー"をホームページに簡単に作る方法 | ふかふか交易所

スクリプトを書いてみる その2

こういうただのdivブロックがあるとして、

<div>リンクテスト</div>

この部分を丸ごとリンクにしてみます。

まずはdivに名前を付け、遷移先のURLを指定します。

<div id="linktest" url="https://google.co.jp">リンクテスト</div>

そして以下のスクリプトをやはりjQueryの読み込み部分より後ろに設置するだけ。

<script>
 $(function(){
  $("#linktest").click(function() {
   // 「url」要素に設定されたURLへ遷移させる
   location.href = $(this).attr('url');
  });
 });
</script>

参考
[ド素人メモ] divタグをリンクにする方法（jQueryをさらりと使います）

別ファイル化

先ほどの例であれば、↓の内容で別ファイルに保存します。

/* コンテンツ開閉 */
$(function(){
  $("#switch").click(function() {
    obj = document.getElementById("contents").style;
    obj.display = (obj.display == "none") ? "block" : "none";
  });
});

/* divをそのままリンク化 */
$(function(){
  $("#linktest").click(function() {
    location.href = $(this).attr('url');
  });
});

保存したファイルを、jQuery本体と同じようにHTMLから読み込むだけ。

<script src="js/test.js"></script>