继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jQuery基础教程(第四版)读书笔记“选择元素与事件“

慕标0246214
关注TA
已关注
手记 39
粉丝 251
获赞 1274

上下文关键字this引用的是DOM元素,而不是jQuery对象,作为jquery对象需要:$(this)写成这样子
jQuery提供了一个简便的toggleClass()方法,能够根据相应的类是否存
在而添加或删除类

$(document).ready(function() {
    $('#switcher h3').click(function() {
        $('#switcher button').toggleClass('hidden');
    });
});

$( 'A' 'B' ).~ jQuery选中了A中的子元素B
$( 'A', 'B' ).~ A逗号B, jQuery选择了A or B

mouseenter和mouseleave事件可以避免冒泡问题
通过事件对象改变事件的旅程
事件对象是一种DOM结构,它会在元素获得处理事件的机会时传递给被调用的事件处理程序。这个对象中包含着与事件有关的信息(例如事件发生时的鼠标指针位置),也提供了可以用来影响事件在DOM中传递进程的一些方法。

事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。
通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素)而且,this引用的是处理事件的DOM元素

$(document).ready(function() {
    $('#switcher').click(function(event) {
        if (event.target == this) {
            $('#switcher button').toggleClass('hidden');
        }
    });
});

此时的代码确保了被单击的元素是<div id="switcher">,而不是其他后代元素。现在,单击按钮不会再折叠样式转换器,而单击转换器背景区则会触发折叠操作。但是,单击标签(<h3>)同样什么也不会发生,因为它也是一个后代元素。实际上,我们可以不把检查代码放在这里,而是通过修改按钮的行为来达到目标
停止事件传播
事件对象还提供了一个.stopPropagation()方法,该方法可以完全阻止事件冒泡。

$(document).ready(function() {
  $('#switcher-default').addClass('selected');
  $('#switcher button').click(function(event) {
      var bodyClass = this.id.split('-')[1];
      $('body').removeClass().addClass(bodyClass);
      $('#switcher button').removeClass('selected');
      $(this).addClass('selected');
      event.stopPropagation();
  });
});

通过调用event.stopPropagation()就可以避免其他所有DOM元素响应这个事件。这样一来,单击按钮的事件会被按钮处理,而且只会被按钮处理。单击样式转换器的其他地方则可以折叠和扩展整个区域。

阻止默认操作
即便在事件对象上调用.stopPropagation()方法也不能禁止这种默认操作,因为默认操作不是在正常的事件传播流中发生的。在这种情况下,.preventDefault()方法则可以在触发默认操作之前终止事件

事件传播和默认操作是相互独立的两套机制,在二者任何一方发生时,都可以终止另一方。
如果想要同时停止事件传播和默认操作,可以在事件处理程序中返回false,这是对在事件对象上同时调用.stopPropagation()和.preventDefault()的一种简写方式。

事件委托
利用冒泡的一项高级技术。通过事件委托,可以借助一个元素上的事件处理程序完成很多工作。

is()与.hasClass()
要测试元素是否包含某个类,也可以使用另一个简写方法.hasClass()。
不过,.is()方法则更灵活一些,它可以测试任何选择符表达式。
使用内置的事件委托功能

$('#switcher').on('click', 'button', function() {
  var bodyClass = event.target.id.split('-')[1];
  $('body').removeClass().addClass(bodyClass);
  $('#switcher button').removeClass('selected');
  $(this).addClass('selected');
});

如果给.on()方法传入的第二个参数是一个选择符表达式,jQuery会把click事件处理程序绑定到#switcher对象,同时比较event.target和选择符表达式(这里的'button')。如果匹配,jQuery会把this关键字映射到匹配的元素,否则不会执行事件处理程序。

如果给.on()方法传入的第二个参数是一个选择符表达式,jQuery会把click事件处理程序绑定到#switcher对象,同时比较event.target和选择符表达式(这里的'button')。如果匹配,jQuery会把this关键字映射到匹配的元素,否则不会执行事件处理程序。

为事件处理程序添加命名空间
即在绑定事件时引入附加信息,以便将来识别特定的处理程序。要使用命名空间,需要退一步使用绑定事件处理程序的非简写方法,即.on()方法本身。
我们为.on()方法传递的第一个参数,应该是想要截获的事件的名称。不过,在此可以使用一种特殊的语法形式,即对事件加以细分

$(document).ready(function() {
  $('#switcher').on('click.collapse', function(event) {
    if (!$(event.target).is('button')) {
      $('#switcher button').toggleClass('hidden');
    }
  });
  $('#switcher-narrow, #switcher-large').click(function() {
    $('#switcher').off('click.collapse');
  });
});

对于事件处理系统而言,后缀.collapse是不可见的。换句话说,这里仍然会像编写.on('click')一样,让注册的函数响应单击事件。但是,通过附加的命名空间信息,则可以解除对这个特定处理程序的绑定,同时不影响为按钮注册的其他单击处理程序。

重新绑定事件

$(document).ready(function() {
  var toggleSwitcher = function(event) {
    if (!$(event.target).is('button')) {
      $('#switcher button').toggleClass('hidden');
    }
  };
  $('#switcher').on('click.collapse', toggleSwitcher);
});

将一个匿名函数表达式指定给了一个局部变量。传递给.on()的第二个参数是一个函数引用。

模仿用户操作
即使某个事件没有真正发生,但如果能执行绑定到该事件的代码将会很方便。通过.trigger()方法就可以完成模拟事件的操作。

$(document).ready(function() {
  $('#switcher').trigger('click');
});

这样,随着页面加载完成,样式转换器也会被折叠起来,就好像是被单击了一样.
.trigger()方法提供了一组与.on()方法相同的简写方法。当使用这些方法而不带参数时,结果将是触发操作而不是绑定行为。

$(document).ready(function() {
 $('#switcher').click();
});

键盘事件:以分为两类:直接对键盘按键给出响应的事件keyup和keydown和对文本输入给出响应的事件keypress。
键盘事件的目标是当前拥有键盘焦点的元素。

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP