Home » jQuery 資源

jQuery 1.6 火辣辣登場囉!!


前幾天(2011/05/03)上完課後有收到 jQuery 官方Twitter 發佈了 1.6 版的訊息。其中有幾點會造成程式不相容的改變是需要特別注意的。

jQuery 1.6 下載位置
正常版本:http://code.jquery.com/jquery-1.6.js
壓縮版本:http://code.jquery.com/jquery-1.6.min.js

GoogleMicrosoft 一樣都有提供了 CDN 服務:
Googlehttps://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js
Microsofthttp://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js

jQuery 的大多數版本中的功能都是能相容舊版的程式。但在少數情況下可能會針對現有的程式來修改而導致不相容,所以各位在使用時要特別注意一下。

不相容的部份
1..data()1.5 中支持以 data- 型式的屬性,例如 data-max-value 在存取時的 key 會是 max-value,轉成 JSON 後得到的會是 { max-value: 15 };但在 1.6 中則依 HTML5 規格更新成駱駝式(camel-casing)的寫法為 { maxValue: 15 }。

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
<div id="d" data-max-value="15"></div>
 
<script type="text/javascript">
$(function(){
	for(var k in $('#d').data()){
		document.write(k + "=" + $('#d').data(k));
		// 1.5 時是輸出 max-value=15
		// 1.6 後是輸出 maxValue=15
	}
});
</script>

2.增修了 .prop(), .removeProp().attr() 等函式。先以常見的 checkbox 為例來看:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<input id="c" type="checkbox" checked="checked">
<label for="c">Check me</label>
<p></p>
 
<script type="text/javascript">
$(function(){
	$('#c').change(function() {
		var $input = $(this),	
			c = document.getElementById("c");
		$('p').html(
			'<b>以下為存取設定在 HTML 元素上的屬性</b><br>'
			+ '.getAttribute("checked"): <b>' + c.getAttribute("checked") + '</b><br>'
			+ '.attr("checked"): <b>' + $input.attr('checked') + '</b><br><br>'
			+ '<b>以下為存取元素內建的屬性</b><br>'
			+ '.checked: <b>' + c.checked + '</b><br>'
			+ '.prop("checked"): <b>' + $input.prop('checked') + '</b><br>'
			+ '.is(":checked"): <b>' + $input.is(':checked') ) + '</b>';
	}).change();
});
</script>

1.6 輸出的結果是:

1
2
3
4
5
6
7
8
以下為存取設定在 HTML 元素上的屬性
.getAttribute("checked"): checked
.attr("checked"): checked
 
以下為存取元素內建的屬性
.checked: true
.prop("checked"): true
.is(":checked"): true

1.6 以前輸出的結果是:

1
2
3
4
5
6
7
8
以下為存取設定在 HTML 元素上的屬性
.getAttribute("checked"): checked
.attr("checked"): true
 
以下為存取元素內建的屬性
.checked: true
.is(":checked"): true
*1.5 沒有 .prop() 函式

從上面的範例來看,在 1.6 以前優先找元素內建的屬性,當找不到時才會找設定在 HTML 元素上的屬性。不過 1.6 則是 .attr() 只針對存取設定在 HTML 元素上的屬性;而 .prop() 則是針對元素內建的屬性來存取。所使用 .attr() 來存取在 HTML 中沒設定的屬性時,是會回傳 undefined 的

新增及加強
1.6 中主要是針對 Bug Report 的內容來修改,同時也順便加強了一些相關的功能。像是 .attr(), val().data() 在執行時的效能也有所加強(圖片來源: jQuery Blog):









2..attr().val() 中新增了事件的處理(attrHooks, valHooks),可以讓開發者更容易的針對存取屬性跟表單值時加入事件的處理。各位可以試試下面兩段程式的結果:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
<input id="c" type="checkbox">
<label for="c">Check me</label>
<p></p>
 
<script type="text/javascript">
$(function(){
	$('p').html('checked: ' + $('#c').attr('checked'));
	// 依 1.6 新的 .attr() 處理方式, 會輸出 checked: undefined
});
</script>

使用 .attrHooks:

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<input id="c" type="checkbox">
<label for="c">Check me</label>
<p></p>
 
<script type="text/javascript">
$(function(){
	jQuery.attrHooks.checked = {
		get: function( elem ) {
			return jQuery.prop(elem, "checked");
		}
	};
 
	$('p').html('checked: ' + $('#c').attr('checked'));
	// 因為加入 .attrHooks.checked, 所以會輸出 checked: false
});
</script>

.valHooks 的用法同 .attrHooks

2.jQuery.map() 現在可以把 JavaScript 物件中的屬性一一加到陣列中。

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(function(){
	var counts = { first: 1, second: 2 };
 
	counts = jQuery.map( counts, function( value ) {
		return value + 1;
	});
 
	for(var i=0;i<counts.length;i++){
		alert(counts[i]);
	}
});

3..css() 也跟 .animate() 一樣可以依現在的值來做相對(+=, -=)的處理了。

檢視原始碼 JavaScript
1
2
3
4
$(function(){
	$('#d').css('left', '+=10px');
	// 依現在的 left 值再多加 10px
});

4.針對 Deferreds 物件新增了兩個函式:.always() 可以用在當不管成功或失敗都要執行同一個函式時的寫法;.pipe() 則是用在簡化當要串多個非同步作業時的寫法。

5.利用瀏覽器內建的 requestAnimationFrame 來提升動畫時的效能。同時也跟 $.ajax() 一樣能使用 Deferreds 物件來串接動畫。

6.提供了 jQuery.holdReady(hold) 可以暫停及恢復 .ready() 事件的執行,主要是用在外掛開發使用。

檢視原始碼 JavaScript
1
2
3
4
5
6
$(function(){
	$.holdReady(true);
	$.getScript("myplugin.js", function() {
		 $.holdReady(false);
	});
});

7.:focus 選擇器已確定能在各瀏覽器中正常使用。

檢視原始碼 JavaScript
1
$("input:focus").addClass("active");

8..find(), .closest().is() 原本只能接受選擇器(Selector)而已,在 1.6 中也能接受 DOMjQuery 物件當參數。

檢視原始碼 JavaScript
1
$("div").find($(".test"))

更多詳細的更新內容可以在 JQUERY 1.6 RELEASED 中看到完整的說明,同時可以在 New or Changed in 1.6 中看到在 1.6 版中新增或是擴充的函式。

不過當我們還在消化新功能的同時,jQuery 官方 也已經在著手 1.7 的改版了XD。

2 筆針對 jQuery 1.6 火辣辣登場囉!! 的迴響

發表迴響