01-jQuery基础结构

倾国倾chen

于 2020-12-06 16:04:16 发布

阅读量70

点赞数

分类专栏： # jQuery

本文链接：https://blog.csdn.net/weixin_44142718/article/details/110739692

版权

jQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        /*
        *1、原生JS和jQuery入口函数的加载模式不同
        *原生JS会等到DOM元素加载完毕（包括图片）才会执行
        *jQuery会等到DOM元素加载完毕（不包括图片）才会执行
        */
        window.onload=function(e){
            //1、通过原生JS入口函数拿到DOM元素
            var img=document.getElementsByTagName("img")[0];
            console.log(img);

            //2、通过原生JS入口函数拿到DOM元素的宽高
            var width=window.getComputedStyle(img).width;
            console.log(width);
        }

        $(document).ready(function(){
            //1、通过jQuery入口函数拿到DOM元素
            var img=$("img")[0];
            console.log(img);

            //2、通过jQuery入口函数拿到DOM元素的宽高
            var width=img.width;
            console.log(width);
        })

        /*
        2、
        原生JS如果编写了多个入口函数，后面会覆盖前面的
        jQuery如果编写了多个入口函数，后面不会覆盖前面的，会按顺序依次加载
        */
    </script>
</head>
<body>
    <img src="exo/1.jpg" alt="伯贤">
</body>
</html>

倾国倾chen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01-jQuery基础结构

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script>
复制链接

扫一扫

专栏目录