3.jQuery事件(1)

最新推荐文章于 2025-09-13 09:06:35 发布

狂暴气球

最新推荐文章于 2025-09-13 09:06:35 发布

阅读量167

点赞数

分类专栏： jQuery 文章标签： jquery dom javascript

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文对比了jQuery的$(document).ready()与原生JavaScript的window.onload事件处理机制,介绍了它们在页面加载完成后的不同行为及应用场景。探讨了如何在页面上高效地执行多个脚本，并解决了基于多个库使用时可能出现的命名冲突问题。

javascript内置了一些对用户的交互和其他事件给予响应的方式，使页面具有动态性和响应性，jquery增强并扩展了基本的事件处理机制，简化了事件处理语法，极大的增强了事件处理机制。

3.1代码执行的时机选择

1.$(document).ready()

2.Window.onload

1.是jquery基于页面加载执行任务的一种主要方式，它会在DOM完全解析并且可以使用时调用，当HTML下载完成并解析为DOM树之后，代码就可以运行

2.原生的JavaScript事件没，在文档完全下载到浏览器中时，会触发window .onload事件，页面上的全部元素对于JavaScript而言都是可以操作的。

在一个表现图像的页面上，包含大型图像，window.onload必须等待每一副图片下载完成才会执行，而$(document).ready()会等待DOM树加载完成后显示，

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
</head>
<body>
<imgsrc="20171213_083817.jpg"alt="">
 
<scriptsrc="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
$(document).ready(function()
{
console.log("jquery加载完成")
 
});
window.οnlοad=function()
{
console.log("js加载完成");
}
</script>
 
</body>
</html>

一般来说，使用$(document).ready()要优于onload事件处理程序，但是因为支持文件可能没有加载完成，所以类似图像的高度和宽度这样的属性此时则不一定会有效。如果需要访问这些属性，可能就的选择一个onload事件处理程序。（或jquery的load事件）

3.12基于一个页面执行多个脚本

通过JavaScript注册事件处理程序，把一个函数指定给DOM元素的对应属性。

Function doStuff()

{

….

}

Window.οnlοad= doStuff;

如果指定第二个函数，会取代刚才指定的第一个函数。

.onload属性一次只能保存对一个函数的引用。

但是，$(document).ready()能够很好的解决这个问题。

每次调用一个函数都会向内部的行为队列中添加一个新函数。当页面加载完成后，所有函数都会按照注册顺序被执行

}

 

 

window.οnlοad=function()
{
console.log("js加载完成");
}
window.οnlοad=function()
{
console.log("js加载完成1");
}
window.οnlοad=function()
{
console.log("js加载完成");

 

 

$(document).ready(function()
{
console.log("jquery加载完成")
 
});
$(document).ready(function()
{
console.log("jquery加载完成1")
 
});
$(document).ready(function()
{
console.log("jquery加载完成2")
 
});

3.13 .ready（）简写形式

$(document).ready() 实际上在基于document这个DOM元素构建而成的jquery对象上调用了.ready()方法。可以简写为 $(function(){…..})

3.14 向.ready()回调函数中传入参数

有时候，可能有必要在同一个页面中使用多个JavaScript库，由于很多库都使用$标识符，因此就需要一种方式来避免名称冲突。

方法一：

jquery提供 jQuery.noConflict()方法，可以把对$标识符的引用的控制权还给其他库。

<scriptsrc="proto.js"></script>
<scriptsrc="jquery.js"></script>
<script>
jQuery.noConflict();
</script>

这样在proto.js中就可以使用$ 符号了但是用jquery方法时候必须一jquery开头

jquery(document).ready()

方法二：

向ready()中传入function($)

jQuery(document).ready(function($)
{
 
//这里可以使用$
})