【jQuery】基本のキ
もくじ
jQueryを使う準備
ダウンロード
jQueryの公式サイトからダウンロードします。
このリンクを右クリックして「リンク先を別名で保存」します。リンク先にアクセスしてもファイルの中身を閲覧できるだけです。
ファイル保存ダイアログが開くのでローカルディレクトリに保存します。jquery-3.5.1.min.jsというファイルがダウンロードされました。「jquery-」の後の数字がバージョン番号となっていますので、数字は異なるかもしれません。
jQueryのダウンロードは完了したので、JSファイル同様に読み込みます。bootstrapなどのライブラリより前に設置すると、ライブラリのjQuery部分はライブラリで上書きされます。
<script src="js/jquery-3.5.1.min.js" ></script>
ダウンロードして利用する場合はこれで完了です。
CDN
jQueryの公式サイトにアクセスします。
uncompressedとminifiedなどありますが、どちらも同じjQueryファイルになります。
ソースコードの中身を見たりして修正することがある場合（上級者）などはuncompressedでもいいかもしれませんが、minifiedがコメントや改行などを排除しており容量が少なく軽量で高速です。
旧バージョンも利用できますが大きな理由がない場合最新を読み込みましょう。
リンクをクリックすると、CDNのスクリプトタグが出現します。
コピーして必要なファイルにペーストしましょう。
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
CDNを利用する場合はこれで完了です。
基本構文
本来の構文
jQuery(document).ready(function () { jQueryの処理 });
これは基本形であり、しばしば短縮系が使われます。
短縮系
jQuery(document).ready(function () { jQueryの処理 }); $(document).ready(function(){ jQueryの処理 }); jQuery(function(){ jQueryの処理 }); $(function(){ jQueryの処理 });
特に多く使われるのが、最後の$(function()です。
打つ文字数を最小限に抑えられるので普及しているんでしょうね。
$(function(){ 処理 });で囲む意味
これは、HTMLが全てロード（レンダリング）された後に実行してね、という意味になります。
jQuery(document).ready(function () { jQueryの処理 });
短縮せず正式に記述すると上記のようになるというのを前述しました。
jQuery(JavaScript)はHTMLが完全に読み込まれないまま何か処理を実行しようとすると大抵正しく動作しません。なのでこのreadyを使います。
たとえば、以下のように#testに対して jQueryの処理を実行したいのに、HTMLが読み込まれていないと指定の要素が見つけられませんってエラーになりますよね。それを防ぐため、HTMLが読み込まれたあとに読み込んでね！ってことをサーバーにお願いしている記述方法になります。
$(function(){ $('#test').css('color', '#ff0000'); });
jQueryの処理の記述方法
$(function(){ jQueryの処理 });
このjQueryの処理とは以下のようになります。
$("セレクタ").メソッド("引数"); $("セレクタ").メソッド("引数,引数,...");
メソッドの種類によって、引数の数は異なります。
全体
$(function(){ $("セレクタ").メソッド("引数"); });
セレクタ
セレクタとは、どの要素に処理を行うかを指定します。
記述方法はCSSと似ています。（というかほぼ同じ）
$('#id') // idの指定方法 $('.class') // classの指定方法 $('li') // 要素での指定 $('.class p') // 子要素での指定 $('.class > p') // このような書き方も可能
メソッド
jQueryにはさまざまなメソッドが用意されています。
メソッドを使うと、jQueryの指定のセレクタのスタイルを変更したり、アニメーションをつけたりすることができます。メソッドは$('セレクタ').メソッドというように、ドットに続けて呼び出します。
変数を使う
同じjQueryオブジェクトを複数回使用する時は変数を使えます。
コードが見やすくなる上、jQueryの処理が高速化されます。つまりメンテナンス性もパフォーマンスも良くなります。
<p>div</p>
- 変数未定義
$('p').css('color','red');
$('p').text('jQuery');
$('p').fadeOut();
- 変数使用
var $p = $('p');
$p.css('color','red');
$p.text('jQuery');
$p.fadeOut();
すっきりしましたね！
JavaScriptの変数と同じなので、特に難しくありません。活用していきましょう。
メソッドチェーン
同じjQueryオブジェクトを複数回使用する時は、メソッドチェーンを使うことでも処理速度を高速化できます。
メソッドチェーンとは1つのjQueryオブジェクトに連続してメソッドが利用できる構文です。
$('セレクタ').メソッド().メソッド()...
例を使って書き換えてみます。
$('p').css('color','red');
$('p').text('jQuery');
$('p').fadeOut();
↓
$('p').css('color','red').text('jQuery').fadeOut();
変数と同様、コードが減る分メンテナンス性が向上しますね。
よく使うメソッド
メソッドはたくさんありますので、自分のしたいことがメソッドにあるかは都度確認しましょう。公式；jQueryドキュメント
今回は有名どころをいくつかご紹介します。 このhtmlに対しての処理を書いていきます。
<p id="test">サンプル</p>
cssメソッド
CSSを編集できるメソッドです。
$(function(){
$('#test').css('color', '#ff0000');
});
このように、CSSを使わずjQueryを使って色指定をすることができます。
この色を変更したければ、引数で指定した値を変更します。
$(function(){
$('#test').css('color', '#8EE3C8');
});
リロードすれば変更されています。
jQueryだけでスタイルの変更ができました。これを応用すれば、「ボタンを押した後に色を変える」などの動的な変更が可能になるのです。
hideメソッド
$("#test").hide(); // 読み込み時に非表示
$("#test").hide("slow"); // ゆっくり非表示に
$("#test").hide(2000); // 2秒後に非表示に
引数に数字を指定すると、ミリ秒後ということになります。
1000ミリ秒 ＝ 1秒
「クリックすると消す」は↓こう書きます。
$("#test").click(function () {
$(this).hide();
});
fadeOutメソッド
要素を隠す際に、アニメーションを付けることができます。 ()内に引数として、アニメーションの速度を指定できます。ミリ秒での指定や、文字列での指定が可能です。
$(function(){
$('#test').fadeOut(1500);
});
この場合1500ミリ秒（1.5秒）に指定しています。
findメソッド
findメソッドは、すべての子孫要素(自分よりも下の階層の要素すべて）の中から、指定したセレクタを持つ要素を取得したいときに用います。
<div class="parent">
<a href="/child.com">子リンク</a>
<p>
<a href="/grandchild.com">孫リンク</a>
</p>
</div>
$(function(){
$('.parent').find('a').css('color', 'red');
});
.find('a')と引数で要素を指定することで、子孫要素にある<a>タグに対して処理を実行できます。
今回はparentクラスの子孫要素にある<a>タグすべてに文字を赤色にするcssメソッドを適用しました。
childrenメソッド
指定したセレクタが持つ子要素の中から指定したセレクタに合致した要素を取得したいときに用います。
findメソッドに似ていますが、findメソッドは子要素だけでなく孫要素にも適用されるところに違いがあります。
<div class="parent">
<a href="/child.com">子リンク</a>
<p>
<a href="/grandchild.com">孫リンク</a>
</p>
</div>
$(function(){
$('.parent').children('a').css('color', 'red');
});
今回はparentクラスの子要素にある<a>タグに文字を赤色にするcssメソッドを適用しました。childrenメソッドなので孫要素には適用されません。
appendメソッド（'21 1月追記）
.appendメソッドは要素を単純に追加するメソッドだと思っていましたが、要素を移動する意味もあります。
例1
<div class="hello"> こんにちは </div>
$('.hello').append('<p>こんばんは</p>');
上記のようにすると要素が追加されます。
<div class="hello"> こんにちは <p>こんばんは</p> </div>
このように使うことはもちろん可能ですが、appendする要素がもともと存在した場合に注意が必要です。
例2
<div class="div_1"> <p class="p_1"> test1 </p> <p class="p_2"> test2 </p> </div> <div class="div_2"> <p class="p_3"> test3 </p> </div>
const p1 = $('.p_1'); $('.div_2').append(p1);
こうすると、以下のような結果になります。ただの追加ではないのがわかるでしょうか。
<div class="div_1">
<p class="p_2">
test2
</p>
</div>
<div class="div_2">
<p class="p_3">
test3
</p>
<p class="p_1">
test1
</p>
</div>
そうです。もともとあった要素が指定した場所へ移動されました。
コピーではなく移動になります。この点を忘れないようにしましょう。
こちらでも同じように解説しました。
よく使うイベント
ある処理を行うタイミングを設定できます。
$('セレクタ').イベント名(function(){ // イベントが発生したときの処理 });
clickイベント
セレクタがクリックされた時に処理を実行することができます。
<div class="parent"> <button class="btn btn-primary">ボタン</button> <div class="hide">ボタンをクリックで非表示</div> </div>
$(function(){
$('button').click(function(){
$('.hide').hide();
})
});
ボタンを押すと消えます。
hoverイベント
要素にマウスが乗った時、外れた時に指定した処理を行うイベントです。
$('セレクタ').hover(マウスをのせた時の処理, マウスをはずした時の処理);
引数を2つ持つことに注意しましょう。引数を1つにすると、マウスが要素に重なった時も離れた時も同じ関数が実行されます。
<div class="parent"> <p class="hover_p">マウスをかざしてね</p> <div class="show">きえるよ</div> </div>
$(function() {
$('.hover_p').hover(
function() {
$('.show').fadeOut();
}, function() {
$('.show').fadeIn(); }
);
});
「マウスをかざしてね」にマウスを重ねると要素が消えます。
そしてマウスを離すとまた現れます。
