jQuery选择器探讨进阶

jQuery选择器探讨

在jQuery中,当用户把选择器表达式作为参数传递给$()函数时,jQery的Sizzle先对这个选择器表达式进行语法分析,然后再决定如何获得表达式所代表的这些元素。在框架底层,Sizzle应用了浏览器所支持的最高效的DOM 方法来获取一个节点列表(nodeList),这个节点列表是一个类似于数组的对象的DOM元素的集合。下面的列表展示了jQuery的Sizzle内部采用的浏览器DOM遍历方法和浏览器的支持情况:

  1. 1. .getElementById()  浏览器支持情况:IE 6+, Firefox 3+, Safari 3+, Chrome 4+, and Opera 10+;
  2. 2. .getElementsByTagName()  浏览器支持情况:IE 6+, Firefox 3+, Safari 3+,Chrome 4+, and Opera 10+;
  3. 3. .getElementsByClassName() 浏览器支持情况:IE 9+, Firefox 3+, Safari4+, Chrome 4+, and Opera 10+;
  4. 4. .querySelectorAll() (这个是浏览器内置的css选择符查询元素方法,比getElementsByTagName和getElementsByClassName效率要高很多。)浏览器支持情况:IE 8+, Firefox 3.5+, Safari 3+, Chrome 4+, and Opera 10+;

查看更多

jQuery事件编写进阶

jQuery事件编程进阶

事件委托,是一种优化DOM元素事件绑定的技巧,利用事件冒泡的原理,通过绑定事件到父元素,检查event触发元素的target,最终执行相应的事件函数处理,它的几个好处一般前端开发程序员都知道。在jQuery中,一般是delegate()方法和.live()方法,但是,如何选择事件委托的方法,或者在什么情况下用.live(),什么情况下用.delegate(),这个值得讲一讲:

live: function( types, data, fn ) {
      jQuery( this.context ).on( types, this.selector, data, fn );
      return this;
    }
delegate: function( selector, types, data, fn ) {
      return this.on( types, selector, data, fn );
}

查看这2个事件委托的源代码可知,live方法中,有个元素的执行环境,这个执行环境默认是document,所以,如果把live事件委托写在$(document).ready(function() {})之外,也是没有问题的。live()在某种情况下会引起性能问题,这主要包括2个方面:1.live()方法虽然避免了绑定事件处理到很多DOM元素,但是,它在一开始选择了文档中的所有元素,如果一个文档有很多的子节点,比如文档中的一个表有几十列,几百行表内容,而事件要绑定到这个表的某一行某一列,那么,live()方法在一开始选择这个表的所有行,所有列的时候,就是一个非常大的性能消耗,会导致脚本反应很迟钝。2.因为live()是绑定到document上面,所以会有大量的事件冒泡,事件冒泡要从嵌套最深的DOM元素往上一直冒到document上面,这样长路径的事件冒泡也是一个很昂贵的性能消耗。而采用.delegate(),事件绑定到$()函数的选择表达式元素上,因此页面的事件注册更加清晰,而事件冒泡更少。

查看更多

5°专场视觉设计小析

专场视觉设计分析
这个主题是2012年下半年的一次内部分享,迟迟未形成文章,马上过年了赶紧整理起来,顺便给视觉设计师们拜年了!!!我自己内心的一个呼唤,明年脱离“苦逼”二字……

网站的专场设计,应该算是网页视觉设计师的必修课,应该也算是最基本功。她所需要的设计理论都是最基本,但同时也是最重要的。设计理论版本多如牛毛,我这里仅仅整理5个方面来分析网页专场设计的一些方法,本人并非大师或资深,欢迎各式拍砖。

设计理论每人都会或多或少的知道一些,但是我们作品是给谁看的,我们的真正用户是谁,用户的特性是什么,每个网站针对的用户都不同,在这里简单介绍下我们内部总结的阿里巴巴B类用户的特性:

在了解自己所针对的用户特性之后,我们做设计就会更有针对性,对作品的创意也会更贴近用户情景。在这里我分成5个方面来表述专场设计所需的基本功。
查看更多