JQuery--概念，快速入门，JQuery对象与JS对象区别与转换，JQuery事件绑定&入口函数&样式控制

本文链接：https://blog.csdn.net/qq_40649503/article/details/108936373

黑马程序员

JQuery–概念

在这里插入图片描述

JQuery–快速入门

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入门</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<script>
    var div1 = $("#div1");
    alert(div1.html());
</script>
</body>
</html>

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>
    <!--<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>-->
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>

<script>
    //js
    var elementsByTagName = document.getElementsByTagName("div");
    alert(elementsByTagName)
    //JQuery
    var div = $("div");
    alert(div.length);
    div.html("bbb");
    div[1].innerHTML="ccc";

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

在这里插入图片描述

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery事件绑定&入口函数&样式控制</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

<script>

    /*    window.onload = function () {
            $("#btn1").click(function () {
                alert($("#div1").html())
            });
        }*/

    //JQuery入口函数
    $(function () {
        $("#btn1").click(function () {
            alert($("#div1").html())
        });
    })

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

</script>

<div id="div1">div1</div>
<div id="div2">div2</div>
<input type="submit" value="点一下" id="btn1">

</body>
</html>