JQ——初识JQ、JQ入口函数与JS入口函数的区别

1、什么是Jquery:

(1)JQ图标分析:

JQ——初识JQ、JQ入口函数与JS入口函数的区别

 J:代表JS

Query:查询

write less,do more:写更少的代码,做更多的事情(对HTML文档的遍历和操作、事件处理、动画、Ajax变得更加简单)

(2)概念:

jQuery本质上是一个快速、简洁的JavaScript框架。

2、新建Jquery项目:

目录结构:

JQ——初识JQ、JQ入口函数与JS入口函数的区别

 代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Jquery入门</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                alert("Hello Jquery!");
            });
        </script>
    </head>
    <body>
    </body>
</html>

运行结果:

JQ——初识JQ、JQ入口函数与JS入口函数的区别

 3、JQ入口函数与JS入口函数的区别:

(1)书写方式:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Jquery入门</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            jQuery(document).ready(function(){
                alert("新年快乐!");
            });
            
            $(document).ready(function(){
                alert("Happy new year");
            });
            
            $(function(){
                alert("天天开心!");
            });
        </script>
    </head>
    <body>
    </body>
</html>

JS入口函数:

window.onload = function () {
    // 执行代码
}

(2)JS存在覆盖问题,JQ不存在

JS:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Jquery入门</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            window.onload = function(){
                alert("新年快乐");
            }
            
            window.onload = function(){
                alert("2020");
            }
        </script>
    </head>
    <body>
    </body>
</html>

只会显示后面的内容:

JQ——初识JQ、JQ入口函数与JS入口函数的区别

 JQ:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Jquery入门</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                alert("2020");
            });
            
            $(function(){
                alert("新年快乐!");
            });
            
            $(function(){
                alert("Happy new Year!");
            });
        </script>
    </head>
    <body>
    </body>
</html>

点击确认按键,依次显示以下内容:

JQ——初识JQ、JQ入口函数与JS入口函数的区别

 JQ——初识JQ、JQ入口函数与JS入口函数的区别

JQ——初识JQ、JQ入口函数与JS入口函数的区别

 (3)JQ的加载速度要比JS快:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Jquery入门</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            
            window.onload = function(){
                alert("新年快乐!");
            }
            
            $(function(){
                alert("2020");
            });
    
        </script>
    </head>
    <body>
    </body>
</html>

JQ——初识JQ、JQ入口函数与JS入口函数的区别

jQuery 的入口函数是在 html 所有标签都加载之后,才会去执行。

JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行,因此,加载速度较慢。

相关推荐