2013年7月

版本变动主要影响,从1.4.0开始,.css(), .attr(), .val(), .html(),.text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(),.addClass(), .removeClass(), .toggleClass()接受function作为参数值。 toggleClass()可以同时操作多个class。

可以使用.delay()来推迟事件队列中之后的事件。

从1.6.0开始,如果目标属性没有设置,.attr()会返回undefined。

在1.7.0中,添加了一系列callbacks方法,可以用来对callback列进行操作。比如callbacks.add()添加,callbacks.disable()禁用,callbacks.remove()删除特定的,callbacks.empty()删除所有。

在1.9.0中,.attr()可以正确的设置类似checked的值,与.prop()不同的是,它直接使用相应的值来进行设置,而.prop()使用boolean值来设置。

移除了事件中的.toggle()。移除了.live()【可以用.on()来代替】和.die()【用.off()】。.addBack()取代了.addSelf()。

属性(attributes)部分。.html()可以直接转换string值到html。包括IE9在内,之前的IE浏览器,应该使用.empty().html(),以确保不会破坏文本节点。.toggleClass()的第二参数为boolean值,当它为true,则添加class,为flase则移除class。

应该使用.prop()来获取特定属性的值,因为.prop()会返回比如checked、selected、disabled等状态的正确的值。selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, defaultSelected都应该使用.prop()来获取和设置。而元素的其它值则推荐使用.val()来设置。

jQuery.noConflict()用来解除jQuery对$的控制,使得$可以被其他库使用。

CSS部分。1.6.0之后,.css()可以使用相对值,即通过+=、-=来设定值。它不能移除由stylesheet或者元素style值确定的css。但是在IE8及其以下版本中,会移除这些值。.offset()不能获取隐藏元素的位置,同时不会将body的margin,border,padding计算在内。.outerHeight()或者.outerHeight()在参数值为true的时候,会包含元素的margin值。

.data()可以使用HTML5中的data-*属性。

jQuery.fx.off可以关闭所有动画特效。在低性能设备上使用,或者在动画出现问题的时候。.animate()的属性应该是数值,不支持简写的CSS属性,动画过程中不会使不可见元素可见。大多数特效方法都包含duration和easing这两个可选参数,duration控制快慢(执行事件,默认为400,slow为600,fast为200,单位是毫秒),easing是变换方法(默认是swing,还有linear)。1.4.0开始,可以给每个属性设置不同的easing。

DOM操作。.append()如果目标是多个元素,则会分别在目标内插入。如果插入的是本文档的元素,那么只会移动该元素到目标位置,而不是复制它(如果有多个目标,同样分别插入到每个目标内。).appendTo()等也是一样。1.4.0开始,.before()和.after()可以对自封闭节点起作用,比如<div />。.text()中的string会被转义,因而不会作为HTML元素渲染。

事件(events)部分。.dblclick()绑定双击事件。event.metaKey检测功能键是否按下。event.preventDefault()用来阻止默认动作,比如a标签的跳转。event.target事件目标,可以和this比较来检测事件是否已经执行。.on()在1.7.0开始提供了绑定事件的所有功能,是最主要的事件绑定方式。.off()用来移除绑定的事件。.one()与.on()相似,但是它只处理一个目标元素。event.which用来检测键盘及鼠标的输入,包括鼠标左(1)中(2)右键(3)。可以使用event.data来给事件添加data值。

选择器(selectors)部分。:animated用来选择当时正在执行animation的元素。属性选择器中,=选择以给定值开头,通过连字符连接的属性的元素。~=选择通过空格分隔,包含给定值的属性的元素。*=选择包含给定值的属性的元素。$=选择以给定值结尾的属性的元素。!=不包含给定值。^=以给定值开头。:eq()选择器中,索引是从0开始的,如果值为负数,那么-1代表倒数第一个。

