NFTを始めるなら日本円で始められるHEXA

【毎日コツコツ】デイトラDay17 jQueryの基本的な使い方

上質な情報発信を続けてお役に立てるようサイト運営費用を賄うために、Googleアドセンス・アフィリエイト等を利用しており本記事はプロモーションを含みます。

デイトラ受講生のたくたくタックです。Webスキルを身に付けたく完全未経験から受講を始めています。

といっても、実はデイトラを開始したのは数年前….慣れないコードと向き合えなくなり挫折を繰り返しています。

こんな僕ですが、Webと関わるこの世の中では必須のスキルだと再認識して再起しました。

毎日コツコツ「必ず完走する」を目標に掲げ学んだ内容を記録に残します

過去に何度も挫折した私の記録はこちら→過去のブログ記事

タック
タック

ブログを書くことに時間をかけたり…計画性の無さを今では反省しています。

Web制作を学ぶ理由

僕がWeb制作を学ぶ理由は大きく分けて3つあります。

1,単純にWeb業界に興味がある

2,Web制作に関わる仕事で多くの人に喜んでもらいたい

3,現在中学受験を目指す息子が中学に上がった時にWeb制作の基本を教えたい

移り変わりの激しいWeb業界、変化をすることが当たり前であるという常識はサラリーマンではあまり常識ではありませんでした。ただ、Web制作を学ぶ中でプログラミングの常識を学ぶ事が出来ています。

もっと知識や実務経験を増やしたいと思っています。

【Web制作】jQueryの基本的な使い方

今回からの学習は「jQuery」です。jQueryはJavascriptのコードをさらに省略して簡単にコードの記入できる方法です。

jQuery(ジェイクエリー)は、JavaScriptのライブラリであり、ウェブ開発で広く使用されています。jQueryは、HTMLのDOM操作、イベント処理、アニメーションなど、さまざまなタスクを簡略化するための利用されます。

jQueryを使用する為の準備

JavaScriptの記述前にもはHTMLに読み込み用の記述をしたかと思いますが、jQueryの記述も似ていて以下のコードをHTML<body>内に記述します。

HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

記述先は<body>タグですが、その中でもJavaScript呼び出しの際に記述した【<script src=”./js/script.js”></script>】の上にセットするようにしてください。そうしないとエラーとなります。

タック
タック

この記述が必要な理由はjQureryのライブラリからコードを読み取る必要があるからです。

jQueryとJavaScriptを出力して違いを見てみよう!

jQueryを使ってHTMLのテキストを変更します。

まずはデイトラDay16で学んだJavaScriptでのテキスト変更を見ていきますね。

js
document.querySelector("#ID名").innerText= "変更後のテキスト";

続いてjQueryでの記述はコチラです。

jQuery
jQuery("#ID名”).Text = "変更後のテキスト";

2つを比べてみると記述量も違いますし、jQueryの方がわかりやすいと思います。

記述内容を少し補足しておくと、

  • jQuery() : jQueryでHTMLを選択する
  • Text(“”) : HTMLのテキストを変更

jQueryを使った繰り返し処理

HTML内の同じクラス名が複数ある場合にすべてのテキストを取得する方法を見ていきますす。

HTML
<div class="main-menu">
  
        <ul>
          <li class="menu">前菜</li>
          <li class="menu">メイン</li>
          <li class="menu">デザート</li>
        </ul>
        </div>
jQuery
// jQueryの繰り返し処理

const elements = jQuery(".menu");
elements.each(function(){
    console.log(jQuery(this).text());
})

HTMLのmenuのすべてのテキストを出力しています。

出力結果


このコードは、jQueryを使ってHTML内のクラスが”menu”である要素を選択し、それぞれの要素に対してテキストコンテンツを取得してコンソールに出力するものです。以下にコードの詳細を説明します。

  1. const elements = jQuery(".menu");: jQueryのセレクタを使用して、HTML内のクラスが”menu”である要素を選択し、それらの要素をelementsという変数に格納しています。
  2. elements.each(function(){...}): each()メソッドを使って、elementsに含まれる要素すべてに対して繰り返し処理を行います。このメソッドは、各要素に対して1回ずつコールバック関数を呼び出します。
  3. console.log(jQuery(this).text());: 現在の要素に対して行われる処理です。thisは、繰り返し処理中に現在処理されている要素を指します。jQuery(this)は、jQueryオブジェクトとして現在の要素を取得し、text()メソッドを使用してその要素のテキストコンテンツを取得しています。最後に、これをコンソールに出力しています。

このコード全体では、クラスが”menu”である要素を選択し、そのテキストコンテンツをコンソールに出力する繰り返し処理が行われます。

【Web制作】jQueryの基本的な使い方 まとめ

今回の学習はjQueryの基本的な使い方についてまとめました。

内容まとめ
  • jQueryの使い方
  • jQueryとJavaScriptの違い
  • jQueryの繰り返し処理

今まで習った事の応用編といったような内容と、新しい言葉もたくさん出てきて難しい反面楽しさもありました。

次の講義もjQueryについてさらに学んでいくことになりますので今回の基礎を思い出しながら学んでいきたいと思います。

コメントを残す

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

CAPTCHA