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

JQuery对象和JS对象区别转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs.length);
    //对divs中所有的div让其标签体内容变为“aaa”
    for (var i = 0; i < divs.length; i++) {
        divs[i].innerHTML = "aaa";
    }
    //2、通过jquery来获取名称叫div的所有html元素对象
    var $divs = $("div");
    alert($divs.length)
    //对divs中所有的div让其标签体内容变为“bbb”,使用jquery方式
    $divs.html("bbb");
</script>
</body>
</html>

1、JQuery对象在操作时，更加方便。

2、JQuery对象和js对象方法不通用

3、两者相互转换

　　jquery——>js：jquery对象[索引]或者jquery对象.get(索引)

　　js——>jquey：$(js对象)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs.length);
    //对divs中所有的div让其标签体内容变为“aaa”
    for (var i = 0; i < divs.length; i++) {
        divs[i].innerHTML = "aaa";

        $(divs[i]).html("cccc");
    }
    //2、通过jquery来获取名称叫div的所有html元素对象
    var $divs = $("div");
    alert($divs.length)
    //对divs中所有的div让其标签体内容变为“bbb”,使用jquery方式
    $divs.html("bbb");
    $divs[0].innerHTML = "ddd";
    $divs[1].innerHTML = "eee";
</script>
</body>
</html>

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

事件绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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").click(function () {
       alert("已点击");
    });
</script>
</body>
</html>

入口函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        //给b1按钮添加单击事件
        /*window.onload = function(){
            $("#b1").click(function () {
                alert("已点击");
            });
        }*/
        //jquery入口函数(dom文档加载完成之后执行该函数中的代码)
        /*$(function () {
            $("#b1").click(function () {
                alert("已点击");
            });
        });*/

        /*
            window.onload 和 $(function) 区别
                window.onload 只能定义一次，如果定义多次，后边的会将前边的覆盖掉
                $(function)：可以定义多次
        */
        /*function fun1() {
            alert("abc");
        }
        function fun2() {
            alert("123");
        }
        window.onload = fun1();
        window.onload = fun2();*/

        $(function () {
            alert("123");
        });
        $(function () {
            alert("456");
        });


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

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



样式控制

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

        $(function () {
            $("#div1").css("background-color","red");
            $("#div2").css("backgroundColor","pink");
        });

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