【jQuery】 01-初识jQuery 02-jQuery-HelloWorld 03-jQuery和JS入口函数的区别 04-jQuery入口函数的其它写法 05-jQuery冲突问题

本文链接：https://blog.csdn.net/qq_20535249/article/details/96898794

01-初识jQuery

<script>
        window.onload = function (ev) {
            // 1.利用原生的JS查找DOM元素
            var div1 = document.getElementsByTagName("div")[0];
            var div2 = document.getElementsByClassName("box1")[0];
            var div3 = document.getElementById("box2");
            // console.log(div1);
            // console.log(div2);
            // console.log(div3);
            // 2.利用原生的JS修改背景颜色
            // div1.style.backgroundColor = "red";
            // div2.style.backgroundColor = "blue";
            // div3.style.backgroundColor = "yellow";
        }

        $(function () {
            var $div1 = $("div");
            var $div2 = $(".box1");
            var $div3 = $("#box2");
            // console.log($div1);
            // console.log($div2);
            // console.log($div3);
            $div1.css({
               background: "red",
                width: "200px",
                height: "200px"
            });
            $div2.css({
                background: "blue"
            });
            $div3.css({
                background: "yellow"
            });
        });
    </script>

目前jQuery有三个大版本：
1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.3.1（2018年1月20日）

有两种版本的 jQuery 可供下载：
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
这两个版本都可以从 jQuery.com 下载。

02-jQuery-HelloWorld

<script src="js/jquery-1.12.4.js"></script>
<script>
        // 1.原生JS的固定写法
        window.onload = function (ev) {  }

        // 2.jQuery的固定写法
        $(document).ready(function () {
            alert("hello lnj");
        });
    </script>

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。
Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。
如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

03-jQuery和JS入口函数的区别

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

04-jQuery入口函数的其它写法

<script>
 // 1.第一种写法
        $(document).ready(function () {
            // alert("hello lnj");
        });

        // 2.第二种写法
        jQuery(document).ready(function () {
            // alert("hello lnj");
        });

        // 3.第三种写法(推荐)
        $(function () {
            // alert("hello lnj");
        });

        // 4.第四种写法
        jQuery(function () {
            alert("hello lnj");
        });
    </script>

05-jQuery冲突问题

 <script>
        // 1.释放$的使用权
        // 注意点: 释放操作必须在编写其它jQuery代码之前编写
        //         释放之后就不能再使用$,改为使用jQuery
        // jQuery原理.noConflict();
        // 2.自定义一个访问符号
        var nj = jQuery.noConflict();
        nj(function () {
            alert("hello lnj");
        });
    </script>