代码改变世界

jquery 1.6

2011-11-23 15:11  俊俊+  阅读(395)  评论(0)    收藏  举报

query 1.6已经发布了，在这个版本中最大的变化就是attr方法。原来我们通过这个方法取得jquery对象的属性。现在升级之后，原来采用attr方法的地方可能会出现问题。

新的attr方法只会取得DOM元素上设置的属性。而不会取得DOM元素内部的属性。比如说：

 

<input type="checkbox" checked="checked"/>

 

在1.6版中，调用方法$(":checkbox").attr("checked")方法将返回"checked"值，而不是true.  而之前的版本则会返回true/false. 如果需要取得DOM的属性的时候，需要调用jquery提供的新方法prop()： $(":checkbox").prop("checked"). 在jquery 1.6中，这样设计应该主要上为了性能方面的考虑！

同时发现jquery的val()方法也许存在bug，就上不能对select元素取其值，取出的结果上undefined。但是官方文档上描述上可以的。

jQuery 1.6 (JavaScript Library) 正式版于2011年5月3日发布.

 

jQuery1.6 官方博客5月3日的最新消息，jQuery 1.6 正式版已经可以下载使用。jQuery 1.6 版本包括了对属性（Attribute）模型的重要重写，还有诸多性能优化。借此机会感谢jQuery开发团队和jQuery错误分类团队的成员。

jQuery 1.6官方： 　　http://code.jquery.com/jquery-1.6.js

　　http://code.jquery.com/jquery-1.6.min.js

 

jQuery 1.6 新变化：

改变:独立处理DOM属性和属性

在大多数情况下,JavaScript开发商DOM节点属性和属性处理一致性好。以前的版本jQuery未作任何区别,但很少有问题,这种做法。:

 
<input type="checkbox" checked />  

在这种情况下,DOM .checked财产被设置为真实但属性值是一个空字符串。在以前的版本,.attr jQuery(“checked ”) 返回 true ,现在返回 ""。

新的 .prop()()和.removeProp方法可以用来修改或删除、调整DOM property accordingly。

 

变化 数据属性框:  

 
<div data-day-now="Monday" />  

在jQuery 1.5,这将会导致数据对象{ day-now: “Monday” }，现在:“星期一”{ }。

jQuery 1.6 版本 遵从 W3C HTML5

Version 1.6 follows the W3C HTML5 规范： { dayNow: “Monday” }。

 

新增加: focus selector

现在能够选择一个元素焦点、例句.

$("input:focus").addClass("focused"); 

新增加: jQuery.holdReady( hold )

