runfast󰀦lynda

jQuery基础教程-学习笔记(2)

事件

$(document).ready(function() {
  //这里是代码... ...(保证当前文档中DOM树加载完成后执行代码,以免无法定位DOM元素)
});
$(document).ready(function() {
  $('#some-id').bind('click', function() {
    $(this).addClass('selected'); //关键字this引用的就是#some-id
    alert("you have clicked some-id");
    $(this).removeClass('selected'); //去除class
 });
});        

希望用户单击按钮时执行,引入.bind()方法

.bind(‘click’, function() {})的简写是.click(),.unbind()移除绑定。

例如:$('body’).removeClass()

$(document).ready(function(){
  $('#switcher h3').toggle(function(){
    $('#switcher button').addClass('hidden');
  },function(){
    $('#switcher button').removeClass('hidden');
  });
});

在第一次点击后,所有按钮(class=“#switcher”)都会隐藏起来,第二次点击则又恢复了它们的可见性。

.hover()控制鼠标指针进入元素和离开元素时执行任意操作,IE浏览器对:hover伪类选择符支持不好,开发时要注意。

也就是说.trigger()方法可以完成模拟事件的操作,比如$(’#some-id’).trigger('click’)

3单元课后习题

要完成以下练习,需要此书本章素材,可以从Packt Publishing􏱄􏴔􏰖􏲦网站下载这些文件。

素材index.html

(1)在Charles Dickens被单击时,给它应用selected样式。

$(document).ready(function(){
  $('.author').on('click',function(){
    $(this).addClass('selected');
  });
});

(2)在双击章标题时,切换章文本的可见性。

$(document).ready(function(){
  $('.chapter-title').on('dblclick',function(){
    $(this).nextAll().toggleClass('hidden');
  });
});

或者

$(document).ready(function(){
  $('.chapter-title').dblclick(function(){
    $(this).siblings().toggleClass('hidden');
  });
});

(3)当用户按下向右方向键时,切换到下一个body类;右方向键的键码是39。

$(document).ready(function(){
  var temp = '#switcher-default';
  var key = 39;
  $('#switcher-default').addClass('selected').on('click', function(){
    $('body').removeClass().addClass('default');
  });
  $('#switcher-default').trigger('click');
  $('#switcher-narrow').on('click', function(){
    $('body').removeClass().addClass('narrow');
  })
  $('#switcher-large').on('click', function(){
    $('body').removeClass().addClass('large');
  })
  $('#switcher button').on('click', function(){
    $('#switcher button').removeClass('selected');
    $(this).addClass('selected');
    temp = $(this);
  });
$(document).keyup(function(event){
  if(key == event.which){
    if(temp == '#switcher-default'){
      $('#switcher-default').trigger('click');
    }
    if(temp.attr('id') == 'switcher-large'){
      $('#switcher-default').trigger('click');
    }else{
      $(temp).removeClass('selected').next().trigger('click');
    };
  };
});
});

(4)挑战:使用console.log()函数记录在段落中移动的鼠标的坐标位置。(注意:console.log()可以在Firefox的firebug扩展、Safari的Web Inspector或Chrome、IE中的Developer Tools中使用。)

$(document).ready(function(){
  $(document).mousemove(function(event){
    console.log(event.pageX);
    console.log(event.pageY);
  });
});

(5)挑战:使用.mousedown()和.mouseup()跟踪页面中的鼠标事件。如果鼠标按键在按下它的地方被释放,则为所有段落添加hidden类。如果是在按下它的地方之下被释放的,删除所有段落的hidden类。

$(document).ready(function(){
  var up_Y,down_Y;
  $(document).on('click', function(){
    $('p').addClass('hidden');
  });
  $(document).mousedown(function(down){
    down_Y = down.pageY;
  });
  $(document).mouseup(function(up){
    up_Y = up.pageY;
    if(down_Y < up_Y){
      $('p').removeClass('hidden');
    };
  });
});