基础结构

  1. Closure的库结构和文件夹结构相对应,因此需要查找某个命名空间对应的文件时,可以按照库结构来查找。
  2. Closure的基本方法都在base.js中,因此需要先在文档中首先引用base.js。
  3. Closure中使用goog.provide(namespace)来定义命名空间。因此一种好的做法是,只定义一个全局命名空间,其他所有functions作为这个对象的属性。这种做法的好处是,所有的名称都集合在了一起,同时在使用多个库的情况下,避免了和其他库的命名空间冲突。
  4. 每一个命名空间都需要使用goog.require()来请求。
  5. goog.partial()和call()的不同在于,goof.partial()中,参数会被直接传递到function内执行。
  6. 在Closure中,object、function、array、string、number、boolean、Null、undefined都有对应的goog.isXXX()来进行判断。
  7. goog.isDef(value) 当value != undefined时返回true,null也是返回true。

各个主要的命名空间

  1. goog.string 包含了对string的处理,主要是string的转义。
  2. goog.array 包含了对数组的操作。
  3. goog.object 包含了对象操作。
  4. goog.json 包含了json的解析和序列化。
  5. goog.dom 包含了DOM元素的获取和操作。
  6. goog.dom.classes 包含了DOM元素的CSS类处理。
  7. goog.userAgent 检测用户useragent。
  8. goog.userAgent.product 检测用户浏览器。
  9. goog.style 包含了DOM元素的CSS样式的获取和设置。
  10. goog.function 包含了function的构建。
  11. goog.events 事件相关的方法。
  12. goog.ui UI控件。

涉及到的一些主要的方法。

  • goog.string.htmlEscape(str,opt_isLikelyToContainHtmlChars)
  • goog.array.forEach() 用来遍历数组中的所有元素。
  • goog.object.get(obj,key,opt_value)
  • goog.object.transpose(obj) 可以返回一个交换了键值和数据的对象。但是如果数据不是string的话,就不会出现在返回的对象中。
  • goog.dom.getElment(idOrElment)
  • goog.dom.getElmentsByTagNameAndClass(nodeName,className,elmentToLookIn)
  • goog.dom.getAncestorElmentsByTagNameAndClass(nodeName,className,elmentToLookIn) 包括元素本身
  • goog.dom.creatDom(nodeName,attributes,var_args) atrributes是一个对象,用来作为创建的元素的属性。如果attributes是string的话,就作为元素的class的值。第三个参数用来创建元素的子元素,可以同时创建多个。goog.creatDom()的返回值是一个node,可以使用在appendChild等方法中。
  • goog.dom.htmlToDocumentFragment(htmlstring) 返回值是node。
  • goog.dom.classes.get(element) 返回包含目标元素的class的数组。
  • goog.dom.classes.has(element,className) 如果目标元素包含相应的类名,返回true,否则返回false。
  • goog.dom.classes.add(element,var_args)
  • goog.dom.classes.remove(element,var_args) 添加或删除目标元素的类。
  • goog.dom.classes.toggle(element,className)
  • goog.dom.classes.swap(element,fromClass,toClass) 如果目标元素含有fromClass这个类,就将它替换成toClass。
  • goog.dom.classes.enable(element,className,enabled) 启用或者禁用元素的特定类。
  • goog.style.getPageOffset(elment) 获取元素相对HTML文档的位置(top和left)。
  • goog.style.getSize(element) 获取元素的高和宽。能够获取隐藏元素的值。包括hidden和display:none的元素。
  • goog.style.getBounds(element) 获取元素的位置信息,包括元素的PageOffset和Size。
  • goog.style.setOpacity(element,opacity) 设置opacity值,0-1,如果是空的话,就会清除opacity值。
  • goog.style.setInlineBlock(element) 设置元素的display属性为inline-block。
  • goog.style.setUnselectable(element,unselectable,opt_noRecurse) 设置文本可不可选。
  • goog.events.listen(eventSource, eventType, listener, [capturePhase, [handler]]) 五个参数分别是绑定事件的DOM对象,触发listener的事件种类(值为string的数组),事件监听器本身,(可选)控制监听器是否仅在捕获阶段被调用,(可选)指定监听器中this代表的对象。