ready 方法
1.
$(document).ready(function(){
})
简写方式
$(function(){
});
2.ready() 和 window.load 的区别
(1) ready() 在 DOM 结构加载完成之后马上执行;window.load 在网页上所有元素全部载入成功后,
才执行。列入:图片展示类网站,可能存在 css文件,js 文件,html 文件和大量的图片文件
(2)同一个网页中,可以写多个 ready(),但是只能有一个生效的window.load
jQuery 事件方法
- blur([[data],fn]) $(':text').blur(function(){});
- change([[data],fn]) $(':text').change(function(){});
- keyup([[data],fn]) $(':text').keyup(function(){var value=$.trim($(this).val()); if(value == 'laodai') { $('#out').text('....')}else{$('#out').text('***')}}) 每当输入完成一个字符的时候就判断一次
- mouseover([[data],fn]) $('div:last').mouseover(function(){})
jQuery 事件切换
hover([over,]out)
$('div:last').hover(function(){
//移动到上面的时候
},function(){
//移除鼠标的时候
});
toggle(fn1,fn2[,fn3...]) 触发点击事件
$('#out').toggle(function(){
第一次
},function(){
第二次
},function(){
第三次
},function(){
第四次
});
1.javascript 事件流知识
按一定顺序决定一个事件到底由哪个节点接受,这就是事件流
目前支持的两种事件流:事件冒泡、事件捕获
2.事件冒泡与事件捕获
1)事件冒泡:
最早由 IE 实现,目前主流的浏览器都支持
具体含义:最具体的节点,最早接收到事件;然后逐级向上传播到不太具体的节点
2)事件捕获:
最早由 Netscape 提出,除 IE 外,其他主流浏览器都支持
具体含义:不太具体的节点首先接收到事件,最具体的节点最后接受到事件
3)jQuery 的事件流处理方案:
出于兼容性的考虑,jQuery 始终会在模型的冒泡阶段注册事件处理函数
也就是说,总是最具体的元素会首先获得响应事件的机会
3.jQuery 事件对象
- eve.currentTarget 在事件冒泡阶段中的当前DOM元素
- $('div').click(function(event){
- var id = event.currentTarget.id;
- alert(id);
- })
- eve.data 当前执行的处理器被绑定的时候,包含可选的数据传递给jQuery.fn.bind
- var mydata = {name:'', gender:''}
- $('#phpchina').click(mydata , function(event){
- var str = event.data.name; //直接访问 mydata 的属性值
- alert(str);
- //全局版本,处理函数内部使用了外部定义的变量名
- //降低了可维护性
- alert(mydata.name);
- });
- eve.namespace
- eve.pageX 鼠标相对于文档的左边缘的位置
- eve.pageY 鼠标相对于文档的顶部边缘的位置
- eve.relatedTarget 在事件中涉及的其它任何DOM元素
- 对于 mouseout 事件,它指向被进入的元素;对于 mousein 事件,它指向被离开的元素
- $('#phpchina').mouseover(function(event){
- alert(event.relatedTarget.id);
- });
- eve.result
- eve.target 最初触发事件的DOM元素
- $('div').click(function(e){
- var id = e.target.id;
- alert(id);
- })
- eve.timeStamp 获取时间戳
- $('#phpchina').click(function(event){
- var time = event.timeStamp;
- alert(time);
- })
- eve.type alert(event.type) 点击所有锚点后弹出事件类型
- eve.which alert(event.which) 针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键或按钮
- eve.isPropagationStopped() 根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值
- eve.stopPropagation() 防止事件冒泡到DOM树上,但是不阻止事件行为
- eve.preventDefault() 阻止默认事件行为的触发,但是冒泡了
- eve.stopImmediatePropagatio() 阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上
4.jQuery 事件处理方法