JavaScriptのjQueryの初心者向け使い方の解説|Javascript入門講座(14)

JavaScript
この記事は約6分で読めます。

はじめに

 JavaScript入門講座の第十四弾として、JavaScriptのjQueryついて紹介します。

 この記事を読むと次の疑問について知ることができます。

  • jQueryとは?
  • jQueryの設定方法はどうするの?
  • jQueryの基本構文とは?
    • jQueryのセレクター
    • jQueryの主要なメソッド
    • .on()、.css()、.fadeIn() / .fadeOut()を使った例

 JavaScript入門講座(13)では、JavaScriptのDOMについて解説してきました。

 ここでは、JavaScriptのjQueryについて深堀していきます。

jQueryとは?

 jQueryとは、JavaScriptの「J」と「Query」(手続き)から取られた造語であり、2006年にジョン・レシグ(John Resig)により開発されたJavaScriptのライブラリーです。

 jQueryを利用することにより、JavaScriptで書けば数十行になるコードでも、数行で書くことが可能となります。

 また、次のような特徴を持っています。

  • DOMの操作と変更
  • 沢山のプラグインによる拡張
  • Ajax対応
  • 無料で利用可能

jQueryの設定方法

 jQueryを使うための設定方法には2通りの方法があります。

  1. jQueryをダウンロードしてそれを読み込んで使う方法
    jQuery公式サイトに移動し、最新のjQueryをダウンロードします。
    この時点での最新版v.3.6.0をダウロードして、利用してください。
  2. CDN(Content Delivery Network)により読み込んで利用する方法
    CDNにもいくつか読み込むサイトがあります。

    1. Google CDN
    2. Microsoft CDN
    3. CDNJS CDN
    4. jsDelivr CDN

 ここでは、2番目のGoogle CDNを利用して解説していきます。

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

 上述の文のように、HTMLのheadタグ内にSCRIPTタグでjQueryのURLを指定して利用することになります。

jQueryの基本構文

 jQueryはHTMLの要素に簡単にアクセスすることができ、使い方は、下記のようにCSSセレクタに似たセレクターを使って要素を指定します。

 書き方には、いくつかあります。

  1. 基本書式
    jQuery(document).ready(function () {
     jQueryの処理 });
  2. 準書式
    $(document).ready(function(){
     jQueryの処理 });
  3. jQueryの基本書式(省略形)
    $(function(){
     jQueryの処理 });
  4. jQueryの処理
    $("セレクタ").jQueryのメソッド(引数);

 いずれも同じように利用できるために、最も簡便な4.を利用するのが良いと思います。

jQueryのセレクター

 基本的なセレクターを次の載せておきます。

セレクター名書式指定対象
要素セレクター$( "要素" )要素
IDセレクター$( "#ID名" )id属性をもつ要素
CSSの属性セレクタ$(“[id]”)id属性を持つ要素
クラスセレクター$( ".クラス名" )class属性をもつ要素
子孫セレクタ$(“要素A 要素B”)要素Aの中の要素Bを指定
アンドセレクター$( "A, B" )要素Aと要素B
全セレクター$( "*" )全てのセレクタ

jQueryの主要なメソッド

 jQueryでよく使うメソッドを次の載せておきます。

メソッド意味
.css()CSSスタイルの取得や指定のCSSスタイルに変更
.click()クリックイベントを起こし、その時の処理を設定
.on()複数のイベントをまとめて定義やイベントにデータを渡す
.animate()アニメーションを作成
.fadeIn() / .fadeOut()要素をフェードインで表示
.find() / .parent()指定した要素の子孫要素でマッチした要素を選択、指定した要素の親要素全てを選択
.text()指定した要素の文字列を取得及び書き換え
.attr()属性の値を取得及び書き換え
.show() / .hide() / .toggle()非表示状態にあるものを表示、表示状態にあるものを非表示、表示状態のものは非表示に、非表示状態のものは表示
.addClass() / .removeClass() / .toggleClass()指定した要素にclassを付けたり外したりします。

 

.on()、.css()、.fadeIn() / .fadeOut()を使った例

 htmlの「div」を作り、それをcssで背景:赤、境界線:黒のボックスを作り、そこのマウスを載せるとボックスの色が青に変化、その後3秒かけてフェードアウトし、その後さらに3秒かけてフェードインすることをしてみます。

<div></div>
div{
width: 100px;
height: 100px;
background: red;
border: solid 3px black;
}
$(function($){
$('div').on({
mouseenter: function(){
// マウスが要素上に入った時の処理
$(this).css('background','blue');
},
mouseleave: function(){
// マウスが要素上から離れた時の処理
$(this).css('background','red');
$(this).fadeOut(3000);
$(this).fadeIn(3000);
}
});
});

わりに

 何だったでしょうか?

 jQueryとは?、jQueryの設定方法はどうするの?、jQueryの基本構文とは?、jQueryのセレクター、jQueryの主要なメソッド、.on()、.css()、.fadeIn() / .fadeOut()を使った例などについて解説してきました。

 この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。

コメント

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