首页 > 其他分享> 文章详细

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

2020-01-25 11:55:55 阅读：194 来源： 互联网

标签：function Jquery 函数 onload JQ 入口 alert JS

1、什么是Jquery：

（1）JQ图标分析：

J：代表JS

Query：查询

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

（2）概念：

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

2、新建Jquery项目：

目录结构：

代码：

<!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>

运行结果：

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：

<!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>

点击确认按键，依次显示以下内容：

（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>

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

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

标签：function,Jquery,函数,onload,JQ,入口,alert,JS
来源： https://www.cnblogs.com/zhai1997/p/12232892.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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