Jqueryの基本構文

構文

jQuery( セレクター ) . 処理;
もしくは、「jQuery」の部分を、「jQuery」のエイリアス(別名)「$」に置き換え、
$( セレクター ) . 処理;
とすることもできる。(一般的)。

複数の処理を続けて記述することもできる。

$(セレクタ) . メソッド();
$(セレクタ) . メソッド( 引数1, 引数2 );
$( セレクター ) . プロパティ;

$(セレクタ).イベント(function(){
// 処理
});


サンプル
var text = $( '#sampleId' ) . text();
$( '#sampleId' ) . text( 'サンプル' );

$( ‘.class’ )とlengthを使い、class属性で選択した要素の数を取得。
var c = $( '.sampleClass' ) . length;

複数の処理を続けて記述

jQuery( セレクター ) . 処理 . 処理;
または
$( セレクター ) . 処理 . 処理;

$( ‘#sampleId’ ) . text( ‘サンプル’ ) . css( ‘color’, ‘red’ );

$( function() {
   $( '#id-1' ) . css( {
      height: 200,
      width: 200,
      margin: '5px',
      backgroundColor: '#fff',
   } );
} );

変数の使用

変数を宣言
JavaScriptと同じく、jQueryで変数宣言にはvarを用いる。
変数には文字列や数値、jQueryオブジェクトなどを格納することができる。
jQueryオブジェクトを格納する時は、わかりやすいように 変数の頭に$を付けるのが慣例。
varが付かない変数はグローバル変数、そのプログラム全体で使える変数。
varが付く変数はローカル変数といって宣言された関数内で使用することがでる。

var $div = $('div');
$div.css('color','red')
$div.html('JQuery');
$div.fadeOut();

セレクタの基本

■要素を指定する方法(基本)

すべての要素を指定する
$(“*”)
要素名を指定して要素を指定する
指定した要素全てに反映される.

$(“要素名”)
id名から要素を指定する
idはユニークなため,反映されるのは一つの要素となる.
$(“#id名”)
クラス名から要素を指定する
クラス名に一致する要素に反映される.
$(“.class名”)
要素名もしくはid名に一致する要素を指定する
1

$(“要素名,#id名”)
id名内の配下にある要素を指定する

検索対象は#id名内全ての要素
1

$(“#id名 要素名”)
id名直下のa要素を指定する

検索対象は直下のa要素のみ
1

$(“#id名 > 要素名”)
要素名Aの次に現れる要素名Bを指定する
1

$(“要素名A + 要素名B”)
要素名Aの以降に現れる要素名Bの全てを指定する
1

$(“要素名A ~ 要素名B”)
フィルターを使った指定方法
要素セット全体から,要素名A直下の要素名Bで最初の要素を取り出す
1

$(“要素名A > 要素名B:first”)
要素セット全体から,要素名A直下の要素名B最後の要素を取り出す
1

$(“要素名A > 要素名B:last”)
親要素を起点とし,要素名A直下の要素名B最初の要素を取り出す
1

$(“要素名A > 要素名B:first-child”)
親要素を起点とし,要素名A直下の要素名B最後の要素を取り出す
1

$(“要素名A > 要素名B:last-child”)