文章目录

• jQuery事件
• 注册
• 只处理单个事件
• 可处理多个事件

• 尺寸
• 位置

jQuery事件

注册

只处理单个事件

$(\"selector\").event(function(){ codeblock});//其中，event代表事件

可处理多个事件

$(\"selector\").on({event1: function(),event2: function()});//event1和event2代表不同的事件做不同的行为$(\"selector\").on(\"event1 event2\",function(){});//不同的事件触发相同的行为

处理

实现事件委托：

$(\"父元素\").on(\"event\",\"子元素\",function(){});//将事件绑定在父元素上，由子元素来触发

需要注意的是单个事件绑定不了动态创建的元素，而on可以给未来动态创建的元素绑定事件。
解绑：

$(\"父元素\").off(\"event\",\"子元素\");//移除通过on绑定的事件

只触发一次事件：

$(\"selector\").one(\"event\",function(){});//触发一次后就失效

自动触发事件：

$(\"selector\").trigger(\"event\");$(\"selector\").triggerHandle(\"event\");//自动触发事件，并且不会触发事件的默认行为

对象

$(\"selector\").on(\"event\",function(even){even.stopPropagation();	//阻止事件冒泡});//event代表着事件，even代表事件对象

对象拷贝：

$.extend([deep]),target,[object1...]);//deep为true为深拷贝，target为目标对象，object为被拷贝的对象

多库共存：为了让jQuery库和其他库同时使用时不发生冲突。解决方案有两种，第一种是将$换成jQuery;第二种如下：

var n = $.noConflict();//让jQuery释放对$的控制权，由用户自己决定

尺寸和位置操作

尺寸

只设置或获取元素的宽高，不包含边距边框：

$(\"selector\").width();

包含内边距：

$(\"selector\").innerWidth();

包含内边距和边框：

$(\"selector\").outerWidth();

包含内外边距和边框：

$(\"selector\").outerWidth(true);

位置

设置或获取偏移，与文档有关，与父级无关：

$(\"selector\").top;//获取头部偏移$(\"selector\").left;获取左部偏移$(\"selector\").offset({top: number,left: number});//设置偏移

获取距离带有定位的父级的偏距：

$(\"selector\").position();

获取元素被卷去的头部或左部：

$(window).scroll(function(){$(document).scrollTop();//被卷曲的头部$(document).scrollLeft()//被卷去的左部});

总结

jQuey的基础知识大概就这些了（另外还有一些很好玩又实用的插件，比如瀑布流，图片懒加载和全屏滚动等），但死记硬背这些知识是不够的，我们必须要学以致用，所以下一期的内容将会是使用jQuery完成todoList的所有功能，fighting！！！