不写完不让回家的JQuery的事件与动画
在这看不见太阳的小黑屋里，苦逼的一天又开始了
好了闲话我也就不扯了，接下来我就来说说我对jQuery事件和动画的理解吧!!!
还是得再扯两句,我们敬爱的,Y老师讲完了,jQuery事件和动画,对着我们这听得一脸懵逼的人,说了一句不写完就别回家,心里咯噔一下,比被车撞都......
一.jQuery中事件
1.如何加载DOM呢?
在常规的JavaScript代码中,我们通常使用window.onload方法对吧,而在jQuery中,使用的是$(document).ready()方法.$(document).ready()方法可以极大的提高Web应用程序的响应速度.
2.执行的时机
window.onload方法和$(document).ready()方法有着相似的功能,但是在执行时机方面是有区别的.
window.onload方法是在网页中所有的元素完全加载到浏览器后才执行,而通过jQuery中的$(document).ready()方法注册的时间处理程序,在DOM就绪时就可以被调用.
简单的举一个例子,有一个大型的图库网站,为网页中虽有图片添加某些行为,例如单击图片后让他隐藏或显示.如果使用window.onload方法类来做处理,那么用户呢必须等到每一幅图片都加载完毕后,才可以进行小面的操作,但是如果使用jQuery中的$(document).ready()方法来进行设置,只要DOM就绪就可以进行操作了,不需要等待所有的图片下载完毕.
结果呢很显然,不用我说你也知道是用哪一种速度快了吧!!!
3.多次使用
window.onload方法和$(document).ready()方法的区别
$(function(){
$(document).ready(function() {
alert("one");
})
$(document).ready(function () {
alert("two");
})
})
window.onload = one;
window.onload = two;
这两个执行的结果是,第一个,两个会依次弹出,而第二个呢只会显示two.
在悄悄的给你说个秘密,一般人不不告诉他
第一种:
$(document).ready(function () {
//编写代码
});
第二种:
$(function () {
//编写代码
});
第三种:
$().ready(function () {
//编写代码
});
第二种是第一种的简写,不要崇拜我呦!!!
可已根据自己的习惯书写
4.事件如何绑定
如果你打算为元素绑定事件来完成某些操作,那么你就可以用bind()方法来匹配元素进行特定的事件绑定.
bind()方法的调用格式:
bind(type[,data],fn);
$("li").bind({
mouseover: function() {
$(this).css("background", "pink");
},
mouseout: function() {
$(this).css("background", "");
}
});
//标签
<body>
<ul>
<li>首页</li>
<li>公司信息</li>
<li>人才计划</li>
</ul>
</body>
这个例子充分的说明了如何使用bind()方法绑定事件
好了,这次就讲这么多,有什么讲的不好的,请多多指点,谢谢观看
不写完不让回家的JQuery的事件与动画的更多相关文章
- Jquery绑定事件及动画效果
Jquery绑定事件及动画效果 本文转载于:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind(ty ...
- 第4章 jQuery的事件和动画(1)——事件篇
jQuery扩展了JavaScript的基本事件处理机制,极大增强了事件处理能力 一. jQuery的事件 1. $(document).ready(function(){})加载方式 再次回到win ...
- jQuery中事件与动画
jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...
- 第4章 jQuery的事件和动画（二）
二. jQuery中的动画 动画在前面几章案例中是回避不了的问题.此处结合一些简便的写法稍作系统的分析. 1. show()和hide()(1)介绍——不用过多的介绍了jQuery最基本的方法.本质是 ...
- jQuery之事件和动画
1.加载DOM $(document).ready(function(){ }) 简写形式: $(function(){ }) 事件绑定: 合成事件 事件冒泡 移除事件 JQuery中的动画 show ...
- jQuery的事件与 动画
什么是事件: 事件的本质是委托. Jquery的 方法: $().css(); $().click(); 等等. 鼠标的事件: 区别在于:mouseover与mouseout再进入或离开后会执行这两个 ...
- jQuery中事件与动画的总结
1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是 ...
- jQuery的事件和动画
1.animate的应用 animate(params,[duration],[easing],[callback]) 参数实例: params: {width:"20%" ...
- jQuery中的事件和动画 以及视频展示效果实例
经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...
随机推荐
- 用TPP开启TDD的easy模式
Test-Drived Development 测试驱动开发三步曲:写一个失败的测试用例->编写生产代码通过这个测试用例(transformation)->重构(refactor).重构是 ...
- Nginx配置加入css缓存配置后，css等文件not found
现在配置: location / { root /root/html/product; } Probably another block had definition for the static f ...
- 浅析“依赖注入(DI)/控制反转(IOC)”的实现思路
开始学习Spring的时候,对依赖注入(DI)——也叫控制反转(IOC)—— 的理解不是很深刻.随着学习的深入,也逐渐有了自己的认识,在此记录,也希望能帮助其他入门同学更深入地理解Spring.本文不 ...
- C++求一个十进制的二进制中1的个数
int oneNumInBinary(int n){ ; while(n){ n = n&(n-); cnt++; } return cnt; }
- error: RPC failed; result=22, HTTP code = 411
git config http.postBuffer 524288000orgit config --system http.postBuffer 524288000
- vue 实现分转元的 过滤器
1.啥也不说了直接上代码吧 使用起来超方便 Vue.filter('amount', function (number) { // var number = +val.replace(/[^\d.] ...
- Error : An error occurred while creating the WebJob schedule: Response status code does not indicate success: 409 (Conflict).
How to fix the error? the answer is simple switch from Free to Standard...
- git用.gitignore忽略指定文件
.gitignore 配置文件用于配置不需要加入版本管理的文件,配置好该文件可以为我们的版本管理带来很大的便利,以下是个人对于配置 .gitignore 的一些心得. 1.配置语法: 以斜杠“/”开头 ...
- 一些有意思的VR设备介绍
1.计算机(Computers) 不久以前,一个VR系统需要百万美元的超级计算机:而如今顶级的VR系统正在使用桌面便携式计算机簇,极大的降低了价格和维护成本. 2.跟踪器(Tracking) 为了能与 ...
- C++之路进阶——codevs1789（最大获利）
1789 最大获利 2006年NOI全国竞赛 时间限制: 2 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 新的技术正冲击着 ...