参考资料

如果使用jQuery？

下载jQuery库，也就是一个js文件 jquery.com/download/ code.jquery.com/jquery-3.6.…
引入jQuery库文件，引入这个js文件
在项目中使用jQuery提供的api

jQuery 如何获取元素

获取id = test 元素 , 以及 test 元素的子节点

let $p = $('p');// 元素选择器
let $test = $('#test'); // id选择器
let $test_child = $("#test.child")// 类选择器

jQuery 如何修改元素的属性

改变 test元素及其子元素 border属性

$test
    .css({border: "1px solid red", width: '100%', height: '600px'})
    .addClass('blue')
    .children()
    .css({border: "1px solid red", width: '80%', height: '100px'})
    .css({background: 'lightskyblue'})
    .end()
    .css({background: 'gold'})
    .end();

jQuery 如何创建元素

创建一个元素，放到test标签下，文本，jQuery创建的节点，改变其属性

let div = $('<div></div>').text('新创建的div')
    .css({border: "1px solid red", width: '90%', height: '100px'})
    .get()
$test.append(div);

jQuery 如何移动元素

把 class=style元素移动到 test元素最后一个子节点之前

const childrens = $test.children().get();
let lastDiv = childrens[childrens.length-1]
$(lastDiv).before($('.title').get())

jQuery 的链式操作是怎样的

具体方法见上面的代码，我的理解是这样的：
jQuery是一个方法，这个函数可以命名为jQuery，也可以命名为$
jQuery方法接收参数，返回对象
jQuery接收的参数可以是一个字符串，jQuery可以通过这个字符串查找到一个节点列表，也可以直接接收一个节点列表数组
jQuery返回一个对象，这个对象包含很多对节点列表进行dom操作的方法，这些方法进行完dom操作，把传入的对象再传回去，从而可以链式调用
而对节点列表进行dom操作的方法，正是jQuery库给我们封装好的，作为对象的原型

附录，html文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    <script src="lib/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="test">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>
<div class="title">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>
<script src="main.js"></script>
</body>
</html>

JQuery入门实践