jQuery 基本

jQueryの基本文法

jQueryの書き方

jQueryは読み終わった後に実行される必要があるため、jQueryの処理は以下のように記述します。

jQuery

jQuery(document).ready(function(){
 //jQueryで実行する内容
 });
  • 「jQuery」の部分は「$」と省略記述できます。
$(document).ready(function(){
    //jQueryで実行する内容
});
  • さらに、下記のように省略記述できます。
$(function(){
    //jQueryで実行する内容
});
jQueryの基本構文
        $(セレクター).イベント(function() {
            $(セレクター).命令
        });
  • セレクター:操作する要素を指定する
  • イベント:操作するタイミングを決める
  • 命令:操作する内容

イベントと命令は、ともにメソッドになります。

  • 基本文法
        $(セレクター).メソッド()
プラグインの基本構文

プラグインは以下のような形式で、メソッド名(命令名)を決めて、「jquery.メソッド名.js」という名前のファイルを作成します。
プラグイン内のセレクターは、イベントが発生した要素を取得する $(this) にしておきます。

jquery.メソッド名.js

    $.fn.メソッド名 = function() {
        //ここに処理を書く
    }

このファイルを読み込んで、メソッドを呼び出せはOKですね。 もちろん、オプションとして引数も設定できます。

    $(function(){
        $(セレクター).メソッド名();
    });
「$」は関数

jQueryにおいては、「$()」と「jQuery()」は同じ関数です。なので、下記2つのコードは等価です。

$を使うパターン

$("#target").hide();

jQueryを使うパターン

jQuery("#target").hide();

$

jQueryの基本:セレクタ

jQueryよく使われるセレクタ
  • jQueryではCSSと似た形で、IDやクラスを使って要素を指定できます。
記法意味特徴記号
$("#target")IDセレクタ#
$(".target")クラスセレクタ.
$("p img")子孫セレクタ親タグ空白子タグ
$("p + p")隣接セレクタ隣接の兄弟タグ

ほかにも、先頭要素だけ取得する「:first」や、非表示の要素だけを取得する「:hidden」などの「フィルター」という仕組みがjQueryでは用意されています。

  • jQueryオブジェクトをセレクタとして指定できます。

jQueryオブジェクトとは、DOM要素を集めてラップしたオブジェクトです。

jQueryオブジェクトを得るには、下記2つの方法があります。

HTMLソース

<ul id="list">
<li class="item">Apple</li>
<li class="item">Banana</li>
<li class="item">Cherry</li>
</ul>
<p>Hello!</p>
  • $() を使う
記法意味
$(document.getElementById('list'))DOM要素からjQueryオブジェクトを得る
$('.item')セレクターからjQueryオブジェクトを得る
$($('.item'))jQueryオブジェクトからjQueryオブジェクトを得る
$('<p>Hello!</p>')マークアップからjQueryオブジェクトを得る
$()空のjQueryオブジェクトを得る
  • 既存のjQueryオブジェクトのメソッドを使う
    • jQueryオブジェクトを代入する変数やプロパティの名前には、先頭に$をつける慣習があります。
const $list = $('#list');
const $items = $list.find('.item');
  • $() の特別な機能
        $()に関数を渡すと、HTML読み込み(DOM解析)が完了したときにその関数が実行されます。
        (すでに完了していれば、即座に実行されます。)
        この機能を使うことで、ある要素を操作するJavaScriptを、その要素より前に記述することが可能です。

例:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
  $(function() {
    $('#target').text('Hello!');
  });
</script>
<p id="target"></p>

jQueryの基本:メソッド - コールバック

jQueryでは、メソッドは「$("セレクタ")」に、「.」でつなげる形で使います。

また、.hide("slow")のように、パラメータ(引数)を渡すことで、メソッドの動作を制御します。
(パラメータの型はメソッドによって異なります。)

$("#target").on("click", function(){
  //処理内容
});

これは、on()メソッドに対して第一引数「click」と、第二引数「function(){//処理内容}」を渡しているということです。

イベント発生時に処理する内容を記述

第二引数の「function(){//処理内容}」の部分は、コールバックと呼ばれるもので、あるイベント(クリックなど)が発生した時に、実行される処理内容をまとめたもの(関数)です。

下記2つのコードは、ボタンを押すと#target要素が表示・非表示されるという同じ動きをします。

$('#toggle').on('click', function() {
  $('#target').toggle("slow");
  $('#target').css("background","red");
});

$('#toggle').on('click', toggle);
function toggle() {
  $('#target').toggle("slow");
  $('#target').css("background","red");
}
メソッドチェーン

ドット「.」で関数をつなげているコードは、「メソッドチェーン」と呼ばれるもので、関数をつなげて書くJavaScriptの文法です。

//2つに分けていたコードを
$("#target").css("color", "red");
$("#target").addClass("additional");

//「.」でつなげて1つに
$("#target").css("color", "red").addClass("additional");