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

89463661

2020-01-25

关注关注

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入口函数的区别

（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入口函数的区别