本文共 2940 字，大约阅读时间需要 9 分钟。

jQuery?????????

jQuery???????JavaScript?????????????????????????jQuery????????????????????????jQuery??????

??jQuery????

jQuery?????JavaScript???????????????????????????????jQuery?????????????????????????????????

$('input').click(function() {
    alert('hello word');
});

????????????input??????????alert('hello word')?????"hello word"????

????jQuery??

jQuery???????????????????

click()?????????????????????

$('div').click(function() {
    alert('??????');
});

2. mouseover/mouseout??

??????????????????mouseover()??????????????mouseout()?????????????????

$('div').mouseover(function() {
    console.log('????div??');
}).mouseout(function() {
    console.log('????div??');
});

3. hover??

hover()???jQuery????????????????????????????????????????????????????

$('div').hover(function() {
    $(this).css('background-color', 'red');
}, function() {
    $(this).css('background-color', '#fff');
});

????jQuery??

jQuery?????????????????????????????????????????????

4. hide()/show()/toggle()

?????????????????hide()?????show()?????toggle()?????????????

$('div').toggle();
// ??????div??????
$(div).toggle();
// ??????div??????

2. slideDown()/slideUp()/slideToggle()

??????????????????slideDown()??????????????slideUp()?????????????slideToggle()???????????????

$('div').slideUp(1000); // ????
$(div).slideDown(1000); // ????
$(div).slideToggle(); // ??????

3. animate()

animate()????????????????????????????????????????????????????????????

$(div).animate({
    height: '300px',
    width: '300px'
}, function() {
    $(div).css('background-color', 'green');
});

4. fadeOut()/fadeTo()

???????????????fadeOut()????????????fadeTo()???????????????

$(div).fadeOut();
$(div).fadeTo(null, 0.1); // ?50%???????

5. stop()

stop()???????????????????????????????????????????

$(div).animate({width: '500px'}, 2000);
$(div).animate({height: '500px'}, 2000);
$(button).click(function() {
    $(div).stop(); // ??????
});

??????

jQuery?????????????????????????????????????????

$('div').hide(); // ??????????div????

???????????????????????

??????

jQuery????????????????????????????????

$(this).css('color', 'red').siblings().css('color', 'white');

???????????????????

??jQuery????

jQuery???????????????css()???????

6. ??css()??

css()???????????????????????????

• ????????????

  var fontSize = $('p').css('fontSize');

• ???????????????????

  $('div').css('color', 'red');

• ???????????????

  $('p').css({
      'color': 'white',
      'fontSize': '20px'
  });
2. ???????

jQuery??????????????????????

• ????

  $('div').addClass('hide');

• ????

  $('div').removeClass('show');

• ????

  $('div').toggleClass('showHide');

???????????

?????????????????????????????????????????????????????????????stop()??????????????

$(button).click(function() {
    $('div').stop().slideToggle(2000);
});

??hover????

jQuery???hover()??????CSS?:hover????????????????????????????????

$('div').hover(function() {
    $('li').hide();
}, function() {
    $('li').show();
});

????????????????jQuery?????????????????????????????????????????????

转载地址：http://pone.baihongyu.com/