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");
コメント