jQueryとは
jQuery
jQueryはJavaScriptのライブラリの1つです。
ユーザーのクリックに反応して表示されるフォームや、アニメーションなど、HTMLとCSSだけでは実現できなかった様々な動きを表現することができます。
jQueryの書き方
メソッドjQueryオブジェクト
jQueryの操作は非常に直感的かつシンプルです。jQueryの使い方は、①jQueryオブジェクトを作成し、②そのjQueryオブジェクトに対してメソッド（機能）を呼び出す、という2つが基本になります。jQueryはJavaScript（JS）なので、文末にセミコロンが必要です。またコメントもJS同様に//を用います。
jQueryオブジェクトは、図のように$(‘セレクタ’)とするだけで作成できます。セレクタにはHTMLのタグ名やclass名などを指定し、それに合致したHTMLの要素がjQueryオブジェクトになります。セレクタはCSSセレクタ（CSSで使用するセレクタ）と同じなので、CSSの知識さえあれば直感的に操作できます。
hideメソッドを
使ってみよう
メソッドhide
メソッドとは、便利な機能のことです。jQueryのメソッドは前述のjQueryオブジェクトでしか利用できません。メソッドを使うと、jQueryオブジェクトの内容（HTMLの要素）を変更したり、アニメーションをつけたりすることができます。メソッドは$(‘セレクタ’).メソッドというように、ドットに続けて呼び出します。要素を隠すhideというメソッドを使ってみましょう。
$(function() {
// 以下で、hideメソッドを用いて<h1>要素を隠してください
$(‘h1’).hide();
});
アニメーション付きで
要素を隠す（1）
fadeOut
hideメソッドに似たものとしてfadeOutメソッドがあります。fadeOutメソッドを用いると、要素を隠す際に、アニメーションを付けることができます。
fadeOutメソッドは、後ろの()内に引数として、アニメーションの速度を指定できます。ミリ秒での指定や、文字列での指定が可能です。
slideUpメソッドを用いても、アニメーション付きで要素を隠すことができます。fadeOutと異なるアニメーションを実現できます。
また、slideUpメソッドも後ろの()内に引数として、アニメーションの速度を指定できます。
$(function() {
// 以下で、fadeOutメソッドを用いて<img>要素を隠してください
$(‘img’).fadeOut();
// 以下で、slideUpメソッドを用いて<p>要素を隠してください
$(‘p’).slideUp();
});
classとid
idclass
HTMLのタグに名前を付ける方法として、HTMLコースでclassを学習しました。これと同様にidというものがあります。idはclassと同じように使いますが、classとの違いとして、１つのページ内で同じid名を複数回使うことはできません。idはclassと同様、下図のように指定します。
classとidをセレクタにする
classidセレクタ
classとidをセレクタにするには下図のようにします。CSSのセレクタと同様にclass名の前にはドット（.）、id名の前にはシャープ（#）を用います。idは同一ページに一箇所しか存在しないので、jQueryの処理が高速化されます。jQueryオブジェクトのセレクタにはできるだけidを用いるようにしましょう。
HTMLでidを指定する方法
<div id=”id名”></div>
<!– <h1>タグに”title”というidをつけてください –>
<h1 id=”title”>jQueryの学習項目</h1>
<div class=”lessons”>
<!– <div>タグに”lesson-item”というclassをつけてください –>
<div class=”lesson-item”>要素を隠す</div>
<!– <div>タグに”lesson-item”というclassをつけてください –>
<div class=”lesson-item”>要素を表示する</div>
$(function() {
// slideUpメソッドを用いて、「#title」の要素を隠してください
$(‘#title’).slideUp();
// fadeOutメソッドを用いて、「.lesson-item」の要素を隠してください
$(‘.lesson-item’).fadeOut();
});
displayプロパティ
display
CSSにはdisplayプロパティというものがあります。「display: none;」とすると要素を隠すことができます（displayプロパティに関して、詳しくはHTML&CSS中級編を参照してください）。
img {
display: none;
}
隠れた要素を表示しよう
hideshow
隠れた要素を表示するメソッドとして、showメソッドがあります。表示したい要素に対し、$(‘セレクタ’).show();と指定することで隠れた要素を表示できます。
hideメソッドと合わせてセットで覚えるとよいでしょう。
$(‘img’).show();
アニメーション付きで要素を表示
slideDownfadeIn
fadeOutの反対としてfadeInメソッド、slideUpメソッドの反対としてslideDownメソッドがあります。どちらもアニメーション付きで隠れた要素を表示することができます。
$(‘img’).fadeIn();
// showメソッドを用いて、「#title」要素を表示してください
$(‘#title’).show();
// fadeInメソッドを用いて、「#image」要素を表示してください
$(‘#image’).fadeIn();
イベントとは
functionイベント
イベントを用いると、ある処理を行うタイミングを設定できます。WEBページ内で、ユーザーによってクリックなどの操作が行われた時、あらかじめイベント内に指定した処理を実行します。
イベントの構文は、$(‘セレクタ’).イベント名(function(){ });のように書きます。
clickイベント
click
clickイベントを用いると、「セレクタがクリックされた時に処理をする」ことができます。
例えば、ボタンをクリックしたときに関連する文章を表示する、といったイベントを設定できます。下図の例では、ボタンをクリックすると文章を隠すというイベントを作成しています。
$(‘#hide-text’).click(function(){
$(‘#text’).hide();
});
<!– 以下の<div>タグに”hide-text”というidをつけてください –>
<div class=”btn” id=”hide-text”>説明を隠す</div>
<!– 以下の<h1>タグに”text”というidをつけてください –>
<h1 id=”text”>Hello, World!</h1>
$(function() {
// 「#hide-text」要素に対するclickイベントを作成してください
$(‘#hide-text’).click(function() {
$(‘#text’).slideUp();
});
});
CSSメソッドとは
css
CSSメソッドは、CSSを変更できるメソッドです。1つ目の引数にCSSのプロパティを、2つ目の引数にプロパティの値をいれます。
cssメソッドで色を変えよう
css
cssメソッドの具体例を見てみましょう。cssメソッドで要素の文字の色を変更したいときは、$(‘セレクタ’).css(‘color’, ‘red’);のように記述します。widthやfont-sizeなど他のプロパティもすべてcssメソッドで変更することができます。
cssメソッドで要素を隠す、表示する
cssshowhide
cssメソッドでdisplayプロパティの値を変更することもできます。$(‘セレクタ’).css(‘display’, ‘none’);はhideメソッドと全く同じです。このようにhideメソッドやshowメソッドは、実はdisplayプロパティの値を変更しているだけだということを覚えておきましょう。
$(‘セレクタ’).css(‘color’, ‘red’);
HTMLを変更する(1)
– textメソッド
text
jQueryではCSSだけでなく、textメソッドを用いることでHTMLそのものを変更することも出来ます。textメソッドは、$(‘セレクタ’).text(‘書き換える文字列’);のように記述します。
htmlメソッドは、要素の中身のHTMLを書き換えることが出来ます。textメソッドと違い、htmlメソッドの引数は、単なる文字列ではなくHTMLだということです。例えば下図の例をtextメソッドで行うと、<span>タグもそのまま文字列としてブラウザに表示されますが、htmlメソッドなら<span>タグがHTMLタグと認識され、ブラウザには「こんばんは」とだけ表示されます。
$(function() {
// 「#change-text」要素に対するclickイベントを作成してください
$(‘#change-text’).click(function() {
$(‘#text’).text(‘ようこそ、Progateへ’);
});
// 「#change-html」要素に対するclickイベントを作成してください
$(‘#change-html’).click(function() {
$(‘#text’).html(‘<a href=”https://prog-8.com/”>ようこそ、Progateへ</a>’);
});
});
thisの構文
this
$(this)はイベントの中で、そのイベントが起こった要素を取得することができます。$()の中でthisをクォーテーション（”や’）で囲まないことに注意してください。$(this)は非常に重要な概念なので覚えておきましょう。
$(function() {
// 「.list-item」要素に対するclickイベントを作成してください
$(‘.list-item’).click(function() {
$(this).css(‘color’, ‘red’);
});
});
変数を使おう
変数
同じjQueryオブジェクトを複数回使用する時は変数にしましょう。コードが見やすくなる上、jQueryの処理が高速化されます。 JavaScriptと同じく、jQueryで変数宣言にはvarを用います。変数には文字列や数値、jQueryオブジェクトなどを格納することができますが、jQueryオブジェクトを格納する時は、わかりやすいように変数の頭に$を付けるのが慣例となっています。
メソッドチェーンを使おう
メソッドチェーン
同じjQueryオブジェクトを複数回使用する時は、メソッドチェーンを使うことでも処理速度を高速化できます。 メソッドチェーンとは1つのjQueryオブジェクトに連続してメソッドが利用できる構文です。$(‘セレクタ’).メソッド().メソッド()…のように書くことで、それぞれのメソッドが適用されます。
$(‘#text’).css(‘color’, ‘blue’);
$(‘#text’).html(‘<h3>jQueryをマスターしましょう！</h3>’);
$(‘#text’).fadeOut(1000);
$(function() {
$(‘.btn’).click(function() {
// $(‘#title’)を変数$titleに代入してください
var $title = $(‘#title’);
// 「#title」に対する3つのメソッドを、変数を使って書き換えてください
$title.css(‘color’, ‘red’);
$title.html(‘こんばんは、にんじゃわんこさん’);
$title.fadeOut(1000);
// 「#text」に対する3つのメソッドを、メソッドチェーンを使って書き換えてください
$(‘#text’).css(‘color’, ‘blue’).html(‘<h3>jQueryをマスターしましょう！</h3>’).fadeOut(1000);
});
});
子要素を取得しよう(1)
-findメソッド
find
findメソッドは、すべての子孫要素(自分よりも下の階層の要素すべて）の中から、指定したセレクタを持つ要素を取得したいときに用います。下図の例では、<div id=”wrapper”>から</div>の中にあるすべての<a>要素を取得することができます。
childrenメソッドは、指定したセレクタが持つ子要素（一階層だけ下）の中から指定したセレクタに合致した要素を取得したいときに用います。下の例では<div id=”wrapper”>の子要素は<a>タグと<p>タグが1つずつなので、<a>タグが1つ取得されます。
$(function() {
$(‘#find-method’).click(function() {
// findメソッドで、「#wrapper」内にあるすべての「a」要素を取得し、
// cssメソッドで文字の色をredに指定してください
$(‘#wrapper’).find(‘a’).css(‘color’, ‘red’);
});
$(‘#children-method’).click(function() {
// childrenメソッドで、「#wrapper」の一階層下にある「a」要素を取得し、
// fadeOutメソッドで隠してください
$(‘#wrapper’).children(‘a’).fadeOut();
});
});
hoverイベントを作ろう
hover
hoverイベントとは、要素にマウスが乗った時、外れた時に指定した処理を行うイベントです。下図のように「jQueryとは？」にマウスが乗った時にだけ、説明文が表示されるようにしてみましょう。
<div id=”language-wrapper”>
<h1 class=”language-title”>jQueryとは?</h1>
<p class=”language-text”>
JavaScriptのライブラリの1つです。ユーザーのクリックに反応して表示されるフォームや、アニメーションなど、HTMLとCSSだけでは実現できなかった様々な動きを表現することができます。
</p>
</div>
.language-text {
display: none;
}
$(function() {
// 「#language-wrapper」にhoverしたときのhoverイベントを作成してください
$(‘#language-wrapper’).hover(
function() {
$(‘.language-text’).fadeIn();
},
function() {
$(‘.language-text’).fadeOut();
}
);
});