構文
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”)