jQuery 学习笔记

//一个切换显示的按钮
$('#toggleButton').click(function() {
   $('#disclaimer').toggle();
   if ($('#disclaimer').is(':visible')) {
     $(this).val('Hide');
   } else {
   $(this).val('Show');
   }
});

//添加新元素
$('<p>A new paragraph!</p>').addClass('new');

//选择多个元素
$('p,div,h1,input')

//新建元素并插入页面
$('<input type="button" value="toggle" id="toggleButton">')
.insertAfter('#disclaimer');
$('#toggleButton').click(function() {
   $('#disclaimer').toggle();
});

//移出特定元素
$('#celebs tr').remove(':contains("Singer")');

//slideToggle可动画效果，回调函数
$('#disclaimer').slideToggle('slow', function() {
   alert('The slide has finished sliding!')
});

//切换class
$('#celebs tbody tr').click(function() {
   $(this).toggleClass('zebraHover');
});

//很酷的写法
$('.spoiler').hide();
$('<span class="revealer">Tell me!</span>')
.insertBefore('.spoiler');
$('.revealer').click(function() {
   $(this).hide();
   $(this).next().fadeIn();
});

//变换动画和变换曲线linear和swing
$('p:first').toggle(function() {
    $(this).animate({'height':'+=150px'}, 1000, 'linear');
}, function() {
    $(this).animate({'height':'-=150px'}, 1000, 'swing');
});