本文共 2904 字，大约阅读时间需要 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/