* jQuery 主なAPI [#x936bbcd]

** セレクタ [#j7fb9af6]
*** 複数の要素 [#j32be11e]
 var h_tags = $('h1, h2, h3');
*** 親子関係にある要素 [#ge2d5ed3]
 var lis = $('ul>li');
*** 子孫関係ににある要素 [#r2f7ccc3]
 var inputs = $('form input);
*** リストになっている要素 [#k4323ee4]
 var first_li = $('li:first');           // リストの最初の要素
 var last_li  = $('li:last');            // リストの最後の要素
 var even_lis = $('li:even');            // リストの偶数番目の要素
 var odd_lis  = $('li:odd');             // リストの奇数番目の要素
 var third_li = $('li:eq(2));            // 添え字で指定する要素(添え字は0スタート)
 var lis      = $('li:contains("ABC")'); // 指定する文字列を持っている要素

** CSS [#e49e3c87]
*** 設定・取得 [#e7af1b1c]
 $('span').css('fontSize', '16px');
 var size = $('span').css('fontSize');
*** まとめて設定 [#sdcffc5d]
 $('span').css({
   font-size: "16px",
   color:     "red"
 });

*** CSSクラス [#nec717e8]
 $('span').addClass('color-red');
 $('span').removeClass('font-big');

** 要素の値 [#e8f14a20]
*** attr() [#s61e0894]
 $('a').attr('href', 'http://www.yahoo.co.jp/'); // 設定
 var url = $('a').attr('href');                  // 取得

*** val() [#yc5aa34f]
 $('input').val('ABC');                          // 設定
 var value = $('input').val();                   // 取得

** イベント [#n3cf392a]
*** 設定 [#m0201467]
 $('a').click(function(){
    $(this).css('color', 'red');
 });
*** 実行 [#f7250b5f]
 $('a').click();

** マウスオーバー [#of706cba]
*** mouseover() / mouseout() [#u0ba3135]
 $('li')
 .mouseover(
     function(){
         $(this).css('color', 'red');
     })
 .mouseout(
     function(){
         $(this).css('color', 'blue');
     }
  );
*** hover() [#p109903d]
 $('li')
 .hover(
     function(){
         $(this).css('color', 'red');
     },
     function(){
         $(this).css('color', 'blue');
     }
  );

** エフェクト [#p3752661]
*** hide() [#b73b8587]
 $('h1').hide(2000,function(){
     console.log('hide() done.');
 });
*** show() [#oe51160f]
 $('h1').show(3000,function(){
     console.log('show() done.');
 });


トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS