jQueryの基本
jQueryでのプログラムは基本的にHTMLの要素を取得して，
HTMLの要素を取得する
まずjQueryは何かHTMLの要素をとってこない何も始まりません。HTMLの要素を取得するには以下のように書きます。
$(セレクタ)
この$()という記述がjQeuryの記述方法です。セレクタにはCSSのセレクタを使うことができます。CSS3のセレクタにも対応していますし，
// 全てのdiv要素
$('div');
// id属性がfooの要素
$('#foo');
// class属性にfooという値が含まれる要素
$('.foo');
// class属性にfooという値が含まれる要素の子要素のdiv要素
$('.foo div');
// input要素のうちtype属性の値がtextの要素
$('input[type="text"]);
// チェックされている要素（radioボタンなど）
$(':checked');
// div要素の先頭の要素
$('div:first');
// div要素の最後の要素
$('div:last');
// div要素のうちインデックスが1のもの（インデックスは0から順番にふられる）
$('div:eq(1)');
// h1やh2などのheader要素
$(':header');
いくつかの例のデモを用意しましたので実際にさわってみてください。
ふだんCSSを書いている人は見慣れたものあればそうでないものもあるかもしれません。とりえあえず最初はCSSのセレクタで要素が取得できるということを覚えておくといいと思います。また，
var $foo = $('.foo');
// .fooの以下にあるdiv要素（.fooは含まない）
$('div', $foo);
$foo.find('div');
// .fooのうちdiv要素のもの（.fooのみが対象）
$foo.filter('div');
このようにHTMLの要素を取得するというだけでも色々な方法があります。ここで取得したものをjQeuryオブジェクトといい，
取得したものに対して操作する
jQeuryを使って取得したjQeuryオブジェクトに対して何か操作をするには，
// 要素を非表示にする
$('.foo').hide();
// 要素を表示する
$('.foo').show();
// 要素の表示/非表示を切り替える
$('.foo').toggle();
// 要素のcssを設定する
$('.foo').css('color', 'red');
// 要素のcssの値を取得する
$('.foo').css('color');
// 要素の中身のHTMLを書き換える
$('.foo').html('<p>bar</p>');
// .foo要素の末尾に要素を追加する
$('.foo').append('<p>bar</p>');
// 要素を削除する
$('.foo').remove();
// 属性値を設定する
$('.foo').attr('id', 'bar');
// 属性値を取得する
$('.foo').attr('id');
// 属性値を複数指定する
$('.foo').attr({
src: 'bar.png',
alt: 'bar',
});
// classを追加する
$('.foo').addClass('bar');
// classを削除する
$('.foo').removeClass('bar');
こちらもいくつかデモで用意しました。
またこれらのメソッドをでつなげて書くこともでき，
// cssを変更してclassを追加して中身のHTMLを書き換える
$('.foo').css('color', 'red').addClass('bar').html('<p>bar</p>');
このように，
