jQuery機能 2011.11.14までに学んだもの

ページを最後まで読み込んだらダイアログを表示

$(function(){
　alert('ページ読み込み完了'); 
});

id="hoge"な要素を表示

$('#hoge').show();

クラスhogeが指定された要素を表示

$('.hoge').show();

すべてのdiv要素を表示

$('div').show();

id="hoge"な要素のなかにあるすべてのdiv要素を表示

$('#hoge div').show();

id="div1"な要素を取得。作ったjQueryオブジェクトを変数div1に保存

var div1 = $('#div1');

div1のなかにあるクラスhogeが指定された要素を表示

div1.find('.hoge').show();

id="hoge"な要素のスタイル、font-sizeを20pxに変更

$('#hoge').css('font-size','20px');

id="hoge"な要素のスタイル、font-sizeの値を変数sizeに保存

var size = $('#hoge').css('font-size');

id="hoge"な要素を表示させる

$('#hoge').show();

id="hoge"な要素を非表示にする

$('#hoge').hide();

id="hoge"な要素の幅を600pxにする

$('#hoge').width(600);

id="hoge"な要素の高さを400pxにする

$('#hoge').height(400);

id="hoge"な要素をフェードイン

$('#hoge').fadeIn();

id="hoge"な要素をフェードアウト

$('#hoge').fadeOut();

id="hoge"な要素を1秒でフェードイン

$('#hoge').fadeIn(1000);

id="hoge"な要素を1秒でフェードイン後ダイアログを表示

$('#hoge').fadeIn(1000, function(){
  alert('フェードイン完了');
});

id="hoge"な要素をスライドダウン

$('#hoge').slideDown();

id="hoge"なinput要素の入力値を「jQuery」に変更
テキストフィールドやドロップダウンメニュー等のvalue属性を取得・操作するには、val()を使用する
引数無しで呼ぶと、テキストフィールド等の中身が取得でき、引数有りで呼ぶと中身をその値に変えることができる

$('input#hoge').val('jQuery');

id="hoge"な要素の内容を変数textに保存

var text = $('#hoge').text();

id="hoge"な要素の内容を「<p>jQuery</p>」に変更

$('#hoge').html('<p>jQuery</p>');

id="hoge"な要素の内容を変数htmlに保存

var html = $('#hoge').html();

id="hoge"な要素の内容を空にする

$('#hoge').empty();

id="hoge"なa要素のtarget属性値に_blankを指定

$('a#hoge').attr('target','_blank');

id="hoge"な要素のtarget属性値を変数targetに保存

var target = $('a#hoge').attr('target');

id="hoge"なinput要素の入力値を「jQuery」に変更

$('input#hoge').val('jQuery');

id="hoge"なinput要素に入力されている値を変数valueに保存

var value = $('input#hoge').val();

id="hoge"な要素のクラスにfugaを追加

$('#hoge').addClass('fuga');

id="hoge"な要素のクラスからfugaを削除

$('#hoge').removeClass('fuga');

id="fuga"な要素をid="hoge"な要素のなかに移動

$('#hoge').append($('#fuga')); 
$('#fuga').appendTo($('#hoge'));

id="hoge"な要素を削除

$('#hoge').remove();

id="hoge"な要素がクリックされたらダイアログを表示

$('#hoge').click(function(){
  alert('クリックされた');
});

id="hoge"な要素をスライドアップ

$('#hoge').slideUp();

id="hoge"な要素をtop:200px,left:400pxへアニメーション

$('#hoge').animate({
  top: 200,
  left: 400
});

id="hoge"な要素をtop:200px,left:400pxへ1秒でアニメーション後ダイアログを表示

$('#hoge').animate({
　top: 200,
　left: 400 
},1000,function(){
　alert('アニメーション完了');
});

id="hoge"な要素の内容を「jQuery」に変更

$('#hoge').text('jQuery');

id="hoge"な要素の上にマウスがのったらダイアログを表示

$('#hoge').mouseenter(function(){
  alert('マウスがのった'); 
});

id="hoge"な要素の上からマウスが外れたらダイアログを表示

$('#hoge').mouseleave(function(){
  alert('マウスが外れた'); 
});

マウスがのった、外れたを2ついっぺんに

$('#hoge').hover(function(){ 
  alert('マウスがのった');
},function(){ 
  alert('マウスが外れた');
});

id="hoge"なinput要素にフォーカスが当たったらダイアログを表示

$('input#hoge').focus(function(){
  alert('フォーカスが当たった'); 
});

id="hoge"なinput要素からフォーカスが外れたらダイアログを表示

$('input#hoge').blur(function(){
  alert('フォーカスが外れた'); 
});

クラスhogeが指定された要素がクリックされたら中身のテキストを変更

$('.hoge').click(function(){
  $(this).text('クリックされた');
});

クラスhogeが指定された要素それぞれにつき、中身のテキストをダイアログ表示

$('.hoge').each(function(){
  var text = $(this).text();
  alert(text); 
});

akane_memo