はじめに
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で書けば数十行になるコードでも、数行で書くことが可能となります。
また、次のような特徴を持っています。
jQueryの設定方法
jQueryを使うための設定方法には2通りの方法があります。
ここでは、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セレクタに似たセレクターを使って要素を指定します。
書き方には、いくつかあります。
いずれも同じように利用できるために、最も簡便な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()を使った例などについて解説してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント