jQueryとは

jQuery本体の読込

jQueryを使用するためには導入するHTMLページに、
本体ファイルを読み込む。

読込方法については、こちらのサンプルページを。

動作タイミングの指定

$(document).ready( 処理内容 );

$(document).ready(function(){
 // 処理内容
});

「function【関数】」については後日。

これを省略して、

$(function(){ 処理内容 };

$(function(){
 // 処理内容
});

と書くほうが一般的。

上記の記述だと、WebページのDOMツリー構造が読み込まれた段階で処理内容が実行されるため、読込途中の画像や動画などを操作しようとするとエラーになる場合がある。

その場合、以下のような「load」で指定すれば、ページ内容を完全に読み込んでから処理を実行するようになる。

$(window).on(‘load’,function(){ 処理内容 });

$(window).on('load',function(){
 // 処理内容
});

または、

$(window).load(function(){ 処理内容 });

$(window).load(,function(){
 // 処理内容
});

Javascriptでは、

window.onload = function(){ 処理内容 }

window.onload = function(){
 // 処理内容
}

と記述。このJavascript 指定を複数した場合、先の処理内容が上書きされてしまうので、処理は最後の１回分しか行われない。

window.onload = function(){
 // 処理１の内容
}
window.onload = function(){
 // 処理２の内容
}
// 実行されるのは処理２の内容のみ

処理内容の基本構文

対象となるHTML要素をセレクターで指定して、
その要素の内容やスタイルなどをメソッドで操作。

jQuery(“セレクター”).メソッド(パラメータ);

jQuery("div.sample").css("background-color":"#CCC");

これを省略して、

$(“セレクター”).メソッド(パラメータ);

$("div.sample").css("background-color":"#CCC");

と書くほうが一般的。

メソッドチェーン

同じ要素に複数の処理を連続したい

$("div#hoge p").hide();
$("div#hoge p").removeClass("foo");
$("div#hoge p").addClass("text");
$("div#hoge p").show();

こんなとき、以下のように

$("div#hoge p").hide().removeClass("foo").addClass("text").show();

簡潔に記述することができる。これを「メソッドチェーン」という。

さらに見やすくするため、以下のように改行することも可能。

$("div#hoge p")
 .hide()
 .removeClass("foo")
 .addClass("text")
 .show();

次回「＃２：セレクター」へ続く･･･

---

DOMツリーとは

DOMとは、W3Cが勧告しているHTML文書やXML文書をアプリケーションから利用するためのAPIのこと。
DOMは文書データのオブジェクトをツリー構造で扱うため、この構造のことを「DOMツリー」という。