$表示对jquery的查询；selector表示DOM元素的查询条件；action表示对查询结果做的操作。

jQuery原理系列-常用Dom操作详解

1. jQuery是什么

jQuery是一种JavaScript库，它使编写JavaScript变得更容易。jQuery使在HTML文档中处理文档元素，处理事件以及应用Ajax技术变得更加容易。

2. jQuery的基础（语法与选择器）

jQuery的基础语法：

$(selector).action()

$表示对jquery的查询；selector表示DOM元素的查询条件；action表示对查询结果做的操作。
jQuery的基础选择器：

选择器	描述
`*`	选择所有元素
`#id`	根据元素的ID属性选择元素
`.class`	根据元素的class属性选择元素
`element`	根据元素名字选择元素，如`<p>`、`<div>`等等
`selector1 , selector2`	将多个元素做为一个共同选择器，选择所有匹配其中一个选择器的元素
`ancestor descendant`	基于其后代元素选择元素
`parent > child`	选择直接作为parent元素子元素的child元素

3. 常用DOM操作

jQuery对于DOM元素的操作主要分为两种：获取元素、修改元素

3.1 获取元素

获取单个元素：

$('#id')
$('.class')
$('element')

获取多个元素：

$('.class1, .class2')
$('el1, el2, el3')

获取父元素或子元素：

$('el').parent()
$('el').children()

获取兄弟元素：

$('el').siblings()

3.2 修改元素

修改DOM元素的text或html：

$('el').text('new text')
$('el').html('<p>new html</p>')

向DOM元素中插入内容：

$('el').append('new content')
$('el').prepend('new content at beginning')

修改CSS样式：

$('el').css('property', 'value')

4. 示例说明

4.1 示例1：修改元素

HTML代码：

<div id='test'>This is a test</div>

JS代码：

$('#test').text('This is a new test');
$('#test').css('background-color', 'red');
$('#test').append('<p>New content</p>');

上述代码先找到id为'test'的div元素，并修改其文本内容为"This is a new test"，再将其背景颜色更改为红色。最后插入一个新的p元素到该元素后。

4.2 示例2：动态生成网页内容

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Page</title>
</head>
<body>
    <h1>Dynamic Content</h1>
    <div id='content'></div>
    <button id='btn'>Add Content</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="./js/script.js"></script>
</body>
</html>

JS代码（script.js文件）：

$(document).ready(function() {
  $('#btn').click(function() {
    var newContent = '<p>New dynamic content</p>';
    $('#content').append(newContent);
  });
})