背景:客戶需要,認為3.0之前的版本存在XSS(跨站腳本攻擊)風險,jquery版本需要從當前的1.8.2更新到3.3.1。
查詢了官方文檔,https://www.jquery123.com/category/deprecated/deprecated-3.0/
3.0以后的版本主要棄用的API有:.bind()、.unbind()、.delegate()、.undelegate()、jquery.fx.interval
1.9和1.10版本棄用的API有jquery.support()、.context()
詳細問題:
1、attr和prop
attr:獲取匹配的元素集合中的第一個元素的屬性的值 或 設置每一個匹配元素的一個或多個屬性。
prop:獲取匹配的元素集中第一個元素的屬性(property)值或設置每一個匹配元素的一個或多個屬性。
attr是1.0之后使用的,prop是1.6以后使用的,用法不同,需注意。
在jQuery 1.6中,當屬性沒有被設置時候,.attr()方法將返回undefined。 若要檢索和更改DOM屬性,比如元素的checked, selected, 或 disabled狀態,使用.prop()方法。
版本升級最大改動就在這里,之前的代碼大量使用attr,沒辦法。。。
2、報錯:Uncaught TypeError: url.indexOf is not a function
這個錯誤是由於調用了load函數導致的錯誤
把代碼里調用load函數的方式
//old
$(window).load(function() { ... });
//new
$(window).on('load', function() { ... });
注意:.load(), .unload(), and .error()從jQuery 1.8開始就被廢棄了,換成使用.on()函數來注冊。其實這里應該之前1.8的時候就報錯,可能都沒有注意到,這次正好一次性改完。
3.$.browser用法
jQuery 1.9不再支持$.browser 和 $.browser.version,取而代之的是 $.support。在更新的 2.0 版本中,將不再支持 IE 6/7/8。
當前客戶要求的版本3.0+,肯定是不支持IE6/7/8了,先前我們用的是1.8版本,因此現在所有的$.browser用法都報錯,頁面混亂。
如果要全面支持 IE,並混合使用 jQuery 1.9 和 2.0, 官方的解決方案是加入以下腳本:
<!--[if lt IE 9]>
<script src='jquery-1.9.0.js'></script>
<![endif]-->
<!--[if gte IE 9]>
<script src='jquery-2.0.0.js'></script>
<![endif]-->
從長久來看,這樣有利於在復雜情況下根據瀏覽器特性進行分別處理, 而不是簡單的檢測瀏覽器類型和版本。 但目前很多舊程序的移植恐怕無法直接過渡為根據瀏覽器支持特性, 所以在網上找了一些能夠直接替換的解決辦法。
jQuery1.9之前判斷瀏覽器類型:
$.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase()); //firefox
$.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase()); //webkit內核
$.browser.opera = /opera/.test(navigator.userAgent.toLowerCase()); //opera
$.browser.msie = /msie/.test(navigator.userAgent.toLowerCase()); //IE
等號后面的表達式返回的就是 true/false,可以直接用來替換原來的 $.browser.msie 等。如需要檢查是否為 IE6時,可以這么寫:
// Old
if ($.browser.msie && 7 > $.browser.version)
// New
if ('undefined' == typeof(document.body.style.maxHeight))
檢查是否為 IE 6-8:
if (!$.support.leadingWhitespace) {}
4.$("#id").val(index); 之前1.8.2,當index不存在時會默認選取第一個,升級3.3.1之后,如果不存在不會有默認選項,顯示也是空白。
5.$.post(...). error(function()錯誤回調方法報錯:Uncaught TypeError: $.post(...).error is not a function
原因:$.post()使用連綴.error()方法提示錯誤,連綴方法被.fail()取代