jQuery设计思想完整篇(4)

以上这些事件在jQuery内部,都是.bind()的便捷方式。使用.bind()可以更灵活地控制事件,比如为多个事件绑定同一个函数:

  $('input').bind(

    'click change', //同时绑定click和change事件

    function() {

      alert('Hello');

    }

  );

有时,你只想让事件运行一次,这时可以使用.one()方法。

  $("p").one("click", function() {

    alert("Hello"); //只运行一次,以后的点击不会运行

  });

.unbind()用来解除事件绑定。

  $('p').unbind('click');

所有的事件处理函数,都可以接受一个事件对象(event object)作为参数,比如下面例子中的e:

  $("p").click(function(e) {

    alert(e.type); // "click"

  });

这个事件对象有一些很有用的属性和方法:

  event.pageX 事件发生时,鼠标距离网页左上角的水平距离

  event.pageY 事件发生时,鼠标距离网页左上角的垂直距离

  event.type 事件的类型(比如click)

  event.which 按下了哪一个键

  event.data 在事件对象上绑定数据,然后传入事件处理函数

  event.target 事件针对的网页元素

  event.preventDefault() 阻止事件的默认行为(比如点击链接,会自动打开新页面)

  event.stopPropagation() 停止事件向上层元素冒泡

在事件处理函数中,可以用this关键字,返回事件针对的DOM元素:

  $('a').click(function() {

    if ($(this).attr('href').match('evil')) { //如果确认为有害链接

      e.preventDefault(); //阻止打开

      $(this).addClass('evil'); //加上表示有害的class

    }

  });

有两种方法,可以自动触发一个事件。一种是直接使用事件函数,另一种是使用.trigger().triggerHandler()

  $('a').click();

  $('a').trigger('click');

九、特殊效果

jQuery允许对象呈现某些特殊效果

  $('h1').show(); //展现一个h1标题

常用的特殊效果如下:

  .fadeIn() 淡入

  .fadeOut() 淡出

  .fadeTo() 调整透明度

  .hide() 隐藏元素

  .show() 显示元素

  .slideDown() 向下展开

  .slideUp() 向上卷起

  .slideToggle() 依次展开或卷起某个元素

  .toggle() 依次展示或隐藏某个元素

除了.show().hide(),所有其他特效的默认执行时间都是400ms(毫秒),但是你可以改变这个设置。

  $('h1').fadeIn(300); // 300毫秒内淡入

  $('h1').fadeOut('slow'); // 缓慢地淡出

在特效结束后,可以指定执行某个函数。

  $('p').fadeOut(300, function() { $(this).remove(); });

更复杂的特效,可以用.animate()自定义。

  $('div').animate(

    {

      left : "+=50", //不断右移

      opacity : 0.25 //指定透明度

    },

    300, // 持续时间

    function() { alert('done!'); } //回调函数

  );

.stop().delay()用来停止或延缓特效的执行。

$.fx.off如果设置为true,则关闭所有网页特效。

(完)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdjpzp.html