jQuery 3.0 的變化及使用方法
jQuery ，是迄今為止世界上最流行的 JavaScript 庫，一直是我們這些 Web 開發(fā)者的神器。自從它在 2006 年發(fā)布最初版本直到如今，已經(jīng)有非常多的 Web 開發(fā)者在項目中引入了這個優(yōu)秀的庫來使開發(fā)工作變得更輕松。
時隔 3 個月，jQuery 團隊終于發(fā)布了 3.0 Alpha 版本。有兩個版本 jQuery compat 3.0 和 jQuery 3.0。
•jQuery compat 3.0 對應(yīng)之前的 1.x， 兼容更多的瀏覽器，對于IE支持到 8.0 版本
•jQuery 3.0 對應(yīng)之前的 2.x，關(guān)注更新的瀏覽器，對于IE支持到 9.0 版本
此外， 3.0還增加了對 Yandex 瀏覽器的支持，一款來自俄羅斯的瀏覽器。
1、簡化了 show/hide
之前的 show/hide 是大兼容，比如 show， 無論元素的 display 是寫在style，stylesheet里都能顯示出來。3.0 則不同了，寫在 stylesheet 里的 display:none 調(diào)用 show 后仍然隱藏。 3.0 建議采用 class 方式去顯示隱藏，或者完全采用 hide 先隱藏（不使用css代碼），再調(diào)用 show 也可以。
<style>
input {
display: none;
}
</style>
<input id="txt" type="text" value=""/>
<script>
$('#txt').show(); // 仍然隱藏的狀態(tài)
</script>
2、data 方法兼容 data-name-11 寫法
<input id="txt" type="text" value="" data-name-11="aa"/>
<script>
// 3.0 版本 輸出 {"name-11": aa}， 之前版本輸出 {}
$('#txt').data()
</script>
這個問題本質(zhì)是$.camelCase方法的實現(xiàn)差異
// 3.0 輸出 "name-11", 3.0 之前版本輸出 "name11"
$.camelCase('data-name-11')
3、derferred 兼容了 Promise/A+
3.0 終于可以自信的宣告支持 Promise/A 了，之前一直被詬病是閹割版的。
4、$.ajax 對象刪除了 success | error | complete 方法
這是因為 Promise/A 規(guī)范的推動，大家對 Promise 的使用越來越多，之前對應(yīng) Derferred 上的幾個方法沒有存在的必要了
•derferred.done -> jqXHR.success
•derferred.fail -> jqXHR.error
•derrerred.always -> jqXHR.complete
// 以下方法在 3.0 后沒有了 $.ajax().success $.ajax().error $.ajax().complete
5、width/height，css(width) / css(height) 的返回值一律是十進制
之前部分瀏覽器特殊情況下返回浮點數(shù)。
6、 移除了注冊事件的快捷函數(shù) load | unload | error
•load 名稱和 ajax load 同名， 含糊不清。
•unload 如果 load 去掉， unload 也沒有存在的意義了。
•error 采用 window.onerror 注冊，不是一個標(biāo)準(zhǔn)事件 hander，因此也建議移除
以上內(nèi)容給大家總結(jié)了jquery3.0的變化，下面主要給大家介紹jquery3.0更新內(nèi)容及使用方法。
顯示和隱藏
主要的改變是函數(shù)將如何工作的。而且有很好的理由這樣做。在早些實現(xiàn)上，hide() 函數(shù)設(shè)置 css 屬性為“display:none”，show() 函數(shù)是清除這個屬性。但是這樣做有些混亂。讓我們看看幾個例子：
1. 如果當(dāng) show() 函數(shù)嘗試設(shè)置一個節(jié)點為“display:block”而在另外一個樣式表里實現(xiàn)了“display:inline”屬性，這將開始破壞代碼。
2. 當(dāng)我們?yōu)槊劫|(zhì)處理響應(yīng)式網(wǎng)頁設(shè)計時（RWD），我們也許會用“display”或者“visibility”改變節(jié)點的可見性。這可能會影響“show()”和“hide()”函數(shù)。
除了這些，還有很多 JQuery 團隊不得不去修復(fù)的其它問題。這導(dǎo)致了復(fù)雜的實現(xiàn)和性能問題，因此他們遷移到一個簡單的模型。
今后，如果你設(shè)置“display:none”和使用“show()”，“slideDown()”，“fadeIn()”或者類似的方法去顯示節(jié)點，它不會有效。更好的方法是使用“addClass()”和“removeClass()”控制顯示。或者可以在“ready()”調(diào)用的時候在元素上調(diào)用“hide()”。
迅速舉個例子：
<!DOCTYPE HTML><html>
<head>
<style>
.invisible{
display: none;
}
.visible{
background-color: deepskyblue;
display:block;
}
</style>
<script src="jquery-3.0.0-alpha1.js"></script>
<script>
$(document).ready(function(){
$("#div1").addClass("invisible");
$("#toggle").click(function(){
$("#div1").removeClass("visible");
$("#div1").addClass("invisible");
});
});
</script>
<title>Control Visibility</title>
</head>
<body>
<p>Hello!</p>
<div id="div1">Can you see this?</div>
<button id="toggle">Click me</button>
</body> </html>
.data() Key 的命名規(guī)則
jQuery 團隊改變了 .data() 函數(shù)的實現(xiàn)來更符合 HTML5 數(shù)據(jù)集規(guī)范。如果 data-* 屬性中的 key 包含了數(shù)字，該數(shù)字將不再參與轉(zhuǎn)換。思考下面的例子：
使用 jQuery 2.1.4：
控制臺窗口不顯示對象。
使用 jQuery 3.0.0：
由于現(xiàn)在數(shù)字不會參與轉(zhuǎn)換為駱駝拼寫法，key 被轉(zhuǎn)換成了 foo-42-name。因此，我們得到了控制臺中的輸出。這個 fiddle 的網(wǎng)址是 http://jsfiddle.net/nWCKt/25/ 。你可以更改 jQuery 的版本來觀察變化。
同樣，如果我們想要不帶任何參數(shù)地使用 data() 顯示所有的數(shù)據(jù)，如果 data-* 屬性的 key 名在連字符（-）后面接了一個數(shù)字，則參數(shù)的數(shù)量也將會在兩個 jQuery 版本中改變，就像上面的例子一樣。
width() 與 height() 函數(shù)返回小數(shù)值
一些瀏覽 器會將寬度和高度返回為亞像素值?，F(xiàn)在無論瀏覽器是否支持， jQuery 的 .width()、.height()、.css("width") 都可以返回小數(shù)值了。對于為了使用 亞像素精度來 設(shè)計網(wǎng)頁的用戶來說，這可能 會是一個好消息。
.load()、.unload()、及 .error() 函數(shù)被移除
這些方法早先已經(jīng)不贊成使用了，現(xiàn)在則已經(jīng)從 jQuery 3.0.0 alpha 版中被移除。推薦的方法是使用 .on() 函數(shù)來處理這些事件。簡短示例：
HTML：
<img src="space-needle.png" alt="Space Needle" id="spacen">
JavaScript：
早先的實現(xiàn)方式（現(xiàn)已不可用）
$( "#spacen" ).load(function() {
// Handler implementation
});
推薦的實現(xiàn)方式：
$( "#spacen" ).on( "load", function() {
// Handler implementation
});
jQuery 對象現(xiàn)在可遍歷了
現(xiàn)在已經(jīng)可以遍歷 jQuery 對象了，使用 ES2015 的 for-of。所以，你可以像這樣使用：
for ( node of $( "<div id=spacen>" ) ) {
console.log( node.id ); // Returns ‘spacen'
}
jQuery 動畫現(xiàn)在在后端使用了 requestAnimationFrame API
所有現(xiàn)代的瀏覽器都已經(jīng)支持了 requestAnimationFrame（參見： http://caniuse.com/#search=requestAnimationFrame ）了。由于其被普遍支持，jQuery 將會使用此 API 來執(zhí)行動畫。其優(yōu)勢包括更流暢的動畫及更少的 CPU 占用（因此，可以在手機上節(jié)約電量）。
增強 .unwrap() 函數(shù)
.unwrap() 函數(shù)可以讓你在 DOM 中刪除指定元素的父元素，早先不能接收參數(shù)。如果有人想給 unwrap 設(shè)定一個條件，這可能是個問題。
在 jQuery 3.0.0 alpha 中，.unwrap() 可以接收 jQuery 選擇器做為參數(shù)來處理這個問題。
jQuery.Deferred 升級為 Promises/A+ 兼容
Promiseis是一個異步操作的最終結(jié)果——它是一個對象，承諾在未來交付結(jié)果。 和promise接口的最主要方式是then方法， 它注冊了回調(diào)函數(shù)?，F(xiàn)在，在JavaScript中使用Promise來完成異步工作變得日益流行。Promises/A+是一個兼容JavaScript promises的開放標(biāo)準(zhǔn)。 (想要更多的信息，可以查看鏈接: https://promisesaplus.com/ )
從jQuery的參考文檔中，Deferred對象是一個由jQuery.Deferred()方法創(chuàng)建的可鏈接實用對象。它可以注冊多個回調(diào)函數(shù)放入回調(diào)函數(shù)隊列中、調(diào)度這個隊列、更新任何同步或異步方法的成功和失敗狀態(tài)。在jquery 3.0.0中，jQuery.Deferred對象升級成與Promises/A+和ES2015 Promises兼容。 這就是.then()方法的主要變更。
更好地處理錯誤情況
這個版本的 jQuery 能更好地處理錯誤 —— 錯誤請求過去一直是被忽略的，直到現(xiàn)在的版本才會拋出錯誤。
舉例來說：考慮到 offset，要獲取當(dāng)前第一個元素的坐標(biāo)，相對于文檔來說，就要匹配集合中的元素。如果你正試圖在 jQuery 的早期版本找到抵消的窗口（window），你會得到{top: 0, left: 0}這樣的結(jié)果，而不是拋出一個錯誤，這是因為抵消窗口（window）是無意義的。而在 3.0 alpha 版本中，它就會拋出一個錯誤。
另外一個例子：$("#") 現(xiàn)在會拋出一個錯誤，而不是返回一個長度為 0 的集合。
對自定義選擇器（如 :visible ) 進行了加速
當(dāng) :visible 之類的選擇器在一個文檔內(nèi)多次使用時，性能得到了很大的提升。其內(nèi)部是通過緩存來實現(xiàn)的 —— 第一次用過這個選擇器后，以后返回結(jié)果都是一樣的。但是其后的每一次調(diào)用返回結(jié)果都很快，因為緩存起作用了。來自 jQuery 的 Timmy Willison 在 報告 中指出使用緩存后 :visible 選擇器的性能提升了 17 倍。
這些都是一些主要的更新。整個列表在他們的官方博客： http://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/ .
在哪里下載最新版本
有兩個版本：
jQuery 3.0，其支持了現(xiàn)代瀏覽器： https://code.jquery.com/jquery-3.0.0-alpha1.js
jQuery Compat 3.0，其包含了對 IE8 的支持： https://code.jquery.com/jquery-compat-3.0.0-alpha1.js
也可以從 npm 中獲?。?/strong>
npm install jquery@3.0.0-alpha1 npm install jquery-compat@3.0.0-alpha1
相關(guān)文章
本篇文章主要介紹了jQuery之動畫效果，詳細(xì)的介紹了各種動畫特效的用法，有需要的可以了解一下，希望能夠給你帶來幫助2021-11-11
本文整理了一些常用的特效示例，如：.jQuery fadeIn() 用于淡入已隱藏的元素、jQuery fadeToggle()方法可以在 fadeIn()與 fadeOut()方法之間進行切換等等，感興趣的朋友可以參考下哈2013-06-06
jQuery之所以如此流行并被從大公司到個人博客的幾乎每個人都廣泛使用，是因為它上手和使用相當(dāng)簡單，而且為我們提供了一些人都不知道的相當(dāng)棒的特性。2010-01-01
這篇文章主要介紹了頁面內(nèi)容排序插件jSort使用方法，需要的朋友可以參考下2015-10-10
jquery中快速取值的方法有很多，在本文為大家介紹下通過name實現(xiàn)快速取值，感興趣的朋友可以參考下2014-01-01
jquery基礎(chǔ)知識第一講之認(rèn)識jquery
jquery基礎(chǔ)知識第一講之初次見面，對jquery有一個初步認(rèn)識，為之后的學(xué)習(xí)打下基礎(chǔ)，感興趣的小伙伴們可以參考一下2016-03-03
本文給大家匯總介紹了幾個常用的jquery實現(xiàn)簡易的移動端驗證表單，非常的實用，有需要的小伙伴可以進來參考下。2015-11-11
這篇文章主要介紹了Jquery簡單分頁實現(xiàn)方法,實例分析了jquery分頁的相關(guān)實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章通過實例代碼給大家講解了jquery替換節(jié)點元素的操作方法及動態(tài)頁面的實現(xiàn)代碼，非常不錯，需要的朋友參考下吧2018-03-03
jQuery Lightbox（balupton版）圖片展示插件demo2010-04-04