<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
$('p').css('color','red').hide('slow');
});
</script>
セレクタの指定
<script>
$(function(){
$(".item").css('color', 'red');
});
</script>
隣接セレクタ
<script>
$(function(){
$(" .item + .item").css('color', 'red');
});
</script>
フィルタ: eq(), gt(), lt(), even, odd, contains(),first, last
<script>
$(function(){
$("#sub > li:contains('4')").css('color', 'red');
});
</script>
メソッドを使ったDOM要素指定：parent(), children(), next(), prev(), siblings()
<script>
$(function(){
$("#sub > li:eq(2)").siblings().css('color', 'red');
});
</script>
属性セレクタ: =, !=, *=, ^=, $=
<script>
$(function(){
$('a[href!="http://google.com"]').css('background', 'red');
});
</script>
css、addClass、removeClass
<script>
$(function(){
//$('p').css('color', 'red').css('background', 'blue');
//console.log($('p').css('color'));
$('p').addClass('myStyle');
});
</script>
attribute, dataメソッド
$(function(){
// attr
console.log($('a').attr('href'));
$('a').attr('href', 'http://google.co.jp');
// data
console.log($('a').data('sitename'));
});
タグの中身を操作: text, html, val, remove, empty
$(function(){
// $('p').html('<a href="">click me!</a>');
// console.log($('input').val());
// $('input').val('hello, again!');
$('p').empty();
});
before, after, prepend, append
$(function(){
var li = $('<li>').text('just added');
// $('ul > li:eq(1)').before(li);
// li.insertBefore($('ul > li:eq(1)'));
// $('ul').prepend(li);
// $('ul').append(li);
li.appendTo($('ul'));
});
コールバック関数 :hide, show, fadeOut, fadeIn, toggle
$(function(){
// $('#box').hide(800);
// $('#box').fadeOut(800);
// $('#box').toggle(800);
// $('#box').toggle(800);
// $('#box').toggle(800);
$('#box').fadeOut(800, function(){
alert("gone!");
});
});
イベントの利用
$(function(){
// $('#box').click(function(){
// alert("hi!");
// });
$('#box')
.mouseover(function(){
$(this).css('background', 'green');
})
.mouseout(function(){
$(this).css('background', 'red');
})
.mousemove(function(e){
$(this).text(e.pageX);
})
});
focus, blur, change
<script>
$(function(){
$('#name')
.focus(function(){
$(this).css('background', 'red');
})
.blur(function(){
$(this).css('background', 'white');
});
$('#members').change(function(){
alert('changed!');
});
});
</script>
onメソッド
$(function(){
$('button').click(function(){
var p = $('<p>').text('vanish!').addClass('vanish');
$(this).before(p);
})
$('body').on('click', '.vanish', function(){
$(this).remove();
});
});
