3.jQuery事件(1)

来源：互联网发布：自动注册账号软件编辑：程序博客网时间：2024/06/03 18:57

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.onload=function(){console.log("js加载完成");}</script> </body></html>

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

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

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

Function doStuff()

{

….

}

Window.onload= doStuff;

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

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

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

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

}

  window.onload=function(){console.log("js加载完成");}window.onload=function(){console.log("js加载完成1");}window.onload=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($){ //这里可以使用$})

阅读全文

0 0