jQuery基础教程（第3版）练习参考答案（第2~6章）

第2章

$(document).ready(function() {
  //(1)
  //$('#selected-plays > li > ul > li').addClass('special');
  $('#selected-plays li:not(#selected-plays > li)').addClass('special');
  
  //(2)
  $('td:nth-child(3)').addClass('year');
  
  //(3)
  $('td:contains(Tragedy):eq(0)').siblings().andSelf().addClass('special');
  
  //(4)
  $('li a').bind('click',function(){
    $(this).parent().siblings().andSelf().addClass('afterlink');
  });
  
  //(5)
  $('a[href$=".pdf"]').parent().parent().addClass('tragedy');
});

 

第3章

$(document).ready(function() {

  //(1)
  $('.author').bind('click',function(){
    $(this).addClass('selected');
  });
  
  //(2)
  $('.chapter-title').dblclick(function(){
    $(this).parent().find('p').toggleClass('hidden');
  });
  
  //(3)
  //题目没看懂
  
  //(4)
  $('.chapter p').mousemove(function(event){
    // screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。
    console.log('screen X: ' + event.screenX + '  screen Y: ' + event.screenY);
    // clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。
    console.log('client X: ' + event.clientX + '  client Y: ' + event.clientY);
  });
  
  //(5)
  var Lx;
  var Ly;
  
  $(document).mousedown(function(vdown){
    Lx = vdown.clientX;
    Ly = vdown.clientY;
  });
  
  $(document).mouseup(function(vup){
    if(vup.clientX == Lx && vup.clientY == Ly){
      $('p').addClass('hidden');
    } else if(vup.clientY > Ly) {
      $('p').removeClass('hidden');
    }
  });
  
});

第4章

$(document).ready(function(){
  //(1)
  $('body')
    .hide()
    .fadeIn('slow');
  
  //(2)
  $('p').mouseenter(function(){
    $(this).css({backgroundColor: '#ff0'});
  });
  
  //(3)
  $('h2').click(function(){
    $(this)
      .css({position: 'relative'})
      .fadeTo('slow', 0.25)
      .animate({
        left : '20px'
      },{
        duration: 'slow',
        queue: false
      })
      .queue(function(){
        $('.speech').fadeTo('slow', 0.5);
      });   
  });
  
  //(4)
  $(document).keyup(function(event){
    $('#switcher').css({position: 'relative'})
    switch(event.keyCode) {
      case 37:
        $('#switcher').animate({left: '-=20px'},'slow');
        break;
      case 38:
        $('#switcher').animate({top: '-=20px'},'slow');
        break;
      case 39:
        $('#switcher').animate({left: '+=20px'},'slow');
        break;
      case 40:
        $('#switcher').animate({top: '+=20px'},'slow');
        break;
    }
  });
  
});

第5章

$(document).ready(function(){
  //(1)
  var $paragraph = $('div.chapter p');
  $paragraph.each(function(index){
    if(index >= 3) {
      $(this).after('<a href="#top">back to top</a>');
    }
  });
  $('<a id="top"></a>').prependTo('body');
  
  //(2)
  $('a[href$="top"]').click(function(){
    $('#here').remove();
    $(this).after('<p id="here">You were here</p>');
  });
  
  //(3)
  $('#f-author').click(function(){
    $(this).wrapInner('<b></b>');
  });
  
  //(4) 运行第4题时，请注释第3题
  $('#f-author').click(function(){
    if($(this).html() == $(this).text()){
      $(this).wrapInner('<b></b>');
    } else {
      $(this).html($(this).text());
    }
  });
  
  //(5)
  $('p').attr('class',function(){
    if($(this).attr('class') == undefined){
      return 'inhabitants';
    } else {
      return $(this).attr('class') + ' inhabitants';
    }
  });
});

 第6章

$(document).ready(function(){
  //(1)
  $('#dictionary').load('exercises-content.html .letter');
  
  //(2) 运行第2题时，请注释第1题
  $('#letter-a a').hover(function(){
    $('#dictionary').load('exercises-content.html #letter-a');
  },function(){
    $('#dictionary').empty();
  });
  
  $('#letter-b a').hover(function(){
    $('#dictionary').load('exercises-content.html #letter-b');
  },function(){
    $('#dictionary').empty();
  });
  
  $('#letter-c a').hover(function(){
    $('#dictionary').load('exercises-content.html #letter-c');
  },function(){
    $('#dictionary').empty();
  });
  
  $('#letter-d a').hover(function(){
    $('#dictionary').load('exercises-content.html #letter-d');
  },function(){
    $('#dictionary').empty();
  });
  
  $('#letter-e h3').hover(function(){
    $('#dictionary').load('exercises-content.html #letter-e');
  },function(){
    $('#dictionary').empty();
  });
  
  $('#letter-f h3').hover(function(){
    $('#dictionary').load('exercises-content.html #letter-f');
  },function(){
    $('#dictionary').empty();
  });
  
  $('#letter-g a').hover(function(){
    $('#dictionary').load('exercises-content.html #letter-g');
  },function(){
    $('#dictionary').empty();
  });
  
  $('#letter-h a').hover(function(){
    $('#dictionary').load('exercises-content.html #letter-h');
  },function(){
    $('#dictionary').empty();
  });
  
  //(3),(4) No server.Practice will be completed next time.
});