JQuery 备忘

Posted 2020-09-22 cjlalala

一、.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( )

　　清空元素内的所有后代元素。