jQuery之DOM准备

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4-1-1</title>
<script type="text/javascript">
  document.getElementById("panel").onclick=function(){
    alert( "元素已经加载完毕 !");
  }
    /*执行错误*/
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>

因为没有加载。加载过早，还没有晓得哪个是panel，所以会报错。如果用window.onload就会等页面加载完了，再调用相应的函数，这样就能知道哪个是panel了。

修改如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel</title>
<script type="text/javascript">
  window.onload = function(){
      document.getElementById("panel").onclick=function(){
        alert( "元素已经加载完毕 !");
      }
  }
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>

或者用jQuery中的$(document).ready如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panel</title>
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
       document.getElementById("panel").onclick=function(){
            alert( "元素已经加载完毕 !");
      }
  })
</script>
</head>
<body>
<div id="panel">click me.</div>
</body>
</html>

但是两者又是有区别的，window.onload只能加载一次。而jQuery中的$(document).ready可以加载多次:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
 function one(){
   alert("one");
 }
 function two(){
   alert("two");
 } 
 window.onload = one ;
 window.onload = two ;
</script>
</head>
<body>

</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
  function one(){
   alert("one");
 }
 function two(){
   alert("two");
 } 
  $(document).ready(function(){
      one();
  })
  $(document).ready(function(){
      two();
  })
</script>

</head>
<body>

</body>
</html>

相关阅读:
linux 查看僵尸进程
 apache 修改最大连接数
 ng压缩后，形参被简化问题解决：
$rootScope 与 $scope 区别：$rootScope对象是“单例的”——一个模块中只有一个$rootScope;
vue+webpack在“双十一”导购产品的技术实践
 过滤指令：number currency lowercase(转为小写)/uppercase（转为大写）
ng-show ng-disabled ng-show ng-hide 值的布尔值改变时，状态发生变化
 二，数据双向绑定
 一、angular：module-Controller-Model-View （模块-控制器-模型-视图）；异步请求$http
5、面向对象
原文地址：https://www.cnblogs.com/jiqing9006/p/2675093.html