JQuery和js加载模式/多种写法/冲突解决

JQuery和js加载模式

1.原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行。

jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行

<script>
    window.onload = function () {
        //通过原生的JS入口函数可以拿到DOM元素
        var img = document.getElementsByTagName("img")[0];
        //通过原生JS入口函数可以获得DOM元素的宽高
        var width = window.getComputedStyle(img).width;
        console.log(width);
    };

    $(document).ready(function () {
        //通过jQuery的入口函数可以拿到DOM元素
       var $img = $("img");
        //通过jQuery的入口函数不可以获得DOM元素的宽高
        var $width = $img.width();
        console.log($width);

    });
</script>

在这里插入图片描述

2.原生的JS如果编写多个入口函数,后边的会覆盖前边的

window.onload = function () {
    alert("hello Inj1");
};
window.onload = function () {
    alert("hello Inj2");
};

在这里插入图片描述

jQuery如果编写多个入口函数,后边不会覆盖前边的,都会执行。

$(document).ready(function () {
    alert("hello Inj1");
});
$(document).ready(function () {
    alert("hello Inj2");
});

在这里插入图片描述

jQuery入口函数的其他写法

<script>
    //第一种写法
    $(document).ready(function () {
        alert("hello callback")
    });
    //第二种写法
    jQuery(document).ready(function () {
        alert("hello callback2")
    });
    //第三种写法(推荐使用该方法)
    $(function () {
        alert("hello callback3")
    });
    //第四种写法
    jQuery(function () {
        alert("hello callback4")
    });
</script>

jQuery冲突问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的冲突问题</title>
    <script src="../js/jquery-1.12.4.js"></script>
    <script src="../js/test.js"></script>
    <script>
      //1.释放$的使用权
        /*jQuery.noConflict();*/
        //2.自定义访问符号
        var nj = jQuery.noConflict();
        nj(function () {
            alert("hello inj");
        });
    </script>
</head>
<body>

test.js中也给 “$”进行定义,那么两个引入的js文件会产生冲突,后引入有使用的权利,但是我们不想关注是谁先引入,就可以直接放弃对该符号的使用权

释放操作必须在编写其他jQuery代码之前,释放之后就只能使用jQuery代替。

如果觉得麻烦,可以自定义标志代替。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页