JQuery对象和JS对象区别与转换以及JQuery事件绑定，入口函数，样式控制

JQuery对象和JS对象区别与转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery对象和js对象的转换</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

    <div id="div1"> div1... </div>
    <div id="div2"> div2... </div>

<script>
    // 1.通过js方式来获取名称叫div的所有html元素对象
    let divs = document.getElementsByTagName("div")//获取元素集合
    alert(divs.length);//可以将其当做数组使用
    //对div中所有的div，让其标签体内容变为"aaa"
    for (let i = 0; i < divs.length; i++) {
        //divs[i].innerHTML = "aaa";
        $(divs[i]).html("ccc");
    }


    //2.通过jp方式来获取名称叫div的所有html元素对象
    let $divs = $("div");
    alert($divs.length);//可以将其当做数组使用
    //对div中所有的div，让其标签体内容变为"bbb" 使用jq方式
    // $divs.html("bbb");


    $divs[0].innerHTML = "ddd";
    $divs.get(1).innerHTML = "eee";

    /*
        1.JQuery对象在操作时，更加方便。
        2.JQuery对象和js对象方法不通用的。
        3.两者相互转换
            jq -- > js :jq对象[索引] 或者 jq对象.get(索引)
            js -- > jq : $(js对象)
     */

</script>

</body>
</html>

JQuery事件绑定，入口函数，样式控制

事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

    <div id="div1"> div1... </div>
    <div id="div2"> div2... </div>
    <input type="button" value="点我" id="b1">


<script>
    //给b1按钮添加事件

    //获取b1按钮
    $("#b1").click(function () { // click:点击事件
       alert("abc");
    });

</script>
</body>
</html>

入口函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>


<script>
    //给b1按钮添加事件
    // window.onload = function () {
    //     //获取b1按钮
    //     $("#b1").click(function () { // click:点击事件
    //         alert("abc");
    //     });
    //
    // }

    //JQuery入口函数（dom文档加载完成之后执行该函数中的代码）
    $(function () {
        //获取b1按钮
        $("#b1").click(function () { // click:点击事件
            alert("abc");
        });
    });/*
        window.onload 和 $(function) 区别
            window.onload：只能定义一次，如果定义多次，后边的会将前边的覆盖掉
            $(function)：可以定义多次
     */

</script>

<body>

    <div id="div1"> div1... </div>
    <div id="div2"> div2... </div>
    <input type="button" value="点我" id="b1">
</body>
</html>

样式控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>


<script>
    //给b1按钮添加事件
    // window.onload = function () {
    //     //获取b1按钮
    //     $("#b1").click(function () { // click:点击事件
    //         alert("abc");
    //     });
    //
    // }

    //JQuery入口函数（dom文档加载完成之后执行该函数中的代码）
    $(function () {
        //获取b1按钮
        $("#b1").click(function () { // click:点击事件
            alert("abc");
        });
    });

    //样式控制
    $(function () {
        $("#div1").css("backgroundColor","red")
        $("#div2").css("backgroundColor","pink")
    })

    /*
        window.onload 和 $(function) 区别
            window.onload：只能定义一次，如果定义多次，后边的会将前边的覆盖掉
            $(function)：可以定义多次
     */

</script>

<body>

    <div id="div1"> div1... </div>
    <div id="div2"> div2... </div>
    <input type="button" value="点我" id="b1">
</body>
</html>