おはようございます、本日からJQueryの利用方法を紹介していきたいと思います。

JQueryとは

jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる。ロゴの下に表記されているキャッチコピーは「write less, do more」（「少ない記述で、もっと多くのことをする」の意）。

JQuery Wiki

とのことです。 簡単に言うとJavaScriptをさらに使いやすくしてくれるライブラリーです。

オフィシャルサイトはこちらです。 JQuery

使い方

インストール方法はいくつかありますが、私はいつもCDNにリンクして使っています。

最新のCDNはこちらで参照ください。 https://code.jquery.com/

例

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

Selector

jQueryでエレメントを指定するときは

Idで指定するとき

$("#{element_id}")

Classで指定するとき

$(".{class_name}")

のように使います。

ドキュメントがロードされたときに呼ぶファンクション

$(function() {
    console.log( "ready!" );
});

function(){} の中に処理したい内容を記載してください。

Load

イベントの後に部分的にページを読み込みたい場合は下記のように記載ください。

$("#ELEMENTID").load(PARTIALVIEWURL);

事前にelementを指定しておけば好きなところにコンテンツをロードすることができます。

AJax

Ajaxも簡単に使うことができます。

Ajaxとは

Ajax（エイジャックス、アジャックス）は、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法である。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTML (DHTML) で動的にページの一部を書き換えるというアプローチを取る。

AjaxはAsynchronous JavaScript And XML の略で、2005年2月18日に米国のインフォメーションアーキテクトであるJesse James Garrettにより名付けられた。

Ajax Wiki

とのことです。 簡単に言うとJavaScriptをさらに使いやすくしてくれるライブラリーです。)

とのことです。 簡単に言うとクライアント始動で非同期通信を行う手法です。

JQueryを使ってAjaxを利用する場合は下記のようになります。

<script>
  $('#elementid').click(function(){
    $.ajax({
      url:"api-url",
      type:"POST",
      dataType:"json",
       data: {a:1, b:2}
      })
      .done((data,status,jqXHR) => {
        console.log(data);
        $("#elementid").text(data["rootobj"]["childobj"]);
      })
      .fail((data) => {
        console.log(data.responseText);
      })
      .always((data) => {
         console.log(data);
      });
  });
</script>