jQuery使用操作

Posted 2021-05-18 ministep88

初识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 写法

    <script>
        // 1.原生JS的固定写法
        window.onload = function (ev) {  }

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

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>

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>

jQuery冲突问题

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