首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jquery $(document).ready()与window.onload的区别

以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 Javascript 为 DOM 元素添加事件。...另外,需要注意一点,由于在 $(document).ready() 方法注册的事件,只要 DOM 就绪就会被执行,因此可能此时元素的关联文件未下载完。...要解决这个问题,可以使用 Jquery 中另一个关于页面加载的方法 ---load()方法。 Load()方法会在元素的onload 事件中绑定一个处理函数。...如果处理函数绑定给 window 对象,则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。...的ready()方法 请注意,如果事件已经被触发,回调将不会被执行。

1.6K31
您找到你想要的搜索结果了吗?
是的
没有找到

jQuery (二)

实时事件 实时事件为,如果先前将所有a元素绑定了一个事件,接着在创建一个新的a的节点,如果此时触发事件,则新创建的a元素不会被触发事件,因为绑定的不是实时的事件。...> { $('span').fadeIn(100); }); return false; }) 当发生click事件的时候,会先回调click事件,发生动画,在等待3000秒的时候,继续回调下一个函数...,如果动画使用show,将会在完成时,调用show 动画选项对象 缓动函数,jquery中有默认的缓动函数,为正弦函数,即swing,还有一个线性的缓动函数为linear 所有的缓动函数都在jQuery.easing...ajax还会在请求的时候,触发相应的事件 这个用于在请求某些图片的时候,在图片仍旧继续下载的时候,使用相应的时间,提示出图片正在加载中 例如 $('#loading_animation').bind(...$('a[href]').closest('div'); // 选择包含链接的最里层的div元素 恢复到之前的选中的元素 end()弹出栈 // 寻找所有div元素,然后在其中寻找p元素,高亮显示

9.3K30

第78天:jQuery事件总结(一)

根据上述描述,显然使用jQuery的$(docum).ready()方法时会出现一个问题。由于在该方法注册的事件,只要DOM就绪就会被执行,因此可能此时元素的关联文件未下载完。...要解决这个问题,可以使用jQuery中的另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数。...如果处理函数绑定给window对象,则会在所有的内容(包括窗口、框架、对象和图像等)加载完毕后触发,除过处理函数绑定在元素上,则会在元素的内容加载完毕后触发。   ...5 6 按照需求,需要完成以下几个步骤:   (1)等待DOM装载完毕;   (2)找到“标题”所在的元素,绑定click事件;   (3)找到“内容”元素,将“内容”显示出来...$(this).next().show(); //获取并显示“内容”元素 4 }) 5 }) 当然可以加强效果,并且改变绑定事件的类型,比如鼠标悬停时显示“内容”,鼠标离开时隐藏“内容

93420

jQuery:详解jQuery中的事件(一)

根据上述描述,显然使用jQuery的$(docum).ready()方法时会出现一个问题。由于在该方法注册的事件,只要DOM就绪就会被执行,因此可能此时元素的关联文件未下载晚。...要解决这个问题,可以使用jQuery中的另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数。...如果处理函数绑定给window对象,则会在所有的内容(包括窗口、框架、对象和图像等)加载完毕后触发,出国处理函数绑定在元素上,则会在元素的内容加载完毕后触发。   ...   按照需求,需要完成以下几个步骤:   (1)等待DOM装载完毕;   (2)找到“标题”所在的元素,绑定click事件;   (3)找到“内容”元素,将“内容”显示出来。...).next().show(); //获取并显示“内容”元素 }) })   当然可以加强效果,并且改变绑定事件的类型,比如鼠标悬停时显示“内容”,鼠标离开时隐藏“内容”。

1.6K20

Jump Start Bootstrap 第4章

我们将会看到如何添加下拉菜单到导航栏、切换按钮的状态、当点击按钮时漂亮的警告信息会在显示一段时间后消失等等功能。...Bootstrap为下拉插件提供了一些附加事件,它们是: show.bs.dropdown: 这个事件在句柄被单击时触发;下拉句柄收到请求去显示隐藏菜单; shown.bs.dropdown: 这个事件在菜单被显示时触发...让我展示一个如何使用这些事件的例子。我已经写了下面的JQuery代码片段去监听所有的下拉插件状态,并打印每个事件触发时的状态。 <!...为了创建Collapse,我们需要一组嵌在容器的面板,这个容器是使用div元素和类面板组创建的。它也应该有一个与之相关的ID。...如果没有这个属性,在您第一次手动操作之前,幻灯片将不会自动更改

28.3K40

4-Jquery学习四-事件操作

2-triggerHandler()触发事件只针对jQuery对象中的第一个匹配元素。 3-triggerHandler()触发的事件会在DOM树中冒泡,因此事件不会冒泡传递到它的任何祖辈元素。...21,change change事件会在文本内容或选项被更改时触发。该事件仅适用于和以及。...对于text和textarea元素,该事件会在元素失去焦点时发生(文本内容也发生了更改)。...它与mouseover事件相似,但mouseenter事件会在鼠标进入当前元素时触发,而mouseover事件会在鼠标进入当前元素及其任何后代元素时触发(换句话说,mouseover事件支持冒泡)。...它与mouseleave事件相似,但mouseleave事件会在鼠标离开当前元素时触发,而mouseout事件会在鼠标离开当前元素及其任何后代元素时触发(换句话说,mouseout事件支持冒泡)。

4.4K90

