（李南江jQuery+Ajax）第一章：初识jQuery

第一章：初识jQuery

一、原生的JS与jQuery的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-jQuery和JS入口函数的区别</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        
        window.onload = function (ev) {
            // 1.通过原生的JS入口函数可以拿到DOM元素
            var images = document.getElementsByTagName("images")[0];
            console.log(images);
            // 2.通过原生的JS入口函数可以拿到DOM元素的宽高
            var width = window.getComputedStyle(images).width;
            console.log("onload", width);
        }
        
        // 1.原生JS和jQuery入口函数的加载模式不同
        // 原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行
        // jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行
        
        $(document).ready(function () {
            // 1.通过jQuery入口函数可以拿到DOM元素
            var $images = $("images");
            console.log($images);
            // 2.通过jQuery入口函数不可以拿到DOM元素的宽高
            var $width = $images.width();
            console.log("ready", $width);
        });
        
        // 1.原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
        // 2.jQuery中编写多个入口函数,后面的不会覆盖前面的
        
        window.onload = function (ev) {
            alert("hello lnj1");
        }
        window.onload = function (ev) {
            alert("hello lnj2");
        }

        $(document).ready(function () {
            alert("hello lnj1");
        });
        $(document).ready(function () {
            alert("hello lnj2");
        });
    </script>
</head>
<body>
<img src="https://img.alicdn.com/tfs/TB1P_MofwmTBuNjy1XbXXaMrVXa-190-140.gif" alt="">
</body>
</html>

二、jQuery入口函数的4种写法

    // 第1种写法：
    $(document).ready(function () {
        alert("hello jquery1")
    })
    // 第2种写法：
    jQuery(document).ready(function () {
        alert("hello jquery2")
    })
    // 第3种写法：（推荐）
    $(function () {
        alert("hello jquery3")
    })
    // 第4种写法：
    jQuery(function () {
        alert("hello jquery4")
    })

三、jQuery的冲突问题

问题描述：jQuery使用 $ 符号来作为选择器，如果其他的框架也通用使用 $ 符号，两者产生冲突，后面引入的框架会覆盖掉前面的

    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/test.js"></script>　　　　//自定义的一个框架也使用了 $
    <script>
        // 1.释放$的使用权
        // 注意点: 释放操作必须在编写其它jQuery代码之前编写
        //         释放之后就不能再使用$,改为使用jQuery
　　　　　　jQuery.noConflict();
　　　　　　jQuery(function(){
　　　　　　　　alert('hello world')
　　　　　　　　})

        // 2.自定义一个访问符号
        var nj = jQuery.noConflict();
        nj(function () {
            alert("hello lnj");
        });
    </script>