jQuery 入门基础知识

jQuery 引入

jQuery引入有两种方式 本地引入和外链引入

可以通过jQuery官网下载相应的jQuery文件进行引入，还有就是通过CDN联网状态引入

 <!-- 本地引入js -->
    <!-- <script src="./js/jquery-3.6.0.min.js"></script> -->

    <!-- 联网 使用CDN 引入CDN Content Delivery Network -->

    <!-- jQuery官网 -->
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.js"></script> -->

    <!-- BootStrap CDN -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

验证jQuery是否引入成功

// alert(jQuery);//检测jQuery引入与否
    alert($);// $ === jQuery

使用jQuery 

 // jQuery 入口小函数
    $(document).ready(function () {
        //jQuery代码
    });
    // 可以执行多次 不会被覆盖
    //只需等待网页中的DOM 结构加载完毕 就能执行包裹代码

    //简写
    $(function () {
        // jQuery代码
    });

 jQuery对象与dom对象转换

 //dom对象转jQuery
    //$(dom对象)
    // jQuery(oDiv).css("color", "#f00");
    // $(oDiv).css("color", "#00f");
    // $(oDiv).css({ color: "red" });

    // $(".box")===document.querySelector(".box")

    //jQuery 转换为dom对象
    //jQuery对象[索引]
    //jQuery对象.get(索引)

    console.log($(".box")[0]);
    console.log($(".box").get(0));
    $(".box")[0]//得到原生dom对象
    $(".box")[0].style.backgroundColor = ("pink");
    $(".box").get(1).style.backgroundColor = ("red");
//jQuery 样式操作
    //添加一条样式
    //jQuery对象.css("样式属性名"，"属性值")
    //添加多条样式
    //jQuery对象.css("样式属性名"，"属性值","样式属性名"，"属性值","样式属性名"，"属性值",……)
    //获取样式
    //jQuery对象.css("样式属性名")

jQuery绑定事件

  //绑定事件
    // $(document).ready(function () {
    //     $(".box").click(function () {
    //         alert("111")
    //         // this.style.backgroundColor = "blue";
    //         // console.log(this);//dom对象
    //         $(this).css("color", "red");//dom转为jQuery对象
    //     });
    // });

    //等价于上边的
    // var divs = document.querySelectorAll(".box");
    // for (var i = 0; i < divs.length; i++) {
    //     divs[i].onclick = function () {
    //         this.style.backgroundColor = "blue";
    //     };
    // };

    //获取样式
    $(document).ready(function () {
        $(".box").click(function () {
            $(this).css("width")
            console.log($(this).css("width"))
        });

    });