$.holdReady(true);   $.getScript("anotherScript.js", function() {        $.holdReady(false);        // ready event can now fire   });  

改进: Relative CSS

修改CSS属性，可以使用相对值.

// move 10px to the right   $("#item").css("left", "+=10px");  

改进: jQuery.map()

现在能够改变地图的性质以及数组元素的物体,例如.

var obj = { p1: 1, p2: 2, p3: 3 };   jQuery.map( obj, function( val ) { ... });  

还有改进: find(), closest() and is()

 

 

jQuery 1.6 目前为beta版本：jQuery 1.6 Beta 1。据称是一个改变有很多的版本。  以下：core.js源码变化 
$(string)：对于超过1024字节[一般为HTML片段]的字符串,不再quickExpr.exec( selector )，避开可能的消耗性能的正则匹配。 
$.noConflic： 执行$.noConflic时，仅在当前$变量为jQuery对象时，才让出$变量，例如在首先引入jQuery后引入其他代码[定义了$为某对象]，再其后执行jQuery.noConflic则不会改变$变量，在之前版本，$为undefined。 
$.map：增加了对非[类]数组对象的map操作的功能： 

$.map(navigator,function(value) {          return value  });

目前jQuery源码没有使用此功能，属于不必要的插件功能。 
$.globalEval：全局环境下执行某段代码  已经改用execScript以及eval的方式了，而不是之前的在head内插入script标记方法，据提交代码的jaubourg称原因有2：  1：firefox 3.*某个版本的异步script存在问题，具体是什么也没有说明  2：去掉不必要的feature-testing：jQuery.support.scriptEval,减少了support.js的18行代码 
$.proxy：gf3提交的代码，改进的地方：  1:增加了参数预设的功能。  2:在jQuery源码[event.js]2处使用$.proxy的地方[作用仅仅是为多个函数添加统一的guid]都不再使用$.proxy，这样，$.proxy函数跟一个插件函数一样。 
不过gf3这次代码提交让api上文档说明的jQuery.proxy( context, name )失效了，此外加了蛋疼的jQuery.support.nativeBind，对此我提交了bug 8893：，john resig在后来修复8893时去掉了jQuery.support.nativeBind,对于参数预设的功能，简化了十多行代码。 
$.each：函数内部改变了for循环的方式，避开IE里document.styleSheets[document.styleSheets.length]bug 
$.inArray:对于$.inArray( elem, array );支持Array.prototype.indexOf，直接使用array的indexOf：

if (array.indexOf) {          return array.indexOf(elem);  }

减少了之前版本重载$.inArray函数的5行代码。 
ready函数:修复BUG：使用api没有说明的以赋值document.onready或document.ready的方式代替ready函数时，会执行2次ready。 
$.parseJSON:支持原生JSON.parse时不再预先处理字符串，提升性能。 
$.sub: 函数内部的函数 jQuerySubclass 的函数名改成了 jQuerySub，少了蛋疼的class。 

 

 

jQuery:通过事件委派一次绑定多种事件，以减少事件冗余

 

 

 

jQuery的最大特色之一就是方法连缀写法，这样的书写方式使得阅读起来更加方便。于是乎，在日常的开发中大量使用连缀写法，而事件方法连缀就是一个特例。若给一个Dom对象使用了绑定了多个事件，便于阅读和书写，习惯了使用连缀写法，但这样的书写方式会造成时间的冗余。

1.事件冗余：多个事件方法中多次调用相同的代码

下面的代码是一个事件方法连缀的写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

jQuery(function($) {
	$('<div id="livetip"></div>').hide().appendTo('body');
	var tipTitle = '';
	$('#mytable').bind('mouseover', function(event) {
		var $link = $(event.target).closest('a');
		if ($link.length) {
			var link = $link[0];
			tipTitle = link.title;
			link.title = '';
			$('#livetip').css({
				top: event.pageY + 12,
				left: event.pageX + 12
			})
			.html('<div>' + tipTitle + '</div><div>' + link.href + '</div>')
			.show();
		};
	}).bind('mouseout', function(event) {
		var $link = $(event.target).closest('a');
		if ($link.length) {
			$link.attr('title', tipTitle);
			$('#livetip').hide();
		};
	}).bind('mousemove', function(event) {
		var $link = $(event.target).closest('a');
		if ( $link.length) {
			$('#livetip').css({
				top: event.pageY + 12,
				left: event.pageX + 12
			});
		};
	});
});

其中第5|6行、第18|19行、第24|25行多次地使用了同样的一段代码去判断事件对象是否存在。这不管是从代码效率还是代码文件大小的方面来说都是不合理的方法。

2.事件委派：一次性绑定多个事件，根据事件类别委派相应的操作

为了更好地优化上面的代码，可以通过事件委派来修改代码，修改后的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

jQuery(function($) {
	var $liveTip = $('<div id="livetip"></div>').hide().appendTo('body');
	var tipTitle = '';
 
	$('#mytable').bind('mouseover mouseout mousemove', function(event) {
	  var $link = $(event.target).closest('a');
	  if (!$link.length) { return; }
	  var link = $link[0];
 
	  if (event.type == 'mouseover' || event.type == 'mousemove') {
		$liveTip.css({
		  top: event.pageY + 12,
		  left: event.pageX + 12
		});
	  };
 
	  if (event.type == 'mouseover') {
		tipTitle = link.title;
		link.title = '';
		$liveTip.html('<div>' + tipTitle + '</div><div>' + link.href + '</div>')
			.show();
	  };
 
	  if (event.type == 'mouseout') {
		$liveTip.hide();
		if (tipTitle) {
			link.title = tipTitle;
		};
	  };
	});
});

该段代码中一次性地将多个事件绑定到一个待处理的DOM对象之上，在代码的内部通过判断事件的类别来委派不同的处理代码。这样可以避免代码的重复定义，以达到避免时间冗余的效果。

以上两种代码的执行后的效果是完全一样的，相信大家一眼就可以看中哪一种代码的执行效率更加的快速吧！

http://jsperf.com/prop-vs-ischecked

Testing in Chrome 10.0.648.134 on Windows Server 2008 R2 / 7
TestOps/sec
.prop()
 
$el.prop('checked');
 ready
.is(':checked')
 
$el.is(':checked');
 ready