JQuery 備忘
一、.on() .bind() .delegate() .live()的區別
jquery 1.7之後建議綁定事件用 .on( ),移除事件處理函數用 .off( )
$(selector).bind(event,data,function);
$(selector).live(event,data,function); //jquery1.9版本以下支持,jquery1.9及其以上版本刪除了此方法
$(selector).delegate(childSelector,event,data,function)//jquery1.4.2及其以上版本;1.7版本之後被 .on()替代
$(selector).on(event,childselector,data,function ); //jquery1.7及其以上版本;jquery1.7版本出現之後用於替代上述三種綁定事件方式;
(1) .bind( )
.bind( )是直接綁定在元素上,而且當使用 bind 時,該元素必須是已經存在的。
如果不人為的設置stopPropagation(Moder Browser), cancelBubble(IE),那麽它的所有父元素,祖宗元素都會受之影響;
(2) .live( )——1.7版本已刪除
將委托的事件處理程序附加到一個頁面的 document 元素而不是像 .bind( ) 給所有的元素挨個綁定;
那些動態添加的元素依然可以觸發那些早先綁定的事件,因為事件真正的綁定是在document上;
舊版本的jQuery中用戶,應優先使用 .delegate( )來取代 .live( )。
(3) .delegate( )
當使用 delegate 時,該元素可以是未來才存在的。
delegate是將事件註冊到已經存在的document,當發生click事件時,只需要匹配#objId是否跟觸發的對象一致,一致即執行函數。
(4) .on( )
.on( )是最新的1.9版本整合了之前的三種方式的新事件綁定機制。
二、.attr( ) 和 .prop( )的區別
對於一些屬性,有的瀏覽器只要寫disabled,checked就可以了,而有的要寫成disabled = "disabled",checked="checked",比如用attr("checked")獲取checkbox的checked屬性時選中的時候可以取到值"checked",但沒選中獲取值就是undefined。
jq提供新的方法“prop”來獲取這些屬性,就是來解決這個問題的,使用prop方法獲取checked屬性則統一返回true和false。
那麽,什麽時候使用attr(),什麽時候使用prop()?
1.添加屬性名稱該屬性就會生效應該使用prop();
2.是有true,false兩個屬性使用prop();
3.其他則使用attr();
官方建議attr(),prop()的使用:
三、.remove( ) .detach( ) .empty( )的區別
(1) .remove( )
用remove()刪除節點後,此節點以及所有後代節點同時刪除。該方法返回值是一個指向已被刪除的節點。
除了這個元素本身得以保留之外,其他的比如綁定的事件,附加的數據等都會被移除。
(2) .detach( )
與remove()的區別是仍然保留其綁定的數據。
(3) .empty( )
清空元素內的所有後代元素。
JQuery 備忘