前端之jQuery拾遗

前不久看的一些jQuery知识，在此进行一些简单的记录。

一些基础

window.onload与$(document).ready()对比

• window.onload

  • 必须等网页中所有内容加载完（包含图片）之后执行
  • 不能同时写多个window.onload

• $(document).ready()

  • DOM结构绘制完毕后执行，DOM关联元素并未加载完毕
  • 能同时写多个

事件冒泡

• 如果一个元素嵌套在另一个元素里，并且都被绑定了click事件，那么内层的被点击之后，会按照从里到外的顺序依次触发

• 停止事件冒泡方法：

  • 使用事件对象

    • $(‘#span’).bind(‘click’, function(event){ event.stopPropagation(); })

• 阻止事件默认行为:如单击超链接跳转，单击表单提交

  • event.preventDefault();

• 停止冒泡，阻止事件默认行为可以都使用

  • return false;

• 事件捕获顺序与事件冒泡顺序相反

jQuery性能优化

• 使用最新版的jQuery库

• 使用合适的选择器

  • $(“#id")
  • $(“p”)、$(“div")
  • $(“.class")
  • $(“[attribute=value]")
  • $(“:hidden")
  • PS:尽量使用ID选择器；尽量给选择器指定上下文

• 缓存对象

• 循环时的DOM操作

  • 将循环的对象存储在列表，然后再进行DOM操作，减少DOM操作

• 数组方式使用jQuery对象

• 事件处理

  • 使用事件监听

    • $(“#id).on(“click”, “td”.function(){})

• 将你的代码转换为jQuery插件

• 使用join()来拼接字符串

• 合理使用HTML5的Data属性

• 尽量使用原生的js方法

• 压缩JavaScript

jQuery技巧

• 禁用右键菜单

1 $(document).ready(function(){  2 $(document).bind(“contextmenu”,function(e){  3 return false;  4   });  5 });

1 $(‘a[href^=“http://"]’).attr(“target”, “_blank");

1 $.browser.chrome && $.browser.version >= xxx;

1 input.focus()  2 input.blur()

 1 jQuery.fn.scrollTo = function(speed) {   2     var targetOffset = $(this).offset().top;   3     $('html,body').stop().animate({scrollTop: targetOffset}, speed);   4     return this;   5 };   6 // use   7 $("#goheader").click(function(){   8     $("body").scrollTo(500);   9     return false;  10 });

1 e.pageX和e.pageY

1 $(document).ready(function() {  2        $("input").keyup(function(e){  3               if(e.which=="13"){  4                  alert("回车提交!")  5               }  6           })  7   });

1 function getObj(){  2     var $obj = $('#someElement').find('option:selected');  3     alert( $obj.val() );  4 }