jQuery设计思想完整篇

2020-05-23 06:17:23易采站长站整理


  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,则关闭所有网页特效。


(完)