【初心者】JQueryってなに?

スポンサーリンク
JavaScript

jQueryってなーに?

純粋なJavaScriptよりも短い命令文でHtmlを操作できる便利なライブラリです。

はじめは、純粋なJavaScriptと書き方などが違って、違和感を感じますが、慣れてしまうと、これなしでは生きていけません(利用者の個人的な感想です。)。

Htmlを操作してみよう

JavaScriptはとても便利なんですが、複雑な処理を書こうとすると冗長なコードになってしまうのですが、jQueryをつかうと、すっきりかけてしまったります。

いくつか例をご紹介します。

基本的に下記のJavaScriptについてご説明している記事との対比で書いていきますので、ぜひご参考ください。

準備

以下のHtmlを用意します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript練習</title>
    <style>
      #target{
        height: 200px;
        width: 600px;
        background-color: #36C9C6;
        color: #ffffff;
        font-size: 3em;
      }
    </style>
  </head>
  <body>
    <div id="target">
      変更前
    </div>
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"></script>
    <script>
      // ここにJavaScriptを書く
    </script>
  </body>
</html>

bodyタグの中には、jQueryを使うために、CDNを利用するための記述をしています。

CDNとは、本来であれば、jQueryを利用するためにjsファイルを用意しなければなりませんが、CDNをりようすれば、インターネット上からそれを取得することができ、ファイル分のサーバ容量を節約することができます。

なにより、1文書くだけでjQueryを使えるようになるので楽です。

CDNは下記のサイトから取得できます。

jQuery CDN

文字を変更してみる

idが「 target 」のdiv要素内の文字を変更するには純粋なJavaScirptでは以下のように書いていました。

document.getElementById("target").textContent = "何が花金だよ!こちとらファッキンじゃい!";

jQueryだと同じ意味の処理を以下のように書きます。

      $(function(){
        // Divの中身を書き換える
        $("#target").text("何が花金だよ!こちとらファッキンじゃい!");
      });

ここにでてくる

$(function(){
});

は、jQueryを使うための準備です。この中に処理を書いていくので、実質、テキストを変更しているのは以下の命令です。

$("#target").text("何が花金だよ!こちとらファッキンじゃい!");

直観的でわかりやすいですね。(あくまで個人の感想です。)

ボタンを押したら文字を変える処理をかいてみよう

「準備」の項目で紹介したソースコードにボタンを追加してみます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript練習</title>
    <style>
      #target{
        height: 200px;
        width: 600px;
        background-color: #36C9C6;
        color: #ffffff;
        font-size: 3em;
      }
      #text_chenge_button{
        background: #ED6A5A;/*ボタン色*/
        border-radius: 3px;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <div id="target" class="target_div">
      変更前
    </div>
    <div>
      <button type="button" id="text_chenge_button">
        チェンジ!
      </button>
    </div>
  </body>
  <!-- jQueryを使うための準備 -->
  <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  <script>
    // ここに処理を書く
  </script>
</html>

「ボタンを押したら、 idが「 target 」のdiv要素内の文字を変更する 」は以下のように書きます。


    $(function(){
   // ボタンを押されたら
      $("#text_chenge_button").on("click",function(){
        // div内の文字を変更
        $("#target").text("何が花金だよ!こちとらファッキンじゃい!");
      });
    });

無名関数をすごくよく使いますが、慣れてしまえばどうってことはありません。

こんな感じで、jQueryを使うと、便利にJavaScriptを書くことができます。

大好き。jQuery。

コメント

タイトルとURLをコピーしました