前端之jQuery拾遗

jopen 8年前

前不久看的一些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
  • 判断元素是否存在

    • 使用length
  • 回车提交表单

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 }
  • 个性化链接

  • 本地存储

Related Posts

来自: http://voidy.net/front_end_jquery_1/

</code></code></code></code></code></code></code></code>