加载DOM
jQuery: $(document).ready(function(){}) 简写 $(function(){})
JS: window.onload(function(){})
差别:1.执行时机 $()在dom加载完成后。
Window.onload()在所有元素完全加载(包括所有图片等)
问题:例如,$()设置图片宽高无效。解决:load()方法,$元素或者$(window)
2.多次使用 js后面定义方法会覆盖前面。 $()不会,多个方法都会执行。
事件绑定
方法一:$元素.bind(‘click’,function(){}) 绑定多个事件 字符串 空格
方法二:$元素.click(function(){})
方法三:$元素.one(‘click’,function(){}) 只会被执行一次
常用事件
Blur |
失去焦点 |
Focus |
获得焦点 |
Load |
已加载 |
Resize |
调整大小 |
Scroll |
滚动 |
Unload |
离开页面时 |
Mousedown |
在元素上按下鼠标时 |
Mouseup |
松开鼠标时 |
Mousemove |
鼠标在元素上移动 |
Mouseover |
鼠标位于元素上 |
Mouseenter |
鼠标穿过(mouseover?) |
Mouseleave |
鼠标离开。和mouseenter一起用 |
Keypress |
分为keydown和keyup |
|
|
Hover |
鼠标移入和移出,两个functions |
Toggle |
多个方法循环执行 |
(比js少了“on”前缀)
阻止事件冒泡:event.stopPropagation() function(event){}
阻止默认行为:evet.preventDefault()
事件属性
Event.type 事件类型 event.target 事件发生元素
event.relatedTarget 事件相关元素,如mouseout到了那个元素
event.pageX event.pageY event.which 触发的鼠标/键盘按钮
event.metaKey ctrl按键
移出事件
Unbind() 1.移出某元素所有事件 2.移出某种事件 3.移除某个事件方法
模拟触发
Trigger() click() triggerHandle() 不执行默认动作
事件命名空间
Click.plugin 就像类选择器? 命名空间选择一类事件 unbind(“.plugin”)
Trigger(“click!”) 叹号将不执行有命名空间的事件
原文:http://www.cnblogs.com/dxiaoer/p/4970249.html