jQuery使用操作

大佬教程收集整理的这篇文章主要介绍了jQuery使用操作，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

大佬总结

以上是大佬教程为你收集整理的jQuery使用操作全部内容，希望文章能够帮你解决jQuery使用操作所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。