- 追加された行はこの色です。
- 削除された行はこの色です。
* jQuery 主なAPI [#x936bbcd]
** attr() [#s7873b6b]
$('a').attr('href', 'http://www.yahoo.co.jp/');
var url = $('a').attr('href');
** セレクタ [#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")'); // 指定する文字列を持っている要素
** val() [#r77b3c20]
$('input').val('ABC');
var value = $('input').val();
** 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.');
});