页面加载即执行JQuery的方法
【1】$(function( ){ });
$(function(){ $("#name").click(function(){ //adding your code here }); });
【2】$(document).ready(function( ){ })
$(document).ready(function(){ $("#name").click(function(){ //adding your code here }); });
第二种是第一种的完整形式。
【3】window.onload = function( ){ }
window.onload = function(){ $("#name").click(function(){ //adding your code here }); }
【4】后面两种的区别
1.执行的时机不同
window.onload
要等整个窗口(包括图片)都加载完才触发 执行$(document).ready()
在 DOM 结构绘制完成后就可执行
2.编写的个数
window.onload
编写多个时,只有最后的那起作用$(document).ready()
可以编写多个,都生效
3.简化写法
window.onload
无$(document).ready()
可简写为()
Tip :jQuery中真正与 window.onload完全等价的是$(window).load()方法
jQuery页面加载事件
在jQuery对象与js对象之间的转换的案例中,我们看到所有的js代码都放到了body标签之后,如果把js代码放到head标签中,js代码就会报错,这个问题我们已经在js中学过,就是需要让页面加载完成之后再执行.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="https://www.atool.online/article/js/jquery-1.12.4.js"></script> <!‐‐ 测试jQuery ‐‐> </head> <body> <div id="myDiv1">通过不同方式获得文本内容111</div> <div id="myDiv2">通过不同方式获得文本内容222</div> </body> <script type="text/javascript"> //通过js方式打印div内部的内容 var divEle = document.getElementById("myDiv1");//js的DOM对象 alert(divEle.innerHTML);//js对象的innerHTML属性 //通过jQuery方式打印div内部的内容 var $divEle = $("#myDiv2");//jQuery对象 alert($divEle.html());//jQuery对象的html方法 //使用js的DOM对象调用jQuery对象的方法 //alert(divEle.html());//错误写法,不能正常执行 //使用jQuery对象调用js的DOM对象的属性 //alert($divEle.innerHTML);//错误写法,不能正常执行 //js转换成jQuery对象后在调用jQuery对象的html方法 alert($(divEle).html());//转换后正常执行 //jQuery转换成js的DOM对象后在调用js的innerHTML属性 alert($divEle[0].innerHTML); alert($divEle.get(0).innerHTML); </script> </html>
js中的页面加载事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> onload=function(){ //通过js方式打印div内部的内容 var divEle = document.getElementById("myDiv"); alert(divEle.innerHTML); } </script> </head> <body> <div id="myDiv">通过不同方式获得文本内容</div> </body> </html>
jquery对页面加载事件也进行了封装,让我们使用起来更加的简单
jQuery中的页面加载事件 方式1:(理解)
$(document).ready(function(){ //编写代码 });
方式2:(掌握)
$(function(){ //编写代码 });
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="https://www.atool.online/article/js/jquery-1.12.4.js"></script> <!‐‐ 测试jQuery ‐‐> <script type="text/javascript"> //js onload=function(){ alert("js页面加载"); } //jquery方式 $(document).ready(function(){ alert("jquery方式1"); }); $(function(){ alert("jquery方式2"); }) </script> </head> <body> </body> </html>
效果
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。