如何实现页面加载后立即执行JQuery的三种方法？
- 内容介绍
- 文章标签
- 相关推荐
本文共计882个文字，预计阅读时间需要4分钟。
目录 + 页面加载即执行jQuery的方法 + [1] $(function(){}); + [2] $(document).ready(function(){}); + [3] window.onload=function(){}; + [4] 后续两种区别 + jQuery页面加载事件 + JavaScript中页面加载事件 + jQuery中的+
目录
- 页面加载即执行JQuery的方法
- $(function( ){ }）；
- $(document).ready(function( ){ })
- window.onload = function( ){ }
- 后面两种的区别
- jQuery页面加载事件
- js中的页面加载事件
- jQuery中的页面加载事件 方式1:(理解)
- 代码
- 效果
页面加载即执行JQuery的方法
$(function( ){ }）；
$(function(){ $("#name").click(function(){ //adding your code here }); });
$(document).ready(function( ){ })
$(document).ready(function(){ $("#name").click(function(){ //adding your code here }); });
第二种是第一种的完整形式。
window.onload = function( ){ }
window.onload = function(){ $("#name").click(function(){ //adding your code here }); }
后面两种的区别
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="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="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>
效果
以上为个人经验，希望能给大家一个参考，也希望大家多多支持自由互联。
本文共计882个文字，预计阅读时间需要4分钟。
目录 + 页面加载即执行jQuery的方法 + [1] $(function(){}); + [2] $(document).ready(function(){}); + [3] window.onload=function(){}; + [4] 后续两种区别 + jQuery页面加载事件 + JavaScript中页面加载事件 + jQuery中的+
目录
- 页面加载即执行JQuery的方法
- $(function( ){ }）；
- $(document).ready(function( ){ })
- window.onload = function( ){ }
- 后面两种的区别
- jQuery页面加载事件
- js中的页面加载事件
- jQuery中的页面加载事件 方式1:(理解)
- 代码
- 效果
页面加载即执行JQuery的方法
$(function( ){ }）；
$(function(){ $("#name").click(function(){ //adding your code here }); });
$(document).ready(function( ){ })
$(document).ready(function(){ $("#name").click(function(){ //adding your code here }); });
第二种是第一种的完整形式。
window.onload = function( ){ }
window.onload = function(){ $("#name").click(function(){ //adding your code here }); }
后面两种的区别
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="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="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>
效果
以上为个人经验，希望能给大家一个参考，也希望大家多多支持自由互联。