关于页面加载即执行JQuery的三种方法小结

页面加载即执行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="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>

效果

作者:流烟默原文地址:https://janus.blog.csdn.net/article/details/53885605

%s 个评论

要回复文章请先登录注册