jQuery入门之首页定时弹出广告（一）

最新推荐文章于 2021-08-12 17:06:13 发布

zhikanjiani

最新推荐文章于 2021-08-12 17:06:13 发布

阅读量837

点赞数

本文链接：https://blog.csdn.net/zhikanjiani/article/details/80794196

版权

一、jQuery介绍
jQuery是JavaScript的一个库，兼容CSS3，还兼容各种浏览器。jQuery官方文档https://www.jquery123.com/。

开发工具 sublime text 3、hbuilder
需要引入js库，官网下载js库并且在html页面使用

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

1.2 、jQuery页面加载与JavaScript页面加载

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>js与jq页面加载</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
        <script>    
            window.onload = function(){
                alert("陈思文");
            }

            //传统的方式页面加载会存在覆盖问题，加载比jQuery慢（
            //整个页面加载完毕<包括里面的内容,如图片>)
            window.onload = function(){
                alert("老王");
            }

            //jquery的加载要比js快！（当整个dom树结构回执完毕就会加载）
            jQuery(document).ready(function(){
                alert("李四");
            });

            //jQuery不存在覆盖问题，加载的时候是顺序执行
            $(document).ready(function(){
                alert("王五");
            });

            //简写方式
            $(function(){
                alert("杨少杰");
            });
        </script>
    </head>
    <body>
    </body>
</html>

1.3、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(){
            //传统方式加载
            /*document.getElementById("btn").onclick = function(){
                location.href = "惊喜.html";
            }*/

            //jQuery方式获取
            $("#btn").click(function(){
                location.href="惊喜.html"
            });

        });
    </script>
    </head>
    <body>
        <input type="button" value="点我有惊喜" id="btn" />
    </body>
</html>

惊喜.HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>飞龙在天</title>
        <style>
            div{
                border: 1px solid white;
                width: 500px;
                height: 400px;
                margin: auto;
                text-align: center;
            }
        </style>
    </head>
    <body>
            <div>
            <img src="../../img/飞龙在天.gif" width="100%" height="100%"/>
            </div>
    </body>
</html>

zhikanjiani

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门之首页定时弹出广告（一）

一、jQuery介绍 jQuery是JavaScript的一个库，兼容CSS3，还兼容各种浏览器。jQuery官方文档https://www.jquery123.com/。开发工具 sublime text 3、hbuilder 需要引入js库，官网下载js库并且在html页面使用 &lt;!DOCTYPE html&gt;&lt;html&gt; &...
复制链接

扫一扫