前端面试题

解决方法是,在退出函数之前,将不使用的局部变量全部删除。 闭包会在父函数外部,改变父函数内部变量的值。...Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解 使用.bind()方法非常浪费性能因为它把同一个事件处理函数附加到了每一个匹配的元素上 你应该停止使用.live...5.VUE Vue的生命周期 beforeCreate(创建前) 在数据观测和初始化事件还未开始 created(创建后) 完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来...答:.prevent: 提交事件不再重载页面;.stop: 阻止单击事件冒泡;.self: 当事件发生在该元素本身而不是子元素的时候会触发;.capture: 事件侦听,事件发生的时候会调用 7.v-on...如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素

1.6K10

如何编写一个 Vue JS 内嵌组件

我们还为此使用了组件中的根 DOM 元素 this.$el 属性。 然而,想象是美好的。就算这么写,Vue 组件还是无法对所做的更改作出反应。...最好的方法是在组件上使用根元素来使用 this.$el 。...如果想让我们的组件对日期范围选择器插件所做的更改作出反应,那么我们需要连接一个 jQuery 事件来响应更改: Vue.component('date-range-picker', { template...我们提供了一个 on('apply.daterangepicker') 事件处理程序,它会监听触发开始和结束的 apply 的日期事件。 接下来,回调函数会在组件的实例上设置新的开始日期和结束日期。...在这个组件的例子中,你可以学习如何通过使用组件的根 DOM 元素 this.$el 来内嵌一个 jQuery 插件、如何在安装组件时初始化一个插件,以及如何连接插件来将数据发送到父组件。

3.9K40

好久不用 jQuery, 来复习一下

当把元素隐藏后,可以使用 show() 方法将元素的 display 样式设置为先前的显示状态。提供了 toggle() 方法进行二者之间的切换。...如果一个元素的 display 属性值为"none",当调用 slideDown() 方法时,这个元素将由上至下延伸显示。slideUp() 方法正好相反,元素将由下到上缩短隐藏。...另外,需要注意一点,由于在 (document).ready() 方法注册的事件,只要 DOM 就绪就会被执行,因此可能此时元素的关联文件未下载完。...要解决这个问题,可以使用 jQuery 中另一个关于页面加载的方法 load() 方法。load() 方法会在元素的 onload 事件中绑定一个处理函数。...如果处理函数绑定给 window 对象,则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。

5.5K40

jQuery

jQuery 学习了jQuery感觉是真的很好用,感谢那些参与代码编写的大佬们 1.1 初认识 1.1.1 入口函数 作用相当于onload事件,等dom结构渲染完毕即可执行 但又有所不同 onload...来代替,相当于原生js中的window 1.1.3 jQuery 对象和 DOM 对象 用原生 JS 获取来的对象是 DOM 对象 jQuery 方法获取的元素jQuery 对象。...停止动画排队:stop() ; 这样就可以在动画执行的时候停止动画 3.2.1 显示隐藏 显示隐藏:show() / hide() / toggle() ; 关于参数 参数都可以省略,无动画直接显示...这类属性操作很顺畅 //获取 prop('属性名'); //更改 prop('属性名','属性值'); 4.1.2 元素自定义属性值 attr() //获取 attr('属性名'); //更改 attr...设置元素被卷去的头部和左侧 不跟参数是获取,跟参数是设置 5.1 jQuery 事件 5.1.1 on() 绑定事件 on()绑定事件的好处 可以绑定多个事件,多个处理事件函数 $('div').on

8.4K10

HTML5游戏开发实战–当心

2.随着现代浏览器对HTML5元素的原生支持,将不再须要用户预装第三方插件就能够玩游戏了。 3.我们把JavaScript代码放置在body结束标签之前且在页面全部内容之后。...通过监听jQuery的keydown事件监听器,在事件触发时event对象会包括按键代码(key code)。能够通过调用按键event对象的which函数来获得按键代码。...jQuery提供了还有一个函数来訪问HTML5自己定义属性属性,那就是data函数。 data函数最先用于给HTML元素jQuery对象嵌入自己定义数据。...一种是在给定范围生成随机数。 还有一种是生成true或false布尔值。...31.能够使用例如以下CSS样式将这些图像标签资源位置移出HTML的显示范围以达到隐藏它们的目的。 我们不使用display:none来做这件事。由于浏览器无法获取未显示元素的长度和高度。

1.8K10

jQuery中find&filter、live&bind对比介绍及图片懒加载

div元素寻找class为rain的元素。...live方法之所以能对后生成的元素也绑定相应的事件的原因归结在"事件委托"上面,所谓"事件委托"就是指绑定在祖先元素上的事件可以在其后代元素上进行使用。...相比之下,bind会在事件在绑定阶段就会判断绑定事件元素是否存在,而且只针对当前元素进行绑定,而不是绑定到父节点上。 根据上面的分析,live的好处真是很强大,那么为什么还要使用bind方法呢?...另外,在jQuery 1.4.1中,也能支持hover(映射到"mouseenter、mouseleave")。 2. live() 并不完全支持通过DOM遍历的方法找到的元素。...当页面滚动的时候,再判断图片已经缓存的位置值是否出现在可视区域,进行替换src加载。当所有的图片都加载完之后,将相应的触发事件卸载,避免重复操作引起的内存泄漏。

69031
领券