博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
锋利的jQuery--jQuery事件,动画(读书笔记二)
阅读量:5168 次
发布时间:2019-06-13

本文共 1283 字,大约阅读时间需要 4 分钟。

1.注意$(document).ready()方法和window.onload方法之间的细微区别
$(document).ready()在DOM树构建完成就会执行,而window.onload是在DOM树构建完成后且相关的文件下载完毕后才会执行。
例如:一个图库页面,且给页面上图片绑定了事件
$(document).ready()就会在图库页面的DOM结构完成就会执行,但这时候页面上面图片还没下载完毕,给图片绑定的事件也就不能起作用。这时候如果要获取图片的宽高就会失败。
 
为了解决这个问题:可以使用jQuery中的:
    $(window).load(function(){})
 
这个函数类似于JavaScript中的:
window.οnlοad=function(){}
 
而window.onload是在所有图片下载完成后才会执行并且绑定事件。缺点是影响页面加载速度。
 
 
2.jQuery的is()与next()
 
3.事件冒泡
 
span的click冒泡到div的click,div的click冒泡到body的click。
有时候这种冒泡如果不是你想要的话,情况会比较恶劣。
因为你触发了span的点击事件也就会触发div的,触发body的。
 
jQuery中阻止冒泡的方法:
even.stopPropagation();
 
jQuery中阻止默认的行为:
even.preventDefault();
 
同时阻止冒泡与默认行为:
return false;是一种简写。
 
3.事件对象的属性
event.type()
event.stopPropagation()
even.preventDefault();
event.target();
event.relatedTarget();
event.pageX()/event.pageY()
event.which();
event.metaKey();
event.originalEvent();
 
4.模拟事件操作
 
<1>$("#but").trigger("click");
$("#but").click();
模拟了点击行为。
 
<2>trigger不仅可以触发浏览器支持的事件,还可以触发自定义事件
$("#but").bind("zqzClick",function(){
    alert("这是zqz的自定义事件");
});
$("#but").trigger("zqzClick");或
$("#but").zqzClick(); ---------不知道这样写行不?
 
<3>trigger绑定数据
 
<4>triggerHandler()
 
<5>bind()可以绑定多个事件
 
<6>添加事件命名空间,便于管理
删除的时候只会删除命名空间下的。
 
<7>停止动画
$(this).stop(true)
//判断元素是否处于动画状态。if(!$(element).is(":animated")){    }

 

 
 
 

转载于:https://www.cnblogs.com/zqzjs/p/4934543.html

你可能感兴趣的文章
[模板]匈牙利算法(二分图匹配)
查看>>
C#通用JSON帮助类
查看>>
c# winform窗口自适应各种分辨率类
查看>>
前端Js框架汇总
查看>>
Android基础&进阶
查看>>
android的listview单项中包含RadioButton,实现RadioButton的单选显示效果
查看>>
Android学习笔记一:Android基本组件和Activity生命周期
查看>>
2016、11、17
查看>>
部署Java Web项目到Heroku
查看>>
VUE Error:if there's nested data,rowKey is required错误
查看>>
学习笔记7
查看>>
C# 中 动态获得或设置一个对象的值
查看>>
C#设计模式系列 8 ----Builder 生成器模式之--发工资了,带老婆到 岗顶百脑汇配置电脑...
查看>>
spring-boot-资源处理
查看>>
phpcms v9二次开发之模型类的应用(2)
查看>>
多线程之异步操作
查看>>
C++ 指定输出宽度和填充
查看>>
ImageX分块处理和保存
查看>>
解决百度BMR的spark集群开启slaves结点的问题
查看>>
bzoj 1861 treap
查看>>