JavaScript/jQuery/主なAPI のバックアップ(No.2)

バックアップ一覧
ソースを表示
JavaScript/jQuery/主なAPI は削除されています。
- 1 (2013-04-14 (日) 11:54:27)
- 2 (2013-04-14 (日) 12:56:59)

jQuery 主なAPI

セレクタ

複数の要素

 var h_tags = $('h1, h2, h3');

親子関係にある要素

 var lis = $('ul>li');

子孫関係ににある要素

 var inputs = $('form input);

リストになっている要素

 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

設定・取得

 $('span').css('fontSize', '16px');
 var size = $('span').css('fontSize');

まとめて設定

 $('span').css({
   font-size: "16px",
   color:     "red"
 });

CSSクラス

 $('span').addClass('color-red');
 $('span').removeClass('font-big');

要素の値

attr()

 $('a').attr('href', 'http://www.yahoo.co.jp/'); // 設定
 var url = $('a').attr('href');                  // 取得

val()

 $('input').val('ABC');                          // 設定
 var value = $('input').val();                   // 取得

イベント

設定

 $('a').click(function(){
    $(this).css('color', 'red');
 });

実行

 $('a').click();

マウスオーバー

mouseover() / mouseout()

 $('li')
 .mouseover(
     function(){
         $(this).css('color', 'red');
     })
 .mouseout(
     function(){
         $(this).css('color', 'blue');
     }
  );

hover()

 $('li')
 .hover(
     function(){
         $(this).css('color', 'red');
     },
     function(){
         $(this).css('color', 'blue');
     }
  );

エフェクト

hide()

 $('h1').hide(2000,function(){
     console.log('hide() done.');
 });

show()

 $('h1').show(3000,function(){
     console.log('show() done.');
 });