jQueryとは

2018/11/3 2022/5/3 初心者

『jQuery』(読みは「ジェークエリー」)を記述してみましょう。jQueryを使用するとウェブサイトに何らかのアクションを起こすことができるようになります。jQueryとはJavaScript(ジャバスクリプト)を簡単に書けるお助けツール的なポジションのものだと思っています。

では早速チャレンジしてみましょう。

今回は要素をクリックすると色が変わるwebページを作成してみます。

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Webのタブの名前だよ！</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <main>
      <p class="test">クリックしてね</p>
    </main>
    <script src="jquery-2.0.0.min.js"></script>
    <script src="common.js"></script>
  </body>
</html>

ポイント

・<script src=”jquery-2.0.0.min.js”></script>は公式サイトからダウンロードしたjqueryファイル
・<script src=”common.js”></script>は自分で記述したjqueryファイル
・</body>タグの直前で <script src=”jquery-2.0.0.min.js”></script>と<script src=”common.js”></script>の順番で記述
※先にダウンロードしたjqueryの本体ファイルを読み込ませる

css

.test {
  background-color: red;
  color: white;
  padding: 20px; }
 
.test.active {
  background-color: blue;
  color: white;
  padding: 20px; }

ポイント

・ .testはクリック前のcss

・ .test.activeはクリック後のcss

jQuery

$(function() {
  $('.test').click(function () {
    $(this).toggleClass('active');
  });
});

ポイント

$(function() {■});

■を実行する

$(‘.test’).click(function (){■});　

.testをクリックしたら■を実行する

$(this).toggleClass(‘active’);

.toggleClassというタスクはクラスを付けたり外したりする

⇅

.testにactiveという名前を追加する(※ここでは this = .test を指す)

クリックしてね

クリックするたびにcssが切り替わって、背景の色がかわります！

これで、webさいとの表現の幅が広まりますね～

本日はここまで

jQueryは私自身も全く使えないので、まだまだ勉強が必要です…