jQuery 1 5 1 7一些值得注意的更新

2022-02-23 11:58:24 字數 2896 閱讀 9220

jquery公升級的速度越來越快,很容易如果你沉浸在專案中一段時間你就發現原來又跳了幾個小版本了。

1.4以後有哪些值得關注的呢,簡單整理了一下,至於是1.5, 1.6還是1.7的,我也就不特別標註了

1,attrhook和valhooks

開始錯誤理解了這兩個鉤子的作用,後來發現它不是針對特定元素繫結的,那麼這應該是核心級別的,我們用的可能性小。

當然你可以在事件裡判斷是否特定元素,達到繫結特定元素的作用,但這樣明顯沒多大意義了,同時,1.7中例中的程式居然不生效了,pass吧

//被修改的元素:darkthread 

//演示乙個叫mydata的自定義屬性勾子

//監聽mydata的值,是數字文字變紅,非數字就變綠

$.attrhooks.mydata =

} settimeout(function(), 2000);

settimeout(function(), 4000);

//同樣的,你可以監聽別的狀態如$.attrhooks.checked

2,deferred系列

這是乙個相當大的改動,deferred是jquery提供的乙個延遲執行的類佇列物件,因為引入了這一物件,很多執行有時長的函式紛紛把返回值變成了deferred物件,比如ajax和animation.

我們先看這一系列用法:$.when().done().fail().then()

html**:

測試多個執行,最後乙個完成後得到結果

v1:v2:

全部ajax請求結束後才啟用此按鈕

js**

$("#snd").click(function()); 

var sum=0;

//幾個測試的ajax請求,每乙個完成後把返回值相加,所有請求完成後才啟用之前禁用的按鈕

var a1=$.get(url,,function(d));

var a2=$.get(url,,function(d));

$.when(a1,a2).done(function(a1,a2))

.fail(function(jxhr,errtype,errmsg));

});

php**:

<?php 

sleep(1);

if(isset($_get["v"]))

echo "1";

?>

結果如下,注意done方法中的引數a1,a2

另乙個例子,由於號稱animation也具有了deferred的屬性,所以我測試過直接將動畫函式用deferred物件的一些函式拼接起來,但是失敗了,結果還是要像普通函式一樣把它包在deferred物件裡面

測試內容:乙個紅色方塊,點選其就開始移動,然後復位。

html**:

js**:

$("#obj").click(function(),1000);})//用的是pipe方法拼接 

.pipe(function(),1000);})

.done(function());

}).resolve();

});

上例中可以看到,引入了deferred物件後,做鏈式動畫稍稍方便了那麼一些,不再要一層一層地套到每個動畫的callback裡面去。

例中的用法是new乙個新的deferred物件,引數就是需要執行的方法,該方法的第乙個引數就是new出來的物件本身。

當然deferred的深入用法建議放狗搜尋專門討論的文章。

3,$.map()開始支援「物件」而不僅僅是陣列,如json物件

4,prop和attr的插曲

1.5中有個改動,將selected, checked等屬性的attr方法取得的值不再返成布林型別,而是原生的字串(為了與原生html保持一致),同時為了程式設計方便,提供了prop方法來取得布林值,這本無可厚非,但關鍵在於無數基於1.5版以前的專案,涉及到此處變動的地方相當相當之多,因為引起了強烈的**,結果在1.6中,就採用了折衷的方案:

取值,1.5版的做法會失效,但是設定的時候,則兩種相容,示例

alert($("#a").attr("checked"));//undefined 

alert($("#a").prop("checked"));//true/false

版下面兩句均作用

$("#a").attr("checked",true);

$("#a").prop("checked",false);

5,delegate進一步進化

1.4中推出的delegate據說比live更有效率,實測(比如綁上幾萬個元素)可以得到證明,因此會將下例中的寫法a改為寫法b:

$("#t td").live("click",handler);//a

$("#t").delegate("td","click",handler);//b

//只是應用的時候相信大家會得有點彆扭,因為第乙個引數傳事件名可能更符合使用習慣,因此在1.7中又新出乙個新的api on/off,分別對應事件的繫結和解綁,功能上等同於delegate,只是引數風格上與普通的live靠近了,於是b寫法在1.7中可以寫成下面的c寫法:

$("#t").on("click","td",handler);//c

jquery一些方法

1,追加元素 prepend 在被選元素的開頭插入內容 after 在被選元素之後插入內容 before 在被選元素之前插入內容 引數可以為string 也可以為html 2,離開頁面時,提示 不是jquery方法 3,選擇元素 匹配id以aaa開頭 select id aaa 匹配id以aaa結尾...

jQuery一些筆記

如果想用新版本可把版本號刪除,它會自動獲取最新版本。如 1.8則返回1.8.0 1.8.9,如果只剩1則會返回1系列最新版本最低到1.9.9 在jquery中 document ready function 這是為了防止文件未載入完全就執行了jquery 是jquery 的簡寫 getelement...

一些jquery技巧

window.nl ad function document ready function 相當於 function foo html 相當於 document.getelementbyidx x foo innerhtml jquery 物件轉換成 dom物件 第一種方法 var cr cr jq...