码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-01-25 11:44:37      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:ESS   head   书写方式   结果   height   asc   char   app   显示   

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 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行,因此,加载速度较慢。

 

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

标签:ESS   head   书写方式   结果   height   asc   char   app   显示   

原文地址:https://www.cnblogs.com/zhai1997/p/12232892.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!