スキルアップを始める!

【初めてのjQuery入門】jQuery(ジェイクエリ)とは?導入の手順について

jQuery(ジェイクエリ)
jQuery(ジェイクエリ)
この記事は約2分で読めます。

※記事中に広告情報を含みます。

\ワードプレスのスキルアップはこちら!/ WordPress入門読本

jQueryとは?

jQueryとは、John Resigさんが開発したJavascriptのライブラリです。WEBページに様々なアクションやアニメーションを設定することができて、「プラグイン」と呼ばれる拡張ライブラリも多数あります。

ジョン・レシグさんとは

ジョン・レシグは、アメリカ合衆国在住のプログラマーである。jQueryの開発者として知られている。

https://ja.wikipedia.org/wiki/%E3%82%B8%E3%83%A7%E3%83%B3%E3%83%BB%E3%83%AC%E3%82%B7%E3%82%B0

jQueryの導入方法

jQueryはCDN(コンテンツデリバリネットワーク)と呼ばれる方法で提供されています。CDNとは、ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことです。

下記のようなコードを埋め込むことで使うことができます。

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

または、ファイルをダウンロードすることで、オフライン環境で動作を試すことも可能です。

jQuery
jQuery: The Write Less, Do More, JavaScript Library

function()

jQueryは、すべて

#(function()~

で始まります。

次に、{ }ではさみます。

セレクタ・メソッド

$(セレクタ).メソッド

「何かのセレクタを、メソッドで実行する」という書き方で動作します。例えば、$(‘#main-list’)とすれば、main-listというidを持つなにかに対して実行をさせることができます。

主なセレクタ

element指定の要素$(‘div’)など
.class指定のclass名
#id指定のid名
parent > child親要素の子要素

例:appendTo

例えば

$document.body.css('color', '#0000ff');

とすると、ページの文字(テキスト)カラーを青色に変えることができます。

まとめ

ひとまず、jQueryの使い方の始め方でした!

メンティー
メンティー

使ってみます!

メンター
メンター

はい!ぜひ頑張って覚えていきましょう!

続きについては次回ご紹介したいと思います!

ご参考ください😃

URLをコピーしました!