原生js与jquery加载页面元素比较

原生js:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,js提供了window.onload 这个方法事先加载元素

<script type="text/javascript">

                window.onload = function(){
    
                        ......
            
                };
            
</script>

jquery:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快。

<script type="text/javascript">

        $(document).ready(function(){

        ......

        });

</script>

可以简写为:

<script type="text/javascript">

        $(function(){

         ......

        });

</script>

Demo:

<!DOCTYPE html>
<html >
<head>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
        <script type="text/javascript">

                //      1 原生js加载页面元素,window.onload()
        
                window.onload = function(){
        
                        var oDiv = document.getElementById('div1');
        
                        alert('原生弹出的'+oDiv);
                };


                //  2 jquery加载页面元素,ready()
        
                //  2.1 ready完整写法:

                $(document).ready(function(){
        
                        var $div=$('#div1');
        
                        alert('这是jquery弹出的'+$div);
                });
        
                //  2.2 ready简单写法(开发中最常用):
        
                $(function(){
        
                        var $div=$('#div1');
        
                        alert('这是jquery弹出的'+$div);
                });
        </script>
</head>
<body>
        <div >这是一个div元素</div>
</body>
</html>

总结:

  1. 原生js加载页面元素通过window.onload()方法
  2. jquery加载页面元素通过ready()方法
  3. 开发中常用jquery的ready简写写法
  4. 使用jquery需要事先下载jquery库(压缩版和完整版,开发中加载压缩版即可,完整版用于平时读源码),用srcipt标签导入jquery库的压缩版
  5. 使用jquery库需要另写一个script标签,在里面写jquery代码
  6. ready比windown.load要快的原因是,window.load是等标签加载完,渲染(一些资源文件,如图片,音乐等)完之后再执行,ready是个标签加载完就执行