jQuery对象和js对象

使用jQuery需要去官网下载一个文件 jquery-3.3.1.js(普通版)或者 jquery-3.3.1.min.js（压缩版,本地改的名称）

在body里面引包，在前端一个js文件就相当于一个模块

<script src="jquery-3.3.1.js"></script>

使用jquery的入口函数：当文档加载的时候调用此方法

$(document).ready(function(){});
简化后可以写成 $(function(){})

改变单个样式：

$(\'.box\').css(\'background-color\',\'green\')

改变多个样式：

$(\'.box\').css({
                 \'width\':500, //里面用逗号
                 \'background-color\':\'green\'
}）

jQuery和js对象的转化

在入口函数$(function(){})中，this 表示 js对象
$就是jQuery
jQuery对象，例如：$(\'.box\')
js对象    ，例如：$(\'.box\')[0]

下面以一个例子说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--链接css样式-->
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="box">alex</div>
<!--引包：一个js文件就是一个模块-->
<script src="jquery-3.3.1.js"></script>
<script>
    // $和jQuery是一样的
    console.log($);
    console.log(jQuery);
    //入口函数 当文档加载的时候调用此方法
    // $(document).ready(function(){});
    // $(function(){}) //等同于上面
    $(function(){
        console.log($(\'.box\')[0]);//jQuery转化成js
        $(\'.box\').click(function(){
            // $(\'.box\').css(\'background-color\',\'green\')
            $(\'.box\').css({
                // \'width\':500, //里面用逗号
                // \'background-color\':\'green\'   //也可以使用 backgroundColor
            // 变化的命令：<div class="box" style="width: 500px; background-color: green;">alex</div>

            });
            //this可以表示js对象
                console.log(this) ; //<div class="box" style="width: 500px; background-color: green;">alex</div>
            // js转换成jQuery对象 $(this)
            $(this).css(\'background-color\',\'green\') //实现了同样的效果

        })

    })

</script>

</body>
</html>

jquery对象：https://www.processon.com/view/link/5b7d6458e4b0534c9bb76ad9

jquery事件：https://www.processon.com/view/link/5ad1c48de4b0b74a6dd65426